From b7ed387d9f015dc09a8bb2546466ac5b0dee03a1 Mon Sep 17 00:00:00 2001 From: gent009 <167322651+gent009@users.noreply.github.com> Date: Wed, 15 May 2024 15:36:39 +0100 Subject: [PATCH] portfolio --- index.html | 102 ++++++++++++++++++++++++++++++++++++++- style.css | 138 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 239 insertions(+), 1 deletion(-) create mode 100644 style.css diff --git a/index.html b/index.html index dc73fbe..49e14f9 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,106 @@ Full Stack Portfolio +
+

Ella Magnifica

+ About Me + Portfolio + Experience
+

Hiring A Full-Stack Developer?

+
+

+ I have experience withReact,NodeJSandTypescript + ,I would love to work at an innovative and eco-friendly start-up in the + sustainable energy sector. +

+
+
+
+

ABOUT ME

+

Introduction

+

+ Lorem Ipsum is simply dummy text of the printing and typesetting + industry. Lorem Ipsum has been the industry's standard dummy text ever + since the 1500s, when an unknown printer took a galley of type and + scrambled it to make a type specimen book. It has survived not only + five centuries, but also the leap into electronic typesetting, + remaining essentially unchanged. +

+

Technical Skills

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

PORTFOLIO

+
+
+

Title

+

+ Lorem Ipsum is simply dummy text of the printing and typesetting + industry. Lorem Ipsum has been the industry's standard dummy text + ever since the 1500s, when an unknown printer took a galley of type + and scrambled it to make a type specimen book. +

+ READ MORE + GitHub Repo +
+
+

Title

+

+ Lorem Ipsum is simply dummy text of the printing and typesetting + industry. Lorem Ipsum has been the industry's standard dummy text + ever since the 1500s, when an unknown printer took a galley of type + and scrambled it to make a type specimen book. +

+ READ MORE + GitHub Repo +
+
+

Title

+

+ Lorem Ipsum is simply dummy text of the printing and typesetting + industry. Lorem Ipsum has been the industry's standard dummy text + ever since the 1500s, when an unknown printer took a galley of type + and scrambled it to make a type specimen book. +

+ READ MORE + GitHub Repo +
+
+
+
+

EXPERIENCE

+
+

Job title

+

+ Lorem Ipsum is simply dummy text of the printing and typesetting + industry. Lorem Ipsum has been the industry's standard dummy text ever + since the 1500s, when an unknown printer took a galley of type and + scrambled it to make a type specimen book.. +

+ +

Job title

+

+ Lorem Ipsum is simply dummy text of the printing and typesetting + industry. Lorem Ipsum has been the industry's standard dummy text ever + since the 1500s, when an unknown printer took a galley of type and + scrambled it to make a type specimen book. +

+
+
- \ No newline at end of file + diff --git a/style.css b/style.css new file mode 100644 index 0000000..b46f02a --- /dev/null +++ b/style.css @@ -0,0 +1,138 @@ +* { + scroll-behavior: smooth; +} +body, +html { + margin: 0; + font-family: Arial, sans-serif; + background-color: darkolivegreen; +} +.header { + display: grid; + grid-template-columns: repeat(4, 1fr); + background-color: #008080; + padding: 20px 20px; + color: white; + width: auto; + height: 400px; +} +.header a { + color: white; + text-decoration: none; + text-align: right; + display: block; + margin-top: 30px; +} +.header p { + color: azure; + margin: 5px; + padding: 20px; +} +.header span { + color: darkblue; +} +.h1 { + color: aliceblue; + size: 100px; +} +.aboutme { + display: grid; + background-color: white; + padding: 20px 20px; + width: auto; + height: 400px; + margin-top: 20px; +} +.aboutmechild { + text-align: center; +} +.aboutme h1 { + color: darkslategrey; +} +.aboutme p h3 { + text-align: center; + font-size: small; +} +ul { + columns: 2; + -webkit-columns: 2; + -moz-columns: 2; + list-style-type: none; + padding: 0; +} +li { + break-inside: avoid-column; +} +.pinkcontainer { + background-color: rosybrown; + text-align: center; +} + +.main-container { + text-align: center; + padding-top: 20px; +} + +.card-container { + display: flex; + justify-content: center; + gap: 20px; + padding: 20px; +} + +.card { + width: 300px; + background-color: #ffffff; + border: 2px solid #ff6f91; /* Pink border */ + padding: 20px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + position: relative; +} + +.card h2 { + color: #ff6f91; /* Title color */ +} + +.card p { + text-align: left; + color: #666; +} + +.read-more { + display: block; + background-color: #ff6f91; /* Button color */ + color: white; + text-decoration: none; + padding: 10px 20px; + margin: 10px 0; + border-radius: 5px; +} + +.card span { + display: block; + margin-top: 10px; + color: #ff6f91; /* GitHub text color */ +} +.experiencebox { + display: grid; + grid-template-columns: repeat(4, 1fr); + background-color: white; + padding: 20px 20px; + margin-bottom: 20px; + width: auto; + height: 400px; + font-size: small; +} +.experiencebox h1 { + color: #008080; +} + +.box4 h1 { + text-align: center; + color: black; + margin-top: 40px; +} +.experiencebox p { + text-align: center; + margin-bottom: 20px; +}