Portfolio Glass Website Using Only HTML and CSS
In This Post We will create a glass portfolio website using html and CSS. Here we also provide video tutorial. so you can understand easily. let's begin.
How to Create Glass Website Only Using HTML and CSS
Html File For Glass Website
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Glass Website</title>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="glass.css" />
</head>
<body>
<main>
<section class="glass">
<div class="dashboard">
<div class="user">
<img id="img0" src="mukesh.jpg"/>
<h3>Mukesh Gehlot</h3>
<p>Pro Coder</p>
</div>
<div class="links">
<div class="link">
<img class="img1" src="instgram.png"/>
<h2>Instagram</h2>
</div>
<div class="link">
<img class="img1" src="pintrest.png"/>
<h2>Pintrest</h2>
</div>
<div class="link">
<img class="img1" src="facebook.png"/>
<h2>Facebook</h2>
</div>
<div class="link">
<img class="img1" src="coding 1.png"/>
<h2>Website</h2>
</div>
</div>
</div>
<div class="skill">
<div class="status">
<h1>ACTIVE SKILLS</h1>
<input type="text" />
</div>
<div class="cards">
<div class="card">
<img class="img2" src="blogger.png"/>
<div class="card-info">
<h2>Blogger</h2>
<p>Latest Version</p>
<div class="progress"></div>
</div>
<h2 class="percentage">60%</h2>
</div>
<div class="card">
<img class="img2" src="html5.png"/>
<div class="card-info">
<h2>HTML 5</h2>
<p>Latest Version</p>
<div class="progress"></div>
</div>
<h2 class="percentage">60%</h2>
</div>
<div class="card">
<img class="img2" src="css3.png"/>
<div class="card-info">
<h2>CSS 3</h2>
<p>Latest Version</p>
<div class="progress"></div>
</div>
<h2 class="percentage">60%</h2>
</div>
<div class="card">
<img class="img2" src="js.png"/>
<div class="card-info">
<h2>JAVASCRIPT</h2>
<p>Latest Version</p>
<div class="progress"></div>
</div>
<h2 class="percentage">60%</h2>
</div>
</div>
</div>
</section>
</main>
</body>
</html>
CSS File For Glass Website
* {
margin: 0;
padding: 0;
box-sizing: border-box;
/* border: 1px solid red; */
}
main {
font-family: "Poppins", sans-serif;
background: linear-gradient(to right top, #65dfc9, #6cdbeb);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.glass {
background: whitesmoke;
min-height: 85vh;
width: 65%;
border-radius: 2rem;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3));
display: inline-block;
}
.dashboard {
display: flex;
align-items: center;
background: linear-gradient( to right bottom, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3));
border-radius: 2rem;
position: relative;
flex-direction: column;
z-index: 2;
}
.user {
display: flex;
flex-direction: column;
align-items: center;
}
.img {
margin-top: 3px;
height: 70px;
width: 70px;
border-radius: 50%;
}
h2 {
font-weight: 500;
font-size: 1rem;
padding: 1rem;
opacity: 0.8;
color: #658ec6;
cursor: pointer;
}
p {
color: #658ec6;
font-weight: 500;
opacity: 0.8;
}
#img0 {
margin-top: 5px;
height: 70px;
width: 70px;
border-radius: 50%;
}
.img1 {
height: 40px;
width: 40px;
border-radius: 1px;
}
.img2 {
height: 105px;
width: 105px;
border-radius: 10px;
}
.links {
display: flex;
justify-content: center;
align-items: center;
}
.link {
display: flex;
padding: 0.5rem 1rem;
align-items: center;
}
.skill {
display: flex;
justify-content: center;
flex-direction: column;
}
.status {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
margin-bottom: 1rem;
}
h1 {
color: #397ed8;
font-weight: 600;
font-size: 2rem;
opacity: 0.8;
}
h3 {
color: #426696;
font-weight: 600;
opacity: 0.8;
}
.status input {
background: linear-gradient( to right bottom, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3));
border: none;
width: 50%;
padding: 0.5rem;
border-radius: 2rem;
}
.cards {
display: flex;
justify-content: space-evenly;
}
.card {
flex-direction: column;
display: flex;
background: linear-gradient( to left top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.5));
border-radius: 1rem;
margin: 0.5rem 0rem;
padding: 2rem;
max-height: 17rem;
margin-bottom: 1rem;
box-shadow: 6px 6px 20px rgba(122, 122, 122, 0.212);
transition: transform 0.3s;
}
.card:hover {
transform: translateY(-15px);
}
.progress {
background: linear-gradient(to right top, #65dfc9, #6cdbeb);
width: 100%;
height: 20%;
border-radius: 1rem;
position: relative;
overflow: hidden;
}
.progress::after {
content: "";
width: 100%;
height: 100%;
background: rgb(236, 236, 236);
position: absolute;
left: 60%;
}
.percentage {
font-weight: bold;
background: linear-gradient(to right top, #65dfc9, #6cdbeb);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
Comment down your doubt.......
0 Comments