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.
The Story of Gautam Adani click here
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.......
Hello,
ReplyDeleteBrother I have watched your video about how to remove encrypted java from blogger theme. But it is not working on my theme named "medium ui" by sora templates. Please I you can help me so please answer me as soon as possible.
WOW
ReplyDeletePost a Comment