Skip to main content

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;
        }
        #nav{
            width: 100%;
            height: 60px;
            background-color: rgb(17, 15, 15);
        }
        img{
            height: 100%;
            width: 100%;
        }
        .item{
            height: 30vh;
            width: 25vw;
            margin: 10px;
            box-shadow: 10px 10px 10px black;
            transition: all 0.5s ease-in-out;
            
        }
        .main{
            display: flex;
            align-items: center;
            position: absolute;
            top: 25%;
            left: 10%;
        }
        #fir{
            transform: skewY(10deg);
        }
        #thir{
            transform: skewY(-10deg);
        }
        #sec{
            position: relative;
            top: 30px;
        }
        #fir:hover{
            z-index: 2;
            transform: scale(1.3,1.3);
        }
        #sec:hover{
            z-index: 2;
            transform: scale(1.3,1.3);
        }
        #thir:hover{
            z-index: 2;
            transform: scale(1.3,1.3);
        }
        a{
            color: white;
            text-decoration: none;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 15px;
            font-size: 20px;
        }
        button{
            padding: 10px;
            margin-right: 40px;
            margin-top: 10px;
            border: none;
            border-radius: 8px;
        }
    </style>
</head>
<body>
    <div id="nav" style="display: flex;">
        <div style="background-image: linear-gradient(to right, blue, purple); width: 10%; height: 100%;">
            <h1 style="color: white; margin-left: 15px;">Slider</h1>
        </div>
        <div id="tabs" style="margin-left: 200px; margin-top: 15px;">
            <a href="">Home</a>
            <a href="">Blog</a>
            <a href="">Contact</a>
            <a href="">New Slide</a>
        </div>
        <div id="butn" style="position: absolute; right: 0;">
            <button style= "background-color: rgb(0, 102, 255); color: white;">Subscribe</button>
        </div>

    </div>

    <div class="main">
        <div class="item" id="fir">
            <img src="Screenshot (37).png" alt="">

        </div>
        <div class="item" id="sec">
            <img src="Screenshot (36).png" alt="">

        </div>
        <div class="item" id="thir">
            <img src="Screenshot (38).png" alt="">

        </div>
    </div>
    <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>


Comments

Post a Comment

Popular posts from this blog

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...
Post a Comment
Read more

The Key to Deception

 Jordan Kingsley was a man with some bad habits but a good sense of business. His fortune had afforded him many advantages, including various artifacts and awards that adorned his large hall. However, the most prized possession he had acquired in his lifetime was a set of ten rare beads, each worth a million dollars. This fact wasn't a secret among his acquaintances, who included his elder brother, Benjamin Kingsley, his wife, Harriet Kingsley, and their son, Clinton Kingsley. Unfortunately, Clinton was autistic, though remarkably creative, and Jordan felt a special bond with him, sponsoring his education out of genuine love rather than pity. Jordan was selective about those he let into his heart, reserving his true affection for those who earned it. This often excluded his own brother, his brother's wife, and even his business partners. Harriet, aware of Jordan's distant relationship with her son, made efforts to keep Clinton away from Jordan, fearing that the uncle's ...
Post a Comment
Read more

CHAPTER SIX: THE FLAMES

MAYOR'S OFFICE  Gryffin Scout smoked heavily looking out of the window at the moon. "What are my orders sir," said a cop in the room, "I want to meet JJ Warren, as quick as possible, things are getting insane, I can't take further risks, let's see what he has to offer me, contact him tomorrow morning," said Scout.  THE WAREHOUSE From the window at the roof of the warehouse, a can of fuel fell to the floor, after which a matchstick fell, raising flames in the entire space. Warren looked at the rising flames anxiously when he ran to a corner saving himself from the rising flames approaching him. "Why are you doing this?" Warren shouted in a rage, "I will kill you JJ Warren, I promise you, this will be your end, and I am honored to kill such a worthy opponent tonight!" said the echo. "Leave my friends alone, they are innocent, don't hurt them!" shouted Warren, "They will die before you, I assure you of that, and this w...
Post a Comment
Read more