Skip to main content

Use CSS variable - box-sizing: border-box; opacity: .5;


 This is CSS sheet (opacity)

.dio{
    background-color: coral;
    width: 50%;
    padding: 10px;
    border: 2px solid black;
    box-sizing: border-box;
}
.dio2{
    background-color: darkgoldenrod;
    width: 50%;
    opacity: .5;
}
.dio2:hover{
    opacity: 1;
}
.elo{
    opacity: .8;
    width: 400px;
}
.elo:hover{
    opacity: 1;
}

This is HTML sheet

<div class="dio"><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ducimus voluptatem assumenda dolores non aliquid, dolorem aliquam expedita? Cum similique reprehenderit est iure rem fuga? Odit fugiat ex, reprehenderit ad sunt voluptatem laudantium vitae dolorem odio nostrum nihil reiciendis eligendi impedit ipsa atque laborum saepe veniam sequi soluta facere. Dignissimos, ducimus.</p></div>
<div class="dio2"><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sequi rem eaque autem, aliquam voluptatibus ad sunt, nostrum enim atque asperiores, tempore repellat. Suscipit totam reprehenderit ipsum, eligendi eos, consectetur aliquam maxime, nesciunt quisquam sapiente odio officiis ut! Nihil asperiores facilis eligendi enim molestias dolorem, libero quibusdam sunt quaerat alias corporis.</p></div>
<section class="elo">
    <img src="elon.jpg" alt="elon">
</section>

Comments

Post a Comment

Popular posts from this blog

feture

Post a Comment
Read more
Use  <nav>,<figure>,<ifrem>,<samp>,<var> Tag < 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" >   < style >     header {       text-align : center ;     }     body {       background-color : rgb ( 196 , 152 , 72 );     }     .agp {       width : 100% ;       height : 250px ;    }     .fcss {     border : 3px solid red ;     border-radius : 5px ;     padding : 5px ;     margin : 2px ;     width : 50% ;    }     .fs {       text-align : center ;     }     .t1 , .t2 , .t3 , .t4 {       background-colo...
Post a Comment
Read more
Use CSS variable (form and list style)  If you want icon like -list ..Go to this wed -site : https://fontawesome.com/v5.15/icons?d=gallery&p=2&q=tick And attest HTML <header> this link : <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> This is CSS sheet /* form style */ .text-are12 {     resize : none ;     border : 3px solid rgb ( 71 , 3 , 3 );     border-radius : 5px ;     margin : 10px ; } input [ type = "submit" ], input [ type = "reset" ]{     width : 90px ;     border : none ;     margin : 10px ;     border-radius : 5px ;     padding : 5px ;     background-color : olivedrab ;     color : white ;     cursor : pointer...
Post a Comment
Read more