Sunday, 6 March 2022

TUT30(Media Query)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Media Queries</title>
    <style>
        .box{
            font-size: 72px;
            text-align: center;
            background-color: red;
            color: white;
            display: none;
        }

        @media only screen and (max-width:300px){
            #box-1{
                display: block;
                background-color: cyan;
            }
        }

        @media only screen and (min-width: 300px) and (max-width:500px) {
            #box-2{
                display: block;
                background-color: blueviolet;
            }
        }

        @media (min-width: 500px) and (max-width:800px) {
            #box-3{
                display: block;
                color: black;
                background-color: yellow;
            }
        }

        @media (min-width: 800px)  {
            #box-4{
                display: block;
                background-color: green;
            }
        }

    </style>
</head>
<body>
    <div class="box" id="box-1">Mai ek iPhone hoon</div>
    <div class="box" id="box-2">Mai ek Tablet hoon</div>
    <div class="box" id="box-3">Mai ek desktop computer hoon</div>
    <div class="box" id="box-4">Mai ek widescreen computer hoon</div>
</body>
</html>








at No comments:

TUT29(Size Units)

 <!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>Size units</title>
    <style>
        html {
            font-size: 25px;
        }

        .container {
            width: 400px;
            height: 300px;
            font-size: 10px;
            border: 2px solid red;
        }

        h1 {
            text-align: center;

        }

        #First {
            /* font-size: 3em;
            padding: 3em; */
        }

        #Second {
            /* font-size: 3em;
            padding: 3em; */
        }
    </style>
</head>

<body>
    <div class="container">
        <h1 id="First">This is First Heading</h1>
        <h1 id="Second">This is Second Heading</h1>
        <h1 id="Third">This is Third Heading</h1>
    </div>
</body>

</html>


at No comments:

TUT28(Flexbox Tutorial)

 <!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>Flexbox Tutorial</title>
  <style>
    .container {
      height: 344px;
      width: 100%;
      border: 2px solid black;
      display: flex;
      /* Initialize the container as a flex box */

      /* Flex properties for a flex container */

      /* flex-direction: row; (Defualt value of flex-direction is row) */
      /* flex-direction: column;
          flex-direction: row-reverse;
          flex-direction: column-reverse; */


      /* flex-wrap: wrap;(Defualt value of flex-direction is no-wrap) */
      /* flex-wrap: wrap-reverse; */

      /* flex-flow: row-reverse wrap; */
      /* This is a shorthand for flex-direction:and flex-wrap: ; */

      /* justify-content will justify the content in horizontal direction */
      /* justify-content: center; */
      /* justify-content: space-between; */
      /* justify-content: space-evenly; */
      /* justify-content: space-around; */

      /* justify-content will justify the content in vertical direction */
      /* align-items: center; */
      /* align-items: flex-end; */
      /* align-items: flex-start; */
      /* align-items: stretch; */


    }

    .item {
      width: 200px;
      height: 200px;
      background-color: tomato;
      border: 2px solid green;
      margin: 10px;
      padding: 3px;
    }

    #item-1 {
      /* Flex properties for a flex item */
      /* Higher the order, later it shows up in the container */
      /* order: 2; */

      /* flex-grow: 3; */
      /* flex-shrink: 2; */

    }

    #item-2 {
      /* flex-grow: 3; */
      /* flex-shrink: 2; */
      flex-basis: 320px;
      /* when flex-direction: is set to row flex-basis: will control width */
      /* when flex-direction: is set to column flex-basis: will control height */
    }

    #item-3 {
      /* flex: 2 2 230px; */
      align-self: flex-start;
      align-self: flex-end;
      align-self: center;
    }
  </style>
</head>

<body>
  <h1>This is Flexbox Tutorial</h1>
  <div class="container">
    <div class="item" id="item-1">First Box</div>
    <div class="item" id="item-2">Second Box</div>
    <div class="item" id="item-3">Third Box</div>
    <!-- <div class="item" id="item-4">Fourth Box</div>
    <div class="item" id="item-5">Fifth Box</div>
    <div class="item" id="item-6">Sixth Box</div> -->
  </div>
</body>

</html>


at No comments:

TUT27 (Visibility and Z-index)

 <!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>Visibility and z-index</title>
    <style>
        .box {
            width: 170px;
            height: 170px;
            border: 2px solid black;

        }

        #box-1 {
            position: relative;
            top: 49px;
            z-index: -35;
            background-color: green;
        }

        #box-2 {
            position: relative;
            top: 14px;
            z-index: 35;
            /* z-index: will work only for position: relative, absolute, fixed or sticky; */

            /* will hide the element and the space */
            /* display: none;

            /* will hide the element but will show its empty space */
            /* /* visibility: hidden; */

            background-color: red
        }

        #box-3 {
            background-color: blue;
        }

        #box-4 {
            background-color: yellow;
        }
    </style>
</head>

<body>
    <div class="box" id="box-1"></div>
    <div class="box" id="box-2"></div>
    <div class="box" id="box-3"></div>
    <div class="box" id="box-4"></div>
</body>

</html>



at No comments:

Zoi Fitness (Project1: Designing A Website For a Local Gym)

 <!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>Zoi's Fitness</title>
</head>
<link rel="stylesheet" href="css/style.css">
<style>
    /* CSS Reset */
    body {
        font-family: 'baloo bhai', cursive;
        color: white;
        margin: 0px;
        padding: 0px;
        background: url('absbackground.jpg');
    }

    .left {
        display: inline-block;

        position: absolute;
        left: 34px;
        top: 20px;
    }

    .left img {
        width: 95px;
        height: 66px;
        filter: invert(90%);
    }

    .left div {
        text-align: center;
    }

    .right {
        position: absolute;
        right: 34px;
        top: 36px;
        display: inline-block;


    }

    .mid {
        display: block;
        width: 66%;
        margin: 20px auto;


    }

    .navbar {
        display: inline-block;
    }

    .navbar li {
        display: inline-block;
        font-size: 22px;
    }

    .navbar li a {
        color: white;
        text-decoration: none;
        padding: 34px 23px;
    }

    .navbar li a:hover,
    .navbar li a.active {
        text-decoration: underline;
        color: gray;
    }

    .btn {
        font-family: 'baloo bhai', cursive;
        margin: 0px 9px;
        color: white;
        background-color: black;
        padding: 4px 14px;


        font-size: 15px;
        cursor: pointer;
    }

    .btn:hover {
        background-color: rgb(53, 47, 47);
    }

    .container {
        border: 2px solid white;
        margin: 106px 80px;
        padding: 75px;
        width: 38%;
        border-radius: 28px;
    }

    .form-group input {
        text-align: center;
        display: block;
        width: 508px;
        padding: 1px;

        margin: 11px auto;
        font-size: 25px;
        border-radius: 8px;
        font-family: 'baloo bhai', cursive;

    }

    .container h1 {
        text-align: center;
    }

    .container button {
        display: inline;
        width: 23%;
        margin: auto;
    }
</style>

<body>

    <header class="header">
        <!-- left box for logo -->
        <div class="left">
            <img src="logo.png" alt="" srcset="">
            <div>Zoi's Fitness</div>
        </div>
        <!-- mid box for navbar/navigation -->
        <div class="mid">
            <ul class="navbar">
                <li><a href="#">Home</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Fitness Calculator</a></li>
                <li><a href="#">Contact Us</a></li>
            </ul>
        </div>
        <!-- Right box for buttons -->
        <div class="right">
            <button class="btn">Call Us Now</button>
            <button class="btn">Email Us</button>

        </div>
    </header>
    <div class="container">
        <h1>Join the best gym of Kashmir now</h1>
        <form action="noaction.php">
            <div class="form-group">
                <input type="text" name="" placeholder="Enter your Name">
            </div>
            <div class="form-group">
                <input type="text" name="" placeholder="Enter your Age">
            </div>
            <div class="form-group">
                <input type="text" name="" placeholder="Enter your Gender">
            </div>
            <div class="form-group">
                <input type="text" name="" placeholder="Enter your Locality">
            </div>
            <button class="btn">Submit</button> <button class="btn">Reset</button>
        </form>
    </div>
</body>

</html>




at No comments:

TUT24(Position: Absolute, sticky, relative etc)

<!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></title>
    <style>
        .Container {
            border: 2px solid black;
            background-color: khaki;
            height: 3444px;
        }

        /* CSS Position: Static (default), relative,absolute, fixed, sticky */
        .box {
            display: inline-block;
            border: 2px solid red;
            width: 150px;
            height: 150px;
            margin: 2px;

        }

        #box3 {
            /* relative: Positions the element relative to its normal position and will leave a gap its nomal position */
            /* position: relative; */

            /* absolute: Positions the element relative to the position of its first parent */
            /* position: absolute; */

            /* fixed: Positions the element relative to the browser window;
          position: fixed;
          right: 4px;
          Bottom: 2px; */

            /* sticky: */
            position: sticky;
            top: 3px;


        }
    </style>
</head>

<body>
    <div class="Container">
        <div class="box" id="box1">1</div>
        <div class="box" id="box2">2</div>
        <div class="box" id="box3">Chat with us</div>
        <div class="box" id="box4">4</div>
    </div>
</body>

</html>


at No comments:

TUT23 (CSS Display Property)

<!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>CSS Display Property</title>
    <style>
        * {
            box-sizing: border-box;
        }

        header {
            border: 2px solid red;
            margin: auto;
            width: 1200px;
        }

        img {
            margin: auto;
            display: block;
            width: 34px;
        }

        h3 {
            text-align: center;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0px;
        }

        .box {
            border: 4px solid black;
            background-color: grey;
            margin: 4px 0px;
            padding: 23px;
            display: inline-block;
            width: 33%;
            box-sizing: border-box;
        }

        .container {
            margin: auto;
            width: 1200px;
        }
    </style>
</head>

<body>
    <header class="top">
        <img src="https://www.readree.com/wp-content/uploads/2021/01/Search-Engines-That-Search-for-Duplicate-images.jpg"
            alt="" srcset="">
        <h3>Welcome to Zoya's Blog</h3>
    </header>
    <div class="container">
        <div class="box">
            <h4 class="Heading">Heading</h4>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor expedita architecto quae, delectus autem,
                possimus nemo consequatur inventore deleniti molestias consectetur voluptatum quod accusamus ea,
                temporibus vero iste magnam aliquid?</p>
        </div>
        <div class="box">
            <h4 class="Heading">Heading</h4>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor expedita architecto quae, delectus autem,
                possimus nemo consequatur inventore deleniti molestias consectetur voluptatum quod accusamus ea,
                temporibus vero iste magnam aliquid?</p>
        </div>
        <div class="box">
            <h4 class="Heading">Heading</h4>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor expedita architecto quae, delectus autem,
                possimus nemo consequatur inventore deleniti molestias consectetur voluptatum quod accusamus ea,
                temporibus vero iste magnam aliquid?</p>
        </div>
        <div class="box">
            <h4 class="Heading">Heading</h4>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor expedita architecto quae, delectus autem,
                possimus nemo consequatur inventore deleniti molestias consectetur voluptatum quod accusamus ea,
                temporibus vero iste magnam aliquid?</p>
        </div>
</body>

</html>



at No comments:
Subscribe to: Posts (Atom)

TUT 44 (CSS GRID - 3)

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

  • TUT 44 (CSS GRID - 3)
      <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < met...
  • TUT38 (CSS Transform)
      <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < met...
  • TUT42 (CSS GRID)
    <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta ...