Call Screen Glass UI Using HTML & CSS

If you're hearing the term "Glassmorpism" for the first time, well... It only just got my attention a few hours before this post so, What is glassmorphism?

Glassmorphism is a new trend which is getting more traction on websites like Dribble, Behance etc and I've seen a couple of awesome designs made using this trendy UI.

Here We Have Call Screen Design Using HTML And CSS.

Source Code:- https://www.websitemakers.xyz/2021/05/call-phone-glass-ui-using-html-css.html

HTML Code

<section>
        <div class="card">
            <div class="face">
                <h3>Innocent Coder</h3>
                <h6>mobile</h6>
                <div class="icon-content">
                    <div style="text-align: center;">
                        <i class="far fa-clock"></i>
                        <h5>Remind me</h5>
                    </div>
                    <div style="text-align: center;">
                        <i class="fas fa-comment"></i>
                        <h5>Message</h5>
                    </div>
                </div>
                <div class="slide-content">
                    <h5>Slide to answer ></h5>
                </div>        
            </div>
        </div>
    </section>

CSS Code

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600&display=swap');
*{
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
}
body{
    overflow: hidden;
    color: #fff;
}
section{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #1c1c25;
    height: 100vh;
}
section::before,
.card::before{
    content: '';
    position: absolute;
    width: 170px;
    height: 170px;
    background: linear-gradient(#f00, #f0f);
    border-radius: 50%;
}
section::before{
    top: 3%;
    left: 55%;
}
.card::before{
    bottom: 2%;
    left: 31%;
    background: linear-gradient(#0098f0, #0457d3);
}

.face{
    width: 250px;
    height: 485px;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.5);
    background-color: rgba(255,255,255,0.05);
    filter: blur(0.2px);
    border-width: 0.1px;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.425);
}
.slide-content{
    width: 120px;
    height: 15px;
    padding: 12px 20px;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.5);
    background-color: rgba(255,255,255,0.05);
    text-align: center;
    margin: 30px auto;
    cursor: pointer;
}
.face h3{

    font-weight: 300;
    font-size: 20px;
    text-align: center;
    margin-top: 100px;
}
.face h6{
    font-weight: 300;
    font-size: 12px;
    text-align: center;
    letter-spacing: 1px;
}
.icon-content{
    margin-top: 180px;
    padding: 0 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.icon-content i{
    font-size: 14px;

}
h5{
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.5px;
}

Note:- visit my youtube channel for frontend tutorials

subscribe to my youtube channel :- https://www.youtube.com/channel/UCR64vQptythbJ1SmI-ub0Rg

Resent post :-

7 rare website with awesome free fonts

Innocent Coder ・ May 15 ・ 2 min read

#webdev