Thursday 27 May 2021

CSS

 CSS Grid

<!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>grid templates</title>
</head>
<style>
.grid{

display: grid;
grid-template-rows: 1fr 4fr 6fr ;
grid-auto-rows: 2fr;
grid-template-columns: repeat(5,3fr);
grid-gap: 2rem;
}
.box{


    background-color: red;
    border: 2px solid black;

}


</style>
<body>
    <div class="grid">

        <div class="box">This is a box1</div>
        <div class="box">This is a box2</div>
        <div class="box">This is a box3</div>
        <div class="box">This is a box4</div>
        <div class="box">This is a box5</div>
        <div class="box">This is a box6</div>
        <div class="box">This is a box7</div>
        <div class="box">This is a box8</div>
        <div class="box">This is a box9</div>
        <div class="box">This is a box10</div>
        <div class="box">This is a box11</div>
        <div class="box">This is a box12</div>
        <div class="box">This is a box13</div>
        <div class="box">This is a box14</div>
        <div class="box">This is a box15</div>
        <div class="box">This is a box16</div>
        <div class="box">This is a box17</div>
        <div class="box">This is a box18</div>
        <div class="box">This is a box19</div>
        <div class="box">This is a box20</div>
    </div>
</body>
</html>

at No comments:

CSS

 CSS-tutorial

CSS media 

<!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>,edia query+css grid</title>
</head>
<style>

body{


    background-color:red;
}

.container{
    display: grid;
    grid-gap: 1rem;
    grid-template-areas: 
    'nav nav nav nav'
    'section section section aside'
    'section section section aside'
    'footer footer footer footer';
}

.box{
    border: 2px solid black;
    background-color: green;
    padding: 25px;

}

nav{
    grid-area: nav;
}
section{
    grid-area: section;
}
aside{
    grid-area: aside;
}
footer{
    grid-area: footer;
    grid-gap: 1rem;
    text-align: center;
}


/* mediaquery */

@media (max-width: 450px){
    body{

        background-color: yellow;
    }

}
@media (min-width:300px ) and (max-width: 541px){
    body{
background-color: blue;
    }
    .container{
    display: grid;
    grid-gap: 1rem;
    grid-template-areas: 
    'nav nav nav nav '
    'section section section section'
    /* 'aside aside aside aside' */
    'footer footer footer footer';
}
aside{
    display: none;
}
span{
    display: block;
    /* align-items: center;
    justify-content: center; */
    text-align: center;
    content-visibility: 20%;
}
   
}
@media (max-width:300px){
    body{
        background-color: brown;
    }
    .container{
    display: grid;
    grid-gap: 1rem;
    grid-template-areas: 
    'nav nav nav nav '
    'aside section section section'
    'aside section section section'
    'footer footer footer footer';
}
/* aside{
    display: none;
} */
footer{
    overflow:auto;
    display:table-caption;
}
span{
    display: block;
    /* align-items: center;
    justify-content: center; */
    text-align: center;
    content-visibility: 20%;
}


}


</style>
<body>
    <div class="container">
        
        <nav class="box">
            <!-- Home About Contact blogs -->
            <span>Home</span>
            <span>About</span>
            <span>Contact</span>
            <span>Blogs</span>
        </nav>
        <section class=box>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam quos saepe nulla sed, eius cumque possimus, labore vero consequuntur rem modi, debitis incidunt velit quis.
        </section>
        <aside class="box">
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolore, ad.
        </aside>
    </div>
    <footer class="box">
        copyright:&copy;www.myupensite.com. All Right Reserved!
    </footer>
</body>
</html>

CSS Grid

<!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 grid tut</title>
</head>
<style>

.container{
    display: grid;
    grid-template-columns: 3fr 9fr ;
}
.items{

background-color: blue;
border: 2px solid black;
margin: 5px;
padding: 2px 5px;
;
}
.container2{


    display: grid;
grid-template-columns: 3fr 9fr ;
}
.items1{


    background-color: red;
    border: 2px solid black;
    margin: 2px;
    padding: 5px 5px;
    height: 100%;
    width: 100%;
}

</style>


<body>
    <!-- div.container -->
    <div class="container">
<div class="items">this is grids items</div>
<div class="items">this is grids items</div>
<div class="items">this is grids items</div>
<div class="items">this is grids items</div>
<div class="items">this is grids items</div>
<div class="items">this is grids items</div>
<div class="items">this is grids items</div>
<div class="items">this is grids items</div>
<div class="items">this is grids items</div>
<div class="items">this is grids items</div>
<div class="items">this is grids items</div>
<div class="items">this is grids items</div>
<div class="items">this is grids items</div>
<div class="items">this is grids items</div>
<div class="items">this is grids items</div>
<div class="items">this is grids items</div>
<div class="items">this is grids items</div>
<div class="items">this is grids items</div>
<div class="items">this is grids items</div>
<div class="items">this is grids items</div>
<div class="items">this is grids items</div>
<div class="items">this is grids items</div>
<div class="items">this is grids items</div>
<div class="items">this is grids items</div>
<div class="items">this is grids items</div>
<div class="items">this is grids items</div>
<div class="items">this is grids items</div>
<div class="items">this is grids items</div>
<div class="items">this is grids items</div>
<div class="items">this is grids items</div>
<!-- <!-- <div class="items">this is grids items</div>
<div class="items">this is grids items</div> -->

<!-- <div class="items">this is grids items</div>
<div class="items">this is grids items</div>
<div class="items">this is grids items</div>
<div class="items">this is grids items</div>
<div class="items">this is grids items</div>
<div class="items">this is grids items</div>
<div class="items">this is grids items</div>
<div class="items">this is grids items</div> --> -->


    </div>
    <div class="container2">
        <div class="items1">this is a grid item</div>
        <div class="items1">this is a grid item</div>
    </div>
</body>
</html>

at No comments:

Sunday 7 March 2021

CSS TUT-5 How To Make Box Model CSS in HTML ?

 How To Make Box Model CSS in HTML ?

Box Model CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>box model margin padding</title>
<style>

    *{

        box-sizing: border-box;
        padding: 0px;
        margin: 0px;
    }
    body{
        background-color: rgb(187, 218, 218);
    }
    .container{
        border: 3px solid blue;
        background-color: #c4deea;
        padding: 14px 21px 14px 5px;
        margin: 27px 36px 47px 2px;
      border-radius: 12px;
      box-sizing: border-box;
    }
</style>
</head>
<body>
    <h2>this is box model</h2>
    
       
       <div class="container">
           <p id="frist">Lorem ipsum dolor sit amet consectetur adipisicing elit. 
               
            
            Illum ut sint voluptatum iusto atque vel pariatur officia maxime, 
            excepturi illo, veniam explicabo.
               
            Rem cum molestiae, maiores fugiat ex voluptatum quaerat.</p>
       </div>

       <div class="container">
           <p id="second">Lorem ipsum dolor sit amet consectetur adipisicing elit.
               
            
            Illum ut sint voluptatum iusto atque vel pariatur officia maxime,
             excepturi illo, veniam explicabo.
                
            Rem cum molestiae, maiores fugiat ex voluptatum quaerat.</p>
       </div>

       <div class="container">
           <p id="third">Lorem ipsum dolor sit amet consectetur adipisicing elit. 
               
            
            Illum ut sint voluptatum iusto atque vel pariatur officia maxime,
             excepturi illo, veniam explicabo.
               
            Rem cum molestiae, maiores fugiat ex voluptatum quaerat.</p>
       </div>

       <div class="container">
           <p id="fourth">Lorem ipsum dolor sit amet consectetur adipisicing elit. 
               
            
            Illum ut sint voluptatum iusto atque vel pariatur officia maxime,
             excepturi illo, veniam explicabo. 
               
            Rem cum molestiae, maiores fugiat ex voluptatum quaerat.</p>
       </div>
    
</body>
</html>


at 1 comment:
Labels:

CSS TUT-4 How To Give Beautiful Heights, Widths, Border , Border-Radius and Background In HTML Using CSS ?

 How To Give Beautiful Heights, Widths,Border,Border-Radius and Background In HTML Using CSS ?

CSS  Design

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Height,width,border and backgrounds</title>
    <style>
        p{
        background-color: brown;
    height: 400px;
width: 300px;
border-radius: 10px;
border:black;
border-style: solid;
}
        #secondpara{
        background-color:green;
    height: 254px;
width: 300px;
border-radius: 10px;
border-bottom: rgb(141, 15, 231);
border-left: rgb(236, 147, 13);
border-right: rgb(3, 248, 76);
border-bottom: rgb(238, 11, 162);
border-bottom-left-radius: 5px;
border-bottom-right-radius: 15px;

}

#image{color: red;
    border: solid,black;
height: 630px;
width: 630px;
background-color: white;
background-image: url(https://miro.medium.com/max/1200/1*pE2fOVDikEUwiQJlh4ggzg.jpeg);
background-repeat: no-repeat;
background-position: center top;
}
#button{
    border: solid;
    height: 25px;
    width: 25px;
    background-color:red;
}




    </style>
</head>
<body>
    <h2>This is backgrounds colors</h2>
    <p >This is my frist ever para written</p>
    <p id="secondpara">This is my second para</p>
<h2>This is third para for img</h2>
<p id="image">This is my image</p>
<h3>This is button to tap to enter in google </h3>
<a id="button" href="https://Google.com" target="_blank">Go To The Google Site Tap On It</a>


    
</body>
</html>


at No comments:
Labels:

CSS TUT-3 How To Add Fonts-Family And Make Beauty In Fonts ?

 How To Add Fonts-Family And Make Beauty In Fonts ?

Fonts Size And Fonts-Family

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS fonts</title>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Pacifico&family=Russo+One&display=swap" rel="stylesheet">
    <style>
        p{font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: 30px;
}
span{font-weight: bold;
font-style: italic;}



    </style>
</head>
<body>
    <h2>This is tut for Fonts written</h2>
    <p>is this my beauty fonts no </p>
    <p>then which <span>One</span>  is my join family font </p>
</body>
</html>



at No comments:
Labels:
Subscribe to: Posts (Atom)

Python if / else

 Python if / else a1 = int ( input (" Enter the number: \n ")) a2 = int ( input (" Enter the number: \n ")) a3 = int ( i...