Skip to content

done #70

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

done #70

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
83 changes: 82 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!DOCTYPE html>
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
Expand All @@ -8,6 +8,87 @@
<title>Full Stack Portfolio</title>
</head>
<body>
<div class="container">
<header>
<nav class="navigationBar">
<div>
<h3>Nosizo Dube</h3>
</div>
<div class="navigationTabs">
<a href="#aboutMe">About Me</a>
<a href="#portfolio">Portfolio</a>
<a href="#experience">Experience</a>
</div>

</nav>
</header>
<section class="title">
<h1>Hiring A <br> Full-Stack <br> Developer?</h1>
<p>
I have experience with <span>React</span>, <span>NodeJS</span> and <span>Typescript</span>. I would love to work at an
<span id="underline">innovative</span> and <span id="underline">eco-friendly</span> start-up in the <span>sustainable energy sector</span>
</p>
</section>
<section class="aboutMe" id="aboutMe">
<h2 class="sectionTitle">ABOUT ME</h2>
<p class="heading">Introduction</p>
<p class="blockText">
Aliquet nec ullamcorper sit amet risus nullam eget felis eget nunc lobortis mattis aliquam faucibus purus in massa tempor nec feugiat nisl pretium fusce id velit ut tortor pretium viverra suspendisse potenti nullam ac tortor vitae purus faucibus ornare suspendisse sed nisi lacus sed viverra tellus in hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at augue eget arcu dictum varius duis at consectetur lorem donec massa sapien faucibus et molestie ac feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi
</p>
<p class="heading" id="listTitle">Technical Skills</p>
<div class="techSkills">
<ul>
<li>HTML & CSS</li>
<li>Javascript</li>
<li>Typescript</li>
</ul>
<ul>
<li>React</li>
<li>Redux</li>
<li>NodeJS</li>
</ul>
</div>
</section>
<section class="portfolio" id="portfolio">
<div class="sectionTitle">
<h2>Portfolio</h2>
</div>

<div class="smallContainer">
<article class="articleContainer">
<h2 class="sectionTitle">Title</h2>

<p class="blockText">
Convallis convallis tellus id interdum velit laoreet id donec ultrices tincidunt arcu non sodales neque sodales ut etiam sit amet nisl purus in mollis nunc sed id semper risus in hendrerit gravida rutrum quisque non tellus orci ac auctor augue mauris augue neque gravida in fermentum et sollicitudin ac orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam
</p>

<a class="readMoreButton" href="./portfolio.html">Read More</a>
<a href="https://github.com/Nozie6/html-full-stack-portfolio">GitHub Repo</a>
</article>
</div>
</section>

<section class="experience" id="experience">
<h2 class="sectionTitle">Experience</h2>

<p class="heading">Job Title</p>

<p class="blockText">
Convallis convallis tellus id interdum velit laoreet id donec ultrices tincidunt arcu non sodales neque sodales ut etiam sit amet nisl purus in mollis nunc sed id semper risus in hendrerit gravida rutrum quisque non tellus orci ac auctor augue mauris augue neque gravida in fermentum et sollicitudin ac orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam
</p>

<p class="heading" id="heading2">Job Title</p>

<p class="blockText" id="blockText2">
Convallis convallis tellus id interdum velit laoreet id donec ultrices tincidunt arcu non sodales neque sodales ut etiam sit amet nisl purus in mollis nunc sed id semper risus in hendrerit gravida rutrum quisque non tellus orci ac auctor augue mauris augue neque gravida in fermentum et sollicitudin ac orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam
</p>

</section>

<footer>
<p>&copy Nosizo Dube</p>
</footer>
</div>

</body>
</html>
231 changes: 231 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,231 @@
* {
scroll-behavior: smooth;
}

.container {
display: grid;
grid-template-rows: 100px 1fr 1fr 1fr 1fr 30px
}

.heading {
font-weight: bold;
}

.container .navigationBar {
display: grid;
grid-template-columns: 2fr 1fr;
background-color:rgb(8, 164, 164);
color: whitesmoke
}

header {
background-color:rgb(8, 164, 164);
border-top: black 5px solid;
}

.navigationBar h3 {
display: grid;
grid-template-columns: 2fr 1fr;
background-color:rgb(8, 164, 164);
color: whitesmoke;
}

.navigationBar .navigationTabs {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
align-items: center;
gap: 2px;
margin-right: 5px;
text-align: center;
}
.navigationBar .navigationTabs a {
background-color: rgba(245, 245, 245, 0.788);
color:rgb(8, 164, 164) ;
border-radius: 5px;
text-decoration: none;
padding: 2px;
}

.title {
display: grid;
grid-template-columns: 0.5fr 1fr 0.5fr;
grid-template-rows: 0.5fr 0.5fr;
grid-template-areas:
". title ."
". textbox ."
;
background-color: rgb(8, 164, 164);
}
.title h1 {
grid-area: title;
color: whitesmoke;
font-size: 50px;
font-family: sans-serif;
font-weight: bold;
margin-bottom: 0px;

}
.title p {
grid-area: textbox;
color: whitesmoke;
font-family: sans-serif;
}
.title p span {
font-weight: bold;
color: black;

}

.title p #underline {
font-weight: normal;
font-style: italic;
text-decoration: underline black;
color: whitesmoke;


}

.aboutMe {
display: grid;
grid-template-rows: repeat(5, auto);
font-family: sans-serif;
border-top: black 5px solid;
grid-template-areas:
". ABOUTME ."
". intro ."
". texts ."
". listTitle ."
". techSkills .";
grid-template-columns: .5fr 1fr .5fr;
}

.aboutMe h1 {
text-align: center;
}

.aboutMe .techSkills {
display: grid;
grid-template-columns: repeat(2, auto);
grid-area: techSkills;
}

.aboutMe .sectionTitle {
display: grid;
justify-items: center;
text-align: center;
grid-area: ABOUTME;


}
.aboutMe .heading {
grid-area: intro;
}

.aboutMe .blockText {
grid-area: texts;
}

.aboutMe #listTitle {
grid-area: listTitle;
}
.portfolio {
display: grid;
grid-template-rows: 100px 1fr;
border-top: black 5px solid;
font-family: sans-serif;
background-color: rgba(250, 128, 114, 0.199);
}

.portfolio .sectionTitle {
text-align: center;
}
.portfolio .smallContainer {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-bottom: 20px;
}
.portfolio .articleContainer {
display: grid;
border: rgb(179, 0, 45) solid 5px;
border-radius: 5px;
background-color: white;
}
.portfolio .articleContainer a {
justify-items: center;
text-align: center;

}
.portfolio .articleContainer a{
font-size: small;
color: rgb(179, 0, 45);
margin-bottom: 20px;
}
.portfolio .articleContainer .blockText {
margin-left: 5px;
margin-right: 5px;

}
.portfolio .articleContainer .readMoreButton {
border: 0px white solid;
background-color: rgb(179, 0, 45);
border-radius: 5px;
color: whitesmoke;
margin-left: 20%;
margin-right: 20%;
font-size: large;
margin-bottom: 5px;
text-decoration: none;
padding-top: 5px;
}
.experience {
display: grid;
border-top: black 5px solid;
grid-template-columns: .5fr 1fr .5fr;
grid-template-rows: auto;
grid-template-areas:
". sectionTitle ."
". heading ."
". blockText ."
". heading2 ."
". blockText2 ."
;
font-family: sans-serif;
}
.experience .sectionTitle {
grid-area: sectionTitle;
text-align: center;
}
.experience .heading {
grid-area: heading;
}
.experience .blockText {
grid-area: blockText;
}
.experience #heading2 {
grid-area: heading2;
}
.experience #blockText2 {
grid-area: blockText2;
}
footer {
background-color: rgb(1, 67, 67);
color: whitesmoke;

}
footer p {
margin-top: 3px;
margin-left: 2px;
}

@media screen and (max-width: 710px) {
.mainContainer .navBar {
grid-template-columns: 1fr 1fr;
}

.portfolio .smallContainer {
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
}

}