html-101/4-semantic-html/25_figures.html at 4e94bce757602cd1118b3a13c3edb2227f364912 · codedex-io/html-101 · 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
<!-- Figures 🖼️ -->
<!-- Codédex -->

<!DOCTYPE html>
<html>
  <head>
    <title>My Blog</title>
  </head>
  <body>
    <header>
      <h1>My Blog</h1>
      <nav>
        <ul>
          <li><a href="#about-section">About</a></li>
          <li><a href="#stories-section">Stories</a></li>
          <li><a href="#contact-section">Contact</a></li>
        </ul>
      </nav>
    </header>
    <br>
    <main>
      <section id="about-section">
        <h2>About Me</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </section>
      <br>
      <section id="stories-section">
        <h2>Stories</h2>
        <article>
          <!-- From Exercise 25 -->
          <figure>
            <img style="width: 150px;" src="https://cdn.pixabay.com/photo/2014/10/27/18/32/obsidian-505332_960_720.jpg" alt="Obsidian">
            <figcaption>A piece of obsidian</figcaption>
          </figure>
          <br>
          <h3>Title</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </article>
        <br><hr><br>
        <article>
          <!-- From Exercise 25 -->
          <figure>
            <img style="width: 150px;" src="https://cdn.pixabay.com/photo/2014/10/27/18/32/obsidian-505332_960_720.jpg" alt="Obsidian">
            <figcaption>A piece of obsidian</figcaption>
          </figure>
          <h3>Title</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </article>
        <br><hr><br>
        <article>
          <!-- From Exercise 25 -->
          <figure>
            <img style="width: 150px;" src="https://cdn.pixabay.com/photo/2014/10/27/18/32/obsidian-505332_960_720.jpg" alt="Obsidian">
            <figcaption>A piece of obsidian</figcaption>
          </figure>
          <br>
          <h3>Title</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </article>
      </section>
    </main>
    <footer>
      <ul>
        <li>Codédex Daily © 2023</li>
        <li><a href="/about">About</a></li>
        <li><a href="/blog">Blog</a></li>
      </ul>
    </footer>
  </body>
</html>