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 e…


This content originally appeared on DEV Community and was authored by Innocent Coder

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 :-


This content originally appeared on DEV Community and was authored by Innocent Coder


Print Share Comment Cite Upload Translate Updates
APA

Innocent Coder | Sciencx (2021-05-17T12:44:26+00:00) Call Screen Glass UI Using HTML & CSS. Retrieved from https://www.scien.cx/2021/05/17/call-screen-glass-ui-using-html-css/

MLA
" » Call Screen Glass UI Using HTML & CSS." Innocent Coder | Sciencx - Monday May 17, 2021, https://www.scien.cx/2021/05/17/call-screen-glass-ui-using-html-css/
HARVARD
Innocent Coder | Sciencx Monday May 17, 2021 » Call Screen Glass UI Using HTML & CSS., viewed ,<https://www.scien.cx/2021/05/17/call-screen-glass-ui-using-html-css/>
VANCOUVER
Innocent Coder | Sciencx - » Call Screen Glass UI Using HTML & CSS. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/05/17/call-screen-glass-ui-using-html-css/
CHICAGO
" » Call Screen Glass UI Using HTML & CSS." Innocent Coder | Sciencx - Accessed . https://www.scien.cx/2021/05/17/call-screen-glass-ui-using-html-css/
IEEE
" » Call Screen Glass UI Using HTML & CSS." Innocent Coder | Sciencx [Online]. Available: https://www.scien.cx/2021/05/17/call-screen-glass-ui-using-html-css/. [Accessed: ]
rf:citation
» Call Screen Glass UI Using HTML & CSS | Innocent Coder | Sciencx | https://www.scien.cx/2021/05/17/call-screen-glass-ui-using-html-css/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.