diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..6f3a2913 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/contact.html b/contact.html new file mode 100644 index 00000000..ea5b523c --- /dev/null +++ b/contact.html @@ -0,0 +1,107 @@ + + + + + + + Document + + + +
+
+ + +
+
+ +
+
+
+

Let's Talk

+
+
+
+
+ + +
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+ +
+
+
+ + + + \ No newline at end of file diff --git a/css/contact.css b/css/contact.css new file mode 100644 index 00000000..b3b1bab9 --- /dev/null +++ b/css/contact.css @@ -0,0 +1,251 @@ +@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap"); +body { + margin: 0; + padding: 0; +} +h1, +h2, +p { + font-family: "Roboto"; +} +h1 { + font-size: 100px; +} +/* HEADER */ +.header { + position: fixed; + top: 0; + left: 0; + right: 0; + background-color: white; + color: black; + display: flex; + align-items: center; + height: 120px; + z-index: 3; +} + +.header .left { + flex: 1; + padding-left: 20px; +} +.left { + display: flex; + align-items: center; +} +.left p { + margin-right: 10px; +} +#box { + background-color: #0150fd; + height: 20px; + width: 20px; +} + +.header .right { + flex: 1; + padding-right: 20px; + text-align: right; +} + +.header .right ul { + list-style: none; + margin: 0; + padding: 0; +} + +.header .right ul li { + display: inline-block; + margin-left: 20px; +} + +.header .right ul li:first-child { + margin-left: 0; +} + +.header .right ul li a { + color: black; + text-decoration: none; +} +.header .right ul li a:hover { + color: #0150fd; +} + +/* MAIN */ + +main { + background-color: #e6dacd; + height: 1100px; + display: flex; + flex-direction: column; + align-items: center; +} +#main-head { + display: flex; + align-items: center; + margin-top: 200px; + margin-bottom: 15px; + margin-left: 240px; +} + +#main-head #box { + width: 30px; + height: 30px; + background-color: blue; + margin-left: 100px; +} +h1 { + font-size: 40px; + margin-right: 350px; + margin-left: 5px; +} + + +/* FORM */ +form { + width: 900px; + margin: 30px; + font-size: 16px; + font-family: Arial, sans-serif; + background-color: white; + +} + +.form-row { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + margin: 20px; +} + +.form-group { + width: 48%; + margin-bottom: 10px; + position: relative; +} + +.form-group label { + display: block; + margin-bottom: 5px; +} + +.form-group input, +.form-group textarea { + width: 100%; + padding: 10px; + border: none; + border-bottom: 2px solid #ddd; +} + +.form-group input:focus, +.form-group textarea:focus { + outline: none; + border-bottom: 2px solid #0150FD; +} + +.form-group span { + color: #0150FD; +} + +.form-group textarea { + height: 150px; +} + +.send-btn { + float: left; + background-color: #0150FD; + color: #fff; + padding: 10px 20px; + border: none; + border-radius: 5px; + cursor: pointer; + transition: all 0.3s ease-in-out; + border: 2px solid #0150FD; + border-radius: 35px; + width: 100px; +} + +.send-btn:hover { + background-color: white; + color: black; +} + + +/* FOOTER */ + +footer { + background-color: white; + color: #333; + padding: 30px; + display: flex; + justify-content: space-between; + align-items: center; +} + +footer p { + margin: 0; +} + +footer div { + display: flex; + align-items: center; +} + +footer div > div { + margin-left: 40px; + display: flex; + flex-direction: column; +} + +footer div p { + margin: 0; + font-weight: bold; +} + +footer div a { + text-decoration: none; + color: #333; +} + +footer div:last-of-type p:first-of-type { + margin-bottom: 5px; +} + +footer div ul { + display: flex; +} + +footer div:last-of-type { + display: flex; + align-items: center; + justify-content: space-between; +} + +footer div:last-of-type p { + margin: 0; + font-weight: bold; +} + +footer div:last-of-type ul { + display: flex; + list-style: none; + padding: 0; + margin: 0; +} + +footer div:last-of-type ul li { + margin-left: 20px; +} + +footer div:last-of-type ul li:first-of-type { + margin-left: 0; +} + +footer div:last-of-type ul li a { + display: block; + width: 30px; + height: 30px; + background-repeat: no-repeat; + background-size: contain; +} \ No newline at end of file diff --git a/css/main.css b/css/main.css index aa561706..eccbd293 100644 --- a/css/main.css +++ b/css/main.css @@ -1,3 +1,274 @@ /* Add your CSS here */ /* Dont' forget to link this file to your HTML in the */ + +/* Dark beige: #E6DACD +Light beige: #F4ECE63 +Royal blue: #0150FD +Black: #000 +White: #FFF */ + +/* Set body margin and padding to 0 to remove default spacing */ +@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap"); +body { + margin: 0; + padding: 0; +} +h1, +h2, +p { + font-family: "Roboto"; +} +h1 { + font-size: 100px; +} + +/* Style for header */ +.header { + position: fixed; + top: 0; + left: 0; + right: 0; + background-color: white; + color: black; + display: flex; + align-items: center; + height: 120px; + z-index: 3; +} + +.header .left { + flex: 1; + padding-left: 20px; +} +.left { + display: flex; + align-items: center; +} +.left p { + margin-right: 10px; +} +#box { + background-color: #0150fd; + height: 20px; + width: 20px; +} + +.header .right { + flex: 1; + padding-right: 20px; + text-align: right; +} + +.header .right ul { + list-style: none; + margin: 0; + padding: 0; +} + +.header .right ul li { + display: inline-block; + margin-left: 20px; +} + +.header .right ul li:first-child { + margin-left: 0; +} + +.header .right ul li a { + color: black; + text-decoration: none; +} +.header .right ul li a:hover { + color: #0150fd; +} +/* Style for containers */ +.container1 { + width: 40%; + float: left; + height: 1000px; + background-color: #e6dacd; + z-index: 1; + position: relative; +} + +.container2 { + width: 60%; + float: left; + height: 1000px; + background-color: white; + z-index: 1; + position: relative; +} +.white-card { + margin-left: 120px; + margin-top: 220px; +} + +#resume-btn { + background-color: #0150fd; + height: 35px; + width: 110px; + border-radius: 35px; + margin-right: 7px; +} +#resume-btn:hover { + background-color: white; +} +#project-btn { + background-color: #fff; + height: 35px; + width: 110px; + border-radius: 35px; + margin-left: 7px; +} +#project-btn:hover { + background-color: #0150fd; +} + +/* Style for card */ +.card { + margin-top: 90px; + background-color: #f4ece6; + padding: 10px; + border-radius: 5px; + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); + text-align: center; + z-index: 2; + height: 600px; + width: 350px; + position: absolute; + top: 60%; + left: 30%; + transform: translate(-50%, -50%); + text-align: center; +} + +.card img { + width: 150px; + height: 150px; + border-radius: 50%; + object-fit: cover; + object-position: center; + margin-top: 40px; + padding-top: 10px; +} + +.card h2 { + margin-top: 100px; + margin-bottom: 5px; +} + +.card .social-media { + /* list-style: none; + padding: 0; + margin: 0; + display: flex; + justify-content: center; */ + list-style: none; + padding: 0; + margin: 0; + display: flex; + justify-content: center; + align-items: center; + position: absolute; + bottom: 0px; + left: 50%; + transform: translate(-50%, 0); + background-color: white; + width: 370px; + height: 60px; +} + +.card .social-media li { + margin: 0 5px; +} + +.card .social-media li a { + display: block; + width: 30px; + height: 30px; + border-radius: 50%; + background-color: #333; + color: #fff; + font-size: 20px; + line-height: 20px; + padding-bottom: 0%; +} +/* footer */ +footer { + background-color: white; + color: #333; + padding: 30px; + display: flex; + justify-content: space-between; + align-items: center; +} + +footer p { + margin: 0; +} + +footer div { + display: flex; + align-items: center; +} + +footer div > div { + margin-left: 40px; + display: flex; + flex-direction: column; +} + +footer div p { + margin: 0; + font-weight: bold; +} + +footer div a { + text-decoration: none; + color: #333; +} + +footer div:last-of-type p:first-of-type { + margin-bottom: 5px; +} + +footer div ul { + display: flex; +} + +footer div:last-of-type { + display: flex; + align-items: center; + justify-content: space-between; +} + +footer div:last-of-type p { + margin: 0; + font-weight: bold; +} + +footer div:last-of-type ul { + display: flex; + list-style: none; + padding: 0; + margin: 0; +} + +footer div:last-of-type ul li { + margin-left: 20px; +} + +footer div:last-of-type ul li:first-of-type { + margin-left: 0; +} + +footer div:last-of-type ul li a { + display: block; + width: 30px; + height: 30px; + background-repeat: no-repeat; + background-size: contain; +} \ No newline at end of file diff --git a/css/project.css b/css/project.css new file mode 100644 index 00000000..bf3be7d3 --- /dev/null +++ b/css/project.css @@ -0,0 +1,248 @@ +@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap"); +body { + margin: 0; + padding: 0; +} +h1, +h2, +p { + font-family: "Roboto"; +} +h1 { + font-size: 50px; + margin-left: 10px; +} +/* HEADER */ + +.header { + position: fixed; + top: 0; + left: 0; + right: 0; + background-color: white; + color: black; + display: flex; + align-items: center; + height: 120px; + z-index: 3; +} + +.header .left { + flex: 1; + padding-left: 20px; +} +.left { + display: flex; + align-items: center; +} +.left p { + margin-right: 10px; +} +#box { + background-color: #0150fd; + height: 20px; + width: 20px; +} + +.header .right { + flex: 1; + padding-right: 20px; + text-align: right; +} + +.header .right ul { + list-style: none; + margin: 0; + padding: 0; +} + +.header .right ul li { + display: inline-block; + margin-left: 20px; +} + +.header .right ul li:first-child { + margin-left: 0; +} + +.header .right ul li a { + color: black; + text-decoration: none; +} +.header .right ul li a:hover { + color: #0150fd; +} + +/* MAIN */ + +main div { + width: 700px; + text-align: center; +} +main { + background-color: #e6dacd; + height: 2000px; + display: flex; + flex-direction: column; + align-items: center; +} +#main-head { + display: flex; + align-items: center; + margin-top: 200px; + margin-bottom: 15px; + margin-left: 240px; +} + +#main-head #box { + width: 30px; + height: 30px; + background-color: blue; + margin-left: 100px; +} + +main p { + text-align: center; + margin-left: 0px; + margin-right: 0px; +} +#head-parag{ + margin-left: 200px; + margin-right: 200px; +} + +/* DIVS */ +.project { + display: flex; + flex-direction: row; + justify-content: center; + margin: 20px; + width: 800px; + height: 400px; + background-color: white; +} +#div-head{ + width: 500px; +} +#div-head { + display: flex; + align-items: center; +} + +#div-head h2 { + margin-right: 300px; + color: #0150fd; +} + +#div-head h3 { + margin-right: 400px; +} + + +.project-description { + flex-basis: 50%; + padding: 20px; + height: 100%; +} + +#stick{ + background-color: #0150fd; + width: 5px; + height: 80px; +} + +.project-description p { + margin-top: 20px; +} + +.project-image { + flex-basis: 50%; + height: 100%; + width: 40%; +} + +.project-image img { + height: 100%; + width: 100%; + object-fit: cover; +} + + +/* FOOTER */ + +footer { + background-color: white; + color: #333; + padding: 30px; + display: flex; + justify-content: space-between; + align-items: center; +} + +footer p { + margin: 0; +} + +footer div { + display: flex; + align-items: center; +} + +footer div > div { + margin-left: 40px; + display: flex; + flex-direction: column; +} + +footer div p { + margin: 0; + font-weight: bold; +} + +footer div a { + text-decoration: none; + color: #333; +} + +footer div:last-of-type p:first-of-type { + margin-bottom: 5px; +} + +footer div ul { + display: flex; +} + +footer div:last-of-type { + display: flex; + align-items: center; + justify-content: space-between; +} + +footer div:last-of-type p { + margin: 0; + font-weight: bold; +} + +footer div:last-of-type ul { + display: flex; + list-style: none; + padding: 0; + margin: 0; +} + +footer div:last-of-type ul li { + margin-left: 20px; +} + +footer div:last-of-type ul li:first-of-type { + margin-left: 0; +} + +footer div:last-of-type ul li a { + display: block; + width: 30px; + height: 30px; + background-repeat: no-repeat; + background-size: contain; +} \ No newline at end of file diff --git a/css/resume.css b/css/resume.css new file mode 100644 index 00000000..a9159839 --- /dev/null +++ b/css/resume.css @@ -0,0 +1,309 @@ +@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap"); +body { + margin: 0; + padding: 0; +} +h1, +h2, +p { + font-family: "Roboto"; +} +h1 { + font-size: 100px; +} +/* HEADER */ + +.header { + position: fixed; + top: 0; + left: 0; + right: 0; + background-color: white; + color: black; + display: flex; + align-items: center; + height: 120px; + z-index: 3; +} + +.header .left { + flex: 1; + padding-left: 20px; +} +.left { + display: flex; + align-items: center; +} +.left p { + margin-right: 10px; +} +#box { + background-color: #0150fd; + height: 20px; + width: 20px; +} +#box-small { + background-color: #0150fd; + height: 10px; + width: 10px; +} + +.header .right { + flex: 1; + padding-right: 20px; + text-align: right; +} + +.header .right ul { + list-style: none; + margin: 0; + padding: 0; +} + +.header .right ul li { + display: inline-block; + margin-left: 20px; +} + +.header .right ul li:first-child { + margin-left: 0; +} + +.header .right ul li a { + color: black; + text-decoration: none; +} +.header .right ul li a:hover { + color: #0150fd; +} + +/* MAIN */ + +main { + background-color: #e6dacd; + height: 2500px; +} + +main div { + width: 700px; + text-align: center; + margin-left: 0px; +} +main { + display: flex; + flex-direction: column; + align-items: center; + margin-top: 100px; +} +#main-head { + display: flex; + align-items: center; + margin-top: 200px; + margin-bottom: 150px; + margin-left: 240px; +} + +#main-head #box { + width: 50px; + height: 50px; + background-color: blue; + margin-right: 10px; +} + +#main-head h1 { + margin: 0; +} +#top{ +width: 1300px; +} +#edu{ + margin-right: 600px; +} +#box { + background-color: #0150fd; + width: 30px; + height: 30px; +} + +div:nth-child(2) { + display: flex; + justify-content: space-between; + width: 100%; + margin-top: 2rem; +} + +div:nth-child(2) h2 { + text-align: left; + margin-left: 300px; +} + +div:nth-child(2) button { + text-align: right; + margin-right: 300px; + background-color: #0150fd; + height: 40px; + border-radius: 35px; + border: 2px solid #0150fd; + color: white; +} +div:nth-child(2) button:hover { + background-color: #e6dacd; +} + +.infos { + background-color: white; + display: flex; + justify-content: space-between; + height: 300px; + align-items: center; + margin-left: 20px; + margin-right: 20px; +} + +.infos p { + padding: 50px; +} +.infos h4 { + padding-left: 30px; +} + +#list-of-skills li { + display: flex; + align-items: center; + margin-bottom: 0.5rem; +} + +#skills { + display: flex; + justify-content: center; + align-items: center; + flex-wrap: wrap; + background-color: white; + height: 400px; +} + +#skills > div { + flex: 1 1 50%; + margin: 10px; + padding: 20px; +} + +#skills > div:nth-child(1) { + order: 1; +} + +#skills > div:nth-child(2) { + order: 2; +} + +#skills h2 { + text-align: left; + margin-bottom: 10px; +} + +#skills ul { + display: flex; + flex-wrap: wrap; + list-style: none; + margin: 0; + padding: 0; +} + +#skills li { + display: flex; + flex-basis: 50%; + margin-bottom: 10px; + align-items: center; +} + +#skills #box-small { + height: 15px; + width: 15px; + background-color: blue; + margin-right: 10px; +} +#languages { + display: flex; + flex-direction: column; +} +#languages h2 { + margin-left: 0%; +} + +/* footer */ +footer { + background-color: white; + color: #333; + padding: 30px; + display: flex; + justify-content: space-between; + align-items: center; +} + +footer p { + margin: 0; +} + +footer div { + display: flex; + align-items: center; +} + +footer div > div { + margin-left: 40px; + display: flex; + flex-direction: column; +} + +footer div p { + margin: 0; + font-weight: bold; +} + +footer div a { + text-decoration: none; + color: #333; +} + +footer div:last-of-type p:first-of-type { + margin-bottom: 5px; +} + +footer div ul { + display: flex; +} + +footer div:last-of-type { + display: flex; + align-items: center; + justify-content: space-between; +} + +footer div:last-of-type p { + margin: 0; + font-weight: bold; +} + +footer div:last-of-type ul { + display: flex; + list-style: none; + padding: 0; + margin: 0; +} + +footer div:last-of-type ul li { + margin-left: 20px; +} + +footer div:last-of-type ul li:first-of-type { + margin-left: 0; +} + +footer div:last-of-type ul li a { + display: block; + width: 30px; + height: 30px; + background-repeat: no-repeat; + background-size: contain; +} \ No newline at end of file diff --git a/index.html b/index.html index cd704c69..8695bece 100644 --- a/index.html +++ b/index.html @@ -1,21 +1,120 @@ - - - - + + + + - + Responsive grid project - + - + +
+
+ + +
+
- +
+
+ Maya Nelson +

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

+
+
+
+ -

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

- - +

+ 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..554c00fa --- /dev/null +++ b/project.html @@ -0,0 +1,142 @@ + + + + + + + Document + + + +
+
+ + +
+
+
+
+
+

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

+
+
+ Project Image +
+
+ +
+
+
+
+
+

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

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 Image +
+
+
+ + + + \ No newline at end of file diff --git a/resume.html b/resume.html new file mode 100644 index 00000000..bdadc3e7 --- /dev/null +++ b/resume.html @@ -0,0 +1,165 @@ + + + + + + + Document + + + +
+
+ + +
+
+ +
+
+
+

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

+
+


+
+
+

Professional skillset

+
    +
  • +Entrepreneurial Mindset
  • +
  • +Go-to-Market Planning
  • +
  • +Teamwork & Collaboration
  • +
  • +Digital Analytics
  • +
+
+ +
+

Languages

+
    +
  • +
    + English (native) +
  • +
  • +
    + Turkish +
  • +
  • +
    + Spanish +
  • +
+
+
+
+ + + + \ No newline at end of file