From a65aea361e9534208188b01730f3cf0dc177d8d9 Mon Sep 17 00:00:00 2001 From: Khlil1313 <90422263+Khlil1313@users.noreply.github.com> Date: Thu, 9 Feb 2023 23:46:18 +0000 Subject: [PATCH 1/5] finish navbar --- css/main.css | 43 +++++++++++++++++++++++++++++++++++++++++++ index.html | 23 +++++++++++++++++++++++ 2 files changed, 66 insertions(+) diff --git a/css/main.css b/css/main.css index aa561706..87bacc17 100644 --- a/css/main.css +++ b/css/main.css @@ -1,3 +1,46 @@ /* Add your CSS here */ /* Dont' forget to link this file to your HTML in the */ +* { + background-color: #F4ECE6; + font-family: 'Quicksand', sans-serif; +} + +.square { + width: 17px; + height: 17px; + background-color: #0150FD; + border: 1px; + border-style: solid; + margin-left: 50px; + margin-right: 10px; +} +.navbar { + display: flex; + align-items: center; + font-size: 18px; +} +.navbar a { + text-decoration: none; + color:black; +} +.right_navbar { + display: flex; + margin-left: auto; + + +} + +.navbar_links { + margin-right: 50px; +} +#name { + font-family: 'Poppins', sans-serif; + font-size: 30px; + + +} +.left_navbar { + font-size: 22px; +} + diff --git a/index.html b/index.html index cd704c69..46ac8199 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,14 @@ + + + + + + + + Responsive grid project @@ -12,6 +20,21 @@ +
+ + + +
From 5960df05ff70b852d939d7095568b7be221d0c1a Mon Sep 17 00:00:00 2001 From: Khlil1313 <90422263+Khlil1313@users.noreply.github.com> Date: Sun, 12 Feb 2023 23:27:47 +0000 Subject: [PATCH 2/5] starting the main section --- css/main.css | 12 ++++++++++++ index.html | 8 ++++++++ 2 files changed, 20 insertions(+) diff --git a/css/main.css b/css/main.css index 87bacc17..321615c4 100644 --- a/css/main.css +++ b/css/main.css @@ -43,4 +43,16 @@ .left_navbar { font-size: 22px; } +.main_links { + display: flex; + +} +.main_links a { + text-decoration: none; +} +#resume { + margin-right: 4rem; + background-color: #0150FD; + +} diff --git a/index.html b/index.html index 46ac8199..be62078e 100644 --- a/index.html +++ b/index.html @@ -35,6 +35,14 @@ +
+
Hello
+

Here's who I am & what I do

+
+ + +
+
From e8d8159634ef665c720e247abd1597103a90bae3 Mon Sep 17 00:00:00 2001 From: Khlil1313 <90422263+Khlil1313@users.noreply.github.com> Date: Mon, 13 Feb 2023 23:49:03 +0000 Subject: [PATCH 3/5] finish index.html --- css/main.css | 25 ++++++++++++++++ images/facebook-icon.svg | 5 ++++ images/images.jpeg | Bin 0 -> 8128 bytes images/instagram-icon.svg | 18 ++++++++++++ images/twitter-icon.svg | 4 +++ index.html | 59 ++++++++++++++++++++++++++++++++------ 6 files changed, 103 insertions(+), 8 deletions(-) create mode 100644 images/facebook-icon.svg create mode 100644 images/images.jpeg create mode 100644 images/instagram-icon.svg create mode 100644 images/twitter-icon.svg diff --git a/css/main.css b/css/main.css index 321615c4..7c04eb8a 100644 --- a/css/main.css +++ b/css/main.css @@ -49,10 +49,35 @@ } .main_links a { text-decoration: none; + } #resume { margin-right: 4rem; background-color: #0150FD; + border-radius: 3rem; + padding: 0.4rem 1rem 0.4rem 1rem; + color: white; + font-weight: bolder; + +} +#projects { + border-style: solid; + border-color: rgb(190, 186, 186); + border-radius: 3rem; + padding: 0.4rem 1rem 0.4rem 1rem; } +.information_footer img { + width: 2rem; + height: 2rem; +} +#image { + width: 8rem; + height: 8rem; + border-radius: 50%; +} +.footer_images img { + width: 2rem; + height: 2rem; +} \ No newline at end of file diff --git a/images/facebook-icon.svg b/images/facebook-icon.svg new file mode 100644 index 00000000..b3e55147 --- /dev/null +++ b/images/facebook-icon.svg @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/images/images.jpeg b/images/images.jpeg new file mode 100644 index 0000000000000000000000000000000000000000..080dccfa6809e2a8e0ef2b9d58c571e78ea5d645 GIT binary patch literal 8128 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 + + + + + + + + + + + + + \ No newline at end of file diff --git a/images/twitter-icon.svg b/images/twitter-icon.svg new file mode 100644 index 00000000..a480cdbe --- /dev/null +++ b/images/twitter-icon.svg @@ -0,0 +1,4 @@ + + \ No newline at end of file diff --git a/index.html b/index.html index be62078e..1e8d4688 100644 --- a/index.html +++ b/index.html @@ -35,18 +35,61 @@ -
-
Hello
-

Here's who I am & what I do

-
- - -
+
+
+
Hello
+

Here's who I am & what I do

+
+ + +
+
+

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

+
+

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

+
+
+
+ cv image +

Maya Nelson

+
+

PROJECT MANAGER

+
+ + + +
+ + +
+ +
+
+

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

+
+ +

call

+

123-456-7890

+ +
+

Write

+

info@maya.com

+
+
+

follow

+
+ + + +
+
+
+
-

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

+ \ No newline at end of file From 96481da847790f93e74422c198e96117986e8bea Mon Sep 17 00:00:00 2001 From: Khlil1313 <90422263+Khlil1313@users.noreply.github.com> Date: Tue, 14 Feb 2023 23:54:35 +0000 Subject: [PATCH 4/5] postion the elements in the middle of the main section --- css/main.css | 65 +++++++++++++++++++++++++++++++++++++++++++++++++--- index.html | 22 ++++++++++-------- 2 files changed, 74 insertions(+), 13 deletions(-) diff --git a/css/main.css b/css/main.css index 7c04eb8a..bd982fd1 100644 --- a/css/main.css +++ b/css/main.css @@ -2,7 +2,7 @@ /* Dont' forget to link this file to your HTML in the */ * { - background-color: #F4ECE6; + background-color: #fff; font-family: 'Quicksand', sans-serif; } @@ -52,7 +52,7 @@ } #resume { - margin-right: 4rem; + margin-right: 2rem; background-color: #0150FD; border-radius: 3rem; padding: 0.4rem 1rem 0.4rem 1rem; @@ -76,8 +76,67 @@ width: 8rem; height: 8rem; border-radius: 50%; + margin-top: 2rem; +} +#information_name { + font-size: 1.8rem; + font-weight:bolder +} +#information_job { + font-size: 1.8rem; + margin-bottom: 8rem; } .footer_images img { width: 2rem; height: 2rem; -} \ No newline at end of file +} + + +footer { + display: flex; + margin-left: 4rem; + margin-top: 5rem; +} +.footer_right_section { + display: flex; + margin-left: auto; +} +.call, .write, .follow { + margin-right: 3rem; + display: flex; + flex-direction: column; + align-items: center; +} +.footer_right_section span { + font-weight: 900; +} +.write a { + text-decoration: none; + color: black; +} +main { + margin-top: 20rem; + margin-bottom: 20rem; + display: flex; + flex-direction: row-reverse; + justify-content: center; + align-items: center; + +} +.information_area { + width: 25rem; + height: 35rem; +} +.picture_area { + background-color: #f4ece6; + margin-right: 3rem; + width: 25rem; + height: 35rem; + border-style: solid; + border-color: grey; + display: flex; + flex-direction: column; + align-items: center; + +} + diff --git a/index.html b/index.html index 1e8d4688..dda65038 100644 --- a/index.html +++ b/index.html @@ -36,6 +36,7 @@
+
Hello

Here's who I am & what I do

@@ -49,10 +50,10 @@

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

-
+
cv image -

Maya Nelson

-
+

Maya
Nelson

+

PROJECT MANAGER

@@ -62,22 +63,23 @@
+