From 6cafbdc7b68e40164e6ed3fc618d0a249bc101b8 Mon Sep 17 00:00:00 2001 From: Andrius Isin Date: Tue, 14 Feb 2023 10:28:02 +0000 Subject: [PATCH 01/13] added html and css files and added basic HTML structure --- index.html | 83 ++++++++++++++++++++++++++++++++++++++++++++++---- portfolio.html | 0 potfolio.css | 0 style.css | 0 4 files changed, 77 insertions(+), 6 deletions(-) create mode 100644 portfolio.html create mode 100644 potfolio.css create mode 100644 style.css diff --git a/index.html b/index.html index cd704c69..233d8142 100644 --- a/index.html +++ b/index.html @@ -4,18 +4,89 @@ - + - Responsive grid project + Business CV - +
+
+
+

Maya Nelson

+

PROJECT MANAGER

+
+ +
+
+
+ Maya Nelson image +

Maya Nelson

+
+ + +
+ facebook icon + twitter icon + linkedin icon + instagram icon +
+
+
+
+
+
- -

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

+ \ No newline at end of file diff --git a/portfolio.html b/portfolio.html new file mode 100644 index 00000000..e69de29b diff --git a/potfolio.css b/potfolio.css new file mode 100644 index 00000000..e69de29b diff --git a/style.css b/style.css new file mode 100644 index 00000000..e69de29b From 6483ec1ea93aa2308a5dc77e29f1fb24d2cf0a5a Mon Sep 17 00:00:00 2001 From: Andrius Isin Date: Tue, 14 Feb 2023 10:32:03 +0000 Subject: [PATCH 02/13] added root colors --- style.css | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/style.css b/style.css index e69de29b..ff0bdef6 100644 --- a/style.css +++ b/style.css @@ -0,0 +1,11 @@ +:root { + --dark-beige: #E6DACD; + --light-beige: #F4ECE6; + --royal-blue: #0150FD; + --black: #000; + --white: #FFF; +} +* { + margin: 0; + padding: 0; +} From 7983a3a6d7449eb0e50dd3f21c17fce554a7b932 Mon Sep 17 00:00:00 2001 From: Andrius Isin Date: Tue, 14 Feb 2023 10:47:11 +0000 Subject: [PATCH 03/13] added content --- index.html | 2 +- style.css | 6 +++++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 233d8142..5504856f 100644 --- a/index.html +++ b/index.html @@ -12,7 +12,7 @@
-

Maya Nelson

+

Maya Nelson

PROJECT MANAGER

- Maya Nelson image

Maya Nelson

-
- - -
- facebook icon - twitter icon - linkedin icon - instagram icon -
-
+ + + + +
+ facebook icon + twitter icon + linkedin icon + instagram icon +
+

Hello

@@ -62,28 +61,29 @@

Here's who I am & what I do

-
+
Call

123-456-7890

-
- h5>Write +
+
Write

info@mysite.com

- Follow + facebook icon - twitter icon - linkedin icon - instagram icon diff --git a/style.css b/style.css index 259b58cb..3d5d91c1 100644 --- a/style.css +++ b/style.css @@ -11,51 +11,107 @@ body { padding: 0; display: grid; grid-template-columns: 1fr; - grid-template-rows: 20rem 50rem 40rem; + grid-template-rows: 1fr 2fr 1fr; + /* font-family: 'Quicksand', sans-serif; */ } + /* HEADER */ header{ - + display: flex; + flex-direction: row; + justify-content: space-between; } .title{ + } .blue_box{ } /* MAIN CONTENT */ main{ - + background-color: var(--dark-beige); + position: relative; + } .main_info_box{ - + width: 22rem; + height: 27rem; + position:absolute; + background-color: var(--light-beige); + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: 10rem 2rem 5rem 5rem; + grid-template-areas: + "img img " + "name name" + "button1 button2" + "media media" + ; + z-index: 11; +} +.main_info_box h2{ + grid-area: name; } .main-image{ - -} -.buttons{ - + width: 8rem; + border-radius: 50%; + grid-area: img; + } .button_resume{ +background-color: var(--royal-blue); +border: 0.15rem solid var(--royal-blue); +color: var(--white); +align-self: center; +justify-self: center; +grid-area: button1; +font-size: 0.9rem; +font-weight: 600; +width: 7rem; +height: 2rem; +border-radius: 2rem; } .button_projects{ +background-color: var(--light-beige); +border: 0.1rem solid var(--black); +color: var(--black); +align-self: center; +justify-self: center; +grid-area: button2; +font-size: 0.9rem; +font-weight: 600; +width: 7rem; +height: 2rem; +border-radius: 2rem; } .main_social_media{ - + grid-area: media;; + justify-self: flex-end; + text-align: center; + background-color: var(--white); + width: 100%; + margin-bottom: 1rem; } .main_box_icons{ } .main-text{ - + } /* FOOTER */ footer{ + display: grid; + + +} +.footer_info_call{ } -.footer_info{ + +.footer_info_write{ } .footer_media{ From 9811688533173455c28248b2909599d511a40c99 Mon Sep 17 00:00:00 2001 From: Andrius Isin Date: Tue, 14 Feb 2023 13:52:53 +0000 Subject: [PATCH 07/13] finished main style for shadow box --- index.html | 3 +++ style.css | 24 +++++++++++++++++++----- 2 files changed, 22 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index d727fdda..a4870469 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,9 @@ + + + Business CV diff --git a/style.css b/style.css index 3d5d91c1..94f4fa92 100644 --- a/style.css +++ b/style.css @@ -31,16 +31,17 @@ header{ main{ background-color: var(--dark-beige); position: relative; + } .main_info_box{ - width: 22rem; + width: 20rem; height: 27rem; position:absolute; background-color: var(--light-beige); display: grid; grid-template-columns: 1fr 1fr; - grid-template-rows: 10rem 2rem 5rem 5rem; + grid-template-rows: 10rem 7rem 3rem 7rem; grid-template-areas: "img img " "name name" @@ -50,13 +51,24 @@ main{ z-index: 11; } .main_info_box h2{ + font-size: 1.4rem; + text-align: center; + width: 4rem; grid-area: name; + justify-self: center; + border-bottom: 0.15rem solid var(--royal-blue); + font-family: 'Poppins', sans-serif; + line-height: 1.8rem; + + } .main-image{ + justify-self: center; + margin-top: 2rem; width: 8rem; border-radius: 50%; grid-area: img; - + } .button_resume{ background-color: var(--royal-blue); @@ -87,14 +99,16 @@ border-radius: 2rem; } .main_social_media{ - grid-area: media;; - justify-self: flex-end; + grid-area: media; + align-self:flex-end; text-align: center; background-color: var(--white); width: 100%; margin-bottom: 1rem; } .main_box_icons{ + width: 1.3rem; + padding: 0.5rem; } .main-text{ From 711196a40f7a91e123d74391ba84c456c1a755a7 Mon Sep 17 00:00:00 2001 From: Andrius Isin Date: Tue, 14 Feb 2023 14:27:25 +0000 Subject: [PATCH 08/13] styling header , created flex boxes and changed grid main settings --- index.html | 6 ++++-- style.css | 24 ++++++++++++++++++++++-- 2 files changed, 26 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index a4870469..f940a57e 100644 --- a/index.html +++ b/index.html @@ -16,8 +16,10 @@
-
-

Maya Nelson

+
+
+

Maya Nelson

+

PROJECT MANAGER

-

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

+
+

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

+
diff --git a/script.js b/script.js new file mode 100644 index 00000000..e69de29b diff --git a/style.css b/style.css index d56ded93..f8a2a690 100644 --- a/style.css +++ b/style.css @@ -5,7 +5,7 @@ --black: #000; --white: #FFF; } -/* GENERAL STYLES */ +/* -----GENERAL STYLES----------------- */ body { margin: 0; padding: 0; @@ -15,17 +15,21 @@ body { font-family: 'Quicksand', sans-serif; } -/* HEADER */ +/* ----------HEADER---------- */ header{ display: flex; flex-direction: row; justify-content: space-between; } +header p{ + font-size: 0.9rem; + margin-left: 1rem; +} .title{ margin-top: 1rem; display: flex; flex-direction: column; - align-items: center; + align-items:flex-start; justify-content: start; line-height: 0rem; } @@ -47,7 +51,7 @@ header{ margin-left: 1rem; } -/* MAIN CONTENT */ +/* --------MAIN CONTENT----------*/ main{ background-color: var(--dark-beige); position: relative; @@ -58,6 +62,8 @@ main{ width: 20rem; height: 27rem; position:absolute; + margin-top: -11rem; + margin-left: 2.5rem; background-color: var(--light-beige); display: grid; grid-template-columns: 1fr 1fr; @@ -68,7 +74,8 @@ main{ "button1 button2" "media media" ; - z-index: 11; + box-shadow: rgba(182, 172, 172, 0.28) -5px 9px 9px; + z-index: 1; } .main_info_box h2{ font-size: 1.4rem; @@ -132,25 +139,60 @@ border-radius: 2rem; } .main-text{ +margin-top: 16rem; +display: flex; +flex-direction: column; +margin-left: 2.5rem; +margin-right: 2.5rem; + +} +.main-text h1{ + font-size: 2.5rem; + margin-bottom: 0; + font-family: 'Poppins', sans-serif; +} +.main-text h3{ + font-family: 'Poppins', sans-serif; } +.main-text p{ -/* FOOTER */ +} + +/* ------------FOOTER---------------- */ footer{ display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: 5rem 5rem 10rem; + grid-template-areas: + "call write" + "follow . " + "end end"; + margin: 0 1.5rem; +} +footer p{ + font-size: 0.85rem; +} +footer h5{ + margin-bottom: 0; + font-family: 'Poppins', sans-serif; + font-size: 0.9rem; } .footer_info_call{ - +grid-area: call; } .footer_info_write{ - + grid-area: write; } .footer_media{ - + grid-area: follow; +} +.end{ + grid-area: end; } .footer_icons{ - + width: 1.5rem; } \ No newline at end of file From 1d721314ebf2984a73fa3382adff397bdcaf7cfc Mon Sep 17 00:00:00 2001 From: Andrius Isin Date: Tue, 14 Feb 2023 18:42:53 +0000 Subject: [PATCH 10/13] added scroll arrow --- index.html | 1 + script.js | 16 ++++++++++++++++ style.css | 32 ++++++++++++++++++++++++++------ 3 files changed, 43 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index e419c105..d2eaaa2f 100644 --- a/index.html +++ b/index.html @@ -98,6 +98,7 @@
Follow

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

+ \ No newline at end of file diff --git a/script.js b/script.js index e69de29b..9224ec4c 100644 --- a/script.js +++ b/script.js @@ -0,0 +1,16 @@ +// scroll button +let scroll_button = document.getElementById("arrow_button"); + +window.onscroll = function() {scrollFunction()}; + +function scrollFunction() { + if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { + scroll_button.style.display = "block"; + } else { + scroll_button.style.display = "none"; + } +} +function topFunction() { + document.body.scrollTop = 0; + document.documentElement.scrollTop = 0; +} \ No newline at end of file diff --git a/style.css b/style.css index f8a2a690..ea5f4a41 100644 --- a/style.css +++ b/style.css @@ -11,7 +11,7 @@ body { padding: 0; display: grid; grid-template-columns: 1fr; - grid-template-rows: 17rem 50rem 20rem; + grid-template-rows: 17rem 45rem 1rem; font-family: 'Quicksand', sans-serif; } @@ -156,14 +156,14 @@ margin-right: 2.5rem; } .main-text p{ - + font-size: 1.1rem; } /* ------------FOOTER---------------- */ footer{ display: grid; grid-template-columns: 1fr 1fr; - grid-template-rows: 5rem 5rem 10rem; + grid-template-rows: 5rem 6rem 6rem; grid-template-areas: "call write" "follow . " @@ -172,12 +172,12 @@ footer{ } footer p{ - font-size: 0.85rem; + font-size: 1rem; } footer h5{ margin-bottom: 0; font-family: 'Poppins', sans-serif; - font-size: 0.9rem; + font-size: 1rem; } .footer_info_call{ @@ -192,7 +192,27 @@ grid-area: call; } .end{ grid-area: end; + margin-bottom: 0; } .footer_icons{ width: 1.5rem; -} \ No newline at end of file +} +#arrow_button { + display: none; + position: fixed; + bottom: 6rem; + right: 2rem; + z-index: 5; + font-size: 1.5rem; + border: none; + outline: none; + background-color: var(--royal-blue); + color: white; + cursor: pointer; + padding: 0.6rem; + border-radius: 50%; + } + + #arrow_button:hover { + background-color: var(--black); + } \ No newline at end of file From 279955c8a36d8d90e338181ccc5d327b80d12092 Mon Sep 17 00:00:00 2001 From: Andrius Isin Date: Sun, 12 Mar 2023 19:55:22 +0000 Subject: [PATCH 11/13] added second page --- images/hamburger.png | Bin 0 -> 5308 bytes index.html | 27 +++- portfolio.html | 0 potfolio.css | 0 resume.css | 295 +++++++++++++++++++++++++++++++++++++++++++ resume.html | 155 +++++++++++++++++++++++ script.js | 8 +- style.css | 76 ++++++++++- 8 files changed, 556 insertions(+), 5 deletions(-) create mode 100644 images/hamburger.png delete mode 100644 portfolio.html delete mode 100644 potfolio.css create mode 100644 resume.css create mode 100644 resume.html diff --git a/images/hamburger.png b/images/hamburger.png new file mode 100644 index 0000000000000000000000000000000000000000..a0f8e6d6f854abfc08901afe59319c43e8913c21 GIT binary patch literal 5308 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 literal 0 HcmV?d00001 diff --git a/index.html b/index.html index d2eaaa2f..8ec5c3f6 100644 --- a/index.html +++ b/index.html @@ -21,11 +21,32 @@

Maya Nelson

+ /

PROJECT MANAGER

- +
+ +
+ hamburger image +
+ + +
diff --git a/portfolio.html b/portfolio.html deleted file mode 100644 index e69de29b..00000000 diff --git a/potfolio.css b/potfolio.css deleted file mode 100644 index e69de29b..00000000 diff --git a/resume.css b/resume.css new file mode 100644 index 00000000..39c6bf7a --- /dev/null +++ b/resume.css @@ -0,0 +1,295 @@ +:root { + --dark-beige: #E6DACD; + --light-beige: #F4ECE6; + --royal-blue: #0150FD; + --black: #000; + --white: #FFF; +} + +/* -----GENERAL STYLES----------------- */ +body { + margin: 0; + padding: 0; + display: grid; + grid-template-columns: 1fr; + grid-template-rows: 7rem 130rem 10rem; + font-family: 'Quicksand', sans-serif; +} + +/* ----------HEADER---------- */ +header { + display: flex; + flex-direction: row; + justify-content: space-between; +} +span{ + display: none; +} +header p { + font-size: 0.9rem; + margin-left: 1rem; +} + +.title { + margin-top: 1rem; + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: start; + line-height: 0rem; +} + +.title h2 { + font-size: 1.4rem; + font-family: 'Poppins', sans-serif; +} + +.name { + display: flex; + flex-direction: row; + +} + +.blue_box { + background-color: var(--royal-blue); + width: 1rem; + height: 1rem; + align-self: center; + margin-right: 1rem; + margin-left: 1rem; + +} + +/* --------- HAMBURGER MENU----------- */ +.hamburger { + width: 4rem; + height: auto; + display: block; + margin-right:3rem; + margin-top: 1rem; +} +/* ------------Navigation-------------- */ +nav { + display: none ; + grid-area: nav; + +} + +.navigation__list { + display: flex; + list-style: none; + justify-content: space-evenly; +} + +.navigation__item { + padding: 0.5rem 0; +} + +.navigation__link { + color: var(--black); + font-weight: 600; + font-size: 1rem; + text-transform: uppercase; + text-decoration: none; + padding: 0 0.6rem; +} + + +/* --------MAIN CONTENT----------*/ +main { + background-color: var(--dark-beige); + display: flex; + flex-direction: column; + gap: 1rem; + +} + +.title-main { + display: flex; + justify-content: center; + align-items: center; + margin: 1rem 1rem; + gap: 1rem; +} + +.title-main .square { + background-color: var(--royal-blue); + width: 25px; + height: 25px; +} + +.title-main h1 { + font-family: 'Poppins', sans-serif; +} + +.experience_title { + display: flex; + justify-content: space-around; +} + +.experience_title h2 { + font-family: 'Poppins', sans-serif; +} + +.experience_title a { + background-color: var(--royal-blue); + border: 2px solid var(--royal-blue); + color: var(--white); + padding: 1px 25px; + border-radius: 20px; + font-family: 'Poppins', sans-serif; + text-decoration: none; + font-size: 17px; + +} + +.resume_box { + margin: 2rem; + padding: 1.5rem; + background-color: var(--white); + width: 300px; + height: 400px; + display: flex; + flex-direction: column; + gap: 1rem; + box-shadow: rgba(0, 0, 0, 0.24) -4px 3px 8px; +} + +.resume_box h4 { + color: var(--royal-blue); + font-family: 'Poppins', sans-serif; +} + +.resume_box p:nth-child(4) { + margin-top: -30px; +} + +.education_title { + display: flex; + margin: 1rem; +} + +.education_title h2 { + font-family: 'Poppins', sans-serif; +} + +.skill_box { + margin: 2rem; + padding: 1.5rem; + background-color: var(--white); + width: 300px; + height: 600px; + display: flex; + flex-direction: column; + box-shadow: rgba(0, 0, 0, 0.24) -4px 3px 8px; +} + +.skill_box h2 { + font-family: 'Poppins', sans-serif; +} + +.skills { + display: flex; + flex-direction: column; +} + +.skills_and_blue { + display: flex; + justify-content: flex-start; + align-items: center; + gap: 2rem; +} +/* ------------FOOTER---------------- */ +footer { + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: 5rem 6rem 6rem; + grid-template-areas: + "call write" + "follow . " + "end end"; + margin: 0 1.5rem; + +} + +footer p { + font-size: 1rem; +} + +footer h5 { + margin-bottom: 0; + font-family: 'Poppins', sans-serif; + font-size: 1rem; + +} + +.footer_info_call { + grid-area: call; +} + +.footer_info_write { + grid-area: write; +} + +.footer_media { + grid-area: follow; +} + +.end { + grid-area: end; + margin-bottom: 0; +} + +.footer_icons { + width: 1.5rem; +} + +#arrow_button { + display: none; + position: fixed; + bottom: 6rem; + right: 2rem; + z-index: 5; + font-size: 1.5rem; + border: none; + outline: none; + background-color: var(--royal-blue); + color: white; + cursor: pointer; + padding: 0.6rem; + border-radius: 50%; +} + +#arrow_button:hover { + background-color: var(--black); +} + + + +@media (min-width: 900px) { + footer { + grid-template-columns: repeat(8,1fr); + grid-template-rows: 6rem; + grid-template-areas: + " end end . . . call write follow"; + } + .hamburger{ + display:none; + } + nav{ + display: block; + } + .title { + + display: flex; + flex-direction: row; + gap:1rem; + } + .title p{ + margin-top: 1.2rem; + } + span { + margin-top:1.2rem; + display: block; + } +} \ No newline at end of file diff --git a/resume.html b/resume.html new file mode 100644 index 00000000..6868b46f --- /dev/null +++ b/resume.html @@ -0,0 +1,155 @@ + + + + + + + + + + + + + + + + Business CV + + + +
+
+
+
+

Maya Nelson

+
+ / +

PROJECT MANAGER

+
+
+ +
+ hamburger image +
+ + +
+
+
+
+
+
+

Resume

+
+ +
+

Experience

+ DOWNLOAD CV +
+ +
+

2035 - Present

+

JOB POSITION

+

Company Name

+

Company Location

+

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.

+
+ +
+

Education

+
+ +
+

2035 - 2035

+

UNIVERSITY NAME

+

Degree Level

+

University Location

+

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.

+
+ +
+

Professional skillset

+
+
+
+

Entrepreneurial Mindset

+
+ +
+
+

Go-to-Market Planning

+
+ +
+
+

Teamwork & Collaboration

+
+ +
+
+

Digital Analytics

+
+
+ +

Languages

+
+
+
+

English (native)

+
+ +
+
+

Spanish (proficient)

+
+ +
+
+

French (proficient)

+
+
+
+
+ +
+
+
Call
+

123-456-7890

+
+
+
Write
+

info@mysite.com

+
+
+
Follow
+ facebook icon + twitter icon + linkedin icon + instagram icon +
+
+

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

+
+
+ + + + \ No newline at end of file diff --git a/script.js b/script.js index 9224ec4c..18595b66 100644 --- a/script.js +++ b/script.js @@ -13,4 +13,10 @@ function scrollFunction() { function topFunction() { document.body.scrollTop = 0; document.documentElement.scrollTop = 0; -} \ No newline at end of file +} + +$(".menu-toggle").on('click', function() { + $(this).toggleClass("on"); + $('.menu-section').toggleClass("on"); + $("nav ul").toggleClass('hidden'); + }); \ No newline at end of file diff --git a/style.css b/style.css index ea5f4a41..58932e07 100644 --- a/style.css +++ b/style.css @@ -51,6 +51,41 @@ header p{ margin-left: 1rem; } +/* --------- HAMBURGER MENU----------- */ +.hamburger { + width: 4rem; + height: auto; + display: block; + margin-right: 3rem; + margin-top: 1rem; +} + +/* ------------Navigation-------------- */ +nav { + display: none; + grid-area: nav; + +} + +.navigation__list { + display: flex; + list-style: none; + justify-content: space-evenly; +} + +.navigation__item { + padding: 0.5rem 0; +} + +.navigation__link { + color: var(--black); + font-weight: 600; + font-size: 1rem; + text-transform: uppercase; + text-decoration: none; + padding: 0 0.6rem; +} + /* --------MAIN CONTENT----------*/ main{ background-color: var(--dark-beige); @@ -215,4 +250,43 @@ grid-area: call; #arrow_button:hover { background-color: var(--black); - } \ No newline at end of file + } + + +@media (min-width: 900px) { + footer { + grid-template-columns: repeat(8, 1fr); + grid-template-rows: 6rem; + grid-template-areas: + " end end . . . call write follow"; + } + + .hamburger { + display: none; + } + + nav { + display: block; + } + + .title { + + display: flex; + flex-direction: row; + gap: 1rem; + } + + .title p { + margin-top: 1.2rem; + } + + span { + margin-top: 1.2rem; + display: block; + } + body { + grid-template-columns: repeat(5,1fr); + grid-template-rows: 17rem 45rem 1rem; + font-family: 'Quicksand', sans-serif; + } +} \ No newline at end of file From 943081f84cb1165923b779300c100cb4c630c695 Mon Sep 17 00:00:00 2001 From: Andrius Isin Date: Mon, 13 Mar 2023 20:08:59 +0000 Subject: [PATCH 12/13] made media query for main page --- index.html | 8 +++- style.css | 133 +++++++++++++++++++++++++++++++++++++++++++++++++---- 2 files changed, 130 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index 8ec5c3f6..33334ed5 100644 --- a/index.html +++ b/index.html @@ -36,7 +36,7 @@

Maya Nelson

ABOUT ME
  • - RESUME + RESUME
  • PROJECTS @@ -55,7 +55,7 @@

    Maya Nelson

    class="main-image" />

    Maya Nelson

    - +

    PROJECT MANAGER

    @@ -82,6 +82,10 @@

    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.

    diff --git a/style.css b/style.css index 58932e07..1b89c72b 100644 --- a/style.css +++ b/style.css @@ -89,7 +89,7 @@ nav { /* --------MAIN CONTENT----------*/ main{ background-color: var(--dark-beige); - position: relative; + /* position: relative; */ } @@ -97,8 +97,8 @@ main{ width: 20rem; height: 27rem; position:absolute; - margin-top: -11rem; - margin-left: 2.5rem; + top: 6rem; + left: 10%; background-color: var(--light-beige); display: grid; grid-template-columns: 1fr 1fr; @@ -121,8 +121,9 @@ main{ border-bottom: 0.15rem solid var(--royal-blue); font-family: 'Poppins', sans-serif; line-height: 1.8rem; - - +} +.main_info_box h3 { + display:none; } .main-image{ justify-self: center; @@ -144,6 +145,7 @@ font-weight: 600; width: 7rem; height: 2rem; border-radius: 2rem; +display: block; } .button_projects{ @@ -158,6 +160,38 @@ font-weight: 600; width: 7rem; height: 2rem; border-radius: 2rem; +display: block; + +} +.button_resume1 { + background-color: var(--royal-blue); + border: 0.15rem solid var(--royal-blue); + color: var(--white); + align-self: center; + justify-self: center; + grid-area: button1; + font-size: 0.9rem; + font-weight: 600; + width: 7rem; + height: 2rem; + border-radius: 2rem; + display: none; + +} + +.button_projects1 { + background-color: var(--light-beige); + border: 0.1rem solid var(--black); + color: var(--black); + align-self: center; + justify-self: center; + grid-area: button2; + font-size: 0.9rem; + font-weight: 600; + width: 7rem; + height: 2rem; + border-radius: 2rem; + display: none; } .main_social_media{ @@ -259,6 +293,7 @@ grid-area: call; grid-template-rows: 6rem; grid-template-areas: " end end . . . call write follow"; + grid-area: footer; } .hamburger { @@ -284,9 +319,89 @@ grid-area: call; margin-top: 1.2rem; display: block; } - body { - grid-template-columns: repeat(5,1fr); - grid-template-rows: 17rem 45rem 1rem; - font-family: 'Quicksand', sans-serif; + body { + grid-template-columns: repeat(5,1fr); + grid-template-rows: 8rem 45rem 2rem; + grid-template-areas: + "header header header header header" + "main main . . ." + "footer footer footer footer footer" + ; + font-family: 'Quicksand', sans-serif; + + } + main{ + grid-area: main; + } + header{ + margin-top: 2rem; + grid-area: header; + } + .main_info_box { + width: 23rem; + height: 32rem; + top: 18rem; + left: 16%; + grid-template-rows: 15rem 7rem 3rem 7rem; + grid-template-areas: + "img img " + "name name" + "h3 h3" + "media media" + ; } + .main-image { + justify-self: center; + margin-top: 2rem; + width: 13rem; + border-radius: 50%; + grid-area: img; + + } + .button_resume { + display: none; + + } + .title h2 { + font-size: 1.4rem; + font-family: 'Poppins', sans-serif; + } + .button_projects { + display: none; +} +.main_info_box h3 { + display: block; + grid-area: h3; + justify-self: center; + font-size: 1.3rem; +} +.main_info_box h2{ + font-size: 1.7rem; +} +.main-text { + position: absolute; + top:-3rem; + left:50%; + width: 35%; +} +.main-text h1 { + font-size: 6rem; +} + +.main-text h3 { + font-family: 'Poppins', sans-serif; + font-size: 1.5rem; +} +.buttons_main_text { + display: flex; + flex-direction: row; + justify-content: space-around; + +} + .button_resume1 { + display: block; + } + .button_projects1 { + display: block; + } } \ No newline at end of file From 6b63a6eca5a4dd57d061a1f274779432c4a62359 Mon Sep 17 00:00:00 2001 From: Andrius Isin Date: Mon, 13 Mar 2023 20:45:38 +0000 Subject: [PATCH 13/13] updated resume page --- resume.css | 28 ++++++++++++++++++++++++++++ resume.html | 2 +- 2 files changed, 29 insertions(+), 1 deletion(-) diff --git a/resume.css b/resume.css index 39c6bf7a..82939d23 100644 --- a/resume.css +++ b/resume.css @@ -102,6 +102,7 @@ main { flex-direction: column; gap: 1rem; + } .title-main { @@ -125,6 +126,8 @@ main { .experience_title { display: flex; justify-content: space-around; + height: 3rem; + align-items: center; } .experience_title h2 { @@ -267,6 +270,9 @@ footer h5 { @media (min-width: 900px) { + header { + align-items: center; + } footer { grid-template-columns: repeat(8,1fr); grid-template-rows: 6rem; @@ -292,4 +298,26 @@ footer h5 { margin-top:1.2rem; display: block; } + .resume_box { + width: 600px; + } + .skill_box { + width: 600px; + } + main{ + justify-content: center; + align-items: center; + } + .experience_title { + gap: 20rem + } + .title-main{ + margin-top: 5rem; + } + main p{ + font-size: 1.2rem; + } + main h4{ + font-size: 1.5rem; + } } \ No newline at end of file diff --git a/resume.html b/resume.html index 6868b46f..baba0709 100644 --- a/resume.html +++ b/resume.html @@ -35,7 +35,7 @@

    Maya Nelson