Bladephp: Now with 8+ codeigniter, php, and laravel project 8+ php project From $37/Month From Rs. 2499/Month

How to One Page Website Template Using HTML, CSS and jQuery

by
Category:jquery
jquery html css
How to One Page Website Template Using HTML, CSS and jQuery

Web development is an area in which you have to keep up with the latest technologies and techniques, One page website is a modern website in which there is only one page all the pages like home, about and contact etc.

HTML, CSS and jQuery Code

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

        <script type="text/javascript">
            function scrollto(div)
            {
                $('html,body').animate(
                        {
                            scrollTop: $("#" + div).offset().top
                        }, 'slow');
            }
        </script>
        <style>
            #header
            {
                width:100%;
                margin:0px auto;
                padding:0px;
                text-align:center;
                height:70px;
                line-height:70px;
            }
            #header li
            {
                display:inline-block;
                margin-right:25px;
                font-size:17px;
                color:#084B8A;
                font-weight:bold;
                cursor:pointer;
            }
            #header #site_name
            {
                text-align:left;
                width:680px;
                font-size:35px;
                margin-left:20px;
            }
            #home,#about,#contact, #contact1
            {
                margin-top:100px;
                width:90%;
                height:400px;
                margin-left:5%;
                padding:50px;
                box-sizing:border-box;
                background: #6666ff;
                border-radius:10px;
                color:white;
            }
            #home h1
            {
                font-size:40px;
            }
            #home p
            {
                font-size:20px;
            }
            #about p
            {
                font-size:20px;
            }
            #contact input[type="text"]
            {
                width:250px;
                height:35px;
                padding-left:10px;
                float:left;
                margin-left:80px;
                border:none;
            }
            #contact textarea
            {
                float:left;
                width:250px;
                height:35px;
                margin-left:20px;
                border:none;
                padding-left:10px;
                padding-top:10px;
            }
            #contact input[type="submit"]
            {
                float:left;
                margin-left:20px;
                height:35px;
                width:100px;
                background:none;
                color:white;
                border:1px solid white;
            }
            #contact1 input[type="text"]
            {
                width:250px;
                height:35px;
                padding-left:10px;
                float:left;
                margin-left:80px;
                border:none;
            }
            #contact1 textarea
            {
                float:left;
                width:250px;
                height:35px;
                margin-left:20px;
                border:none;
                padding-left:10px;
                padding-top:10px;
            }
            #contact1 input[type="submit"]
            {
                float:left;
                margin-left:20px;
                height:35px;
                width:100px;
                background:none;
                color:white;
                border:1px solid white;
            }
        </style>
    </head>
    <body>

        <div id="header">
            <li id="site_name">Bladephp.co</li>
            <li onclick="scrollto('home');">HOME</li>
            <li onclick="scrollto('about');">ABOUT</li>
            <li onclick="scrollto('contact');">CONTACT</li>
            <li onclick="scrollto('contact1');">CONTACT1</li>
        </div>

        <div id="home">
            <h1>Demo Of One Page Website Template Using HTML, CSS and jQuery</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer luctus quam quis nibh fringilla sit amet consectetur lectus malesuada. Sed nec libero erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mi nisi, rhoncus ut vestibulum ac, sollicitudin quis lorem. </p>
        </div>

        <div id="about">
            
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer luctus quam quis nibh fringilla sit amet consectetur lectus malesuada. Sed nec libero erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mi nisi, rhoncus ut vestibulum ac, sollicitudin quis lorem. </p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer luctus quam quis nibh fringilla sit amet consectetur lectus malesuada. Sed nec libero erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mi nisi, rhoncus ut vestibulum ac, sollicitudin quis lorem. </p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer luctus quam quis nibh fringilla sit amet consectetur lectus malesuada. Sed nec libero erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mi nisi, rhoncus ut vestibulum ac, sollicitudin quis lorem. </p>
        </div>

        <div id="contact">
            <h1>If you have any question or query you can contact us at or you can fill the form below</h1>
            <input type="text" placeholder="Name">
            <textarea placeholder="Message"></textarea>
            <input type="submit" value="SEND">
        </div>
        
        <div id="contact1">
            <h1>If you have any question or query you can contact us at or you can fill the form below</h1>
            <input type="text" placeholder="Name">
            <textarea placeholder="Message"></textarea>
            <input type="submit" value="SEND">
        </div>

    </body>
</html>


0 Comments


Html code work in comment box


Related Post