diff --git a/.gitignore b/.gitignore index 9bea4330..f9791d49 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,7 @@ .DS_Store +*.json +*.json +*.json +*.json +*.json diff --git a/about.html b/about.html new file mode 100644 index 00000000..6619d58f --- /dev/null +++ b/about.html @@ -0,0 +1,125 @@ + + + + + + + + + + + + + + + + + + + + Responsive grid project + + + +
+ +

Maya Nelson

+

Project Manager

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

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 imge +

Maya Nelson

+
+
+ + +
+
+
+

Project manager

+
+ +
+
+ + + + + + + \ No newline at end of file diff --git a/contact.html b/contact.html new file mode 100644 index 00000000..386f3854 --- /dev/null +++ b/contact.html @@ -0,0 +1,122 @@ + + + + + + + + + + + + + + + + + Document + + + +
+

Maya Nelson

+

Project Manager

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

Let's talk

+
+ +
+ +
+
+ + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ +
+
+
+ +
+ +
+ + + + + + \ No newline at end of file diff --git a/css/about.css b/css/about.css new file mode 100644 index 00000000..99e47f74 --- /dev/null +++ b/css/about.css @@ -0,0 +1,368 @@ +/* Add your CSS here */ + +/* font-family: 'Poppins', sans-serif; +font-family: 'Quicksand', sans-serif; */ + +/* Don't' forget to link this file to your HTML in the */ + + +/* mobile frist */ + +:root { + --beige-dark: #e6dacd; + --beige-light: #f4ece6; + + --blue-royal: #0150fd; + --black: #000; + --white: #fff; + + --heading-font: "Poppins", sans-serif; + --body-font: "Quicksand", sans-serif; +} + +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + line-height: 1.4; +} + +.grid { + display: grid; + grid-template-columns: repeat(8, 1fr); + gap: 10px; +} + +/* start header */ +.head { + background-color: var(--white); + width: 100%; + padding: 20px 30px; +} + +.head h1 { + grid-column: 1/7; + grid-row: 1; + font-family: var(--heading-font); + font-size: 1.7rem; + +} + +.head h3 { + grid-column: 1/7; + grid-row: 2; + font-family: var(--body-font); + font-size: 1.5rem; + padding: 0; + text-transform: uppercase; +} + +/* header blue box1 */ +.head>h1::before { + content: ""; + display: inline-block; + width: 15px; + height: 15px; + background-color: var(--blue-royal); +} + +/* end header */ + +/* start main */ +.grid{ + display: grid; + grid-template-columns: repeat(8, 1fr); + gap: 2px; +} + +/* box1 style */ +.box1 { + grid-column: 1/9; + width: 375px; + height: 150px; + background-color: var(--white); + align-items: center; + justify-content: center; +} + +/* box2 style */ + +.box2 { + grid-column: 1/9; + width: 375px; + height: 800px; + background-color: var(--beige-dark); + color: aliceblue; +} + +.box2 { + color: var(--black); + padding-top: 350px; + padding-left: 30px; + padding-right: 30px; +} + +.box2 h2 { + font-family: var(--heading-font); + font-size: 2.7rem; + font-weight: bold; +} + +.box2 h3 { + padding-top: 20px; + padding-bottom: 20px; + font-family: var(--heading-font); + font-size: 1.2rem; +} + +.box2 p { + font-family: var(--body-font); + font-size: 1.2rem; +} + +.box2 .p2 { + padding-top: 25px; +} + +/* box3 style */ + +.box3 { + /* display: grid; + grid-column: 2/8; */ + width: 320px; + height: 450px; + background-color: var(--beige-light); + color: aliceblue; + /* z-index: 3; */ + margin-top: -940px; + padding: 70px; + margin-left: 30px; +} + +.box3>section>img { + border-radius: 50%; + height: 150px; + width: 150px; + display: block; + margin-block-start: -50px; + margin-left: 20px; +} + +.box3>section>h2 { + color: var(--black); + font-family: var(--heading-font); + text-align: center; + padding-bottom: 20px; + padding-top: 10px; + font-size: 1.9rem; +} + +/* button style */ + +.but-out{ + display: none; +} + +.but { + display: flex; + justify-content:center; + margin-top: 30px; +} + +.btn { + padding:0.3rem 1rem; + border-radius: 50px; + font-size: 20px; + text-transform: uppercase; + margin-top: 0.8rem; +} + +.but .btn1 { + background-color: var(--blue-royal); + color: var(--white); + font-family: var(--heading-font); + text-transform: uppercase; + border: none; +} + +.but .btn2 { + border-color: var(--black); + background-color: var(--beige-light); + color: var(--black); + font-family: var(--heading-font); + border: 1px solid var(--black); + margin-left: 20px; +} + +.pro{ + display: none; +} + + +/* social icon style */ + +.social-icon { + position: absolute; + right: 27px; + width: 320px; + height: 50px; + background-color:var(--white); + margin-top: 50px; +} +.icon { + display: flex; + justify-content: center; + gap: 20px; + text-decoration: none; + list-style: none; + color: #000; + margin: 8px 0px 0px; + padding-right: 10px; + padding-top: 5px; +} +.icon a{ + color: var(--black); + font-size: 20px; +} + +/* end main */ + + + +/* footer style*/ +.foot{ + bottom: 0; + width: 100%; + height: 250px; + background-color: var(--white); + font-family: var(--body-font); + font-size: 1.2rem; + color: var(--black); + padding: 20px 30px; +} +.se1{ + display: flex; + justify-content:space-between; +} +.foot1 h4{ + font-weight: bold; + font-family: var(--heading-font); +} +.foot2 h4 { + font-weight: bold; + font-family: var(--heading-font); +} +.w1{ + font-weight: bold; + font-family: var(--heading-font); +} +.foot3{ + padding: 10px 20px; + color: var(--black); + font-weight: bold; + font-family: var(--body-font) +} +.foot3 a{ + display: inline-block; + justify-content: space-between; + text-decoration: none; + list-style: none; + color: var(--black); + margin: 8px 0px 0px; + font-size: 30px; + padding-right: 18px; +} +.foot4{ + padding-top: 5px; + font-family: var(--body-font); +} + + + +/* media query */ + +@media screen and (min-width: 620px) { + .menu-wrap{ + display: none; + } + +} + +@media screen and (min-width: 620px) { + .content{ + display: flex; + } + .box2 { + width: 490px; + height: 500px; + padding: 40px; + background-color: var(--white); + } + .box2 p{ + font-size: 0.8rem; + padding-right: 80px; + } + .box1{ + background-color:var(--beige-dark); + width: 390px; + height: 500px; + } + .box3 { + margin-top: 20px; + margin-left: -790px; + } + + /* button style */ + + .but{ + display:none; + } + + .but-out{ + display: flex; + padding-bottom: 30px; + } + .but-out .btn2 { + border-color: var(--black); + background-color: var(--beige-light); + color: var(--black); + font-family: var(--heading-font); + border: 1px solid var(--black); + margin-left: 20px; + } + .but-out .btn1 { + background-color: var(--blue-royal); + color: var(--white); + font-family: var(--heading-font); + text-transform: uppercase; + border: none; + } + .line{ + display: inline; + width: 70px; + color: var(--blue-royal); + + } + .pro{ + display: flex; + flex-direction: column; + align-items: center; + justify-content: end; + color: var(--black); + font-family: var(--body-font); + font-size: 1.4rem; + bottom: 0x; + } + + .social-icon{ + left: 95px; + bottom: 100px; + } + + + +} + diff --git a/css/contact.css b/css/contact.css new file mode 100644 index 00000000..c269dc94 --- /dev/null +++ b/css/contact.css @@ -0,0 +1,93 @@ +:root { + --beige-dark: #e6dacd; + --beige-light: #f4ece6; + + --blue-royal: #0150fd; + --black: #000; + --white: #fff; + + --heading-font: "Poppins", sans-serif; + --body-font: "Quicksand", sans-serif; +} + +body { + background-color: var(--beige-dark); +} + +/* main style */ + +main h1 { + display: flex; + align-items: center; + justify-content: center; + padding-top: 50px; + position: relative; + padding-bottom: 30px; +} + +main>h1::before { + content: ""; + display: inline-block; + width: 19px; + height: 19px; + background-color: var(--blue-royal); + position: absolute; + left: 22%; +} + +/* end main sstyle */ + +.cont { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding-bottom: 20px; +} + + +.box12 { + display: flex; + align-items: flex-start; + flex-direction: column; + justify-content: space-between; + width: 300px; + height: 550px; + background-color: var(--white); + padding: 25px; +} + +.box12 div{ + padding-top: 20px; + padding-bottom: 9px; +} +.box12 input{ + border-top: 0; + border-left: 0; + border-right: 0; + border-bottom: solid 2px; + width: 250px; + height: 50px; +} +.box12 em{ + color: var(--blue-royal); +} +.send-wrapper { + display: flex; + align-items: center; + justify-content: center; + padding-bottom: 20px; +} + + +.send{ + padding: 15px; + border-radius: 50px; + font-size: 15px; + text-transform: uppercase; + color: var(--white); + background-color: var(--blue-royal); + border: none; + width: 120px; + font-size: 1.2rem; +} diff --git a/css/main.css b/css/main.css deleted file mode 100644 index aa561706..00000000 --- a/css/main.css +++ /dev/null @@ -1,3 +0,0 @@ -/* Add your CSS here */ - -/* Dont' forget to link this file to your HTML in the */ diff --git a/css/menu.css b/css/menu.css new file mode 100644 index 00000000..a41be03e --- /dev/null +++ b/css/menu.css @@ -0,0 +1,132 @@ +.menu-wrap{ + position: absolute; + top: 30px; + right: 30px; + z-index: 1; +} +.menu-wrap .toggler{ + position: absolute; + top: 0; + right: 0; + z-index: 2; + cursor: pointer; + width: 50px; + height: 50px; + opacity: 0; +} +.menu-wrap .humburger{ + position: absolute; + top: 0; + right: 0; + z-index: 1; + width: 60px; + height: 60px; + padding: 1rem; + /* background: var(--beige-light); */ + display:flex; + align-items: center; + justify-content: center; +} + +/* humburger line */ +.menu-wrap .humburger > div{ + position: relative; + width: 100%; + height: 2px; + background-color: var(--blue-royal); + display: flex; + align-items: center; + justify-content: center; + transition: all 0.4s ease; +} +/* top & bottom line */ +.menu-wrap .humburger > div:before, +.menu-wrap .humburger > div:after{ + content: ''; + position: absolute; + z-index: 1; + top: -10px; + width: 100%; + height: 2px; + background: inherit; +} +/* move line down */ +.menu-wrap .humburger > div:after{ + top: 10px; +} + +/* toggler animate */ +.menu-wrap .toggler:checked + .humburger > div{ + transform: rotate(135deg); +} +/* turn line in to X */ +.menu-wrap .toggler:checked + .humburger > div:before, +.menu-wrap .toggler:checked + .humburger > div:after{ + top: 0; + transform: rotate(90deg); +} +/* rotate on hover when checked */ +.menu-wrap .toggler:checked:hover + .humburger > div{ + transform: rotate(225deg); +} + +/* shwo menu */ +.menu-wrap .toggler:checked ~ .menu{ + visibility: visible; +} + +.menu-wrap .toggler:checked ~ .menu > div{ + transform: scale(1); + transition-duration: 0.75s; +} +.menu-wrap .toggler:checked ~ .menu > div > div{ + opacity: 1; + transition: opacity 0.4s ease; +} + +.menu-wrap .menu{ + position: fixed; + top: 0; + right: 0; + width: 100%; + height: 100%; + visibility: hidden; + overflow: hidden; + display: flex; + align-items: center; + justify-content: center; +} +.menu-wrap .menu > div{ + background-color: var(--beige-light); + border-radius: 50%; + width: 2000px; + height: 2000px; + display: flex; + flex: none; + align-items: center; + justify-content: center; + transform:scale(0); + transition: all 0.4s ease; + +} +.menu-wrap .menu > div > div { + text-align: center; + max-width: 90vw; + max-height: 100vh; + opacity: 0; + transition: opacity 0.4s ease; +} +.menu-wrap .menu > div > div > ul > li{ + list-style: none; + color: var(--black); + font-size: 1.5rem; + padding: 1rem; + text-transform: uppercase; + font-family:var(--heading-font); +} +.menu-wrap .menu > div > div > ul > li > a{ + color: inherit; + text-decoration: none; + transition: color 0.4s ease; + +} \ No newline at end of file diff --git a/css/project.css b/css/project.css new file mode 100644 index 00000000..0c7b1085 --- /dev/null +++ b/css/project.css @@ -0,0 +1,173 @@ +:root { + --beige-dark: #e6dacd; + --beige-light: #f4ece6; + + --blue-royal: #0150fd; + --black: #000; + --white: #fff; + + --heading-font: "Poppins", sans-serif; + --body-font: "Quicksand", sans-serif; +} + +body { + background-color: var(--beige-dark); +} + +/* main style */ + +main h1 { + display: flex; + align-items: center; + justify-content: center; + padding-top: 70px; + position: relative; + padding-bottom: 10px; +} + +main p{ + padding:0px 15px; + display: flex; + text-align: center; + line-height: 1.5em; + font-family: var(--body-font); +} +main>h1::before { + content: ""; + display: inline-block; + width: 19px; + height: 19px; + background-color: var(--blue-royal); + position: absolute; + left: 26% +} + +/* end main style */ + +/* style section */ + +.pro-box{ + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding-bottom: 40px; +} + +.box9 { + display: flex; + flex-direction: column; + width: 300px; + height: 460px; + background-color: var(--white); + padding: 20px 25px; + margin-top: 40px; +} +.box9 h1{ + color: var(--blue-royal); + font-size: var(--body-font); + font-weight: bold; + font-size: 1.4rem; +} + +.box9 p { + padding: 15px 0; + align-items: flex-start; + font-size: var(--body-font); +} +.box9 > div > img { + position: absolute; + right: 37px; + height: 198px; + width: 300px; +} +.box9>h1::before { + content: ""; + display: inline-block; + width: 10px; + height: 35px; + background-color: var(--blue-royal); + position: absolute; + left: 10%; +} + + +.box10 { + display: flex; + flex-direction: column; + width: 300px; + height: 460px; + background-color: var(--white); + padding: 20px 25px; +} + +.box10 p { + padding: 15px 0; + align-items: flex-start; + font-size: var(--body-font); +} + +.box10 h1 { + color: var(--blue-royal); + font-size: var(--body-font); + font-weight: bold; + font-size: 1.4rem; +} + +.box10 > div >img { + position: absolute; + right: 37px; + height: 198px; + width: 300px; +} +.box10>h1::before { + content: ""; + display: inline-block; + width: 10px; + height: 35px; + background-color: var(--blue-royal); + position: absolute; + left: 10% +} + +.box11 { + display: flex; + flex-direction: column; + width: 300px; + height: 460px; + background-color: var(--white); + padding: 20px 25px; +} + +.box11 p { + padding: 15px 0; + align-items: flex-start; + font-size: var(--body-font); +} + +.box11 h1 { + color: var(--blue-royal); + font-weight: bold; + font-size: 1.4rem; +} + +.box11 > div > img { + position: absolute; + right: 37px; + height: 198px; + width: 300px; +} +.box11>h1::before { + content: ""; + display: inline-block; + width: 10px; + height: 35px; + background-color: var(--blue-royal); + position: absolute; + left: 10% +} + + + +/* media query */ + diff --git a/css/resume.css b/css/resume.css new file mode 100644 index 00000000..5b52b4aa --- /dev/null +++ b/css/resume.css @@ -0,0 +1,177 @@ +:root { + --beige-dark: #e6dacd; + --beige-light: #f4ece6; + + --blue-royal: #0150fd; + --black: #000; + --white: #fff; + + --heading-font: "Poppins", sans-serif; + --body-font: "Quicksand", sans-serif; +} + +body{ + background-color:var(--beige-dark); +} + +/* head main style */ + +main h1{ + display: flex; + align-items: center; + justify-content: center; + padding-top: 70px; + position: relative; +} +.top{ + display: flex; + align-items: center; + justify-content: space-between; + padding-top: 40px; + padding-left: 25px; + padding-right: 25px; + padding-bottom: 30px; +} +.top button{ + padding: 10px; + border-radius: 50px; + font-size: 15px; + text-transform: uppercase; + color: var(--white); + background-color: var(--blue-royal); + border: none; +} + +main>h1::before { + content: ""; + display: inline-block; + width: 19px; + height: 19px; + background-color: var(--blue-royal); + position: absolute; + left: 26% +} + +/* end head main style */ + +/* section main style */ + +.boxs{ + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin: 20px 20px; +} +.box4{ + display: flex; + flex-direction: column; + width: 300px; + height: 445px; + background-color: var(--white); + padding: 20px 25px; +} +.box4 p{ + padding: 15px 0; + align-items: flex-start; +} + +.box4 h2{ + color: var(--blue-royal); +} + +.box5 { + display: flex; + flex-direction: column; + width: 300px; + height: 445px; + background-color: var(--white); + padding: 20px 25px; +} + +.box5 p { + padding: 15px 0; + align-items: flex-start; +} + +.box5 h2 { + color: var(--blue-royal); +} + + +.box6 { + display: flex; + flex-direction: column; + width: 300px; + height: 445px; + background-color: var(--white); + padding: 20px 25px; +} + +.box6 p { + padding: 15px 0; + align-items: flex-start; +} + +.box6 h2 { + color: var(--blue-royal); +} + +.box7 { + display: flex; + flex-direction: column; + width: 300px; + height: 445px; + background-color: var(--white); + padding: 20px 25px; +} + +.box7 p { + padding: 15px 0; + align-items: flex-start; +} + +.box7 h2 { + color: var(--blue-royal); +} + + +.box8 { + display: flex; + flex-direction: column; + width: 300px; + height: 550px; + background-color: var(--white); + padding: 20px 25px; +} + +.box8 p { + padding-top: 8px ; + padding-bottom: 8px; + padding-left: 20px; + padding-right: 0; + font-size: 1.1rem; +} + + +.boxs h2{ + padding: 20px 0; + left: 0; +} +.box8>p::before { + content: ""; + display: inline-block; + width: 11px; + height: 11px; + background-color: var(--blue-royal); + position: absolute; + left: 17%; +} + + + +/* end section main style */ + +/* footer style */ + +/* end footer style */ \ No newline at end of file diff --git a/designs/Cactus shop.png b/designs/Cactus shop.png deleted file mode 100644 index c543d741..00000000 Binary files a/designs/Cactus shop.png and /dev/null differ diff --git a/designs/Juice bar.png b/designs/Juice bar.png deleted file mode 100644 index 53869d3d..00000000 Binary files a/designs/Juice bar.png and /dev/null differ diff --git a/img/AdobeStock_230407429.webp b/img/AdobeStock_230407429.webp new file mode 100644 index 00000000..cd646cff Binary files /dev/null and b/img/AdobeStock_230407429.webp differ diff --git a/img/AppScreenpos3.webp b/img/AppScreenpos3.webp new file mode 100644 index 00000000..546d5d2f Binary files /dev/null and b/img/AppScreenpos3.webp differ diff --git a/img/Leafletpos1.webp b/img/Leafletpos1.webp new file mode 100644 index 00000000..3aa283fc Binary files /dev/null and b/img/Leafletpos1.webp differ diff --git a/img/Website_Mockuppos2.webp b/img/Website_Mockuppos2.webp new file mode 100644 index 00000000..98dc17cb Binary files /dev/null and b/img/Website_Mockuppos2.webp differ diff --git a/index.html b/index.html deleted file mode 100644 index cd704c69..00000000 --- a/index.html +++ /dev/null @@ -1,21 +0,0 @@ - - - - - - - - - Responsive grid project - - - - - - - - -

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/project.html b/project.html new file mode 100644 index 00000000..37b6a358 --- /dev/null +++ b/project.html @@ -0,0 +1,135 @@ + + + + + + + + + + + + + + + + + Document + + + +
+

Maya Nelson

+

Project Manager

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

Projects

+

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.

+
+ + +
+
+

Project name 01

+

Role Title

+ +

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.

+
+ porject book +
+


+ + +
+

Project name 02

+

Role Title

+ +

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.

+
+ project post +
+


+ + +
+

Project name 03

+

Role Title

+ +

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.

+
+ project phone +
+
+
+ + + + + + + \ No newline at end of file diff --git a/resume.html b/resume.html new file mode 100644 index 00000000..626d4932 --- /dev/null +++ b/resume.html @@ -0,0 +1,170 @@ + + + + + + + + + + + + + + + + + Document + + +
+

Maya Nelson

+

Project Manager

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

Resume

+
+

Experience

+ +
+
+ +
+
+

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. +
+ I’m a great place for you to tell a + story and let your users know a + little more about you. +

+


+ +
+

2035 - 2035

+

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. +
+ I’m a great place for you to tell a + story and let your users know a + little more about you. +

+


+ +

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. +
+ I’m a great place for you to tell a story and let your users know a little more about you. +

+


+ +
+

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. +
+ I’m a great place for you to tell a story and let your users know a little more about you. +

+


+ +
+

Professional skill set

+

Entrepreneurial Mindset

+

Go-to-Market Planning

+

Teamwork & Collaboration

+

Digital Analytics

+ +

Languages

+ +

English (native)


+

Spanish (proficient)


+

French (proficient)


+
+


+ + + + + + + \ No newline at end of file