Sunday, 24 April 2022

HTML + CSS #21 | Box Shadow | Blur using CSS | HTML & CSS | Web Development

 <!DOCTYPE html>

<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>
</head>
<style>
    .pbox{
        display: flex;
       
    }
    .box{
        padding: 10px 20px;
        margin: 10px 10px;
        box-shadow: 10px 10px 10px 12px black;
       
    }
    #box1{
        background-color: aqua;

    }
    #box2{
        background-color: chartreuse;
    }
    #box3{
        background-color: cyan;

    }
    #box4{
        background-color: darkorange;
    }
</style>
<body>
    <div class="pbox">
        <div class="box" id="box1">HTML</div>
        <div class="box" id="box2">CSS</div>
        <div class="box" id="box3">JAVASCRIPT</div>
        <div class="box" id="box4">REACT</div>
    </div>
</body>
</html>



at No comments:

HTML + CSS #20 | Before Pseudo Selector | Z-Index , Opacity | HTML & CSS | Web Development

 <!DOCTYPE html>

<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>
</head>
<style>
    body{
        margin: 0%;
        padding: 0%;
        height: 1000px;
    }
    .box::before{
        content: "";
        position: absolute;
        background: url(Images/gtr.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        z-index: -1;
        opacity: 0.7;
   
    }

 
</style>
<body>
    <div class="box">
        <h1>Before Selector</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi quas, autem culpa pariatur nesciunt, quisquam voluptate ipsa iure adipisci magnam quod eaque sit. Earum distinctio impedit commodi. Incidunt asperiores enim, hic perspiciatis exercitationem iste alias beatae sapiente rerum, voluptas nulla, autem sunt nemo accusamus magni amet reiciendis error? Quasi, natus.</p>
    </div>
</body>
</html>



at No comments:

Saturday, 23 April 2022

HTML + CSS #17 | Flex Box , Flex Flow | Flex Wrap, Justify Content , Align Items | HTML & CSS | Web Development

 <!DOCTYPE html>

<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>
</head>
<style>
    .pbox{
        border: 6px solid rgb(255, 234, 1);
        display: flex;
        height: 500px;
         /*flex-direction:row-reverse; */
         /* flex-wrap: wrap; */
         /* flex-flow:row-reverse wrap; */
         /* align-items:flex-end; */
       

       
     
       
    }
    .box{
        border: 3px solid aqua;
        padding: 3px 0px;
        margin: 5px 10px;
        height: 80px;
        width: 50px;
       
    }
   
</style>
<body>
    <div class="pbox">
        <div class="box" id="box1">1</div>
        <div class="box" id="box2">2</div>
        <div class="box" id="box3">3</div>
        <div class="box" id="box4">4</div>
        <div class="box" id="box5">5</div>

    </div>
</body>
</html>



at No comments:

HTML + CSS #16 | Flex Box , Flex Direction | Row & Column Reverse | HTML & CSS | Web Development

 <!DOCTYPE html>

<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>
</head>
<style>
    .pbox{
        border: 3px solid slategray;
        display: flex;
        flex-direction:row-reverse;


       
    }
    .box{
        border: 3px solid aqua;
        padding: 3px 0px;
        margin: 5px 10px;
       
    }
   
</style>
<body>
    <div class="pbox">
        <div class="box" id="box1">1</div>
        <div class="box" id="box2">2</div>
        <div class="box" id="box3">3</div>
        <div class="box" id="box4">4</div>
        <div class="box" id="box5">5</div>

    </div>
</body>
</html>






at No comments:

Friday, 22 April 2022

HTML + CSS #15 | Project using HTML & CSS | Fitness Website | HTML & CSS | Web Development

 <!DOCTYPE html>

<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>Fitness Website</title>
</head>
<style>
    /* CSS RESET */
    body {
        margin: 0px;
        padding: 0px;
        background: url(Images/sergi.jpg);
        background-repeat: no-repeat;
        background-position: top;
       
    }

    /* left element */
    .left {

        display: inline-block;
        height: 30px;
        width: 100px;
        position: absolute;
        left: 5px;
        top: 10px;
       
    }

    /* logo image */
    .left img {
        width: 100px;
    }

    /* Text */
    .text {
        font-size: 25px;
        font-family: monospace;
        font-weight: bold;
        color: gold;
        line-height: 66%;
        cursor: pointer;
    }

    .center {

        display: block;
        margin: 0px auto;
        width: 450px;
    }

    /* list */
    .navbar li {
        list-style: none;
        display: inline-block;


    }

    /* list link */
    .navbar li a {
        text-decoration: none;
        font-size: 20px;
        padding: 1px 9px;
        font-family: sans-serif;
        font-weight: bold;
        color: blue;



    }

    /* hover  */
    .navbar li a:hover,
    .navbar li a.active {
        color: azure;
    }

    /* Right element */
    .right {
        position: absolute;
        right: 10px;
        top: 10px;
       

    }

    /* button  */
    .btn {
        font-family: monospace;
        font-size: 16px;
        font-weight: bold;
        border-radius: 10px;
        color: rgb(0, 0, 0);
        background-color: rgb(8, 12, 238);
       

    }

    /* button hover */
    .btn:hover {
        background-color: rgb(255, 255, 255);
    }
</style>

<body>
    <!-- Header -->
    <header class="header">
        <!-- Left -->
        <div class="left">
            <img src="Images/logogym.jpg" alt="">
            <div class="text">Sahitya Fitness</div>
        </div>
        <!-- Center -->
        <div class="center">
            <ul class="navbar">
                <li><a href="#" class="active">Home</a></li>
                <li><a href="#">Training</a></li>
                <li><a href="#">Diet Plan</a></li>
                <li><a href="#">About Us</a></li>
            </ul>
        </div>
        <!-- Right  -->
        <div class="right">
            <button class="btn">Register</button>
        </div>
    </header>
</body>

</html>




at No comments:

Thursday, 21 April 2022

HTML + CSS #14 | Positions = Fixed , Relative , Sticky , Absolute | HTML & CSS | Web Development

 <!DOCTYPE html>

<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>Position</title>
</head>
<style>
    .pbox{
        height: 2000px;
    border: 5px solid aqua;
    }
    .box{
        border: 3px solid black;
        height: 100px;
        width: 100px;
        padding: 1px 4px;
        margin: 5px;
        display: inline-block;
    }
    #box1{
        position:relative;
       
    }
    #box3{
        position: sticky;
        border: 5px solid red;
        top: 100px;
        left: 100px;

    }
</style>
<body>
    <div class="pbox">
        <div class="box" id="box1"></div>
        <div class="box" id="box2"></div>
        <div class="box" id="box3"></div>
    </div>
</body>
</html>



at No comments:

HTML + CSS #13 | How to Make Navigation Bar | HTML & CSS | Web Development

 <!DOCTYPE html>

<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 rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Bangers&family=Sacramento&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Bangers&family=Sacramento&display=swap" rel="stylesheet">
</head>
<style>
    .navbar {
        background-color: rgb(0, 0, 0);
        border-radius: 50px;
        padding: 4px 5px;

    }

    .navbar ul {
        overflow: auto;

    }

    .navbar li {
        color: rgb(255, 255, 255);
        float: left;
        list-style: none;
        padding: 13px 35px;
        font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
        font-weight: bold;
    }
    .navbar li a{
        text-decoration: none;
        color: azure;


       
    }
    .navbar li a:hover{
        color: red;
    }
    .search{
        padding: 10px 2px;
        margin: 2px 1px;
    }
    .navbar input{
        border-radius: 25px;
    }
</style>

<body>
    <header>
        <!-- navigation bar  -->
        <nav class="navbar">
            <ul>
                <!-- list -->
                <li><a href="#">Home</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Contact US</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Location</a></li>
                <!-- search bar -->
                <div class="search">
                    <label for="search">Search</label>
                    <input type="search" name="search" id="search" placeholder="Search Here">
                </div>

            </ul>
        </nav>
    </header>
</body>

</html>




at No comments:
Subscribe to: Posts (Atom)

JAVASCRIPT + CSS + HTML #42 | Event & Event Listener |How to Target using JS | Web Development

  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < met...