locked
how to locked header on upper part to whole screen? RRS feed

  • Question

  • User-1026236167 posted

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm6.aspx.cs" Inherits="WebApplication15.WebForm6" %>

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">

    <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
    <link href="bootstrap-3.3.7-dist/css/bootstrap-theme.min.css" type="text/css" rel="stylesheet" />

    <link rel="stylesheet" href="bxslider-4-4.2.12/bxslider-4-4.2.12/src/css/jquery.bxslider.css" />

    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <script src='https://kit.fontawesome.com/a076d05399.js'></script>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>


    <script src="bxslider-4-4.2.12/bxslider-4-4.2.12/src/js/jquery.bxslider.js"></script>

    <script>
    $(document).ready(function () {
    $('.slider').bxSlider({
    auto: true
    });
    });
    </script>

    <script src="jquery-2.1.4.js"></script>
    <link rel="stylesheet" type="text/css" href="styles.css" />


    <title></title>
    </head>

    <style>

    .container-fluid

    body {
    font: 400 1.4rem 'Lato', Verdana, Helvetica, sans-serif;
    }
    .btn-change{
    height: 50px;
    width: 100px;
    background: lightseagreen;
    margin: 20px;
    float: left;
    box-shadow: 0 0 1px #ccc;
    -webkit-transition: all 0.5s ease-in-out;
    border: 0px;
    color: #fff;
    }
    .btn-change:hover{
    -webkit-transform: scale(1.1);
    background: #31708f;
    }
    .btn-change2{
    height: 50px;
    width: 100px;
    background: #31708f ;
    margin: 20px;
    float: left;
    border:0px;
    color:#fff;
    box-shadow: 0 0 1px #ccc;
    -webkit-transition-duration: 0.5s;
    -webkit-transition-timing-function: ease-out;
    -webkit-transform-origin: 0 0;
    box-shadow:0px 0px 0 100px lightseagreen inset;
    }
    .btn-change2:hover{
    -webkit-box-shadow:0px 0px 0 0px lightseagreen inset;
    -webkit-transform: scale(1);
    }

    body {
    font-family: Arial, Helvetica, sans-serif;
    }

    .flip-card {
    background-color: transparent;
    width: 500px;
    height: 300px;
    perspective: 1000px;
    }

    .flip-card-inner {
    ;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.9s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    }

    .flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
    }

    .flip-card-front, .flip-card-back {
    ;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    }

    .flip-card-front {
    background-color: #bbb;
    color: black;
    }

    .flip-card-back {
    background-color: #2980b9;
    color: white;
    transform: rotateY(180deg);
    }


    .pageload-overlay {
    ;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    visibility: hidden;
    }

    .pageload-overlay.show {
    visibility: visible;
    }

    .pageload-overlay svg {
    ;
    top: 0;
    left: 0;
    }

    .pageload-overlay svg path {
    fill: #fff;
    }

    body {
    margin: 0;
    padding: 0;
    width:100vw;
    height: 100vh;
    background-color: #eee;
    }
    .content {
    display: flex;
    justify-content: center;
    align-items: center;
    width:100%;
    height:100%;
    }
    .loader-wrapper {
    width: 100%;
    height: 100%;
    ;
    top: 0;
    left: 0;
    background-color: #242f3f;
    display:flex;
    justify-content: center;
    align-items: center;
    }
    .loader {
    display: inline-block;
    width: 30px;
    height: 30px;
    ;
    border: 4px solid #Fff;
    animation: loader 2s infinite ease;
    }
    .loader-inner {
    vertical-align: top;
    display: inline-block;
    width: 100%;
    background-color: #fff;
    animation: loader-inner 2s infinite ease-in;
    }
    @keyframes loader {
    0% { transform: rotate(0deg);}
    25% { transform: rotate(180deg);}
    50% { transform: rotate(180deg);}
    75% { transform: rotate(360deg);}
    100% { transform: rotate(360deg);}
    }
    @keyframes loader-inner {
    0% { height: 0%;}
    25% { height: 0%;}
    50% { height: 100%;}
    75% { height: 100%;}
    100% { height: 0%;}
    }


    </style>


    <body>

    <form id="form1" runat="server">

    <div class ="row" style="height:70px; background-color:blueviolet;">

    header

    </div>


    <div class="row" style="height:250px; background-color:#00CC66;">
    <div class="slider">


    <img src="Resources/140-1402510_twitter-logo-white-twitter-logo-svg.png" height="400" width="100%" />
    <img src="Resources/abb.jpg" height="400" width="100%" />

    </div>

    </div>
    <br />
    <br />
    <br />
    <div class="container">
    <div class="row">
    <button class="btn-change" style="margin-top:140px; margin-left:470px;">Button</button>
    <button class="btn-change2" style="margin-top:140px; margin-left:8px;">Button</button></div></div>

    <div class="row" style="height:300px; background-color:#CFCFCF;">
    <h3 style="margin-left:450px;">LET THE NUMBER SPEAKS FOR US</h3>
    <div class="col-sm-3" style="margin-top:20px; margin-left:150px;">
    <i class="material-icons" style=" color: #CC0000; font-size:90px;">
    person
    </i><h3>7000+<br /></h3>
    <h6>Highly Specialized Employees</h6>
    </div>
    <div class="col-sm-3" style="margin-top:20px; margin-left:70px;">
    <i class="material-icons" style=" color: #CC0000; font-size:90px;">
    public
    </i><h3>90+<br /></h3>
    <h6>Countries Worldwide</h6></div>
    <div class="col-sm-3" style="margin-top:20px;">
    <i class="material-icons" style=" color: #CC0000; font-size:90px;">
    local_shipping
    </i><h3>2900+<br /></h3>
    <h6>finished Projects</h6></div>
    </div>

    <div class="row">
    <center><h1>Our Speciality</center>
    <center>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum iusto eaque qui illo cumque officia </center>
    <center>nobis assumenda odit perferendis ipsam dolore.</center>
    </div>

    <div class="row" style="margin-top:40px; margin-left:150px;">
    <div class="col-sm-5" style="margin-left:px;">
    <div class="flip-card">
    <div class="flip-card-inner">
    <div class="flip-card-front">
    <img src="img_4_colored.webp" alt="Avatar" style="width:500px;height:300px;">
    </div>
    <div class="flip-card-back">
    <h1>John Doe</h1>
    <p>Architect & Engineer</p>
    <p>We love that guy</p>
    </div>
    </div>
    </div>
    </div>


    <div class="col-sm-5" style="margin-left:15px;">
    <div class="flip-card">
    <div class="flip-card-inner">
    <div class="flip-card-front">
    <img src="img_1_colored.webp" alt="Avatar" style="width:500px;height:300px;">
    </div>
    <div class="flip-card-back">
    <h1>John Doe</h1>
    <p>Architect & Engineer</p>
    <p>We love that guy</p>
    </div>
    </div>
    </div>
    </div>
    </div>

    <div class="row" style="margin-top:15px; margin-left:150px;">
    <div class="col-sm-5" style="margin-left:px;">
    <div class="flip-card">
    <div class="flip-card-inner">
    <div class="flip-card-front">
    <img src="img_2_colored.webp" alt="Avatar" style="width:500px;height:300px;">
    </div>
    <div class="flip-card-back">
    <h1>John Doe</h1>
    <p>Architect & Engineer</p>
    <p>We love that guy</p>
    </div>
    </div>
    </div>
    </div>

    <div class="col-sm-5" style="margin-left:15px;">
    <div class="flip-card">
    <div class="flip-card-inner">
    <div class="flip-card-front">
    <img src="img_3_colored.webp" alt="Avatar" style="width:500px;height:300px;">
    </div>
    <div class="flip-card-back">
    <h1>John Doe</h1>
    <p>Architect & Engineer</p>
    <p>We love that guy</p>
    </div>
    </div>
    </div>
    </div>
    </div>

    <div class="content">
    <img src="" />
    </div>

    <div class="loader-wrapper">
    <span class="loader"><span class="loader-inner"></span></span>
    </div>
    <script>
    $(window).on("load",function(){
    $(".loader-wrapper").fadeOut("slow");
    });
    </script>

    <div class="row" style="height:500px; background-color:; margin-top:100px;">
    <div class="col-sm-6"> <h1 style="font-size:50px; margin-top:40px; margin-left:160px;">Let's grow </h1><br />

    <b style="font-size:50px; margin-top:px; margin-left:160px;">together </b><br /><br /><br />
    <p style="margin-left:160px;">Magnam iure fugit recusandae nobis a amet, officiis laboriosam repudiandae?<br /><br /> Quis nostrum numquam ducimus quo ab laboriosam qui expedita, cupiditate <br /><br />ex, sed dignissimos facere provident dolores, eius distinctio quas aliquid.<br />
    <br /><br />
    <span class="glyphicon glyphicon-ok"></span>&nbsp;Magnam iure fugit recusandae<br /><br />
    <span class="glyphicon glyphicon-ok"></span>&nbsp;Officiis laboriosam repudiandae<br /><br />
    <span class="glyphicon glyphicon-ok"></span>&nbsp;Quis nostrum numquam</p>
    </div>


    </div>

    </form>
    </body>
    </html>

    Wednesday, May 6, 2020 12:21 PM

Answers

  • User-1330468790 posted

    Hi prabhjot1313,

     

    The key point about fixed header is ";" in CSS style.

    According to the html codes you posted, I add a CSS class for locking header.

    More details, you could refer to below codes. Focus on the codes in yellow background (Two areas, one in header style section and another one is in the html section for fixed header).

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <!-- Some css files from CDN --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"/> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.css" /> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" /> <script src='https://kit.fontawesome.com/a076d05399.js'></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js"></script> <script> $(document).ready(function () { $('.slider').bxSlider({ auto: true }); }); </script> <script src="jquery-2.1.4.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <style type="text/css"> .header { width: 100%; ; /* Stay in place */ z-index: 1; /* Sit on top*/ padding: 10px 0; top: 0; height: 70px; background-color: blueviolet; } .container-fluid body { font: 400 1.4rem 'Lato', Verdana, Helvetica, sans-serif; } .btn-change { height: 50px; width: 100px; background: lightseagreen; margin: 20px; float: left; box-shadow: 0 0 1px #ccc; -webkit-transition: all 0.5s ease-in-out; border: 0px; color: #fff; } .btn-change:hover { -webkit-transform: scale(1.1); background: #31708f; } .btn-change2 { height: 50px; width: 100px; background: #31708f; margin: 20px; float: left; border: 0px; color: #fff; box-shadow: 0 0 1px #ccc; -webkit-transition-duration: 0.5s; -webkit-transition-timing-function: ease-out; -webkit-transform-origin: 0 0; box-shadow: 0px 0px 0 100px lightseagreen inset; } .btn-change2:hover { -webkit-box-shadow: 0px 0px 0 0px lightseagreen inset; -webkit-transform: scale(1); } body { font-family: Arial, Helvetica, sans-serif; } .flip-card { background-color: transparent; width: 500px; height: 300px; perspective: 1000px; } .flip-card-inner { ; width: 100%; height: 100%; text-align: center; transition: transform 0.9s; transform-style: preserve-3d; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); } .flip-card:hover .flip-card-inner { transform: rotateY(180deg); } .flip-card-front, .flip-card-back { ; width: 100%; height: 100%; backface-visibility: hidden; } .flip-card-front { background-color: #bbb; color: black; } .flip-card-back { background-color: #2980b9; color: white; transform: rotateY(180deg); } .pageload-overlay { ; width: 100%; height: 100%; top: 0; left: 0; visibility: hidden; } .pageload-overlay.show { visibility: visible; } .pageload-overlay svg { ; top: 0; left: 0; } .pageload-overlay svg path { fill: #fff; } body { margin: 0; padding: 0; width: 100vw; height: 100vh; background-color: #eee; } .content { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; } .loader-wrapper { width: 100%; height: 100%; ; top: 0; left: 0; background-color: #242f3f; display: flex; justify-content: center; align-items: center; } .loader { display: inline-block; width: 30px; height: 30px; ; border: 4px solid #Fff; animation: loader 2s infinite ease; } .loader-inner { vertical-align: top; display: inline-block; width: 100%; background-color: #fff; animation: loader-inner 2s infinite ease-in; } @keyframes loader { 0% { transform: rotate(0deg); } 25% { transform: rotate(180deg); } 50% { transform: rotate(180deg); } 75% { transform: rotate(360deg); } 100% { transform: rotate(360deg); } } @keyframes loader-inner { 0% { height: 0%; } 25% { height: 0%; } 50% { height: 100%; } 75% { height: 100%; } 100% { height: 0%; } } </style> <title></title> </head> <body> <form id="form1" runat="server"> <div class="header" > header </div> <div class="row" style="height: 250px; background-color: #00CC66; margin-top: 70px;"> <div class="slider"> <img src="Resources/140-1402510_twitter-logo-white-twitter-logo-svg.png" height="400" width="100%" /> <img src="Resources/abb.jpg" height="400" width="100%" /> </div> </div> <br /> <br /> <br /> <div class="container"> <div class="row"> <button class="btn-change" style="margin-top: 140px; margin-left: 470px;">Button</button> <button class="btn-change2" style="margin-top: 140px; margin-left: 8px;">Button</button> </div> </div> <div class="row" style="height: 300px; background-color: #CFCFCF;"> <h3 style="margin-left: 450px;">LET THE NUMBER SPEAKS FOR US</h3> <div class="col-sm-3" style="margin-top: 20px; margin-left: 150px;"> <i class="material-icons" style="color: #CC0000; font-size: 90px;">person </i> <h3>7000+<br /> </h3> <h6>Highly Specialized Employees</h6> </div> <div class="col-sm-3" style="margin-top: 20px; margin-left: 70px;"> <i class="material-icons" style="color: #CC0000; font-size: 90px;">public </i> <h3>90+<br /> </h3> <h6>Countries Worldwide</h6> </div> <div class="col-sm-3" style="margin-top: 20px;"> <i class="material-icons" style="color: #CC0000; font-size: 90px;">local_shipping </i> <h3>2900+<br /> </h3> <h6>finished Projects</h6> </div> </div> <div class="row"> <center><h1>Our Speciality</center> <center>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum iusto eaque qui illo cumque officia </center> <center>nobis assumenda odit perferendis ipsam dolore.</center> </div> <div class="row" style="margin-top: 40px; margin-left: 150px;"> <div class="col-sm-5" style="margin-left: px;"> <div class="flip-card"> <div class="flip-card-inner"> <div class="flip-card-front"> <img src="img_4_colored.webp" alt="Avatar" style="width: 500px; height: 300px;"> </div> <div class="flip-card-back"> <h1>John Doe</h1> <p>Architect & Engineer</p> <p>We love that guy</p> </div> </div> </div> </div> <div class="col-sm-5" style="margin-left: 15px;"> <div class="flip-card"> <div class="flip-card-inner"> <div class="flip-card-front"> <img src="img_1_colored.webp" alt="Avatar" style="width: 500px; height: 300px;"> </div> <div class="flip-card-back"> <h1>John Doe</h1> <p>Architect & Engineer</p> <p>We love that guy</p> </div> </div> </div> </div> </div> <div class="row" style="margin-top: 15px; margin-left: 150px;"> <div class="col-sm-5" style="margin-left: px;"> <div class="flip-card"> <div class="flip-card-inner"> <div class="flip-card-front"> <img src="img_2_colored.webp" alt="Avatar" style="width: 500px; height: 300px;"> </div> <div class="flip-card-back"> <h1>John Doe</h1> <p>Architect & Engineer</p> <p>We love that guy</p> </div> </div> </div> </div> <div class="col-sm-5" style="margin-left: 15px;"> <div class="flip-card"> <div class="flip-card-inner"> <div class="flip-card-front"> <img src="img_3_colored.webp" alt="Avatar" style="width: 500px; height: 300px;"> </div> <div class="flip-card-back"> <h1>John Doe</h1> <p>Architect & Engineer</p> <p>We love that guy</p> </div> </div> </div> </div> </div> <div class="content"> <img src="" /> </div> <div class="loader-wrapper"> <span class="loader"><span class="loader-inner"></span></span> </div> <script> $(window).on("load", function () { $(".loader-wrapper").fadeOut("slow"); }); </script> <div class="row" style="height: 500px; background-color: ; margin-top: 100px;"> <div class="col-sm-6"> <h1 style="font-size: 50px; margin-top: 40px; margin-left: 160px;">Let's grow </h1> <br /> <b style="font-size: 50px; margin-top: px; margin-left: 160px;">together </b> <br /> <br /> <br /> <p style="margin-left: 160px;"> Magnam iure fugit recusandae nobis a amet, officiis laboriosam repudiandae?<br /> <br /> Quis nostrum numquam ducimus quo ab laboriosam qui expedita, cupiditate <br /> <br /> ex, sed dignissimos facere provident dolores, eius distinctio quas aliquid.<br /> <br /> <br /> <span class="glyphicon glyphicon-ok"></span>&nbsp;Magnam iure fugit recusandae<br /> <br /> <span class="glyphicon glyphicon-ok"></span>&nbsp;Officiis laboriosam repudiandae<br /> <br /> <span class="glyphicon glyphicon-ok"></span>&nbsp;Quis nostrum numquam </p> </div> </div> </form> </body> </html>

    Demo:

     

    Moreover, I suggest you try Carousel-Bootstrap which is a slideshow component for cycling through elements—images or slides of text.

     

    Hope this can help you.

    Best regards,

    Sean

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, May 7, 2020 2:58 AM

All replies

  • User-1330468790 posted

    Hi prabhjot1313,

     

    The key point about fixed header is ";" in CSS style.

    According to the html codes you posted, I add a CSS class for locking header.

    More details, you could refer to below codes. Focus on the codes in yellow background (Two areas, one in header style section and another one is in the html section for fixed header).

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <!-- Some css files from CDN --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"/> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.css" /> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" /> <script src='https://kit.fontawesome.com/a076d05399.js'></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js"></script> <script> $(document).ready(function () { $('.slider').bxSlider({ auto: true }); }); </script> <script src="jquery-2.1.4.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <style type="text/css"> .header { width: 100%; ; /* Stay in place */ z-index: 1; /* Sit on top*/ padding: 10px 0; top: 0; height: 70px; background-color: blueviolet; } .container-fluid body { font: 400 1.4rem 'Lato', Verdana, Helvetica, sans-serif; } .btn-change { height: 50px; width: 100px; background: lightseagreen; margin: 20px; float: left; box-shadow: 0 0 1px #ccc; -webkit-transition: all 0.5s ease-in-out; border: 0px; color: #fff; } .btn-change:hover { -webkit-transform: scale(1.1); background: #31708f; } .btn-change2 { height: 50px; width: 100px; background: #31708f; margin: 20px; float: left; border: 0px; color: #fff; box-shadow: 0 0 1px #ccc; -webkit-transition-duration: 0.5s; -webkit-transition-timing-function: ease-out; -webkit-transform-origin: 0 0; box-shadow: 0px 0px 0 100px lightseagreen inset; } .btn-change2:hover { -webkit-box-shadow: 0px 0px 0 0px lightseagreen inset; -webkit-transform: scale(1); } body { font-family: Arial, Helvetica, sans-serif; } .flip-card { background-color: transparent; width: 500px; height: 300px; perspective: 1000px; } .flip-card-inner { ; width: 100%; height: 100%; text-align: center; transition: transform 0.9s; transform-style: preserve-3d; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); } .flip-card:hover .flip-card-inner { transform: rotateY(180deg); } .flip-card-front, .flip-card-back { ; width: 100%; height: 100%; backface-visibility: hidden; } .flip-card-front { background-color: #bbb; color: black; } .flip-card-back { background-color: #2980b9; color: white; transform: rotateY(180deg); } .pageload-overlay { ; width: 100%; height: 100%; top: 0; left: 0; visibility: hidden; } .pageload-overlay.show { visibility: visible; } .pageload-overlay svg { ; top: 0; left: 0; } .pageload-overlay svg path { fill: #fff; } body { margin: 0; padding: 0; width: 100vw; height: 100vh; background-color: #eee; } .content { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; } .loader-wrapper { width: 100%; height: 100%; ; top: 0; left: 0; background-color: #242f3f; display: flex; justify-content: center; align-items: center; } .loader { display: inline-block; width: 30px; height: 30px; ; border: 4px solid #Fff; animation: loader 2s infinite ease; } .loader-inner { vertical-align: top; display: inline-block; width: 100%; background-color: #fff; animation: loader-inner 2s infinite ease-in; } @keyframes loader { 0% { transform: rotate(0deg); } 25% { transform: rotate(180deg); } 50% { transform: rotate(180deg); } 75% { transform: rotate(360deg); } 100% { transform: rotate(360deg); } } @keyframes loader-inner { 0% { height: 0%; } 25% { height: 0%; } 50% { height: 100%; } 75% { height: 100%; } 100% { height: 0%; } } </style> <title></title> </head> <body> <form id="form1" runat="server"> <div class="header" > header </div> <div class="row" style="height: 250px; background-color: #00CC66; margin-top: 70px;"> <div class="slider"> <img src="Resources/140-1402510_twitter-logo-white-twitter-logo-svg.png" height="400" width="100%" /> <img src="Resources/abb.jpg" height="400" width="100%" /> </div> </div> <br /> <br /> <br /> <div class="container"> <div class="row"> <button class="btn-change" style="margin-top: 140px; margin-left: 470px;">Button</button> <button class="btn-change2" style="margin-top: 140px; margin-left: 8px;">Button</button> </div> </div> <div class="row" style="height: 300px; background-color: #CFCFCF;"> <h3 style="margin-left: 450px;">LET THE NUMBER SPEAKS FOR US</h3> <div class="col-sm-3" style="margin-top: 20px; margin-left: 150px;"> <i class="material-icons" style="color: #CC0000; font-size: 90px;">person </i> <h3>7000+<br /> </h3> <h6>Highly Specialized Employees</h6> </div> <div class="col-sm-3" style="margin-top: 20px; margin-left: 70px;"> <i class="material-icons" style="color: #CC0000; font-size: 90px;">public </i> <h3>90+<br /> </h3> <h6>Countries Worldwide</h6> </div> <div class="col-sm-3" style="margin-top: 20px;"> <i class="material-icons" style="color: #CC0000; font-size: 90px;">local_shipping </i> <h3>2900+<br /> </h3> <h6>finished Projects</h6> </div> </div> <div class="row"> <center><h1>Our Speciality</center> <center>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum iusto eaque qui illo cumque officia </center> <center>nobis assumenda odit perferendis ipsam dolore.</center> </div> <div class="row" style="margin-top: 40px; margin-left: 150px;"> <div class="col-sm-5" style="margin-left: px;"> <div class="flip-card"> <div class="flip-card-inner"> <div class="flip-card-front"> <img src="img_4_colored.webp" alt="Avatar" style="width: 500px; height: 300px;"> </div> <div class="flip-card-back"> <h1>John Doe</h1> <p>Architect & Engineer</p> <p>We love that guy</p> </div> </div> </div> </div> <div class="col-sm-5" style="margin-left: 15px;"> <div class="flip-card"> <div class="flip-card-inner"> <div class="flip-card-front"> <img src="img_1_colored.webp" alt="Avatar" style="width: 500px; height: 300px;"> </div> <div class="flip-card-back"> <h1>John Doe</h1> <p>Architect & Engineer</p> <p>We love that guy</p> </div> </div> </div> </div> </div> <div class="row" style="margin-top: 15px; margin-left: 150px;"> <div class="col-sm-5" style="margin-left: px;"> <div class="flip-card"> <div class="flip-card-inner"> <div class="flip-card-front"> <img src="img_2_colored.webp" alt="Avatar" style="width: 500px; height: 300px;"> </div> <div class="flip-card-back"> <h1>John Doe</h1> <p>Architect & Engineer</p> <p>We love that guy</p> </div> </div> </div> </div> <div class="col-sm-5" style="margin-left: 15px;"> <div class="flip-card"> <div class="flip-card-inner"> <div class="flip-card-front"> <img src="img_3_colored.webp" alt="Avatar" style="width: 500px; height: 300px;"> </div> <div class="flip-card-back"> <h1>John Doe</h1> <p>Architect & Engineer</p> <p>We love that guy</p> </div> </div> </div> </div> </div> <div class="content"> <img src="" /> </div> <div class="loader-wrapper"> <span class="loader"><span class="loader-inner"></span></span> </div> <script> $(window).on("load", function () { $(".loader-wrapper").fadeOut("slow"); }); </script> <div class="row" style="height: 500px; background-color: ; margin-top: 100px;"> <div class="col-sm-6"> <h1 style="font-size: 50px; margin-top: 40px; margin-left: 160px;">Let's grow </h1> <br /> <b style="font-size: 50px; margin-top: px; margin-left: 160px;">together </b> <br /> <br /> <br /> <p style="margin-left: 160px;"> Magnam iure fugit recusandae nobis a amet, officiis laboriosam repudiandae?<br /> <br /> Quis nostrum numquam ducimus quo ab laboriosam qui expedita, cupiditate <br /> <br /> ex, sed dignissimos facere provident dolores, eius distinctio quas aliquid.<br /> <br /> <br /> <span class="glyphicon glyphicon-ok"></span>&nbsp;Magnam iure fugit recusandae<br /> <br /> <span class="glyphicon glyphicon-ok"></span>&nbsp;Officiis laboriosam repudiandae<br /> <br /> <span class="glyphicon glyphicon-ok"></span>&nbsp;Quis nostrum numquam </p> </div> </div> </form> </body> </html>

    Demo:

     

    Moreover, I suggest you try Carousel-Bootstrap which is a slideshow component for cycling through elements—images or slides of text.

     

    Hope this can help you.

    Best regards,

    Sean

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, May 7, 2020 2:58 AM
  • User-1151440187 posted

    Use only navbar-fixed-top class of bootstrap.

    Ex : 

    <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
    <div class="navbar-header">
    <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Page 1</a></li>
    <li><a href="#">Page 2</a></li>
    <li><a href="#">Page 3</a></li>
    </ul>
    </div>
    </nav>

    Hope it'll be help full to you.

    Thanks!

    Tuesday, May 12, 2020 4:56 AM