HTML CSS Create Responsive Website

Responsive web design refers that website must be clearly open on all devices like large screens desktop, laptop, tablet and mobile phones

What is a Responsive Website: 

Responsive websites are those websites, which display the contents clearly on all devices like large screen desktops, laptop, tablet, and mobile phones. Google search engine highly recommend website responsiveness, otherwise, google search engine will ignore your website. and now a day's mostly user's are using a mobile phone for internet purpose, so responsiveness is very important for any website. today we will create a responsive website using HTML and CSS not Bootstrap, CSS Flexbox and CSS Grid system only CSS floats.

responsive website
responsive website

Require tools: 

  1. Google Fonts (Optional)
  2. Font awesome Library 
  3. HD Quality Images 
First of all, create an index.html file and copy the below code and paste the copied code in your index.html file. 

Index.html



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML CSS Responsive Website</title>
    <link rel="stylesheet" href="assets/css/style.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet"> 
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">


</head>
<body>
    <div class="toggle">&times;</div>
    <nav id="nav">
     <ul class="left-ul">
         <li><a href="">Creative</a></li>
     </ul>
     <ul class="right-ul">
         <li><a href="">About Us</a></li>
         <li><a href="">Contact Us</a></li>
         <li><a href="">Services</a></li>
         <li><a href="">Our Aims</a></li>
     </ul>
    </nav>
    <!-- Close nav -->
    <header id="banner">
        <div class="banner-text">
            <h1>We are creative let's build something</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores odit recusandae architecto maiores</p>
            <div class="banner-btn">
                <a href="" class="btn btn-default">Read more &rarr;</a>
            </div>
        </div>
    </header>
    <!-- Close header -->
    <section id="aim">
        <div class="container">
            <h1 class="aimHeading">
                Our Aims
            </h1>
            <p class="aimp">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. At dolorum, consequatur ducimus consectetur laborum aliquid reiciendis nulla non ex corporis eveniet voluptatum vitae ipsum eos omnis corrupti aliquam officia quidem.
            </p>
            <div class="aimbtn">
                <a href="" class="btn btn-default">Start now &rarr;</a>
            </div>
        </div>
    </section>
    <!-- Close aim -->

    <section id="intro">
            <div class="row">
                <div class="col-6">
                 <div class="introImage">
                     <img src="assets/images/owner.jpeg" alt="">
                 </div>
                </div>
                <div class="col-6">
                    <div class="intro">
                 <h3 class="ownerName">Shakil Khan</h3>
                 <strong>Full Stack Developer</strong>
                <p class="ownerIntro">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque commodi perferendis voluptates id consectetur saepe reprehenderit, eos dolore! Unde debitis odit amet voluptatum eius libero ad nobis, animi ipsum nostrum?
                </p>
                </div>
            </div>
            </div>
 
    </section>

    <section id="services">
        <div class="container">
            <div class="servicesHeader">
                <h2>Services</h2>
            </div>
            <div class="row">
                <div class="col-3">
                    <div class="service-icon">
                       <i class="fab fa-adobe"></i>
                    </div>
                    <div class="serviceheader">
                      <h3>Ready to ship</h3>
                    </div>
                    <div class="serivesText">
                     Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos molestias nesciunt quis provident
                    </div>
                </div>

                <div class="col-3">
                        <div class="service-icon">
                           <i class="fab fa-audible"></i>
                        </div>
                        <div class="serviceheader">
                          <h3>Sturday templates</h3>
                        </div>
                        <div class="serivesText">
                         Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos molestias nesciunt quis provident
                        </div>
                    </div>

                    <div class="col-3">
                            <div class="service-icon">
                               <i class="fab fa-app-store"></i>
                            </div>
                            <div class="serviceheader">
                              <h3>Up to date</h3>
                            </div>
                            <div class="serivesText">
                             Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos molestias nesciunt quis provident
                            </div>
                        </div>

                        <div class="col-3">
                                <div class="service-icon">
                                   <i class="far fa-heart"></i>
                                </div>
                                <div class="serviceheader">
                                  <h3>Made with love</h3>
                                </div>
                                <div class="serivesText">
                                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos molestias nesciunt quis provident
                                </div>
                            </div>
            </div>
        </div>
    </section>

    <section id="contact">
        <div class="container">
            <div class="row">
                <div class="col-6">
                    <div class="contact-header">
                        <h3>Contact us</h3>
                        <p>If you have any issue please feel free you can contact us!</p>
                    </div>
                </div>
                <div class="col-6">
                    <form action="">
                        <div class="group">
                            <input type="text" class="control" placeholder="Enter name">
                        </div>
                        <div class="group">
                                <input type="email" class="control" placeholder="Enter email">
                            </div>
                            <div class="group">
                               <textarea name="" class="control" cols="30" rows="10" placeholder="Message"></textarea>
                                </div>
                                <div class="group">
                                    <input type="submit" value="Send &rarr;" class="btn btn-default">
                                </div>
                    </form>
                </div>
            </div>
        </div>
    </section>


    <script>
    
     let btn = document.querySelector(".toggle");
         btn.addEventListener("click", function(){
             let righttUl = document.querySelector(".right-ul");
             if(righttUl.style.display === "none"){
                 righttUl.style.display = "block";
             } else {
                righttUl.style.display = "none";
             }
         })

    </script>
</body>
</html>

Style.css

/* ======
  Styles
====== */

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

:root {

    --colorWhite: #fff;
    --colorBlack: #000;
    --colorGreen: #0f9d58;
}

body {
    font-family: 'Roboto', sans-serif;
}

nav#nav {
    width: 100%;
    height: 65px;
    line-height: 65px;
    background: var(--colorWhite);
    box-shadow: 0 0 10px rgba(0,0,0,.5);
    padding: 0 100px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
}

.left-ul li {
    list-style: none;
    float: left;
}

.left-ul li a {
    text-decoration: none;
    color: var(--colorGreen);
    font-size: 25px;
}

.right-ul li {
    float: right;
    display: inline-block;
}

.right-ul li a {
    text-decoration: none;
    display: block;
    padding: 0 13px;
    color: #333;
    outline: none;
}

.right-ul li a:hover {
    background: var(--colorGreen);
    color: var(--colorWhite);
}

header#banner {
    width: 100%;
    height: 100vh;
    background-image: url("../images/bg1.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    color: var(--colorWhite);
    background-color: rgba(0,0,0,.8);
    background-blend-mode: overlay;
    z-index: -1;

}

.banner-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.banner-text h1 {
    font-size: 50px;
    text-transform: uppercase;
    font-weight: 700;
}

.banner-text p {
    margin: 10px 0;
}

.banner-btn {
    margin-top: 15px;
}

.btn {
    display: inline-block;
    padding: 20px 22px;
    color: var(--colorWhite);
    border: none;
    border-radius: 50px;
    text-decoration: none;
    line-height: 0;
    outline: none;

}

.btn-default {
    background: var(--colorGreen);
}

#aim {
    padding: 60px 0;
    text-align: center;
}

.container {
    padding: 0 100px;
}

.aimHeading {
    font-size: 30px;
    font-weight: 400;
    letter-spacing: 1.3px;
    border-bottom: 1px solid #333;
    color: #333;
    display: inline-block;
    margin: 20px;
    padding-bottom: 10px;
}

.aimbtn {
    margin-top: 20px;
}

.row {
    width: 100%;
}

.row::after {
    clear: both;
    content: "";
    display: table;
}

.col-6 {
    float: left;
    width: 50%;

}

.introImage {
    width: 100%;
    height: 553px;
    overflow: hidden;
}

.introImage img {
    width: 100%;
    height: 100%;
}

.intro {
    width: 100%;
    height: 553px;
    overflow: hidden;
    background: var(--colorGreen);
    color: var(--colorWhite);
    padding: 40px 100px 40px 40px;
}

.ownerName {
    font-size: 26px;
    margin-bottom: 15px;
    display: inline-block;
    border-bottom: 1px solid var(--colorWhite);
    color: var(--colorWhite);
}

.intro strong {
    display: block;
    margin-bottom: 15px;
    font-weight: 300;
}

.ownerIntro {
    letter-spacing: 1.3px;
    font-size: 14px;
}

.col-3 {
    float: left;
    width: 25%;
    text-align: center;
    padding: 15px;
}

#services {
    padding: 50px 0;
}

.service-icon {
    text-align: center;
}

.service-icon i {
    width: 50px;
    height: 50px;
    line-height: 50px;
    display: block;
    border: 1px solid var(--colorGreen);
    border-radius: 50%;
    font-size: 20px;
    text-align: center;
    color: var(--colorGreen);
    margin: 0 auto;
}

.serviceheader {
    margin: 25px 0;
    font-size: 18px;
    font-weight: 200;
    letter-spacing: 1.3px;
    color: #333;
}

.servicesHeader {
    margin-bottom: 20px;
    width: 100%;
    text-align: center;
}

.servicesHeader h2 {
    display: inline-block;
    color: #333;
    border-bottom: 1px solid #333;
    letter-spacing: 1.3px;
}

#contact {
    margin: 50px 0;
}

.contact-header h3 {
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 1.3px;
    color: #333;
    display: inline-block;
    border-bottom: 1px solid #333;
    padding-bottom: 6px;
}

.contact-header p {
     margin-top: 16px;
}

form {
    text-align: right;
}

.group {
    margin-bottom: 15px;
}

.control {
    display: block;
    padding: 15px;
    border-radius: 4px;
    border: 1px solid silver;
    width: 100%;
}

.toggle {
    position: fixed;
    z-index: 3;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 50%;
    background: var(--colorGreen);
    color: var(--colorWhite);
    top: 10px;
    right: 20px;
    cursor: pointer;
    display: none;
}

@media (max-width: 765px){
    nav#nav {
        padding: 0 0;
    }
    .right-ul li {
        float: none;
        display: block;
    }

    .left-ul li {
        float: none;
        display: block;
    }

    .left-ul li a {
        padding-left: 10px;
    }

    .right-ul li a {
        background: var(--colorWhite);
    }

    .toggle {
        display: block;
    }

    .banner-text h1 {
        font-size: 30px;
    }

    .col-6 {
        float: none;
        width: 100%;
        text-align: center;
    }

    .col-3 {
        float: none;
        width: 100%;
        text-align: center;
    }
    
    form {
        margin-top: 25px;
    }

    .container {
        padding: 0 40px;
    }

    .intro {
        padding: 40px;
    }
}


COMMENTS

Name

ajax,2,HTML & CSS,19,JavaScript,1,PHP,11,
ltr
item
webtipstricks: HTML CSS Create Responsive Website
HTML CSS Create Responsive Website
Responsive web design refers that website must be clearly open on all devices like large screens desktop, laptop, tablet and mobile phones
https://1.bp.blogspot.com/-KFBWKQ9aLrQ/XE14f0o_YqI/AAAAAAAABzs/NDXguqPoE-UWMBO5efZmfBSAvpcBgTLkgCLcBGAs/s640/Responsive%2BWebsite-min.png
https://1.bp.blogspot.com/-KFBWKQ9aLrQ/XE14f0o_YqI/AAAAAAAABzs/NDXguqPoE-UWMBO5efZmfBSAvpcBgTLkgCLcBGAs/s72-c/Responsive%2BWebsite-min.png
webtipstricks
https://www.webtipstricks.com/2019/01/responsive-website.html
https://www.webtipstricks.com/
https://www.webtipstricks.com/
https://www.webtipstricks.com/2019/01/responsive-website.html
true
4027471107773963481
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy