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
  • What is Hacking and Types Of Hacking | Advantages and Disadvantage of Hacking
    What is Hacking and Types Of Hacking |  Advantages and Disadvantage of Hacking In simple words, hacking is that activity, that is changing the information on someone else’s computer system without permission. It is unauthorized access to computer for some illegal purpose. so, Who does hacking? Hackers are those people who are skilled in computer security and computer expert. By using their technical knowledge, they use computers or modems to enter someone…
  • Best Laptop Under 30000-35000 In 2022 | Best Gamming Laptop
     BEST LAPTOP UNDER 30000-35000 IN 2022Friends, today we will talk about not a lot of good laptop friends. MARKET is a company of many, it is difficult to get a laptop from a company and see which one to take the laptop and which one to choose if the company we like After that there are too many models in it, so it becomes difficult to see. The biggest thing is to take care of the budget, so only friends, I have done my research for you guys and will present you 5 LAPTOPs today, then…
  • How To connect WhatsApp in Pc | What is WhatsApp Web ?
    How to connect Whatsapp in pcWho does not like whatsapp, friends, almost everyone who uses smartphone uses WhatsApp, WhatsApp is the most popular messenger application, WhatsApp has its own different fun using WhatsApp, the world has brought a lot of work to WhatsApp. Friends today, know how to turn on WhatsApp in your PC. Friends, in 2015, WhatsApp launched a VERSION named Whatsapp Web, with the help of which you can open WhatsApp on your PC, so let's know how to do it.What is Whatsapp…
  • How To Save YOUTUBE Video in gallery
    How To Save YOUTUBE Video in gallery How to Save YOUTUBE Video in Gallery?Friends, millions of videos are uploaded daily on YOUTUBE and nowadays the trend is going on. You people of TUBE watch you TUBE videos all day long, but sometimes you like watching a video so much that you would think that this video In any case, if you save it to my phone, then enjoy it because the video is not saved directly in the phone from YOUTUBE, so today I will tell you how to save the phone to YOUTUBE…
  • Facebook Kya Hai | Facebook Ki Puri Jankari
    facebook kya hai | फेसबुक की पूरी जानकारीबहुत सारे लोग कही सालो से फेसबुक चला रहे है FACEBOOK क्या है? इसको चलाते कैसे है बहुत से लोगो ने नाम तो सुना होता है की लेकिन चना नहीं आता अगर आप भी उसमे से है तो आप बिलकुल सही जगह पर आये है  आपको F से लेकर K तक FACEBOOK की पूरी जानकारी दे दूंगा तो आज के लेख में सीखेंगे की FACEBOOK क्या है FACEBOOK की पूरी जानकारी FACEBOOK में अकाउंट कैसे बनाये ?आज कल सभी मोबाइल फ़ोन में FACEBOOK पहले से इंस्टॉल आता…
  • Facebook Page Kaise Banate Hai | How to Create Facebook Page in Hindi
    Facebook Page Kaise Banate Hai | How to CreateFacebook Page in Hindiदोस्तों आज हम बात करेंगे दुनिया की सबसे फेमस सोशल नेटव्रकिंग साइट के बारे में Facebook जी हा दोस्तों इसकी मदद से आप अपने दोस्तों से रिश्तेदारो से जुड़े रह सकते है आज कल लगभग सभी  Internet चलाने वाले लोग Facebook चलाते है तो आइये दोस्तों जानते है की  Facebook पर पेज कैसे बनाते है किस चीज की जरुरत पड़ेगी  Facebook पेज बनाने के लिए  Page बनाने के लिए फेसबुक…
  • Facebook से पैसे कैसे कमाए। Facebook Page से पैसे कैसे कमाए
    Facebook से पैसे कैसे कमाए Facebook Page से पैसे कैसे कमाएदोस्तो आपने टाइटल एक दम सही पढ़ा है Facebook से पैसे कैसे कमाए फेसबुक क्या है ये तो सब लोग जानते ही होंगें मेने Facebook क्या है इस बारे मे पोस्ट भी लिखी हैं  ओर Facebook page क्या है उस बारे में भी पोस्ट लिखी है आज हम बात करेंगे Facebook से ओर Facebook page से पैसे कैसे कमाए तो चलिए शुरू करते है Facebook से पैसे कैसे कमाए?आज में आपको बहुत सारे तरीके बताऊंगा जिससे आप Facebook से पैसे कमा सकते है1. फेसबुक पर प्रोडक्ट्स…
  • Best budget microphone for youtuber
    Best budget microphone for youtuber हेलो दोस्तों कैसे है आप दोस्तों आज हम बात करेंगे बेस्ट माइक्रोफोन की  Best Budget Microphone के बारे में  हम You Tube पर कोई वीडियो देखते है कोई वीडियो हमें बहुत पसंद आया और हमने देखना चालू किया और बाद में पता चलता है की इस वीडियो में तो साउंड ही धीरे रहा है तो हम उस वीडियो को बंद कर लेते है या फिर स्किप कर लेते है You Tube बनाने वाले भी कुछ लोग बिना माइक्रोफोन के वीडियो बनाते है तो उसके साउंड क्लियर नहीं आता…
  • WHEN PUBG BAN IN INDIA
    Pubg Ban in India आखिर जिसका डर था  PUBG लवर्स को वो ही हुआ PUBG  को इंडिया से बैन कर दिया है तो दोस्तों बहुत सारे लोग तो सदमे में चले  गए होंगे मुझे भी अभी अभी न्यूज़ मिली हे की PUBG  को इंडियन गवर्नमेंट ने बैन  कर दिया है तो दोस्तों ऐसे देखें तो अच्छा ही हुआ हे PUBG को बैन  किया हे  गवर्नमेंट का फैसला PUBG  पर दोस्तों बहुत ही महीनो से गवर्नमेंट सोच रही  PUBG  गेम पर कुछ फैसला लिया जाये क्यों की ये गेम पुरे इंडिया में आग की तरह…
  • JIO MART क्या है, ISKE KYA FAYDE HAI ?
    JIO MART क्या है इसके क्या है फायदे   JIO MART " देश की नयी दुकान " जी हां दोस्तों  देश में JIO की अपार  सफलता के बाद जिओ ने अब लांच किया हे JIO MART JIO MART एक ऐसा प्लेटफार्म  है जिसकी सहायता से GROCERY प्रोडक्ट्स आप ऑनलाइन खरीद सकते है वो भी आपके नजदीकी किराना स्टोर से JIO MART सीधा आपको रिटेलर्स से ऑनलाइन जोड़ देगा JIO MART ऐसे  ही काम करेगा जैसे AMAZON,FLICCART काम करते हैइसका लक्ष्य ये ही हे की सीधा रेटेलर्स  से जुड़ जाये…
Trending Search (last 7 days)
Home CSS HTML

Portfolio Glass Website Using Only HTML and CSS

Today Pubg
Today Pubg
January 19, 2022
3 min read
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
Related Posts
  • Portfolio Glass Website Using Only HTML and CSS
    Portfolio Glass Website Using Only HTML and CSS
  • CSS Mix Blend Mode, Mix Blend Mode Black and White
    CSS Mix Blend Mode, Mix Blend Mode Black and White
  • 10 CSS Shorthand Properties: How to Optimize CSS Using Shorthand Properties
    10 CSS Shorthand Properties: How to Optimize CSS Using Shorthand Properties
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.