Skip to content

Instantly share code, notes, and snippets.

@biniama

biniama/index.html

Created March 6, 2023 22:41
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save biniama/ec3ae3d85fbcb3cf3a8a57035ae0bb8e to your computer and use it in GitHub Desktop.
Save biniama/ec3ae3d85fbcb3cf3a8a57035ae0bb8e to your computer and use it in GitHub Desktop.
Download ZIP
Kidan portfolio
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="main.css" />
<title>Kidan's Portfolio</title>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-black fixed-top">
<div class="container-fluid">
<a class="navbar-brand text-white" href="#">
<i class="fa-solid fa-code fax5 fa-2x"></i>
<h3>Kidan.Lakew</h3>
</a>
<button
class="navbar-toggler border border-1 text-white"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon text-white"></span>
</button>
<div
class="collapse navbar-collapse justify-content-end"
id="navbarNav"
>
<ul class="navbar-nav gap-3">
<li class="nav-item">
<a class="nav-link text-white" href="#hero-section">Home</a>
</li>
<li class="nav-item">
<a
class="nav-link active text-white"
aria-current="page"
href="./coffee-project/index.html"
target="_blank"
>
Projects
</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#skills">Skills</a>
</li>
</ul>
</div>
</div>
</nav>
<div id="hero-section" class="container d-flex flex-column justify-content-around align-items-center">
<div class="row">
<h1 class="text-capitalize text-center">
<img src="./img/hello.gif" style="width: 50px" alt="hand shake" />
hello, welcome to my portfolio!
</h1>
</div>
<div class="row">
<p class="w-50" style="font-size: 1.5vw">
I'm Kidan - a motivated and dedicated Web development student at DCI.
it is My very first portfolio and I did my best to make it beautiful.
I studied public health back in a days but now I am very interested in
Tech world.
</p>
</div>
</div>
</div>
<!-- social-media icons -->
<div
class="social-media glyphicon img-thumbnail bg-secondary d-flex justify-content-center gap-5"
>
<i class="fa-brands fa-instagram"></i>
<i class="fa-brands fa-github"></i>
<i class="fa-brands fa-facebook"></i>
</div>
<!-- Educational Background -->
<div id="education" class="container mb-5 d-flex flex-column justify-content-center align-items-center">
<h2 class="text-center">Educational Background</h2>
<div class="row d-flex justify-content-around gap-5 m-3">
<div class="col-sm-3 div1">
<h4 class="text-center">Bachelor</h4>
<p>
I studied for four years at the University of Gondar in Ethiopia.
</p>
</div>
<div class="col-sm-3 div2">
<h4 class="text-center">Web development</h4>
<p>I am currently learning at Digital Career Institute(DCI).</p>
</div>
<div class="col-sm-3 div3">
<h4 class="text-center">Self-Studies</h4>
<p>I do Self-Studies on python for six month.</p>
<p>I also took free courses on coursera on product management</p>
</div>
</div>
<!-- Skills -->
<h2 id="skills" class="text-center">Skills</h2>
<div class="row">
<div class="col-sm-3 d-flex justify-content-center">
<i class="fa-5x fa-brands fa-html5"></i>
</div>
<div class="col-sm-3 d-flex justify-content-center">
<i class="fa-5x fa-brands fa-css3-alt"></i>
</div>
<div class="col-sm-3 d-flex justify-content-center">
<i class="fa-5x fa-brands fa-bootstrap"></i>
</div>
<div class="col-sm-3 d-flex justify-content-center">
<i class="fa-5x fa-brands fa-python"></i>
</div>
</div>
</div>
<!-- Footer -->
<div class="container mt-5">
<div class="row d-flex justify-content-around gap-5">
<div class="col-sm-3 div1">
<h4 class="text-center">My Portfolio</h4>
<p>
Designed and built with care.And also I would like to thank my
teachers for their help to understand the code behind this website.
And also my-self manage to do it.
</p>
<p>copy right reserved</p>
</div>
<div class="col-sm-3 div2">
<h2>Links</h2>
<a class="nav-link" href="#">Home</a>
<a class="nav-link active" aria-current="page" href="#">
Projects
</a>
<a class="nav-link" href="#">Skills</a>
<a class="nav-link" href="#">Contact</a>
</div>
<div class="col-sm-3 div3">
<h2>Skills</h2>
<ul class="list-unstyled d-flex flex-column gap-2">
<li class="list-item">HTML</li>
<li class="list-item">CSS</li>
<li class="list-item">bootstrap</li>
<li class="list-item">Python</li>
<li class="list-item">Canva</li>
</ul>
</div>
</div>
<button id="backToTop" title="Go to top"><a href="#hero-section">Top</a></button>
</div>
<!-- js link from bootstrap -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
crossorigin="anonymous"
></script>
<!-- Link for font-awesome -->
<script
src="https://kit.fontawesome.com/de54da300b.js"
crossorigin="anonymous"
></script>
</body>
</html>
Raw
main.scss
//variables
$purple: #976dd1;
$success: #ff006e;
$primary: #a5b3cc84;
$secondary: #e5e5e5;
@import "./node_modules/bootstrap/scss/bootstrap.scss";
@import url("https://fonts.googleapis.com/css2?family=Londrina+Shadow&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Love+Ya+Like+A+Sister&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Love+Light&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap");
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
font-size: 62.5%;
}
body {
font-family: "Roboto", sans-serif;
font-size: 1.8rem;
#hero-section {
max-width: 100% !important;
height: 87vh;
width: 100%;
margin-top: 5rem;
background-image: url(./img/Screenshot\ from\ 2023-03-06\ 15-00-48.png);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
padding-top: 10rem;
h1 {
font-family: "Love Ya Like A Sister", cursive;
font-size: 6rem;
color: $secondary;
font-weight: 900;
text-align: center;
width: 100%;
text-shadow: 0 -1px 4px #fff, 0 -2px 10px #ff0, 0 -10px 20px #ff8000,
0 -18px 40px #f00, 3px 2px 2px rgba(206, 89, 55, 0);
}
.img-me {
margin-top: 20rem;
margin-left: 50%;
}
p {
letter-spacing: 0.1rem;
font-size: 3rem;
color: $secondary;
font-weight: 900;
margin-top: 40rem;
margin-left: 10rem;
}
}
.social-media i:hover {
color: #ef233c;
}
@media screen and (max-width: 299px) {
.glyphicon {
font-size: 1.2em;
}
}
@media screen and (min-width: 300px) and (max-width: 799px) {
.glyphicon {
font-size: 2em;
}
}
@media screen and (min-width: 800px) {
.glyphicon {
font-size: 4em;
}
}
#education {
background-color: #976dd1;
max-width: 100% !important;
height: 80vh;
h2 {
font-size: 4rem;
text-shadow: 2px 2px 0px white;
}
h4 {
font-size: 3rem;
}
p {
font-size: 2rem;
}
div {
border-radius: 3rem;
}
.div1 {
background-color: $secondary;
}
.div2 {
background-color: black;
color: white;
}
.div3 {
background-color: $secondary;
}
}
#backToTop {
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
font-size: 18px;
border: none;
outline: none;
background-color: black !important;
color: white !important;
cursor: pointer;
padding: 2rem;
border-radius: 5rem;
}
}
h3 {
font-family: "Love Light", cursive;
font-size: 3rem;
}
a:hover {
color: green !important;
}
a {
font-size: 1.8rem !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment