Home

recent posts

Home / bootstarp page / company website design / html code for website design / Responsive Design / responsive landing page design / Website Design / How to Make respnsive Website using HTML and CSS | Website Design with HTML, CSS and Bootstrap.

How to Make respnsive Website using HTML and CSS | Website Design with HTML, CSS and Bootstrap.

, , , , ,

Introduction

HTML, or HyperText Markup Language, may seem like a cryptic jumble of tags and attributes at first glance. However, it's the magic wand that web developers wave to conjure up the mesmerizing web pages you encounter every day. Think of HTML as the blueprint that architects the structure and content of your website, creating a framework for everything from text and images to interactive forms and links.

Whether you're a seasoned web developer or just starting out, this guide will provide you with valuable insights and practical tips to not only create a visually appealing landing page but also unlock the potential for your website to go viral on social media. So, let's embark on this web design adventure together and discover the secrets behind crafting a web page that not only looks good but also performs exceptionally well in the competitive online banking industry.

Step by step guide

  1. Creating an Html document 
        
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <link rel="stylesheet" href="style.css">

    <!-- Bootstarp Icon CDN link  -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">

    <title>ABC Bank</title>
    <link rel="icon" href="./images/logo.png" type="image/png">
  </head>
  <body>
    
    <nav class="navbar navbar-expand-lg sticky-top">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">
                <img src="./images/logo.png" width="30" height="24">
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggel Navigation">
                <span class="navbar-toggler-icon">&#9776;</span>
            </button>
            
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mb-2 mb-lg-0 ms-auto">
                    <li class="nav-item">
                        <a href="#home" class="nav-link active">Home</a>
                    </li>
                    <li class="nav-item">
                        <a href="#home" class="nav-link active">About</a>
                    </li>
                    <li class="nav-item">
                        <a href="#home" class="nav-link active">Net Banking</a>
                    </li>
                    <li class="nav-item">
                        <a href="#home" class="nav-link active">Services</a>
                    </li>
                    <li class="nav-item">
                        <a href="#home" class="nav-link active">Contact</a>
                    </li>
                </ul>
                <button class="btn login">
                    <a href="#">Login</a>
                </button>
            </div>
        </div>
    </nav>

    <!-- Hero section  -->

    <section id="home">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 hero-section p-5">
                    <img src="./images/Ellipse 1.svg" width="100%" height="100%" alt="" class="back-ground">
                    <h3>Make your online banking exprience wonderful</h3>
                    <span>Let's Begin this beautiful journey</span><br>

                    <button class="btn register">
                        <a href="#">Get Started</a>
                    </button>
                </div>
                <div class="col-lg-6">
                    <img src="./images/Bank-img1.svg" width="100%" height="100%" class="hero-img">
                    <img src="./images/Ellipse 2.svg" width="100%" height="100%" class="back-ground2">
                </div>
            </div>
        </div>
    </section>

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  </body>
</html>
  2. Cerate css file and add this code into your file

    Add this code in to your css file top to inport fonts 

        
@import url('https://fonts.googleapis.com/css2?family=Acme&family=Open+Sans:ital,wght@0,400;1,300;1,400;1,500&family=Poppins:ital,wght@0,300;0,400;0,800;1,200;1,300;1,500;1,700&family=Roboto:ital,wght@0,400;0,500;1,300;1,400&display=swap');

    This code is assign all the colors and the fonts

        
:root{
    --poppins: 'Poppins', sans-serif; 
    --acme: 'Acme', sans-serif;
    --roboto: 'Roboto', sans-serif;
    --primary-color: #5741B9;

}

    Reset your DOM margin and padding 

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

body{
    overflow-x: hidden;
}

    Add this code to your css file to design the navbar 

        
nav{
    width: 100%;
    height: 70px;
    padding: 20px 30px;
    background: var(--primary-color);
}

a{
    text-decoration: none;
}

.nav-item a{
    color: rgba(255, 255, 255, 0.413);
    font-family: var(--poppins);
    font-size: 1em;
    transition: all .4s ease;
}

.nav-link{
    margin-left: 1.3em;
}

.nav-link .active, 
.nav-item a:hover{
    color: #fff;
    font-family: var(--poppins);
    font-size: 1em;
    border-bottom: 1px solid #fff;
}

#navbarSupportedContent{
    background: var(--primary-color);
    color: #fff;
}

.navbar-toggler{
    border: 1px solid #fff;
    color: #fff;
    background: var(--primary-color);
}

.navbar-toggler span{
    color: #fff !important;
    padding-top: 2px !important;
}

.navbar-collapse{
    color: #fff;
}

.btn a{
    border-radius: 50px;
    padding: 8px 25px;
    border: 1px solid #fff;
    margin-left: 10px;
    color: #fff;
    font-family: var(--acme);
    font-size: 1.3em;
}

.btn a:hover{
    background: #fff;
    color: var(--primary-color);
}

@media screen and (max-width: 857px) {
    .nav-link{
        padding-left: 2rem !important;
    }

    .login{
        margin-bottom: 20px !important;
    }
}

    Add this code to look beautiful your hero section 

        
#home{
    width: 100%;
    height: 100%;
    background: var(--primary-color);
    padding-bottom: 2rem;
    margin-bottom: 2rem;
    position: relative;
    z-index: 99;
    overflow-x: hidden;
}

.hero-section h3{
    font-family: var(--acme);
    font-size: 4.7rem;
    color: #fff;
    font-weight: 600;
    
}

.back-ground{
    position: absolute;
    z-index: -1;
    left: -45%;
    bottom: 2rem;
}

.back-ground2{
    position: absolute;
    z-index: -1;
    right: -45%;
    bottom: 2rem;
}

.hero-section button{
    margin-top: 10px;
}

.hero-section span{
    font-size: 1.5rem;
    line-height: 10px;
    color: rgba(255, 255, 255, 0.689);
    margin-bottom: 1rem;
}

.hero-img{
    animation: animate 1s infinite alternate;
}

@keyframes animate {
    0%{
        transform: translateY(0);
    }
    100%{
        transform: translateY(-10px);
    }
}

.hero-section .register{
    font-size: 1rem;
    margin-left: 0;
}

@media screen and (max-width: 441px) {
    .hero-section h3{
        font-size: 3rem;
    }


}

Conclusion

In conclusion, the journey of creating a stunning banking website landing page using HTML, CSS, and Bootstrap has been an enlightening one. We've unraveled the power of these coding languages and frameworks to transform a simple idea into a captivating digital masterpiece.

As you've learned, mastering HTML code for website design is not just about aesthetics but also about functionality and user experience. By paying attention to every detail, from responsive layouts to interactive elements, you can ensure that your website stands out in the competitive online landscape.

As you've learned, mastering HTML code for website design is not just about aesthetics but also about functionality and user experience. By paying attention to every detail, from responsive layouts to interactive elements, you can ensure that your website stands out in the competitive online landscape.

Note: If you like this plz share and subscrive and share with your friends

No comments:

Subscribe to: Post Comments ( Atom )

top navigation

  • Home
  • About
  • Contact
    • Powered by Blogger.