From 79145f50d5fa9ba6ade391e376942767f8c7b0a3 Mon Sep 17 00:00:00 2001 From: Myrthe Dullaart Date: Mon, 11 Mar 2024 17:09:39 +0100 Subject: [PATCH] core and extension done --- index.html | 91 +++++++++++++ portfolio1.html | 40 ++++++ portfolio2.html | 40 ++++++ portfolio3.html | 40 ++++++ style.css | 343 ++++++++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 554 insertions(+) create mode 100644 portfolio1.html create mode 100644 portfolio2.html create mode 100644 portfolio3.html create mode 100644 style.css diff --git a/index.html b/index.html index dc73fbe..299df5e 100644 --- a/index.html +++ b/index.html @@ -9,5 +9,96 @@ +
+ +
+

Ella Magnifica

+
+ +
+
+ +
+

Hiring A Full-Stack Developer?

+

I have experience with React, NodeJS and Typescript. I would love to work at an innovative and eco-friendly start-up in the sustainable energy sector.

+
+ +
+ +
+ +
+ +
+

ABOUT ME

+

Introduction

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut, incidunt eligendi iusto totam nemo vero suscipit obcaecati esse porro quo nesciunt nihil officiis iste voluptatum ipsa atque maiores recusandae placeat. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Inventore voluptates quos, quam amet saepe unde molestias sint dignissimos illo delectus id aliquid impedit voluptatum nemo exercitationem esse. Sed, minima unde?

+

Technical Skills

+
    +
  • HTML & CSS
    • +
  • Javascript
    • +
  • Typescript
    • +
  • React
    • +
  • Redux
    • +
  • NodeJS
    • +
+
+ +
+ +
+

PORTFOLIO

+
+
+
Title
+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos mollitia ipsam dolore ipsum modi nemo quaerat reprehenderit id in molestiae. Provident mollitia iusto fuga, distinctio inventore ullam at? Veritatis, voluptatem.

+ +
+
+
Title
+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos mollitia ipsam dolore ipsum modi nemo quaerat reprehenderit id in molestiae. Provident mollitia iusto fuga, distinctio inventore ullam at? Veritatis, voluptatem.

+ +
+
+
Title
+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos mollitia ipsam dolore ipsum modi nemo quaerat reprehenderit id in molestiae. Provident mollitia iusto fuga, distinctio inventore ullam at? Veritatis, voluptatem.

+ +
+
+
+ +
+ +
+

EXPERIENCE

+

Job Title

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi tenetur praesentium vitae accusamus temporibus excepturi autem porro consequuntur nostrum maiores facere, tempora optio eos exercitationem laudantium debitis? Molestias, consectetur quos?Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ducimus sunt voluptates non nemo atque fugit? Autem dicta at quis. Quisquam accusamus, quaerat voluptate ipsa reprehenderit officiis animi harum unde nobis.

+

Job Title

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi tenetur praesentium vitae accusamus temporibus excepturi autem porro consequuntur nostrum maiores facere, tempora optio eos exercitationem laudantium debitis? Molestias, consectetur quos?Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ducimus sunt voluptates non nemo atque fugit? Autem dicta at quis. Quisquam accusamus, quaerat voluptate ipsa reprehenderit officiis animi harum unde nobis.

+
+ +
+ + + \ No newline at end of file diff --git a/portfolio1.html b/portfolio1.html new file mode 100644 index 0000000..c87e422 --- /dev/null +++ b/portfolio1.html @@ -0,0 +1,40 @@ + + + + + + + Portfolio 1 + + + +
+ +
+

Ella Magnifica

+
+ +
+
+ +
+ +
+ +

Title

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi ratione quisquam aperiam. Nisi cum ad libero, assumenda dignissimos optio ratione laborum sit aut quia, debitis perferendis earum quos! Eveniet, cum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique et tenetur porro, voluptatem ex consequuntur voluptas, iure rem nam asperiores hic cumque aut accusantium cupiditate ullam illo! Et, obcaecati blanditiis?

+ + + + + \ No newline at end of file diff --git a/portfolio2.html b/portfolio2.html new file mode 100644 index 0000000..5ed2920 --- /dev/null +++ b/portfolio2.html @@ -0,0 +1,40 @@ + + + + + + + Portfolio 2 + + + +
+ +
+

Ella Magnifica

+
+ +
+
+ +
+ +
+ +

Title

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi ratione quisquam aperiam. Nisi cum ad libero, assumenda dignissimos optio ratione laborum sit aut quia, debitis perferendis earum quos! Eveniet, cum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique et tenetur porro, voluptatem ex consequuntur voluptas, iure rem nam asperiores hic cumque aut accusantium cupiditate ullam illo! Et, obcaecati blanditiis?

+ + + + + \ No newline at end of file diff --git a/portfolio3.html b/portfolio3.html new file mode 100644 index 0000000..4509426 --- /dev/null +++ b/portfolio3.html @@ -0,0 +1,40 @@ + + + + + + + Portfolio 3 + + + +
+ +
+

Ella Magnifica

+
+ +
+
+ +
+ +
+ +

Title

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi ratione quisquam aperiam. Nisi cum ad libero, assumenda dignissimos optio ratione laborum sit aut quia, debitis perferendis earum quos! Eveniet, cum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique et tenetur porro, voluptatem ex consequuntur voluptas, iure rem nam asperiores hic cumque aut accusantium cupiditate ullam illo! Et, obcaecati blanditiis?

+ + + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..1793250 --- /dev/null +++ b/style.css @@ -0,0 +1,343 @@ +* { + margin: 0px; + + font-family: sans-serif; + + scroll-behavior: smooth; +} + +body { + height: 100vh; +} + +hr { + height: 5px; + background-color: #1D313A; + border: none; +} + +h1 { + font-size: 1.5rem; +} + +h2 { + font-size: 5rem; + + padding-bottom: 30px; +} + +h3 { + font-size: 2rem; + color: #1D313A; + + display: grid; + place-items: center; +} + +h4 { + padding: 20px 0px; +} + +h5 { + font-size: 1.5rem; + padding-bottom: 20px; +} + +/* Header - Top bar*/ +header { + background-color: #4EB6AC; + color: white; + + display: grid; +} + +.top-bar { + display: grid; + grid-template-columns: 1fr 1fr; + + padding: 20px; +} + +.top-bar ul { + display: grid; + grid-template-columns: repeat(3, 1fr); + + place-items: center; + justify-content: center; + gap: 1rem; + padding: 0px; +} + +.top-bar li { + padding: 0px; + list-style: none; +} + +.top-bar a { + background-color: rgba(255, 255, 255, 0.911); + color: #4EB6AC; + font-weight: bold; + text-decoration: none; + border-radius: 5px; + + padding: 10px 20px; + +} + +.navigation-bar { + display: grid; + align-items: center; + justify-content: right; +} + +/* Header - Hire Me*/ +.hire-me { + display: grid; + grid-template-columns: 75ch; + + align-items: center; + justify-content: center; + + padding: 200px; +} + +.hire-me span { + color: #1D313A; + font-weight: bold; +} + +.hire-me em { + text-decoration: underline; + text-decoration-color: #1D313A; +} + +/* Main - About me */ +.about-me { + display: grid; + grid-template-columns: 75ch; + justify-content: center; + + padding: 50px 0px; +} + +.about-me ul { + display: grid; + + grid-template-columns: 1fr 1fr; +} + +/* Main - Portfolio */ +.portfolios { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 20px; + padding: 30px 50px; +} + +.portfolio { + background-color: #FFEBEE; + + justify-content: center; + + padding-top: 50px; +} + +.portfolio-1, .portfolio-2, .portfolio-3 { + background-color: white; + border: 5px solid #AE1457; + border-radius: 5px; + box-shadow: -5px 5px 5px #ae14572c; + + padding: 40px 30px; +} + +.read-more { + background-color: #AE1457; + text-decoration: none; + color: white; + font-weight: bold; + border-radius: 5px; + + padding: 10px 60px; + display: grid; + place-content: center; + margin-top: 30px; +} + +.github { + color: #AE1457; + display: grid; + place-content: center; + margin-top: 10px; +} + + +/* Main - Experience */ +.experience { + display: grid; + grid-template-columns: 75ch; + justify-content: center; + padding: 50px 0px; +} + +/* Footer */ +footer { + background-color: #1D313A; + color: white; + + padding: 20px 30px; +} + +/* Make responsive */ +@media screen and (max-width: 576px) { + h2 { + font-size: 2.5rem; + } + + /* Header */ + .hire-me { + display: grid; + grid-template-columns: 25ch; + + padding: 50px; + } + + .top-bar { + display: grid; + grid-template-columns: 1fr; + } + + .top-bar ul { + display: grid; + grid-template-columns: 1fr; + padding: 20px 0px; + gap: 2rem; + + } + + .top-bar { + display: grid; + } + + .navigation-bar { + display: grid; + place-content: center; + } + + /* Main - About me */ + .about-me { + display: grid; + grid-template-columns: 25ch; + } + + .about-me ul { + display: grid; + grid-template-columns: 1fr; + } + + /* Main - Portfolio */ + .portfolios { + display: grid; + grid-template-columns: 25ch; + grid-template-rows: 1fr 1fr 1fr; + grid-template-areas: + 'portfolio-1' + 'portfolio-2' + 'portfolio-3'; + + padding: 50px 0px; + + place-content: center; + } + + .portfolio-1 { + grid-area: portfolio-1; + } + + .portfolio-2 { + grid-area: portfolio-2; + } + + .portfolio-3 { + grid-area: portfolio-3; + } + + /* Main - Experience */ +.experience { + display: grid; + grid-template-columns: 25ch; +} + +} + +/* Make responsive */ +@media screen and (min-width: 576px) and (max-width: 1024px) { + h2 { + font-size: 2.5rem; + } + + /* Header */ + .hire-me { + display: grid; + grid-template-columns: 55ch; + + padding: 50px; + } + + .navigation-bar { + display: grid; + justify-content: right; + } + + .top-bar { + display: grid; + grid-template-columns: auto 1fr; + + padding: 20px; + } + + /* Main - About me */ + .about-me { + display: grid; + grid-template-columns: 55ch; + } + + .about-me ul { + display: grid; + grid-template-columns: 1fr; + } + + /* Main - Portfolio */ + .portfolios { + display: grid; + grid-template-columns: 55ch; + grid-template-rows: 1fr 1fr 1fr; + grid-template-areas: + 'portfolio-1' + 'portfolio-2' + 'portfolio-3'; + + padding: 50px 0px; + + place-content: center; + } + + .portfolio-1 { + grid-area: portfolio-1; + } + + .portfolio-2 { + grid-area: portfolio-2; + } + + .portfolio-3 { + grid-area: portfolio-3; + } + + /* Main - Experience */ +.experience { + display: grid; + grid-template-columns: 55ch; +} + +} \ No newline at end of file