Hindi Wishes Quotes

hindi Wishes,hindi slogan,hindi quotes,hindi birthday status,hinvi song,hindi video songs,hindi me help,hindi tips, hindi photos, hindi movies,hindi text msg

  • Home
  • Typography
  • Safelink
  • Download
  • Pages
  • _About
  • _Contact
  • _Disclaimer
  • _Privacy
Notifications
No new notifications.
Trending Search (last 7 days)
Home CSS HTML

Portfolio Glass Website Using Only HTML and CSS

Today Pubg
Today Pubg
January 19, 2022
---
Generating Links
Please wait a moment. Click the button below if the link was created successfully.

 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.......
CSS HTML
Post a Comment WhatsApp Telegram
Join the conversation
Post a Comment
Post a Comment
Popular Posts
Label
Android 3 Blogging 10 Business News 5 CSS 3 Cyber Security 4 Earning Tips 6 Gaming 2 Google 3 Govt 3 GU_BCA 2 How to 20 HTML 3 Laptop review 1 News 3 Tech News 4 Technology 5 TechTips 16 What is 8 Window 2
Subscribe YouTube
YouTube Photo
Engineer Abusufian
Channels that discuss blogging.
Subscribe
About me
  • My photo Today Pubg
  • Today wishes quotes
Frequently Asked Questions
Can this template be used in WordPress?
For now the WordPress version is not available, you can only use this template on the Blogger platform.
Can we help you with the template installation process?
Of course you can, we will be happy to help you if there are difficulties in the template installation process.
Will you get updates?
Of course you can if there is an update available.
Is there an additional fee for updates?
Nothing, you just pay once and will get free updates forever.
Are you able to use the template for multiple blogs?
Yes, of course you can, all the template products on Gila Temax have unlimited domain aliases that can be used for many blogs without limits.
© 2023 Hindi Wishes Quotes.