Scribd Logo
Upload

Welcome to Scribd!

  • Diagnostic Challenge - HTML & CSS: Paula Convers, Laura García & Isabella Mora

    Uploaded by

    160217 ISABELLA MORA ACOSTA
    37 views8 pages
    1. The document provides instructions for a diagnostic challenge to create a web page for a housing project called "Green Life" using HTML and CSS. 2. The web page is to have three sections ("Main Features", "Prices", "Location") with two items and an image in each section. Different CSS filters are to be applied to each image. 3. Students are to provide a mock-up design and screenshot of the completed web page, including the HTML and CSS code. Their work will be evaluated on resources used, design, use of images, and functionality.

    Original Description:

    Original Title

    Info

    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
    1. The document provides instructions for a diagnostic challenge to create a web page for a housing project called "Green Life" using HTML and CSS. 2. The web page is to have three sections ("Main Features", "Prices", "Location") with two items and an image in each section. Different CSS filters are to be applied to each image. 3. Students are to provide a mock-up design and screenshot of the completed web page, including the HTML and CSS code. Their work will be evaluated on resources used, design, use of images, and functionality.

    Copyright:

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

    Diagnostic Challenge - HTML & CSS: Paula Convers, Laura García & Isabella Mora

    Uploaded by

    160217 ISABELLA MORA ACOSTA
    1. The document provides instructions for a diagnostic challenge to create a web page for a housing project called "Green Life" using HTML and CSS. 2. The web page is to have three sections ("Main Features", "Prices", "Location") with two items and an image in each section. Different CSS filters are to be applied to each image. 3. Students are to provide a mock-up design and screenshot of the completed web page, including the HTML and CSS code. Their work will be evaluated on resources used, design, use of images, and functionality.

    Copyright:

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

    Diagnostic Challenge - HTML

    & CSS
    III Term
    ─

    Paula Convers, Laura García & Isabella Mora


    1

    José Max León Bilingual School


    10B
    Technology - Arukay
    2

    Programming with HTMl & CSS

    Diagnostic
    1. Make a Web Page to help architects in order to show information about a housing
    project: Green Life.

    2. Features:

    a. The Web Site has to have a title: Project´s Name.

    b. Include three subtitles: Main Features, Prices, Location

    c. Each subtitle has two Items.

    d. Each subtitle has to have the respective image or photo.

    e. Keep in mind the good presentation, organization and use of CSS styles.

    3. Each image must apply a different filter, we can also try the following

    a. filter: brightness(200%);

    b. filter: contrast(500%);

    c. filter: hue-rotate(80deg);

    d. filter: opacity(50%);

    e. filter: sepia(200%);
    3

    4. Design (Mock up)

    a. Paste here a general mock up

    5. Web Site (Screenshot)

    a. Paste here the screenshot of the web site and programing


    4

    HTML:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <link ref="diagnostic test.css" rel="stylesheet" type="TEXT/CSS">
    <title>Green Life</title>
    </head>
    <body>
    <h1> Green Life </h1>
    <h3 class="styletitle"> Main features </h3>
    <img src="https://euroval.com/wp-content/uploads/2019/07/sustainable-home.jpg"
    class="imagen1">
    <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque nobis
    doloribus modi non consequuntur repudiandae delectus adipisci sint recusandae et
    possimus corrupti, atque quaerat dolore a incidunt sit suscipit iusto? </p>
    5

    <p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. A explicabo aliquid
    repellat blanditiis ut molestiae non, ad sequi amet laudantium inventore! Impedit quo
    necessitatibus nesciunt explicabo facilis voluptates porro atque!</p>
    <h3 class="styletitle"> Price </h3>
    <img src="https://wildentrepreneur.org/wp-content/uploads/2018/08/PRECIOS-
    EVE.png" class="imagen2">
    <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque nobis
    doloribus modi non consequuntur repudiandae delectus adipisci sint recusandae et
    possimus corrupti, atque quaerat dolore a incidunt sit suscipit iusto? </p>
    <p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. A explicabo aliquid
    repellat blanditiis ut molestiae non, ad sequi amet laudantium inventore! Impedit quo
    necessitatibus nesciunt explicabo facilis voluptates porro atque!</p>
    <h3 class="styletitle"> Location </h3>
    <img
    scr="https://i.pinimg.com/474x/72/30/36/723036ba0e241c1eb9513689ddbd2dd9.jpg">
    <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque nobis
    doloribus modi non consequuntur repudiandae delectus adipisci sint recusandae et
    possimus corrupti, atque quaerat dolore a incidunt sit suscipit iusto? </p>
    <p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. A explicabo aliquid
    repellat blanditiis ut molestiae non, ad sequi amet laudantium inventore! Impedit quo
    necessitatibus nesciunt explicabo facilis voluptates porro atque!</p>
    </body>
    </html>

    CSS:
    h1{
    text-align: center;
    color: #249234;
    text-transform: uppercase;
    }
    .styletitle{
    background-color: #6DE7B3;
    padding: 10px;
    }
    body{
    background-color: #E0FFC8;
    }
    img{
    display: block;
    margin-left:auto;
    margin-right:auto;
    width:300px;
    height:175px;
    6

    }
    .imagen1{
    filter: brightness(100%);
    }
    .imagen2{
    filter: opacity(50%);
    }
    .imagen3{
    filter: contrast(250%);
    }

    Upload the project to Arukay platform, session 5.

    Evaluation:

    Criteria Description 1 to 4

    Resources The web site uses different


    style CSS codes.

    Design The elements are well


    distributed, considering the
    use of appropriate colors.
    Take good advantage of the
    spaces.

    Use of Images The Web Sites shows


    different images with
    different filters

    Function The application meets the


    proposed challenge, all its
    options work correctly,

    Name: Evaluator(s)
    7

    You might also like