Skip to main content

Posts

Showing posts from June, 2021

SLIDER 2 Using HTML, CSS ,and Javascript

  WATCH PREVIEW: FULL CODE: <html lang="en"> <head>     <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>Document</title>     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">     <style>         *{             margin: 0;             padding: 0;         }         body{             background-image: url(p.jpg);             background-repeat: no-repeat;             background-size: cover; ...

SLIDER USING HTML, CSS, and Javascript

WATCH THE YOUTUBE PREVIEW: MOVING SLIDER: The moving slider contains two divs. The first div displays the full image and the second one has the selection tabs. On clicking them our display image moves to the specified image.  HTML:     <div id="main">         <div id="show">             <img src="a1.jpg">             <img src="a2.jpg">             <img src="a3.jpg">             <img src="a4.jpg">         </div>         <div id="select">             <div class="item">                 <a href="#" onclick="allot(1);">                     <img src="a1.jpg" alt="">               ...

Aesthetic Login & Sign-up page | HTML, CSS, & Javascript

Take a tour of our final login and sign-up page. HTML CODE: We create three divs- the first one to select from the option of either login or sign-up containing two buttons, the second one with a form for sign-up, and the third one for login. To all the buttons on the page, we provide a single class and for both the forms, a single class is given. CODE:     <div id="options">         <button class="but" style="margin-top: 20px;" onclick="appear();">Login</button>         <button class="but" onclick="sinapp();">Sign-Up</button>         <p>Use G-mail or Facebook account</p>     </div>     <div id="sign" class="formin">         <form id="sin-cont">             <input type="text" name="fn" placeholder="Enter Your First Name" required>             <input typ...