Skip to content

Day one Html and Css lab workout #23

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

Day one Html and Css lab workout #23

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
1fff24e
Day one Html and Css lab workout
Naol19 Apr 24, 2024
5fbd508
modified index.css file
Naol19 May 10, 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
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
}
3 changes: 0 additions & 3 deletions css/Enabled.svg
View file
Open in desktop

This file was deleted.

17 changes: 17 additions & 0 deletions css/image/Enabled.svg
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.
50 changes: 49 additions & 1 deletion css/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,51 @@
.test {
html,
body {
background-color: aliceblue;
margin: 0% 0.001% 0% 0.001%;
}

.headline-container {
font-family: "Inter", sans-serif;
font-weight: 400;
font-size: 40px;
line-height: 130%;
text-align: center;
color: #172b4d;
}

.headline-container-pos {
color: #34e23c;
}

.headline-container-paragraph {
font-family: "Inter", sans-serif;
font-weight: 400;
font-size: 20px;
line-height: 140%;
text-align: center;
color: #172b4d;
}

.headline-container-socialmedia {
text-align: center;
justify-content: space-around;
}

.flex-container {
display: flex;
flex-direction: column;
}

.main {
width: 351px;
height: 184px;
border-radius: 8px;
}

.main-list {
font-family: "Inter", sans-serif;
font-weight: 600;
font-size: 32px;
line-height: 137%;
color: #3a4a42;
}
70 changes: 69 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,79 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/index.css">
<title>Document</title>
</head>

<body>

<main>
<section class="main">
<nav class="main-list">
<div>

<a href="#">
<img src="./css/image/Enabled.svg" alt="close"></a>

</div>
<div>
<ul>
<li><a href="#portfolio"> Portfolio</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact"> Contact</a></li>
</ul>
</div>
</nav>
</section>
</main>
<section>
<div class="headline-container">
<h1> Benawi Alemayew</h1>
<h2 class="headline-container-pos"> I am a software Engineer</h2>
</div>
<div>
<p class="headline-container-paragraph"> I can help you build a product , feature or website Look through
some of my work and experience! If you
like what you see and have a project you need coded, don’t hesitate to contact me.</p>
</div>
<div class="headline-container-socialmedia">
<a href=""><svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M19.7587 1.27945C19.4253 0.888413 18.8587 0.790654 18.4253 1.08393L16.492 2.38738C15.592 1.44238 14.3253 0.920999 12.9587 0.920999C10.2587 0.920999 8.02532 3.07169 8.02532 5.74377C8.02532 6.1348 8.05865 6.49325 8.15865 6.8517C5.82532 6.36291 4.42532 4.70101 3.89198 1.70307C3.82532 1.31203 3.52532 1.01876 3.12532 0.920999C2.75865 0.82324 2.35865 0.986171 2.12532 1.27945C2.05865 1.34462 -3.44135 8.83946 4.52532 15.1938C3.75865 16.7905 1.45865 18.1591 0.558651 18.6153C0.125318 18.8109 -0.0746825 19.2671 0.0253175 19.7233C0.125318 20.1795 0.525318 20.4728 0.991984 20.4728H2.72532C12.8587 20.4728 17.4587 15.5522 17.5587 4.53808L19.6587 2.5829C20.0587 2.25704 20.092 1.67048 19.7587 1.27945Z"
fill="#505F79" />
</svg></a>
<a href="#"><svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M13.6444 3.86914C10.1556 3.86914 7.28857 6.64258 7.28857 10.0925V19.8333C7.28857 20.2054 7.59946 20.5098 7.97942 20.5098H11.5718C11.9518 20.5098 12.2627 20.2054 12.2627 19.8333V10.363C12.2627 9.61895 12.8844 9.01014 13.6444 9.01014C14.4043 9.01014 15.0261 9.61895 15.0261 10.363V19.8333C15.0261 20.2054 15.3369 20.5098 15.7169 20.5098H19.3093C19.6893 20.5098 20.0001 20.2054 20.0001 19.8333V10.0925C20.0001 6.6764 17.1677 3.86914 13.6444 3.86914Z"
fill="#505F79" />
<path
d="M2.48705 0.892578C1.10535 0.892578 0 1.97472 0 3.32741C0 4.68009 1.10535 5.76224 2.48705 5.76224C3.86874 5.76224 4.97409 4.68009 4.97409 3.32741C4.97409 1.97472 3.86874 0.892578 2.48705 0.892578Z"
fill="#505F79" />
<path
d="M4.28325 7.04785H0.690846C0.310881 7.04785 0 7.35225 0 7.7243V19.8327C0 20.2048 0.310881 20.5092 0.690846 20.5092H4.28325C4.66321 20.5092 4.97409 20.2048 4.97409 19.8327V7.7243C4.97409 7.35225 4.66321 7.04785 4.28325 7.04785Z"
fill="#505F79" />
</svg></a>
<a href="#"><svg width="20" height="17" viewBox="0 0 20 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M18.4042 2.6989L20 1.18571V0.854492H14.4717L10.5317 10.5746L6.04917 0.854492H0.2525V1.18571L2.11667 3.41007C2.29833 3.57444 2.39333 3.8148 2.36917 4.05681V12.7981C2.42667 13.1128 2.32333 13.4366 2.1 13.6654L0 16.188V16.515H5.95417V16.1838L3.85417 13.6654C3.62667 13.4358 3.51917 13.1178 3.565 12.7981V5.23713L8.79167 16.5192H9.39917L13.8933 5.23713V14.2246C13.8933 14.4617 13.8933 14.5104 13.7367 14.6657L12.12 16.216V16.5481H19.9633V16.2169L18.405 14.7045C18.2683 14.6021 18.1975 14.4303 18.2267 14.2634V3.13997C18.1975 2.9723 18.2675 2.8005 18.4042 2.6989Z"
fill="#505F79" />
</svg></a>
<a href="https://github.com/Naol19" target="_blank"><svg width="18" height="21" viewBox="0 0 18 21"
fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M17.9852 8.21083C17.9852 7.09277 17.6192 6.04246 16.9205 5.12768C17.1867 4.24678 17.2532 3.12871 17.1867 1.84124C17.1534 1.29915 16.7209 0.892578 16.1885 0.892578C15.8891 0.892578 13.3604 0.926459 11.8965 2.24781C10.6321 2.01064 9.30128 2.01064 8.00368 2.24781C6.573 0.926459 4.04435 0.892578 3.71163 0.892578C3.17928 0.892578 2.74675 1.29915 2.71348 1.84124C2.61366 3.12871 2.71348 4.24678 2.97965 5.12768C2.28095 6.07634 1.91496 7.12665 1.91496 8.21083C1.91496 10.5825 3.71163 12.717 6.43991 13.7334C6.3401 13.9367 6.27355 14.1739 6.20701 14.411C3.31237 14.1061 1.94823 11.4295 1.88169 11.3279C1.64878 10.8197 1.04989 10.6164 0.550818 10.8874C0.0517425 11.1246 -0.147888 11.7344 0.118286 12.2426C0.184829 12.4121 2.01477 16.0373 6.04065 16.4439V19.4931C6.04065 20.0691 6.47319 20.5096 7.0388 20.5096H12.8614C13.427 20.5096 13.8595 20.0691 13.8595 19.4931V15.4613C13.8595 14.8515 13.7264 14.2755 13.4935 13.7673C16.1885 12.717 17.9852 10.6164 17.9852 8.21083Z"
fill="#505F79" />
</svg></a>
<a href="#"><svg width="15" height="21" viewBox="0 0 15 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M6.54751 20.5096C11.2442 20.5096 14.1667 17.115 14.1667 12.7355C14.1667 11.0844 13.8925 9.59353 11.9817 9.14561C12.4467 7.89666 13.7883 4.28386 13.7883 3.12646C13.7883 2.1072 13.1633 1.25304 12.0492 1.25304C10.2733 1.25304 8.68167 6.29869 8.18334 7.50187C7.7975 6.40986 5.99084 0.892578 4.39834 0.892578C3.16084 0.892578 2.58001 1.76962 2.58001 2.87308C2.58001 4.22583 3.94084 7.73155 4.43417 9.08022C4.18417 8.99194 3.91334 8.91511 3.6375 8.91511C2.70584 8.91511 1.715 10.03 1.715 10.9308C1.715 11.2716 1.91 11.7506 2.03334 12.0685C0.565005 12.4519 4.77463e-06 13.3943 4.77463e-06 14.8157C-0.00416189 17.5817 2.71917 20.5096 6.54751 20.5096ZM10.5725 5.03095C10.7325 4.55932 11.4125 2.56738 12.0492 2.56738C12.3917 2.56738 12.4833 2.90822 12.4833 3.18041C12.4833 3.91196 10.9475 7.95469 10.6083 8.85054L9.255 8.62085L10.5725 5.03095ZM3.83 2.74393V2.74311C3.83 2.28702 4.40751 0.992298 5.67251 4.54788L7.05 8.39117C6.42917 8.34131 5.94751 8.27592 5.64167 8.44512C5.20751 7.34166 3.83 3.85883 3.83 2.74393ZM3.73834 10.2409L3.73917 10.2417C4.905 10.2417 6.41001 13.8659 6.41001 14.3564C6.41001 14.5517 6.215 14.7928 5.98834 14.7928C5.15584 14.7928 2.92667 11.8462 2.92667 11.0493C2.93001 10.7542 3.43167 10.2409 3.73834 10.2409ZM2.39834 13.2407C2.85167 13.2407 4.55917 15.5514 4.55917 16.0418C4.55917 16.2298 4.2525 16.3598 4.09417 16.3598C3.45334 16.3598 3.2025 15.7655 2.06084 14.3907C0.878338 15.5285 2.87667 17.7199 4.38167 17.7199C5.42001 17.7199 6.09667 16.793 5.89417 16.1105C6.04167 16.1105 6.22417 16.1219 6.36 16.0876C6.40417 17.1256 6.7225 18.3631 8.02001 18.4514C8.02001 18.4171 8.10001 18.1792 8.10001 18.1678C8.10001 17.5008 7.67834 16.9188 7.67834 16.2404C7.67834 15.1558 8.54167 14.1063 9.41751 13.4932C9.73584 13.2635 10.1225 13.1213 10.4958 12.9914C10.8825 12.8499 11.2925 12.6848 11.5858 12.4012C11.5417 11.9721 11.3592 11.5928 10.9133 11.5928C9.81084 11.5928 6.11334 11.7465 6.11334 10.0717C6.11334 9.81504 6.11751 9.56983 6.80667 9.56983C8.09251 9.56983 11.3567 9.87634 12.3117 10.6847C13.0317 11.3018 13.2792 15.0217 11.0775 17.3782L11.075 17.379C9.91667 18.6051 8.43584 19.241 6.70834 19.241C4.34417 19.241 2.47667 17.9921 1.5775 15.8579C0.896672 14.1953 1.72917 13.2407 2.39834 13.2407ZM7.14917 12.5508C7.53667 12.6701 7.93417 12.7053 8.33251 12.7813C8.03751 12.9881 7.77584 13.2415 7.52417 13.5128C7.41251 13.1875 7.27667 12.8696 7.14917 12.5508Z"
fill="#505F79" />
</svg></a>
</div>
</section>

</body>

</html>