Responsive Template using HTML CSS

Hello coders,

In this article, you will learn to create a responsive template using HTML CSS.

Follow these simple steps to make a fully responsive template:

1) Open any code editor like Visual Studio.
2) Create HTML, CSS files and put them in your project folder which you create.
3) Link the CSS File With HTML File.
4) Copy the HTML code, which I gave below, and paste it into the HTML which you create.

HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <!--www.codeithub.com-->
    <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>Template</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <div class="bg">
        <section class="top">
            <header>
                <a href="#">codeithub.com</a>
            </header>
            <h1><span>Best</span> Coding Experience</h1>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi aliquid ratione ipsam deleniti porro dolorum dolore unde cupiditate quasi ipsum?</p>
            <div class="form-container">
              <form action="">
                 <div class="form-left">
                    <label for="city">Enter your Name</label>
                    <input type="text" name="city" id="city">
                    <p>Example:"Arun Kumar"</p>
                 </div>
                <input type="button" value="Register">
               </form>
            </div>
        </section>
       </div>
</body>
</html>

CSS Code:

@import url('https://fonts.googleapis.com/css2?family=Montserrat:[email protected];700&display=swap');

body{
    font-family: 'Montserrat', sans-serif;
    margin: 0;
}
.bg{
    background-image: url('bg1.jpg');
    background-position: center;
    color: white;
    text-align: center;
    padding-bottom: 4em;
    background-size: cover;
}
header{
    padding: 1em 0;
}
.bg a{
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.2rem;
}
section{
    margin: 0 1em;
}
h1{
    font-size: 2.5rem;
    margin: 2em 0 1.2em;
}
h1 span{
    text-transform: uppercase;
    display: block;
    font-size: 1.4rem;
    position: relative;
    z-index: 1;
}
h1 span::before{
    content: '';
    position: absolute;
    width: 3em;
    background: #7c817d;
    height: .4em;
    bottom: 0;
    z-index: -1;
    margin-left: -.3em;
}
.bg p{
    font-weight: bold;
    margin: 0 1em 3em;
}
.form-container{
    background-color: white;
    margin: 2em -1em 0;
    padding: 2em;
}
label{
    color: #0b551d;
    font-weight: bold;
    display: block;
    margin-bottom: 1em;
    font-size: 1.2em;
}
input[type=text]{
    border: 1px solid #0f5c22;
    width: 100%;
    padding: 1em;
    box-sizing: border-box;
    border-radius: .5em;
    margin-top: 1.2em;
}
.form-container p{
    color: gray;
    margin-bottom: 1.5em;
    font-weight: normal;
    font-size: .9em;
    margin-top: .3em;
}
input[type=button]{
    background-color: #ca320c;
    border: none;
    width: 100%;
    color: white;
    font-weight: bold;
    padding: 1em 0;
    border-radius: .5em;
    font-size: 1.3em;
    cursor: pointer;
}
input[type=button]:hover{
    background-color: #d18e12;
}
h2{
    text-transform: uppercase;
    position: relative;
}
p{
    line-height: var(--leading);
}
@media(min-width: 730px){
    section{
        margin: 0 4em;
    }
    .form-container{
        margin: 2em -4em 0;
    }
}
@media(min-width: 930px){
    .bg{
        text-align: left;
    }
    .bg p{
        font-weight: bold;
        margin: 0 0 3em;
    }
    .bg section{
        width: 65%;
    }
    .form-container{
        margin: 2em 0 0;
        padding: 2em;
        border-radius: .5em;
        box-shadow: 10px 10px 10px rgba(0, 0, 0, .3);
    }
    form{
        display: flex;
    }.form-left{
        width: 70%;
    }
    label{
        margin: 0;
    }
    input[type="button"]{
        height: fit-content;
        font-size: 1.1em;
        margin-left: 1em;
        margin-top: 2.2em;
        padding: .7em 0;
        width: 30%;
    }
    .bg p{
        margin-bottom: 0;
    }
    h2{
        margin: 0;
    }
}
.top{
    animation: fadeIn 2s forwards;
}
@keyframes fadeIn{
    from{
     opacity: 0;
     transform: translateY(-2em);
    }
    to{
     opacity: 1;
     transform: translateY(0);
    }
}

OUTPUT

See also  Hand-drawn Styled HTML Elements In CSS - Doodle.CSS

More Examples:

Social Media Icons using HTML and CSS

Image 3D Sliders using HTML AND CSS

Responsive Price Table using HTML and CSS

Leave a Reply

Your email address will not be published. Required fields are marked *