Sunday, 6 March 2022

TUT33(Before and After Pseudo Selector)

 <!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>Before and after pseudo selector</title>
    <link href="https://fonts.googleapis.com/css?family=Bree+Serif&display=swap" rel="stylesheet">
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: black;
            color: white;
        }

        header::before{
            background: url('https://source.unsplash.com/collection/190727/1600x900') no-repeat center center/cover;
            content: "";
            position: absolute;
            top:0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            opacity: 0.3;
        }

        .navigation {
            font-family: 'Bree Serif', serif;
            font-size: 20px;
            display: flex;
            flex-direction: row-reverse;
        }

        li {
            list-style: none;
            padding: 20px 23px;
        }

        section {
            height: 344px;
            font-family: 'Bree Serif', serif;
            margin: 3px 230px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        h1 {
            font-size: 4rem;
        }

        p {
            text-align: center;
        }
       

        /* section::after{
        content:"this is a content"
    } */

    </style>
</head>

<body>
    <header>
        <nav class="navbar">
            <ul class="navigation">
                <li class="item">Home</li>
                <li class="item">About</li>
                <li class="item">Services</li>
                <li class="item">Contact Us</li>
            </ul>
        </nav>
    </header>
        <section>
            <h1> Welcome to Coding World</h1>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Provident error ratione doloribus sed dolorum,
                ipsum cumque reprehenderit dignissimos architecto veniam optio sint aliquam consectetur corrupti vero
                similique velit. Possimus eum consequatur delectus quia magni.</p>
        </section>
       
</body>

</html>








at No comments:

TUT32 (Attribute and nth child pseudo Selectors)

 <!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>Attribute and nth child pseudo selectors</title>
    <style>
        .container {
            display: block;
            width: 23px;
            margin: auto;
        }

        input {

            display: block;
        }

        input[type='text'] {
            padding: 23px;
            border: 2px solid red;
        }

        a[target] {
            font-size: 44px;
            color: violet;
        }
        }

        a[target='_self'] {
            font-size: 44px;
            color: rgb(21, 17, 233);
        }

        input[type='email'] {
            color: yellow;
            border: 2px solid black;
        }

        /* This is apply css for third child */
        /* li:nth-child(3){
            color: cyan;
        }
        li:nth-child(2n+0){
            color: rgb(207, 20, 13);
        } */

        /* Odd child */
        /* li :nth-child(odd){
            background-color: blueviolet;
        } */
        li :nth-child(even) {
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1><a href="http://google.com" target="_blank">Go to google</a></h1>
        <h1><a href="http://facebook.com" target="_self">Go to facebook</a></h1>
        <form action="" class="form-control">
            <input type="text" placeholder="Enter your name">
            <input type="email" placeholder="Enter your email">
            <input type="password" placeholder="Enter your password">
            <input type="submit" value="submit">
        </form>
        <ul>
            <li class="item" id="item-1">Item1</li>
            <li class="item" id="item-2">Item2</li>
            <li class="item" id="item-3">Item3</li>
            <li class="item" id="item-4">Item4</li>
            <li class="item" id="item-5">Item5</li>
        </ul>


    </div>
</body>

</html>


at No comments:

TUT31(Advance CSS Selectors)

<!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>More on selectors</title>
</head>
<style>
h1{
    background-color: red;
    color: black;
    font-weight: bold;
    text-align: center;
}

/* if p is contained by any li which is contained by div */
/* div li p{
    color: yellow;
    font-weight: bold;
    background-color: green;
} */

/* if p is right inside div then this CSS will be applied */
/* div > p{
    color: yellow;
    font-weight: bold;
    background-color: green;
} */

/* if p is right after div i.e p is the next sibling of div */
/* div + p{
    color: rgb(224, 105, 105);
    background-color: rgb(235, 217, 217) ;
} */

</style>
<body>
    <h1>This is more on selectors</h1>
<div class="container">
<div class="row">
    <ul>
        <li class="item">
            <p>This is another paragraph inside li </p></li>
            <li>This will not get affected</li>
            <p>This is para inside ul</p>
    </ul>
    <p>This is a paragraph</p>
</div>
<p>This is another paragraph</p>
</div>
<p>This is outermost paragraph</p>
</body>
</html>


at No comments:

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:
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 ...