media-website/index.html at master · evanmcarlson/media-website · 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
<!DOCTYPE html>
  <header>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, intial-scale=1">
    <title>A Simple Gallery</title>
  <link rel="stylesheet" href="style.css">
  </header>
  <body>
    <div class="articles">
      <!-- ARTICLE ONE -->
      <div class="story">
        <h1>Review: Airpods Pro</h1>
        <p>Apple's latest wireless earbuds are what the original AirPods should have been.</p>
        <ul>
          <li>Parker Hall</li>
        </ul>
<!-- using flexbox inside a CSS grid allows us to put img at the bottom of the story description, which is better for accessibility -->
        <img src="images/airpods.jpg">
        <a href="https://www.wired.com/review/apple-airpods-pro/" target="_blank">Read More</a>
      </div>
      <!-- ARTICLE TWO -->
      <div class="story">
        <h1>Snapchat Spectacles 3 review: Pretty, pricey</h1>
        <p>Iterating on AR eyewear to beat Apple & Facebook</p>
        <ul>
          <li>Josh Constine</li>
        </ul>
        <img src="images/spectacles.jpg">
        <a href="https://techcrunch.com/2019/11/12/snapchat-spectacles-3-review-pretty-pricey/" target="_blank">Read More</a>
      </div>
      <!-- ARTICLE THREE -->
      <div class="story">
        <h1>Tesla’s fourth Gigafactory will be in Berlin</h1>
        <p>‘I love Berlin’, says Elon Musk</p>
        <ul>
          <li>Sean O'Kane</li>
        </ul>
        <img src="images/tesla.jpg">
        <a href="https://www.theverge.com/2019/11/12/20961812/elon-musk-berlin-tesla-ceo-fourth-gigafactory-construction" target="_blank">Read More</a>
      </div>
      <!-- ARTICLE FOUR -->
      <div class="story">
        <h1>The infuriating truth behind elevator buttons</h1>
        <p>How a few flaky elevator buttons are tearing our office apart</p>
        <ul>
          <li>William Poor</li>
        </ul>
        <img src="images/elevator_buttons.jpg">
        <a href="https://www.theverge.com/science/2019/11/5/20940967/elevator-buttons-ui-design-human-computer-interaction" target="_blank">Read More</a>
      </div>
      <!-- ARTICLE FIVE -->
      <div class="story">
        <h1>Disney+ hit by technical glitches on launch day</h1>
        <p>Nearly 8,300 complaints about Disney+ were filed over a 15-minute period starting at 9:00 EST</p>
        <ul>
          <li>Cass McComb</li>
        </ul>
        <img src="images/disney.jpg">
        <a href="https://www.bbc.com/news/technology-50390589" target="_blank">Read More</a>
      </div>
    </div>
  </body>
</html>