Skip to content

Leonardo Lodi #77

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
LeonardoSaraceli wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Leonardo Lodi #77

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
94 changes: 92 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,100 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="./style.css" />
<title>Full Stack Portfolio</title>
</head>
<body>

<main>
<section class="introduction">
<div class="header">
<header>
<h2>Ella Magnifica</h2>
<div class="buttons">
<button><a href="#about-me">About Me</a></button>
<button><a href="#portfolio"> Portfolio</a></button>
<button><a href="#experience"> Experience</a></button>
</div>
</header>
</div>
<div class="content">
<h1>Hiring A<br/>Full-Stack<br/>Developer?</h1>
<p>I have experience with <strong>React</strong>, <strong>NodeJS</strong> and <strong>Typescript</strong>. I would love<br/> to work at an <span><i>innovative</i></span> and <span><i>eco-friendly</i></span> start-up in the <strong>sustainable<br/> energy sector</strong>.</p>
</div>
</section>
<section class="about-me">
<header>
<h1><a id="about-me">ABOUT ME</a></h1>
</header>
<div class="text">
<strong>Introduction</strong>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Beatae saepe quisquam<br/> minus nostrum facere quam possimus voluptates itaque, aspernatur quidem,<br/> sunt repudiandae quis, similique amet atque. Porro est a harum? Molestias soluta<br/> dolores reiciendis eveniet, vero nesciunt eligendi exercitationem dicta hic<br/> possimus quibusdam a fuga eaque iusto, numquam id voluptatem placeat at.</p><br>
<strong>Technical Skills</strong>
</div>
<div class="text2">
<div class="lists">
<div class="first-list">
<ul>
<li>HTML & CSS</li>
<li>Javascript</li>
<li>Typescript</li>
</ul>
</div>
<div class="second-list">
<ul>
<li>React</li>
<li>Redux</li>
<li>NodeJS</li>
</ul>
</div>
</div>
</div>
</section>
<section class="portfolio">
<h1><a id="portfolio">PORTFOLIO</a></h1>
<div class="title">
<div>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita quia, debitis corporis ea quos ut officiis veritatis ratione. Aperiam exercitationem atque voluptas sed alias, labore magnam inventore provident distinctio illo?</p>
<br>
<button><p>READ MORE</p></button>
<br>
<a target="_blank" href="https://github.com/LeonardoSaraceli?tab=repositories">GitHub Repo</a>
</div>
<div>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita quia, debitis corporis ea quos ut officiis veritatis ratione. Aperiam exercitationem atque voluptas sed alias, labore magnam inventore provident distinctio illo?</p>
<br>
<button><p>READ MORE</p></button>
<br>
<a target="_blank" href="https://github.com/LeonardoSaraceli?tab=repositories">GitHub Repo</a>
</div>
<div>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita quia, debitis corporis ea quos ut officiis veritatis ratione. Aperiam exercitationem atque voluptas sed alias, labore magnam inventore provident distinctio illo?</p>
<br>
<button><p>READ MORE</p></button>
<br>
<a target="_blank" href="https://github.com/LeonardoSaraceli?tab=repositories">GitHub Repo</a>
</div>
</div>
</section>
<section class="experience">
<h1><a id="experience">EXPERIENCE</a></h1>
<div class="job-title">
<div class="first-experience">
<strong><p>Job Title</p></strong><br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem corporis eveniet,<br> ex quis excepturi assumenda eius repellendus cumque dolore accusantium<br> nesciunt suscipit enim distinctio, reprehenderit voluptate. Minima eum sapiente quam?<br> Maxime iusto earum porro quia velit esse, libero debitis magnam qui vero assumenda, aliquid<br> numquam alias. Quasi laboriosam a asperiores? Cupiditate, nam.</p>
</div>
<div class="second-experience">
<strong><p>Job Title</p></strong><br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem corporis eveniet,<br> ex quis excepturi assumenda eius repellendus cumque dolore accusantium<br> nesciunt suscipit enim distinctio, reprehenderit voluptate. Minima eum sapiente quam?<br> Maxime iusto earum porro quia velit esse, libero debitis magnam qui vero assumenda, aliquid<br> numquam alias. Quasi laboriosam a asperiores? Cupiditate, nam.</p>
</div>
</div>
<div class="footer">
<p>© Ella Magnifica</p>
</div>
</section>
</main>
</body>
</html>
265 changes: 265 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,265 @@
* {
margin: 0;
padding: 0;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

html {
scroll-behavior: smooth;
}

main {
display: grid;
height: 100vh;
grid-template:
'introduction' minmax(850px, 1fr)
'about-me' 515px
'portfolio' 650px
'experience' 665px;
}

.introduction {
display: grid;
grid-area: introduction;
background-color: #4EB6AC;
color: white;
border-top: 10px solid #1D313A;
border-bottom: 10px solid #1D313A;
grid-template:
'header' 100px
'content' minmax(100px, 1fr);
gap: 50px;
}

.introduction header {
margin: 20px;
display: grid;
grid-template:
'header buttons' / 250px minmax(250px, 1fr);
}

.introduction h2 {
font-size: 35px;
}

.introduction .buttons {
grid-area: buttons;
display: flex;
justify-content: flex-end;
gap: 50px;
font-size: 20px;
}

.introduction button {
background-color: white;
border: none;
border-radius: 4px;
padding: 0px 20px;
font-weight: bold;
font-size: 20px;
}

.introduction button a {
text-decoration: none;
color: #4EB6AC;
}

.introduction button a:hover {
color: #1D313A;
}

.content {
display: grid;
justify-content: center;
grid-template:
'h1' 380px
'p' 100px;
}

.content h1 {
font-size: 100px;
}

.content p {
font-size: 20px;
}

.content strong {
color: #1D313A;
}

.content span {
text-decoration: underline;
text-decoration-color: #1D313A;
}

.about-me {
display: grid;
grid-area: about-me;
grid-template:
'header' 70px
'text' minmax(60px, 1fr)
'text2' 70px
'lists' 60px;
border-bottom: 10px solid #1D313A;
}

.about-me header {
grid-area: header;
display: flex;
justify-content: center;
font-size: 25px;
color: #1D313A;
margin: 40px;
}

.about-me .text {
display: grid;
grid-area: text;
align-self: center;
justify-self: center;
font-size: 20px;
gap: 10px;
}

.about-me .text2 {
display: grid;
grid-area: text2;
font-size: 20px;
justify-content: center;
align-items: center;
gap: 10px;
}

.about-me .lists {
display: grid;
grid-template:
'first-list second-list';
gap: 0 200px;
margin-right: 180px;
}

.about-me .lists .first-list {
grid-area: first-list;
}

.about-me .lists .second-list {
grid-area: second-list;
}

.about-me strong {
color: #1D313A
}

.portfolio {
display: grid;
grid-area: portfolio;
background-color: #FFEBEE;
grid-template:
'h1' 65px
'title' minmax(65px, 1fr);
border-bottom: 10px solid #1D313A;
}

.portfolio h1 {
grid-area: h1;
display: flex;
justify-content: center;
font-size: 35px;
color: #1D313A;
margin: 40px;
}

.portfolio .title {
display: grid;
grid-template:
'div div div';
justify-content: center;
align-items: center;
gap: 40px;
}

.portfolio .title h2 {
font-size: 40px;
}

.portfolio .title div {
display: grid;
height: 400px;
width: 280px;
border: 10px solid #AE1457;
border-radius: 5px;
background-color: #FBFFFC;
padding: 25px;
font-size: 20px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.portfolio .title a {
display: grid;
font-size: 17px;
font-weight: bold;
color: #AE1457;
text-decoration-color: #AE1457;
justify-content: center;
}

.portfolio .title a:hover {
text-decoration-color: #1D313A;
color: #1D313A;
}

.portfolio .title button {
border: none;
border-radius: 5px;
padding: 5px;
font-weight: bold;
color: white;
background-color: #AE1457;
}

.portfolio .title button p {
font-size: 20px;
}

.experience {
display: grid;
grid-area: experience;
grid-template:
'h1' 135px
'job-title' minmax(80px, 1fr)
'footer' 80px;
}

.experience h1 {
text-align: center;
font-size: 40px;
color: #1D313A;
align-self: center;
}


.experience .job-title {
display: grid;
justify-content: center;
align-items: center;
grid-template:
'first-experience' 200px
'second-experience' 200px;
}

.experience p {
font-size: 20px;
}

.experience strong {
color: #1D313A;
}

.experience .footer {
display: grid;
color: white;
background-color: #1D313A;
align-items: center;
padding: 30px;
}