code-examples/flexbox-intermediate/index.html at main · developer-delta/code-examples · 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
<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>Flexbox Finches</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <main>
    <section class="left-container">
      <div id="img-circle">
        <img src="https://images.unsplash.com/photo-1579762715118-a6f1d4b934f1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2131&q=80" alt="An old-style illustration of 3 birds on an olive branch">
      </div>
      <span>fig. 1 - finches</span>
      <aside>
        <p>The true finches are small to medium-sized passerine birds in the family Fringillidae. Finches have stout conical bills adapted for eating seeds and nuts and often have colourful plumage. They occupy a great range of habitats where they are usually resident and do not migrate. They have a worldwide distribution except for Australia and the polar regions.</p>
      </aside>
    </section>
    <section class="right-container">
      <!-- background color on large-pill -->
      <div class="large-pill"></div>
      <div class="profiles">
        <img src="https://images.unsplash.com/photo-1579273166629-ef19c29b11fb?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=702&q=80" alt="">
        <img src="https://images.unsplash.com/photo-1579762715459-5a068c289fda?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=635&q=80" alt="">
        <img src="https://images.unsplash.com/photo-1579762714453-51d9913984e2?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=671&q=80" alt="">
        <img src="https://images.unsplash.com/photo-1578762915100-7a2d602a09bc?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1257&q=80" alt="">
      </div>
      <div class="banner">
        <div class="inner-border">
          <p>fin.</p>
        </div>
      </div>
    </section>
  </main>
</body>
</html>