Skip to content

faruq's pull request #92

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
yemixbn wants to merge 2 commits into
base: main
Choose a base branch
from
Open

faruq's pull request #92

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4606c96
completed
yemixbn May 16, 2024
7295676
completed
yemixbn May 16, 2024
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
Binary file added images/01_lc1_6663_resized.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
100 changes: 89 additions & 11 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,91 @@
<!DOCTYPE html>
<html lang="en">
<head>
<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" />
<title>Full Stack Portfolio</title>
</head>
<body>

</body>
</html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ella Magnifica - Full-Stack Developer</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="first-container">
<header>
<div class="site-title">Ella Magnifica</div>
<nav>
<ul>
<li><a href="#about-me">About Me</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#experience">Experience</a></li>
</ul>
</nav>
</header>
<main>
<section id="hero">
<h1>Hiring A Full-Stack Developer?</h1>
<p>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.</p>
</section>
</main>

<section id="about-me">
<h2>About Me</h2>
<div class="intro-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat, magna id pulvinar vulputate, lacus risus interdum nulla, eu gravida augue mi vel purus. Aenean nulla mi, placerat eu odio id, ultrices accumsan nunc. Mauris luctus rutrum dolor, nec aliquet felis hendrerit et. Cras neque ligula, cursus ac neque et, lobortis tempus neque. Donec pulvinar, lectus quis interdum congue, velit.</p>
</div>
<section id="technical-skills">
<h3>Technical Skills</h3>
<ul>
<li>HTML & CSS</li>
<li>Javascript</li>
<li>Typescript</li>
<li>React</li>
<li>Redux</li>
<li>NodeJS</li>
</ul>
</section>

</section>



<section id="portfolio">
<h2>Portfolio</h2>
<div class="project-card">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat, magna id pulvinar vulputate.</p>
<a href="details.html" class="btn read-more">Read More</a>
<a href="https://github.com" class="repo">GitHub Repo</a>
</div>
<div class="project-card">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat, magna id pulvinar vulputate.</p>
<a href="details.html" class="btn read-more">Read More</a>
<a href="https://github.com" class="repo">GitHub Repo</a>
</div>
<div class="project-card">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat, magna id pulvinar vulputate.</p>
<a href="details.html" class="btn read-more">Read More</a>
<a href="https://github.com" class="repo">GitHub Repo</a>
</div>
</section>



<section id="experience">
<h2>Experience</h2>
<div class="job">
<h3>Job Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat, magna id pulvinar vulputate, lacus risus interdum nulla, eu gravida augue mi vel purus. Aenean nulla mi, placerat eu odio id, ultrices accumsan nunc. Mauris luctus rutrum dolor, nec aliquet felis hendrerit et. Cras neque ligula, cursus ac neque et, lobortis tempus neque. Donec pulvinar, lectus quis interdum congue, velit.</p>
</div>
<div class="job">
<h3>Job Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat, magna id pulvinar vulputate, lacus risus interdum nulla, eu gravida augue mi vel purus. Aenean nulla mi, placerat eu odio id, ultrices accumsan nunc. Mauris luctus rutrum dolor, nec aliquet felis hendrerit et. Cras neque ligula, cursus ac neque et, lobortis tempus neque. Donec pulvinar, lectus quis interdum congue, velit.</p>
</div>
</section>


<footer class="footer">
<p>© Ella Magnifica</p>
</footer>
</div>
</body>
</html>
209 changes: 209 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,209 @@
body, html {
margin: 0;
padding: 0;
scroll-behavior: smooth;
font-family: 'Arial', sans-serif;

}
.first-container{
margin-left: 15px;
margin-right: 15px;
}

header {
background-color: #004d40;
color: white;
padding: 20px 0;
text-align: center;
}

.site-title {
font-size: 24px;
margin-bottom: 10px;
}

nav ul {
list-style-type: none;
padding: 0;
}

nav ul li {
display: inline;
margin-right: 20px;
}

nav ul li a {
color: white;
text-decoration: none;
font-size: 16px;
}

#hero {
background-color: #00897b; /* Lighter teal, similar to the header */
color: white;
text-align: center;
padding: 50px 20px;
}

#hero h1 {
font-size: 28px;
margin-bottom: 10px;
}

#hero p {
font-size: 16px;
}

@media (min-width: 600px) {
header {
padding: 20px 10%; /* Responsive padding */
}
}

#about-me {
background-color: #f9f9f9;
padding: 20px;
font-family: Arial, sans-serif;
text-align: center;
}

#about-me h2 {
color: #333;
font-size: 24px;
margin-bottom: 10px;
}

.intro-text p {
font-size: 16px;
line-height: 1.5;
color: #666;
margin-bottom: 20px;
}

#technical-skills {
font-family: Arial, sans-serif;
margin: 20px;
padding: 20px;
background-color: #f9f9f9;
}

#technical-skills h3 {
font-size: 18px;
margin-bottom: 10px;
}

#technical-skills ul {
list-style-type: none;
padding: 0;
column-count: 2;
column-gap: 20px;
}

#technical-skills li {
font-size: 16px;
line-height: 1.5;
}


#portfolio {
background-color: #f8f8f8;
padding: 20px;
text-align: center;
}

.project-card {
background-color: #ffffff;
border: 2px solid #d81b60;
padding: 15px;
margin: 10px;
display: inline-block;
width: 300px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.project-card h3 {
color: #333;
}

.project-card p {
color: #666;
font-size: 14px;
margin: 10px 0;
}

.btn, .read-more{
display: block;
width: calc(40px);
padding: 10px;
margin-top: 5px;
background-color: #d81b60;
color: white;
text-decoration: none;
text-align: center;
border-radius: 5px;
transition: background-color 0.3s;
}

.repo{
width: 40px;
margin-top: 5px;
background-color: white;
color: red;
text-decoration: underline;
text-align: center;
}
#experience {
font-family: Arial, sans-serif;
background-color: #fff;
padding: 20px;
margin: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
text-align: center;
}

#experience h2 {
font-size: 24px;
color: #333;
margin-bottom: 15px;
}

.job h3 {
font-size: 20px;
color: #444;
margin-bottom: 5px;
}

.job p {
font-size: 16px;
color: #666;
line-height: 1.5;
}




.btn:hover {
background-color: #b0004d;
}


.btn {
display: inline-block;
padding: 10px 20px;
margin-top: 10px;
background-color: #ce1515;
color: white;
text-decoration: none;
border-radius: 5px;
text-align: center;

}

.btn:hover {
background-color: #0056b3;
}

.footer{
background-color: #004d40;
padding: 20px 0;
}