Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • Web Design HW 03

    Încărcat de

    Cris Racu
    11 vizualizări5 pagini

    Titlu original

    Web_Design_hw_03_ (1)

    Drepturi de autor

    © © All Rights Reserved

    Formate disponibile

    PDF, TXT sau citiți online pe Scribd

    Vi se pare util acest document?

    Este necorespunzător acest conținut?

    Raportați acest document

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    11 vizualizări5 pagini

    Web Design HW 03

    Încărcat de

    Cris Racu

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    din 5

    Tema pentru acasă #3

    Curs:
    Web Design Junior
    Tema: Liste. Imagini.

    Sarcina 1.
    Creați o listă marcată și una numerotată. Pentru lista marcată
    folosiți lista de mai jos cu stiouri de animație:
     20th Century Fox Animation;
     DreamWorks Animation;
     Pixar;
     Sony Pictures Animation;
     Marvel Animation;
     Walt Disney Animation Studios.

    Pentru lista numerotată selectați 5 sau 7 desene animate realizate


    de unul din studiourile de mai sus. Puteți accesa site-ul
    https://www.pixar.com/ pentru informații.

    Figura 1

    1
    Tema pentru acasă #3

    Folosiți codul sursă de mai jos. În rezultat veți obține 2 liste ca


    în figura 1.
    Link: https://codepen.io/DylanBarnett/pen/xmrqVw
    Codul sursă pentru Sarcina 1:
    HTML
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Smallfoot</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
    <ul>
    <li>1</li>
    <li>1</li>
    </ul>
    <ol>
    <li>1</li>
    <li>1</li>
    </ol>
    </body>
    </html>

    CSS
    ul {
    list-style-type: square;
    background: #3399ff;
    padding: 15px;
    }
    ul li {
    background: #cce5ff;
    padding: 5px;
    margin: 5px 0 0 35px;
    }

    2
    Tema pentru acasă #3

    ol {
    background: #ff9999;
    padding: 15px;
    }
    ol li {
    background: #ffe5e5;
    padding: 5px;
    margin: 5px 0 0 35px;
    }

    Sarcina 2.

    Folosiți codul de mai jos și link-urile pentru a însera imagini.


    1. In CSS, adăugați background-image și background-color
    pentru întreaga pagină.
    2. Adăugați imaginile pe pagină:
     https://res.cloudinary.com/dfog0e294/image/upload/v15
    45741355/webdev/Migo.png;
     https://res.cloudinary.com/dmqj4i7ad/image/upload/v16
    34292788/Imagini/Percy.png;
     https://res.cloudinary.com/dmqj4i7ad/image/upload/v16
    34292788/Imagini/Thorp.png.
    3. Faceți în așa mod, ca imaginile să fie ca link-uri (să
    putem face clic pe imagini). Adăugați eticheta <a>
    pentru fiecare dintre imagini:
    <a href="">
    <img src="" >
    </a>

    3
    Tema pentru acasă #3

    Pagina ta va arăta ca în fugura 2.

    Figura 2

    Link: https://codepen.io/DylanBarnett/pen/VqWpMW
    Codul sursă pentru Sarcina 2:

    HTML
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-
    scale=1">
    <title>Images</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
    <h1>Smallfoot</h1>
    <!--- images --->
    <img src="" alt="Migo" draggable="false">
    <img src="" alt="Percy" draggable="false">
    <img src="" alt="Thorp" draggable="false">
    </body>
    </html>

    4
    Tema pentru acasă #3

    CSS
    body {
    padding: 15px;
    font-size: medium;
    }
    h1 {
    margin: 5px 20px;
    font-size: 60px;
    color: #365d7a;
    }
    img {
    width: 300px;
    margin: 5px;
    border-radius: 12px;
    box-shadow: 2px 2px 1px 1px #b2b2b2;
    }

    Rezultat: link către proiectul CodePen cu tema realizată.

    S-ar putea să vă placă și