diff --git a/images/facebook.webp b/images/facebook.webp new file mode 100644 index 00000000..e0cca762 Binary files /dev/null and b/images/facebook.webp differ diff --git a/images/hamburger.png b/images/hamburger.png new file mode 100644 index 00000000..a0f8e6d6 Binary files /dev/null and b/images/hamburger.png differ diff --git a/images/insta.webp b/images/insta.webp new file mode 100644 index 00000000..4fba8754 Binary files /dev/null and b/images/insta.webp differ diff --git a/images/linkedln.webp b/images/linkedln.webp new file mode 100644 index 00000000..ffe20b2f Binary files /dev/null and b/images/linkedln.webp differ diff --git a/images/main.webp b/images/main.webp new file mode 100644 index 00000000..edda9fab Binary files /dev/null and b/images/main.webp differ diff --git a/images/twitter.webp b/images/twitter.webp new file mode 100644 index 00000000..19a1e70b Binary files /dev/null and b/images/twitter.webp differ diff --git a/index.html b/index.html index cd704c69..33334ed5 100644 --- a/index.html +++ b/index.html @@ -4,18 +4,126 @@ - - - Responsive grid project + + + + + + + + + Business CV - +
+
+
+
+

Maya Nelson

+
+ / +

PROJECT MANAGER

+
+
+ +
+ hamburger image +
+ + +
+
+
+
+ Maya Nelson image +

Maya Nelson

+

PROJECT MANAGER

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

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.

+
+
- - - - -

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/resume.css b/resume.css new file mode 100644 index 00000000..82939d23 --- /dev/null +++ b/resume.css @@ -0,0 +1,323 @@ +: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; + height: 3rem; + align-items: center; +} + +.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) { + header { + align-items: center; + } + 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; + } + .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 new file mode 100644 index 00000000..baba0709 --- /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)

+
+
+
+
+ + + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 00000000..18595b66 --- /dev/null +++ b/script.js @@ -0,0 +1,22 @@ +// 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; +} + +$(".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 new file mode 100644 index 00000000..1b89c72b --- /dev/null +++ b/style.css @@ -0,0 +1,407 @@ +: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: 17rem 45rem 1rem; + font-family: 'Quicksand', sans-serif; +} + +/* ----------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: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); + /* position: relative; */ + + +} +.main_info_box{ + width: 20rem; + height: 27rem; + position:absolute; + top: 6rem; + left: 10%; + background-color: var(--light-beige); + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: 10rem 7rem 3rem 7rem; + grid-template-areas: + "img img " + "name name" + "button1 button2" + "media media" + ; + box-shadow: rgba(182, 172, 172, 0.28) -5px 9px 9px; + z-index: 1; +} +.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_info_box h3 { + display:none; +} +.main-image{ + justify-self: center; + margin-top: 2rem; + 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; +display: block; + +} +.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; +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{ + 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{ +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{ + font-size: 1.1rem; +} + +/* ------------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"; + grid-area: footer; + } + + .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: 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