Hello everyone

Today i am going to show you how to make working coming soon page in html css and js

check my youtube channel and subscribe if you want to download image with full source

code click the download button and wait for 15 seconds

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Coming Soon Page</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <section class="coming-soon-area">
        <div class="container">
            <div class="cs-content">
                <div class="site-logo">
                    <a href="#">
                        Company<span>Name</span>
                    </a>
                </div>
                <h1>We are coming soon</h1>
                <p>We launch our new website soon. Please stay updated and follow.</p>
                <div class="form">
                    <form action="#">
                        <input type="email" class="email-field" name="email" placeholder="Enter email address" required>
                        <input type="submit" value="Notify Me">
                    </form>
                </div>
                <div class="countdown-timer">
                    <div class="timer-item">
                        <div class="days">
                            <h3>00</h3>
                            <span>Days</span>
                        </div>
                    </div>
                    <div class="timer-item">
                        <div class="hours">
                            <h3>00</h3>
                            <span>Hours</span>
                        </div>
                    </div>
                    <div class="timer-item">
                        <div class="minutes">
                            <h3>00</h3>
                            <span>Minutes</span>
                        </div>
                    </div>
                    <div class="timer-item">
                        <div class="seconds">
                            <h3>00</h3>
                            <span>Seconds</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <script src="app.js"></script>
</body>
</html>

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
}
.coming-soon-area{
    background-image: linear-gradient(#000000bf, #000000bf), url(images/background.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    width: 100%;
    min-height: 100vh;
    color: #fff;
    padding: 5px 0px;
}
.container{
    margin: auto;
    text-align: center;
}
.cs-content{
    max-width: 760px;
    margin: auto;
    padding: 25px 30px;
}
.site-logo{
    margin: 22px 0px;
}
.site-logo a{
    font-size: 30px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
}
.site-logo a span{
    color: #FA5B0F
}
.cs-content h1{
    font-size: 72px;
    font-weight: 900;

}
.cs-content p{
    margin: 10px 35px;
}
.form{
    margin: 50px 0px;
}
.form input{
    background: #ffffff85;
    color: #fff;
    font-size: 18px;
    font-family: 'Roboto', sans-serif;
    border: none;
    outline: none;
    margin: 5px 0px;
    padding: 20px;
    width: 67%;
    border-radius: 5px;
}
.email-field::placeholder{
    color: #fff;
}
.form input[type="submit"]{
    width: 120px;
    background: #FA5B0F;
    color: #fff;
    cursor: pointer;
}
.countdown-timer{
    margin: 35px 0px;
}
.timer-item{
    display: inline-block;
    background: #FA5B0F;
    margin: 5px 3px;
    padding: 20px;
    min-width: 140px;
    font-size: 50px;
    font-weight: 700;
    border-radius: 5px;
}
.timer-item span{
    display: block;
    font-size: 18px;
    font-weight: 500;
}

@media screen and (max-width: 767px){
    .site-logo{
        margin-bottom: 50px;
    }
    .cs-content h1{
        font-size: 50px;
    }
    .cs-content p{
        line-height: 26px;
        margin: 10px 0px;
    }
    .form input[type="email"]{
        width: 100%;
    }
}

Download File

GW_Rabbit

ads

Coming soon page

Hello everyone

Today i am going to show you how to make working coming soon page in html css and js

check my youtube channel and subscribe if you want to download image with full source

code click the download button and wait for 15 seconds

Post a Comment

0 Comments

ad

Search This Blog

Report Abuse

About Me

Featured Posts

Recent Posts

Popular Posts

Random Posts

Contact Form

Recent Posts

Categories

Tags

Random Posts

GW_Rabbit

ads

Coming soon page

Hello everyone

Today i am going to show you how to make working coming soon page in html css and js

check my youtube channel and subscribe if you want to download image with full source

code click the download button and wait for 15 seconds

Post a Comment

0 Comments

ad

Search This Blog

Report Abuse

About Me

Follow us

Featured Posts

Recent Posts

Popular Posts

Random Posts

Contact Form

Recent Posts

Categories

Tags

Random Posts