Create Customiz Protfolio using HTML & CSS
HTML cod (site.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="site.css">
<title>Document</title>
</head>
<body>
<main>
<section class="container">
<div class="dashboard">
<div class="image">
<img src="person.png" alt="">
<h2>Ayoub Shindi</h2>
</div>
<label for="">Education : IT</label>
<label for="">Work : FullStack web developer</label>
<label for="">Experiance : 3 Year</label>
<label for="">Phone : 0000000000</label>
</div>
<div class="body">
<h2 class="title">Experiance</h2>
<div class="card">
<div class="card_title"><h4>HTML</h4><h4>95%</h4></div>
<div class="bar"></div>
</div>
<div class="card">
<div class="card_title"><h4>HTML</h4><h4>90%</h4></div>
<div class="bar"></div>
</div>
<div class="card">
<div class="card_title"><h4>HTML</h4><h4>80%</h4></div>
<div class="bar"></div>
</div>
<div class="card">
<div class="card_title"><h4>HTML</h4><h4>95%</h4></div>
<div class="bar"></div>
</div>
<div class="card">
<div class="card_title"><h4>HTML</h4><h4>90%</h4></div>
<div class="bar"></div>
</div>
</div>
</section>
</main>
<div class="like"></div>
<div class="like"></div>
<div class="like"></div>
<div class="like"></div>
<div class="like"></div>
<div class="like"></div>
<div class="like"></div>
<div class="like"></div>
<div class="like"></div>
<div class="like"></div>
<div class="like"></div>
<div class="like"></div>
</body>
</html>
CSS code (site.css):-
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
main{
height: 100vh;
background-color: rgba(55, 192, 78, 0.411);
display: flex;
justify-content: center;
align-items: center;
}
.container{
height: 75vh;
width: 60%;
background-color: rgba(255, 255, 255, 0.411);
border-radius: 20px;
z-index: 1;
backdrop-filter: blur(2rem);
box-sizing: border-box;
display: flex;
}
.like{
position: absolute;
}
.like:nth-child(2){
height: 50px;
width: 50px;
border-radius: 50%;
background-color: brown;
top: 15%;
left: 20%;
}
.like:nth-child(3){
height: 100px;
width: 50px;
transform: skew(20deg);
background-color: rgba(255, 0,0);
top: 70%;
left: 40%;
}
.like:nth-child(4){
height: 50px;
width: 100px;
border-radius: 50%;
background-color: rgba(166, 255,0);
top: 40%;
left: 40%;
}
.like:nth-child(5){
height: 50px;
width: 90px;
border-radius: 50%;
background-color: rgba(0, 255,55);
top: 55%;
left: 30%;
}
.like:nth-child(6){
height: 50px;
width: 80px;
border-radius: 50%;
background-color: rgba(255, 0,119);
top: 75%;
left: 30%;
}
.like:nth-child(7){
height: 60px;
width: 100px;
border-radius: 50%;
background-color: rgb(140, 0, 255);
top: 30%;
left: 60%;
}
.like:nth-child(8){
height: 70px;
width: 50px;
border-radius: 50%;
background-color: rgba(179, 99,99);
top: 30%;
left: 30%;
}
.like:nth-child(9){
height: 50px;
width: 90px;
transform: skew(20deg);
background-color: rgba(180, 60,60);
top: 60%;
left: 50%;
}
.like:nth-child(10){
height: 70px;
width: 100px;
border-radius: 50%;
background-color: rgba(144, 192,55);
top: 18%;
left: 48%;
}
.like:nth-child(11){
height: 50px;
width: 60px;
border-radius: 50%;
background-color: rgba(61, 170,85);
top: 60%;
right: 36%;
}
.like:nth-child(12){
height: 60px;
width: 50px;
border-radius: 50%;
background-color: rgba(172, 63,114);
top: 60%;
left: 23%;
}
.like:nth-child(13){
height: 100px;
width: 200px;
border-radius: 50%;
background-color: rgba(117, 62,163);
top: 13%;
left: 65%;
}
.dashboard{
width: 30%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
background-color: rgba(255,255,255,0.173);
border-radius: 20px 0px 0px 20px;
color: rgba(51,48,50);
}
img{
width: 8rem;
height: 8rem;
border-radius: 50%;
}
.body{
width: 70%;
height: 100%;
}
.title{
width: auto;
height: 9vh;
margin: 2vh 5vh;
display: flex;
justify-content: center;
align-items: center;
color: rgba(160, 121, 150);
}
.title::after{
content: '';
display: block;
width: 20%;
height: 2px;
top: 3.5rem;
background-color: white;
position: absolute;
}
.card{
background-color: white;
width: 80%;
height: 3.5rem;
box-sizing: border-box;
border-radius: 10px;
box-shadow: 6px 6px 20px rgba(0,0,0,0.356);
margin: 20px 60px;
padding: 12px;
display: flex;
flex-direction: column;
justify-content: center;
}
.card_title{
width: 100%;
display: flex;
}
h4{
flex: 1;
}
.bar{
position: relative;
width: 100%;
height: 25%;
background-color: rgba(30,40,41);
}
.card:nth-child(2) .bar::after{
content: '';
position: absolute;
width: 95%;
height: 100%;
background-color: rgba(255,255,255,0.61);
}
.card:nth-child(3) .bar::after{
content: '';
position: absolute;
width: 90%;
height: 100%;
background-color: rgba(255,255,255,0.61);
}
.card:nth-child(4) .bar::after{
content: '';
position: absolute;
width: 80%;
height: 100%;
background-color: rgba(255,255,255,0.61);
}
.card:nth-child(5) .bar::after{
content: '';
position: absolute;
width: 95%;
height: 100%;
background-color: rgba(255,255,255,0.61);
}
.card:nth-child(6) .bar::after{
content: '';
position: absolute;
width: 90%;
height: 100%;
background-color: rgba(255,255,255,0.61);
}
subscribe my channel on youtube :- https://www.youtube.com/channel/UC1DFWpD1k1PtxIzYbdBAj6g
Comments
Post a Comment