baerge.github.io/index.html at master · baerge/baerge.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MAD9013 MAD&amp;D Times</title>
    <link rel="stylesheet" href="./css/times.css" />
</head>
<body>
    <!--
    All the CSS classes that you need to style this page are already included.
    Do NOT edit the HTML.
    All your work on this exercise should be done in the CSS file
    -->
    <div class="container">
        <nav class="subnav">
            <a href="#lang"><span class="lang active">En</span></a>
            <a href="#lang"><span class="lang active">Fr</span></a>
            <a href="#contact">Contact Us</a>
        </nav>
        <header class="masthead">
        <img src="./img/logo.png" alt="MAD&amp;D Logo" class="times-logo" />
            <h1>MAD&amp;D Times</h1>
        </header>
        <nav class="mainnav">
            <a href="#home">Home</a>
            <a href="#design">Design</a>
            <a href="#dev">Development</a>
            <a href="#projects">Projects</a>
        </nav>
        <main class="content">
            <article class="lead-story story">
                <h1 class="story-title">Story Title 1</h1>
                <p class="byline">
                    <span class="author">Clint Eastwood</span>
                    <span class="pub">
                        <time datetime="2018-09-27">Thursday, September 27, 2018</time>
                    </span>
                </p>
                <p><img class="story-img" src="https://picsum.photos/400/400?random" alt="Image related to the story"/> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia sapiente sunt modi tempore eius voluptas nam adipisci, est magnam tenetur nemo ducimus id, perspiciatis quo provident voluptate numquam maxime ipsa.</p>
                <blockquote>Badges? We ain't got no badges! We don't need no badges! I don't have to show you any stinking badges!</blockquote>
                <p>Hic placeat ipsa fugiat, omnis temporibus facere illo, quia illum id voluptatum facilis quibusdam nostrum at nam unde sed eos. Quia eos, tempora eaque sed sit harum provident maxime soluta.</p>
                <p>Quaerat, velit deleniti molestiae excepturi officia ipsa quidem dolorem qui? Dolore ab hic explicabo rerum. Laborum officia, quidem ullam beatae impedit, nulla consequatur veritatis repellendus minima deleniti tempore, praesentium officiis.</p>
                <p>Est expedita id necessitatibus odio voluptatum nemo aliquid quos doloribus, officia amet commodi modi, quae placeat maiores libero ab tenetur incidunt voluptas quidem, molestias iusto laboriosam debitis accusantium culpa. Repellat.</p>
                <p>Corporis in atque doloremque architecto, nisi, explicabo aspernatur vitae fuga vero ullam exercitationem autem neque debitis. Voluptatem ipsum, perspiciatis cumque ipsam, obcaecati aperiam totam, magnam nostrum rem accusamus, temporibus fugit.</p>
            </article>
            <article class="story">
                <h1 class="story-title">Story Title 2</h1>
                <p class="byline">
                    <span class="author">Brad Pitt</span>
                    <span class="pub">
                        <time datetime="2018-09-26">Wednesday, September 26, 2018</time>
                    </span>
                </p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint laboriosam accusamus omnis numquam delectus sit, officia voluptatem, exercitationem facilis aspernatur id reiciendis eligendi. Rem deleniti, velit recusandae eaque temporibus, accusantium.</p>
                <p>Illo quisquam iste incidunt minima debitis modi tempore natus, molestiae fugit odit sit impedit magni quaerat vero blanditiis a distinctio, nobis nulla ea. Aliquid doloribus tempora, commodi hic optio repudiandae!</p>
                <blockquote> I am Jack's raging bile duct.<br/>I Am Jack's cold sweat.<br/>I Am Jack's Smirking Revenge.</blockquote>
                <p>Inventore obcaecati fugiat illo aut, tempora ratione, minima labore aspernatur. Praesentium, illo minus fugiat ipsa. Commodi sequi consequuntur odio doloremque, odit ratione voluptates enim ea ab culpa itaque iure, reprehenderit.</p>
                <p>Laudantium quaerat, modi recusandae mollitia dolorem, repellendus nostrum, doloribus dolor laboriosam laborum veritatis inventore expedita ullam eum officia voluptatum esse tempora fuga tempore explicabo. Nobis non, neque maxime aperiam amet?</p>
            </article>
            <article class="story">
                <h1 class="story-title">Story Title 3</h1>
                <p class="byline">
                    <span class="author">Martin Freeman</span>
                    <span class="pub">
                        <time datetime="2018-09-25">Tuesday, September 25, 2018</time>
                    </span>
                </p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid fugit corrupti, quidem delectus placeat officia unde at vero mollitia. Voluptate dolor temporibus iure corporis sed et earum dolorem dolorum eaque.</p>
                <blockquote>We're gonna need a bigger boat.</blockquote>
                <p>Temporibus at in dicta similique facilis quod ipsum tempora molestias enim cumque dolor unde officia ullam, modi repellendus, dignissimos, eius quae animi! Modi labore vero animi incidunt earum doloremque neque!</p>
                <p>Quaerat illum sunt, nihil ut voluptatum ex vitae magni dolor natus dolore temporibus distinctio pariatur, consectetur odit amet quis accusamus impedit vel nobis tempore? Laudantium illum eveniet aliquid explicabo hic!</p>
            </article>
        </main>
        <footer class="foot">
            <p>&copy; 2018 MAD<span>&amp;</span>D Times</p>
        </footer>
    </div>
</body>
</html>