Skip to content

Loza #68

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

Loza #68

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
5cf7324
Done
Oct 11, 2023
e1654e5
Done
Oct 15, 2023
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": 5501
}
98 changes: 97 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,102 @@
<title>Full Stack Portfolio</title>
</head>
<body>

<div class="home">
<div class="header">
<nav class="logo">
<ul>
<li><a href="./index.html">Loza Mamo</a></li>
</ul>
</nav>
<nav class="navigation">
<ul>
<li><a href="#aboutme">About Me</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#experience">Experience</a></li>
</ul>
</nav>
</div>
<div class="main-home">
<h1>Hiring A</h1>
<h1> Full-Stack Developer?</h1>
<h1>DEVELOPER?</h1>
<br>
<p>I have experience with <strong>React</strong> ,<strong> NodeJS </strong>and <strong>Typescript</strong>. I would love to work at an <em>innovative</em> and <em>eco-friendly</em>
start-up in the <strong>sustainable energy sector</strong>.</p>
</div>
</div>
<div class="aboutme" id="aboutme" >
<h2>ABOUT ME</h2>
<br>
<p>Inroduction</p>
<br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde quae eligendi eos consequatur ab repudiandae laudantium qui maxime assumenda, veniam nam voluptate exercitationem dolores enim velit atque, nobis officia repellendus.</p>
<br>
<h4>Technical Skills</h4>
<br>
<div class="technical">
<div class="firstrow">
<ul>
<li>HTML & CSS</li>
<li>Javascript</li>
<li>Typescript</li>
</ul>
</div>
<div class="secondrow">
<ul>
<li>React</li>
<li>Redux</li>
<li>NodeJS</li>
</ul>
</div>
</div>
</div>
<div class="portfolio" id="portfolio">
<h2>PORTFOLIO</h2>
<div class="boxes">
<div class="firstbox redbox">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed deserunt necessitatibus voluptatem vel placeat nemo autem, tempora ut inventore corporis soluta vitae sequi officiis temporibus? Quaerat, nobis sint. Nulla, ducimus?</p>
<br>
<a href="#" class="read">READ MORE</a>
<br>
<br>
<a class="gitrepo" href="https://github.com/loza01">GitHub Repo</a>
</div>
<div class="secondbox redbox">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed deserunt necessitatibus voluptatem vel placeat nemo autem, tempora ut inventore corporis soluta vitae sequi officiis temporibus? Quaerat, nobis sint. Nulla, ducimus?</p>
<br>
<a href="#" class="read">READ MORE</a>
<br>
<br>
<a class="gitrepo" href="https://github.com/loza01">GitHub Repo</a>
</div>
<div class="thirdbox redbox" >
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed deserunt necessitatibus voluptatem vel placeat nemo autem, tempora ut inventore corporis soluta vitae sequi officiis temporibus? Quaerat, nobis sint. Nulla, ducimus?</p>
<br>
<a href="#" class="read">READ MORE</a>
<br>
<br>
<a class="gitrepo" href="https://github.com/loza01">GitHub Repo</a>
</div>
</div>
</div>
<div class="experience" id="experience">
<h2>EXPERIENCE</h2>
<h4>Job Title</h4>
<br>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Totam cum recusandae enim asperiores ex culpa voluptatem? Ipsa cumque modi, eligendi autem reprehenderit molestias exercitationem tenetur non mollitia excepturi beatae voluptatem!</p>
<br>
<h4>Job Title</h4>
<br>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Totam cum recusandae enim asperiores ex culpa voluptatem? Ipsa cumque modi, eligendi autem reprehenderit molestias exercitationem tenetur non mollitia excepturi beatae voluptatem!</p>
<br>
</div>
<div class="footer">
© by Loza
</div>
</div>
</body>
</html>
138 changes: 138 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,138 @@
*{
margin: 0;
box-sizing: border-box;
scroll-behavior: smooth;

}
.home{
background-color: rgb(51, 177, 162);
height: 100vh;
}

.header{
display: grid;
grid-auto-flow: column;
padding: 20px;

}
.logo ul li{
list-style-type: none;
}
.logo ul li a{
color: rgb(255, 255, 255);
text-decoration: none;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
font-size: 30px;
padding-left: -20px;
}
nav ul{
display: grid;
grid-auto-flow: column;
}
.navigation ul li {
list-style-type: none;

}
.navigation ul li a{
text-decoration: none;
color: rgb(51, 177, 162);
background-color: white;
font-family: Arial, Helvetica, sans-serif;
padding: 5px 10px;
border-radius: 5px;

}
.navigation ul li a:hover{
color: gold;
}
.navigation > ul> li:nth-child(1){
padding-left: 250px;
}
.main-home{
display: grid;
place-content: center;
padding: 50px 400px 100px 400px;
color: white;
}
.main-home > h1{
font-size: 60px;
}
.main-home > p > strong{
color: black;
}
.main-home > p > em{
text-decoration: underline black;
}
.aboutme{
min-height: 250px;
padding: 20px 300px 20px 300px ;
height: 1fr;
margin-top: 0;
}
.aboutme> h2{
text-align: center;
}
.technical{
display: grid;
grid-auto-flow: column;
}
.secondrow{
padding-right: 900px;
}
.portfolio{
height: 1fr;
background-color: rgb(238, 213, 218);
padding: 20px 200px 20px 200px;
min-height: 100vh;

}
.portfolio > h2{
display: grid;
text-align: center;
margin-bottom: 20px;
}
.boxes{
display: grid;
grid-auto-flow: column;
gap: 10px;

}
.redbox{
border: solid 5px rgb(162, 26, 87);
border-radius: 4px;
background-color: white;
padding: 20px;
}
.read {
display: grid;
color: rgb(245, 242, 242);
background-color: rgb(162, 26, 87);
padding: 5px 20px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
}
.gitrepo{
color: rgb(162, 26, 87);
display: grid;
padding-left: 10px;
text-align: center;
}
.experience{
min-height: 100vh;
padding: 20px 300px;
height: 1fr;
}
.experience > h2{
display: grid;
padding-bottom: 20px;
text-align: center;
}
.footer{
background-color: rgb(22, 29, 57);
color: white;
height: 40px;
padding: 10px 0 0 10px;
text-align: center;
}