Skip to content

Zainab's Full Stack Portfolio PR #90

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
zainabch123 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Zainab's Full Stack Portfolio PR #90

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
3 changes: 3 additions & 0 deletions .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5502
}
74 changes: 72 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,76 @@
<title>Full Stack Portfolio</title>
</head>
<body>

<main>
<header class="header">
<h2>Ella Magnifica</h2>
<nav class="navigation-bar">
<a href="#about-me">About Me</a>
<a href="#portfolio">Portfolio</a>
<a href="#experience">Experience</a>
</nav>
<div class ="introduction">
<h1>Hiring A <br/> Full-Stack <br/> Developer?</h1>
<p>I have experience with <span>React</span>, <span>NodeJS</span> and <span>TypeScipt</span>. I would love <br/> to work at an <span1>innovative</span1> and <span1>eco-friendly</span1> start up in the <span>sustainable energy <br /> sector</span>.</p>
</div>
</header>
<div id="about-me">
<h2>About Me</h2>
<div class="about-me-intro">
<h3>Introduction</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Similique, animi expedita, odio saepe vero beatae magnam fuga molestias maiores provident, dolore blanditiis numquam unde. Et ullam enim a impedit porro. Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus qui voluptate saepe rerum veniam rem odit architecto reprehenderit facere commodi quas eius quibusdam temporibus eligendi officia reiciendis perferendis, necessitatibus minus!</p>
</div>
<div class="technical-skills">
<h3>Technical Skills</h3>
<ul>
<li>HTML. & CSS</li>
<li>JavaScript</li>
<li>Typescript</li>
</ul>
<ul class="second-skills-list">
<li>React</li>
<li>Redux</li>
<li>NodeJS</li>
</ul>
</div>
</div>
<div id="portfolio">
<h2>Portfolio</h2>
<div class = "portfolio-examples">
<div class= "example1">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed repellat dignissimos fugiat blanditiis, placeat, iste in, nam cumque quae molestiae quaerat ullam provident. Praesentium, saepe maxime quae quibusdam iure tenetur!</p>
<a id="read-more" href="">READ MORE</a>
<a id="git-repo" href="https://github.com/zainabch123">GitHub Repo</a>
</div>
<div class= "example2">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed repellat dignissimos fugiat blanditiis, placeat, iste in, nam cumque quae molestiae quaerat ullam provident. Praesentium, saepe maxime quae quibusdam iure tenetur!</p>
<a id="read-more" href="">READ MORE</a>
<a id="git-repo" href="https://github.com/zainabch123">GitHub Repo</a>
</div>
<div class= "example3">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed repellat dignissimos fugiat blanditiis, placeat, iste in, nam cumque quae molestiae quaerat ullam provident. Praesentium, saepe maxime quae quibusdam iure tenetur!</p>
<a id="read-more" href="">READ MORE</a>
<a id="git-repo" href="https://github.com/zainabch123">GitHub Repo</a>
</div>
</div>
</div>
<div id="experience">
<h2>Experience</h2>
<div class="experience-text1">
<h3>Job Title</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Similique, animi expedita, odio saepe vero beatae magnam fuga molestias maiores provident, dolore blanditiis numquam unde. Et ullam enim a impedit porro. Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus qui voluptate saepe rerum veniam rem odit architecto reprehenderit facere commodi quas eius quibusdam temporibus eligendi officia reiciendis perferendis, necessitatibus minus!</p>
</div>
<div class="experience-text2">
<h3>Job Title</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Similique, animi expedita, odio saepe vero beatae magnam fuga molestias maiores provident, dolore blanditiis numquam unde. Et ullam enim a impedit porro. Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus qui voluptate saepe rerum veniam rem odit architecto reprehenderit facere commodi quas eius quibusdam temporibus eligendi officia reiciendis perferendis, necessitatibus minus!</p>
</div>
</div>
<div class="footer">
<p>© Ella Magnifica</p>
</div>
</main>
</body>
</html>
</html>
213 changes: 213 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,213 @@
* {
box-sizing: border-box;
margin: 0px;
padding: 0px;
scroll-behavior: smooth;
}
main {
height: 100vh;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 500px 1fr 1fr 1fr 40px;
}
header {
background-color: lightseagreen;
text-align: center;
border-top: 6px solid black;
}
header h2 {
display: inline-block;
margin-top: 20px;
color: white;
opacity: 80%;
}
.navigation-bar {
display: inline-block;
margin-left: 30%;
}
.navigation-bar a {
margin-right: 20px;
padding: 10px;
text-decoration: none;
color: lightseagreen;
border: 1px solid white;
background-color: white;
font-weight: bold;
border-radius: 5px;
opacity: 80%;
}
.introduction {
margin-top: 60px;
text-align: start;
margin-left: 38%;
color: white;
opacity: 70%;
}
.introduction h1 {
font-size: 60px;
}
.introduction p {
margin-top: 20px;
}
.introduction span {
color: black;
font-weight: bold;
}
.introduction span1 {
font-style: italic;
text-decoration: solid black underline;
}
#about-me {
display: grid;
background-color: white;
text-align: center;
border-top: 6px solid black;
}
#about-me h2 {
margin-top: 30px;
}
.about-me-intro {
margin-top: 20px;
text-align: start;
margin-left: 38%;
margin-right: 37%;
}
.about-me-intro p {
margin-top: 10px;
}
.technical-skills {
margin-top: 20px;
text-align: start;
margin-left: 38%;
margin-right: 37%;
}
.technical-skills ul {
display: inline-block;
margin-left: 50px;
margin-top: 10px;
margin-bottom: 40px;
}
.technical-skills li {
padding: 2px;
}
.second-skills-list li {
margin-left: 60px;
}
#portfolio {
display: grid;
background-color: rgb(246, 209, 217);
text-align: center;
border-top: 6px solid black;
}
#portfolio h2 {
margin-top: 30px;
}
.portfolio-examples {
margin-top: 20px;
margin-bottom: 40px;
}
.example1 {
display: inline-block;
border: 5px solid rgb(207, 97, 116);
padding: 30px;
width: 250px;
height: 360px;
margin-right: 20px;
background-color: whitesmoke;
text-align: start;
}
.example2 {
display: inline-block;
border: 5px solid rgb(207, 97, 116);
padding: 30px;
width: 250px;
height: 360px;
margin-right: 20px;
background-color: whitesmoke;
text-align: start;
}
.example3 {
display: inline-block;
border: 5px solid rgb(207, 97, 116);
padding: 30px;
width: 250px;
height: 360px;
background-color: whitesmoke;
text-align: start;
}
.example1 h3 {
font-size: 25px;
}
.example1 p {
margin-top: 10px;
margin-bottom: 30px;
}
.example2 h3 {
font-size: 25px;
}
.example2 p {
margin-top: 10px;
margin-bottom: 30px;
}
.example3 h3 {
font-size: 25px;
}
.example3 p {
margin-top: 10px;
margin-bottom: 30px;
}
#read-more {
display: block;
text-decoration: none;
background-color: rgb(207, 97, 116);
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
border-radius: 5px;
color: white;
margin-bottom: 5px;
}
#git-repo {
display: block;
font-size: 12px;
text-align: center;
}
#experience {
display: grid;
background-color: white;
text-align: center;
border-top: 6px solid black;
}
#experience h2 {
margin-top: 30px;
}
.experience-text1 {
margin-top: 20px;
text-align: start;
margin-left: 38%;
margin-right: 37%;
}
.experience-text1 p {
margin-top: 10px;
}
.experience-text2 {
margin-top: 30px;
text-align: start;
margin-left: 38%;
margin-right: 37%;
margin-bottom: 40px;
}
.experience-text2 p {
margin-top: 10px;
}
.footer {
display: grid;
background-color: black;
text-align: start;
color: white;
opacity: 80%;
align-items: center;
}
.footer p {
margin-left: 20px;
}