Scribd Logo
Upload

Welcome to Scribd!

  • 10 views

    Box 1

    Uploaded by

    LAURA RAMIREZ
    The document contains CSS code that defines the styling of various elements on a webpage. These include boxes, images, text, and containers for laying out content. Styles are defined for properties like height, width, borders, margins, floats and fonts. On hover, some elements change color or images rotate. The HTML implements this CSS by using the defined classes to structure the page content into different sections.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content

    You might also like

    Box 1

    Uploaded by

    LAURA RAMIREZ
    10 views5 pages
    The document contains CSS code that defines the styling of various elements on a webpage. These include boxes, images, text, and containers for laying out content. Styles are defined for properties like height, width, borders, margins, floats and fonts. On hover, some elements change color or images rotate. The HTML implements this CSS by using the defined classes to structure the page content into different sections.

    Original Description:

    Original Title

    box1

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document contains CSS code that defines the styling of various elements on a webpage. These include boxes, images, text, and containers for laying out content. Styles are defined for properties like height, width, borders, margins, floats and fonts. On hover, some elements change color or images rotate. The HTML implements this CSS by using the defined classes to structure the page content into different sections.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    10 views5 pages

    Box 1

    Uploaded by

    LAURA RAMIREZ
    The document contains CSS code that defines the styling of various elements on a webpage. These include boxes, images, text, and containers for laying out content. Styles are defined for properties like height, width, borders, margins, floats and fonts. On hover, some elements change color or images rotate. The HTML implements this CSS by using the defined classes to structure the page content into different sections.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    of 5

    .

    box1{height: 200px;

    width: 100%;

    border: 2px solid black;}

    .logo img{height: 180px;

    margin-top: 10px;

    width: 300px;

    border: 1px solid black;

    margin-left: 10%;

    float: left;}

    .titulo{ height: 180px;

    width: 1000px;

    border: 1px solid black;

    margin-left: 30%;

    margin-top: 10px;

    font-size: 50px;

    text-align: center;

    .box2{height: 410px;

    width: 100%;

    margin-top: 10px;

    border: 1px solid black;}

    .c1 img{height: 400px;

    width: 20%;

    margin-left: 5%;

    border: 1px solid black;

    margin-top: 5px;

    float: left;
    }

    .c2{height: 400px;

    width: 40%;

    margin-left: 5%;

    border: 1px solid black;

    margin-top: 5px;

    float: left;

    .a1{height: 80px;

    width:90% ;

    margin-left: 5%;

    border: 1px solid black;

    margin-top: 7px;}

    .a2{height: 180px;

    width: 90%;

    margin-left: 5%;

    border: 1px solid black;

    margin-top: 7px;}

    .c3{height: 400px;

    width: 20%;

    margin-left: 5%;

    border: 1px solid black;

    margin-top: 5px;

    float: left;

    .b1 img{height: 150px;

    width: 90%;
    margin-left:5% ;

    margin-top: 33px;

    border: 1px solid black;}

    .box3{height: 100px;

    width: 40%;

    margin-top: 10px;

    margin-left:6%;

    border: 1px solid black; float: left; }

    .e1{height: 100px;

    width: 30%;

    margin-top: 10px;

    margin-left:3%;

    border: 1px solid black; float: left; }

    .box4{height: 120px;

    width: 100%;

    border: 1px solid black;

    margin-top: 120px;}

    .a1:hover{background-color: black;

    color: #FFFFFF;

    transition: all 2s ease;}

    .e1:hover{background-color: black;

    color: #FFFFFF;

    transition: all 2s ease;}

    h1:hover{color: red ;}

    img:hover{transform: rotate(45deg);

    transition: all 2s ease;}


    <!DOCTYPE html>

    <html>

    <head>

    <title>HTML, CSS and JavaScript demo</title>

    </head>

    <body>

    <div class="box1">

    <div class="logo"> <img src="" alt="" /></div>

    <div class="titulo">

    <h1>TITULO </h1>

    </div>

    </div>

    <div class="box2">

    <div class="c1"> <img src="" alt="" /></div>

    <div class="c2">

    <div class="a1"><center><h2>texto</h2></center></div>

    <div class="a2"><center><h2>texto</h2></center></div>

    <div class="a1"><center><h2>texto</h2></center></div>

    </div>

    <div class="c3">

    <div class="b1"> <img src="" alt="" /></div>

    <div class="b1"> <img src="" alt="" /></div>

    </div>

    </div>

    <div class="box3"><h2>texto</h2></div>

    <div class="box3"><h2>texto</h2></div>

    <div class="box4">

    <div class="e1"><h2>texto</h2></div>
    <div class="e1"><h2>texto</h2></div>

    <div class="e1"><h2>texto</h2></div>

    </div>

    <div class="box1"></div>

    </body>

    </html>

    You might also like