CSS BOX PLAYGROUND

HTML



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>CSS LEVEL 3</title>
    <link rel="stylesheet" href="STLE.CSS">
</head>
<body>
    <h1>Position Playground</h1>
        <div id="box1" style="background-color: pink;">box1</div>
        <div id="box2" style="background-color: red;">box2</div>
        <div id="box3">box3</div>
        <div id="box4" style="background-color: green;">box4</div>
       
</body>

</html>



CSS



div{
    height: 100px;
    width: 100px;
    background-color: aqua;
    border: 2px solid gold;
    display: inline-block;
}

#box1{
    position: relative;
    top: 10px;
}

#box3{
    position: sticky;
    top: 0;
}

#box4{
    bottom: 0;
}

#box1{
    background-image: url(Acer.jpg.jpg);
    height: 350px;
    width: 350px;
    background-size: cover;
}


OUTPUT



Position Playground

box1
 
box2
box4 
box3

Comments

Post a Comment

Popular posts from this blog

AMAZON HOME PAGE CLONE PROJECT

Image
HTML <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Amazon </ title >     < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity = "sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin = "anonymous" referrerpolicy = "no-referrer" />     < link rel = "stylesheet" href = "STLE.CSS" > </ head > < body >     < header >         < div class = "navbar border" >             < div class = "nav-logo border" >                 < div class = "logo" ></ div >             ...
Read more

Array in function Javascript

  const ranger = [ "Troy" , "Jake" , "Noah" ] const rangerd = [ "Tylor" , "Chase" , "Koda" ] // ranger.push(rangerd) // const allranger = ranger.concat(rangerd) // console.log(allranger); // console.log(Array.isArray("Debadatta")); // console.log(Array.from("Debadatta")); // console.log(Array.isArray({name:"Debadatta"}));// Intresting let score1 = 100 let score2 = 200 let score3 = 300 console . log ( Array . of ( score1 , score2 , score3 ));
Read more

Function in Javascript

  function Nickname (){     console . log ( "D" );     console . log ( "E" );     console . log ( "B" );     console . log ( "A" ); } // Nickname() // function add(num1, num2){ //     console.log(num1+num2); // } function add ( num1 , num2 ){     // let result = num1 + num2     // return result     return num1 + num2 } // const result = add(10,20) // console.log("Result: ",result); function login ( username ) {     if ( username === undefined ){         console . log ( "Please enter user name" )         return     }     return ` ${ username } Just logged in` } // console.log(login()); // ====== function calculate ( ... num1 ){     return num1 } // console.log(calculate(200,450,250)); const user = {     username : "Aditya" ,     price : 252 } function handleobj ( anyobject ){    ...
Read more