02-responsive-page/index.html at main · GCA-Classroom/02-responsive-page · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Wired &amp; Weird</title>
  <link rel="stylesheet" href="style.css">
  <link href="https://fonts.googleapis.com/css2?family=Exo+2:wght@400;700&family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
  <header>
    <h1>Wired &amp; Weird</h1>
  </header>
  <main>
    <section id="featured-article">
      <h2>BrainChip 9000: The World's First Direct Mind-PC Interface?</h2>
      <ul class="metadata">
        <li>By Zoe Sparks</li>
        <li>•</li>
        <li>April 1, 2025</li>
        <li>•</li>
        <li>AI Tech</li>
      </ul>
      <p>Tired of typing with your fingers? The BrainChip 9000 claims it can read your brain waves and turn them into text—even emojis! The developers say it's a total game-changer, but early testers report some interesting side effects… </p>
      <a href="#">Read More</a>
    </section>
    <section class="article">
      <img src="img/dronut.png" alt="Dronut image" />
      <h2>Dronut: The Donut That Delivers Itself</h2>
      <ul class="metadata">
        <li>By Nova Ray</li>
        <li>•</li>
        <li>March 28, 2025</li>
        <li>•</li>
        <li>Gadgets</li>
      </ul>
      <p>Who has time for food delivery apps? This drone-powered pastry zips straight to your doorstep—or lecture hall—before your coffee even cools. Rumor has it the next version might feature anti-sprinkle turbulence tech…</p>
      <a href="#">Read More</a>
    </section>
    <section class="article">
      <img src="img/robo-tutor.png" alt="RoboTutor image" />
      <h2>RoboTutor 2.0: The AI That Nags You About Homework</h2>
      <ul class="metadata">
        <li>By Casey Tron</li>
        <li>•</li>
        <li>March 25, 2025</li>
        <li>•</li>
        <li>Tools</li>
      </ul>
      <p>Struggling to stay on task? RoboTutor 2.0 uses machine learning to bug you about incomplete assignments until you cave. Some students find it life-changing, while others say it's basically a parental figure with an off switch…</p>
      <a href="#">Read More</a>
    </section>
    <section id="more-articles">
      <h3>More Articles</h3>
      <ul>
        <li><a href="#">Beat the Beep: Cancel Your Alarm Before It Rings</a></li>
        <li><a href="#">Walking Toaster: Saving You Steps in the Morning</a></li>
        <li><a href="#">Nano-Laundry: Clothes That Clean Themselves</a></li>
      </ul>
    </section>
  </main>
</body>
</html>