Úlohy

Znenie

  1. Stiahneme si obrázky, ktoré na stránke použijeme: cv_8.zip
  2. Vytvoríme si nový projekt vytvorením novej zložky s názvom „cv_8“
  3. Vytvoríme nový základný HTML dokument index.html
  4. Vytvoríme prázdny CSS súbor s názvom „style.css“
  5. Vytvoríme si a naštýlujeme stránku podľa nasledujúcej predlohy za použitia tried a identifikátorov.

Predloha

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Tech News</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700&amp;subset=latin-ext" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
    <header>
        <span class="site-title">Tech News</span>
    </header>

    <main>
        <div class="title-container">
            <h1>Articles</h1>
        </div>

        <div class="articles">
            <article class="news">
                <img src="./img/i1.jpg" alt="Facebook Staffers Once Brainstormed Ways to Sell User Data: Report">
                <div class="note-content">
                    <h2>Facebook Staffers Once Brainstormed Ways to Sell User Data: Report</h2>
                    <p>Facebook at one time considered charging companies for access to its user data, according to a report based on three pages of unredacted material from an 18-page document showing portions of some internal Facebook emails, mainly from about 2012 to 2014. The documents are linked to a lawsuit, Six4Three LLC v. Facebook Inc., alleging that Facebook's data policies were anticompetitive.</p>
                </div>
                <a href="#" target="_blank" class="read-more">Read more</a>
                <div class="share">
                    <a href="#"><i class="fab fa-facebook-square"></i></a>
                    <a href="#"><i class="fab fa-google-plus-g"></i></a>
                    <a href="#"><i class="fab fa-twitter"></i></a>
                </div>
            </article>

            <article class="news">
                <img src="./img/i2.jpg" alt="Amazon Comprehend Medical Makes Sense of Scattered Healthcare Data">
                <div class="note-content">
                    <h2>Amazon Comprehend Medical Makes Sense of Scattered Healthcare Data</h2>
                    <p>Amazon has announced Amazon Comprehend Medical, a language processing service that lets users gather information -- such as a patient's medical condition and medication dosage, strength and frequency -- from sources including doctors' notes, clinical trial reports, hospital admission notes and patient health records. Most health and patient data currently is stored as unstructured medical text.</p>
                </div>
                <a href="#" target="_blank" class="read-more">Read more</a>
                <div class="share">
                    <a href="#"><i class="fab fa-facebook-square"></i></a>
                    <a href="#"><i class="fab fa-google-plus-g"></i></a>
                    <a href="#"><i class="fab fa-twitter"></i></a>
                </div>
            </article>

            <article class="news">
                <img src="./img/i3.jpg" alt="">
                <div class="note-content">
                    <h2>The Consumer IoT's Boon for the Insurance Industry</h2>
                    <p>Smart home and consumer IoT solutions promise significant opportunities for the insurance industry in terms of reducing costs, alleviating risks, deepening customer engagement, and creating new services and revenue streams. There are many barriers ahead to overcome, but given the tremendous upside, insurance companies have begun attacking these challenges with a multi-tiered strategy. </p>
                </div>
                <a href="#" target="_blank" class="read-more">Read more</a>
                <div class="share">
                    <a href="#"><i class="fab fa-facebook-square"></i></a>
                    <a href="#"><i class="fab fa-google-plus-g"></i></a>
                    <a href="#"><i class="fab fa-twitter"></i></a>
                </div>
            </article>
        </div>
    </main>
</body>
</html>

Vizualizácia