From 972d08a7821564f546b41cd8c3d1ca7a05b66c61 Mon Sep 17 00:00:00 2001 From: AfshaHossain Date: Tue, 14 Feb 2023 14:05:11 +0000 Subject: [PATCH 1/4] Made some basic changes --- css/main.css | 7 +++++++ index.html | 45 +++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 52 insertions(+) diff --git a/css/main.css b/css/main.css index aa561706..9f396dd0 100644 --- a/css/main.css +++ b/css/main.css @@ -1,3 +1,10 @@ /* Add your CSS here */ /* Dont' forget to link this file to your HTML in the */ + + +.name { + font-size: 3rem; + font-family: ; +} + diff --git a/index.html b/index.html index cd704c69..6482ea57 100644 --- a/index.html +++ b/index.html @@ -1,6 +1,7 @@ + @@ -10,6 +11,50 @@ +
+ +
+

Maya Nelson

+

PROJECT MANAGER

+ +
+ + +

Maya Nelson

+
+ + +
+ + + +
+

Hello

+

Here's who I am & what I do

+

I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double click me to add your own content and make changes to the font. + + + + I’m a great place for you to tell a story and let your users know a little more about you.

+
+ + + + From d91ade2010beeff4953d52f3253be04ada575826 Mon Sep 17 00:00:00 2001 From: AfshaHossain Date: Wed, 15 Feb 2023 05:34:58 +0000 Subject: [PATCH 2/4] Made the basic layout of the home page --- css/main.css | 137 ++++++++++++++++++++++++++++++++++++++++++- icons/facebook.webp | Bin 0 -> 398 bytes icons/instagram.webp | Bin 0 -> 470 bytes icons/linkedin.webp | Bin 0 -> 450 bytes icons/twitter.webp | Bin 0 -> 460 bytes images/maya.webp | Bin 0 -> 2290 bytes index.html | 98 +++++++++++++++++++------------ 7 files changed, 196 insertions(+), 39 deletions(-) create mode 100644 icons/facebook.webp create mode 100644 icons/instagram.webp create mode 100644 icons/linkedin.webp create mode 100644 icons/twitter.webp create mode 100644 images/maya.webp diff --git a/css/main.css b/css/main.css index 9f396dd0..a3620dff 100644 --- a/css/main.css +++ b/css/main.css @@ -2,9 +2,140 @@ /* Dont' forget to link this file to your HTML in the */ +html { + font-size: 10px; +} + +:root { + --color_15: rgb(0,0,0); + --color_11_square: rgb(255,255,255); + --color_18: rgb(0,80,255); + --font_4: poppins-semibold,poppins,sans-serif; + +} + +body { + font-family: Arial,Helvetica,sans-serif; + width: 320px; + height: 1094.4px; + border: green solid 0.5px; + +} + +/* header section */ + +header { + width: 32rem; + height: 9.1rem; +} + +.header-name::before { + content: ""; + display: inline-block; + margin: 2.4rem 0rem 1.2rem 2rem; + place-self: start; + width: 1.6rem; + height: 1.6rem; + background-color: var(--color_18); + padding: -1px; + margin: -1px; + margin-right: 0.6rem; + /* firstChildMarginTop: -1px; + lastChildMarginBottom: -1px; */ +} + +.header-name { + display: inline-block; + left: 4.8rem; + margin: 2.2rem 0px 1rem; +} + +.header-name, .card-names { + font-size: 2rem; + font-weight: bold; + font-family: var(--font_4); + /* background-color: var(--color_); */ +} + +.header-text { + display: block; + height: 1.68rem; + text-transform: uppercase; +} + +/* card section */ + +card { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 28rem; + height: 37.54rem; + border: palevioletred solid 0.25rem; + +} + +.card-photo { + width: 12rem; + height: 12rem; + border-radius: 10rem; + margin-top: 3rem;; +} + +/* How to adjust the sizes bellow a/c to grid */ +.card-names { + display: block; + margin-top: 1.5rem; + margin-bottom: 3rem; + height: 5.04rem; + border: darkcyan solid 0.2rem; +} -.name { - font-size: 3rem; - font-family: ; +.card-name-first { + padding: 0rem; + margin: 0rem; } +.card-name-last { + padding: 0rem; + margin: 0rem; +} + +.card-btn { + display: flex; + gap: 1.25rem; +} + +.card-btn-1 { + text-transform: uppercase; + width: 12rem; + height: 3.3rem; + /* check exact boarder radius */ + border-radius: 3rem; +} + +.card-btn-2 { + text-transform: uppercase; + width: 11.4rem; + height: 3.3rem; + border-radius: 3rem; +} + + +.card-bottom-nav { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + width: 28rem; + height: 4rem; + margin: 5rem 0 1rem 0; + border: powderblue solid 0.25rem; +} + +.card-bottom-nav-icon { + margin: 0rem 0.5rem; +} + + diff --git a/icons/facebook.webp b/icons/facebook.webp new file mode 100644 index 0000000000000000000000000000000000000000..ae1278b75ed996c4b73e511b8d6effb0b4b4831a GIT binary patch literal 398 zcmWIYbaQKCWMBw)bqWXzu!!JdU|^5{Vqq`>iuf!8^7Mrdun0I@*p_={{o8+da$z!X7ipd-{$@hp@}I(QPt7h*vH4lzr6VW!S9uZhgvL$9 zCA~ex=~51?3j$H2 zgs0msple+#GSe6sJUz7-IDkAh1|ddf2A~(gSc;JqOosva(ol9BkgWk#!vtgtGa=Mx zwzGiM0}TWNeMv@!7tFvAfzoUY3=`NHSb%Z{MurBA6CrFypa~2MpyGxG28;_JCjS4= Sz`(QsVxkC84>J-QWIO;>&s@v^ literal 0 HcmV?d00001 diff --git a/icons/instagram.webp b/icons/instagram.webp new file mode 100644 index 0000000000000000000000000000000000000000..4ce532bb4ed0d3b7c3e4556156676c9de1ae62b8 GIT binary patch literal 470 zcmWIYbaOk$$iNWp>J$(bU=hK^z`!5@#KK?%6!Ccnl-6TKr)iE+CObMFV z6XaDeK|o<%Bg3LwF_$t_ij4&ox@XSYZGG$Z&70Ph1=4Ir3!ZDK26HrR6g2+2jghhO zM5x7!%k7%tjv80qc{!{zl~}`CZ#T1DQloXJa`T;OuS@RiXHZuE%y=@6QP-T&XNPIe zTh#zblQJeAD-Na-HjXl>6IL93VqDdlQ*WF)D09~FzGIZ-f|Bs&w(U$IF)Wq$Lk>>S zTF1_r|Nh0fuRJP$Cq}V&{GNVwKC^3tr`s-|uU#uL(-;^$J+&A(fIKz^Ax35fU{Hav z6eBB`4g>O~q3k#yTLY?w3CI>^La5JdX924R8VClSl8g*5n1QB4X*LFi3G56kKsf^= pLj%T%5H=&w1cn7raYF+G#sv@)|Nm!TU|Ik%Q3R-m8Ho)t9snb(e0~4` literal 0 HcmV?d00001 diff --git a/icons/linkedin.webp b/icons/linkedin.webp new file mode 100644 index 0000000000000000000000000000000000000000..4712e25d4c71d4517a69ec06bf26cb9cee73ad1a GIT binary patch literal 450 zcmWIYbaUIq$iNWp>J$(bU=hK^z`!5@#KK?%6!EzUuelftGwWN1G);=m$y{>6-U=h~Qj)?JkRJ6G4pV3*r+YhR#Z z>01*TFN#{-e3=L`MNU$}cEReoyTrx+tl_hfn$&P`AA5AkhMX(cO#J_! Sfq`iO#6%IG9%dvq$anyJx_lD= literal 0 HcmV?d00001 diff --git a/icons/twitter.webp b/icons/twitter.webp new file mode 100644 index 0000000000000000000000000000000000000000..8adbffa70a9a04417c7ceb941a4e17a8816a4284 GIT binary patch literal 460 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 - + + + + @@ -11,45 +14,68 @@ -
- -
-

Maya Nelson

-

PROJECT MANAGER

- -
- - -

Maya Nelson

-
- - -
- - -
-

Hello

-

Here's who I am & what I do

-

I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double click me to add your own content and make changes to the font. - - - - I’m a great place for you to tell a story and let your users know a little more about you.

+
+

Maya Nelson

+

Project Mangaer

+ +
+ + photo of Maya smiling +
+

Maya

+

Nelson

+
+ +
+ + +
+ + + +
+

Hello

+

Here's who I am & what I do

+

I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double click me to add your own content and make changes to the font.

+ +

I’m a great place for you to tell a story and let your users know a little more about you.

+
+
-
+
+
+

Call

+

123-456-7890

+
+
+

Write

+

info@mysite.com

+
+
+
+

Follow

+
+ facebook logo + twitter logo + linkedin logo + instagram logo +
+
- © 2035 by Maya Nelson.

+

Powered and secured by Wix

From 3fbb8df8424a78d3cb8654be3cbacb9d0a40dd3d Mon Sep 17 00:00:00 2001 From: AfshaHossain Date: Mon, 20 Mar 2023 18:44:35 +0000 Subject: [PATCH 3/4] added blue colour to CSS --- css/main.css | 1 + 1 file changed, 1 insertion(+) diff --git a/css/main.css b/css/main.css index a3620dff..3baca758 100644 --- a/css/main.css +++ b/css/main.css @@ -111,6 +111,7 @@ card { text-transform: uppercase; width: 12rem; height: 3.3rem; + background-color: #0150FD; /* check exact boarder radius */ border-radius: 3rem; } From 6996720fceb0d70f8223a97503250dd08c5c311c Mon Sep 17 00:00:00 2001 From: Afsha10 Date: Fri, 22 Sep 2023 23:39:25 +0100 Subject: [PATCH 4/4] Worked on the header and the nav bar --- index.html | 206 +++++++++++++++++++++++++++++++++-------------------- main.js | 8 +++ 2 files changed, 138 insertions(+), 76 deletions(-) create mode 100644 main.js diff --git a/index.html b/index.html index a43aff6a..4b747145 100644 --- a/index.html +++ b/index.html @@ -1,92 +1,146 @@ - - - - - - - - + + + + + + + + + - Responsive grid project - + Resume Clone + - + +
+

Maya Nelson

+ project manager + + +
-
-

Maya Nelson

-

Project Mangaer

- -
- - photo of Maya smiling -
-

Maya

-

Nelson

-
- -
- - -
- - - -
-

Hello

-

Here's who I am & what I do

-

I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double click me to add your own content and make changes to the font.

- -

I’m a great place for you to tell a story and let your users know a little more about you.

-
+ + photo of Maya smiling +
+

Maya

+

Nelson

+
+ +
+ + +
+ + + +
+

Hello

+

Here's who I am & what I do

+

+ I'm a paragraph. Click here to add your own text and edit me. It’s + easy. Just click “Edit Text” or double click me to add your own + content and make changes to the font. +

+ +

+ I’m a great place for you to tell a story and let your users know a + little more about you. +

+
- +
-
-
-

Call

-

123-456-7890

-
-
-

Write

-

info@mysite.com

-
+
+
+

Call

+

123-456-7890

-
-

Follow

-
- facebook logo - twitter logo - linkedin logo - instagram logo -
+
+

Write

+

info@mysite.com

-
-

© 2035 by Maya Nelson.

-

Powered and secured by Wix

+
+
+

Follow

+
+ facebook logo + twitter logo + linkedin logo + instagram logo
+
+
+

© 2035 by Maya Nelson.

+

Powered and secured by Wix

+
- - - - -

This website design was created by Wix.com, and is used here for strictly educational purposes.

- - - \ No newline at end of file +

+ This website design was created by Wix.com, and is used here for strictly + educational purposes. +

+ + diff --git a/main.js b/main.js new file mode 100644 index 00000000..c4b5ad9d --- /dev/null +++ b/main.js @@ -0,0 +1,8 @@ +const navigation = document.getElementById("navigation") + +const navButton = document.getElementById("nav-btn--open"); + +navButton.addEventListener("click", () => { + navigation.classList.tg + console.log("button clicked"); +});