fd-startercode-css-layout/index.html at main · mi-classroom/fd-startercode-css-layout · 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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Layouts</title>

    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,700;1,400;1,500;1,700&display=swap" rel="stylesheet">


    <link rel="stylesheet" href="./styles/reset.css">
    <link rel="stylesheet" href="./styles/variables.css">
    <link rel="stylesheet" href="./styles/base.css">
    <link rel="stylesheet" href="./styles/layouts.css">
    <link rel="stylesheet" href="./styles/components.css">
  </head>
  <body>
    <h1>Sport ist Mord</h1>

    <div class="content-wrap">
      <figure class="card">
        <img
          src="./images/photo-1611124601189-563e96872409-ls.jpg"
          alt="Frontside Air in Saas Fee"
        />
        <figcaption>
          <h2>Frontside Air in Saas Fee</h2>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio
            provident eum nostrum eius consequatur, vero placeat debitis
            pariatur quo itaque quod eos error eveniet natus molestias non
            voluptas ullam nesciunt.
          </p>
          <dl class="meta-info">
            <dt>Views</dt>
            <dd>387.924</dd>

            <dt>Downloads</dt>
            <dd>2.012</dd>

            <dt>Location</dt>
            <dd>Switzerland</dd>

            <dt>Published</dt>
            <dd>January 20, 2021</dd>

            <dt>Publisher</dt>
            <dd>Felipe Giacometti</dd>
          </dl>
        </figcaption>
      </figure>
    </div>

    <div class="content-wrap">
      <figure class="card">
        <img
          src="./images/photo-1565992441121-4367c2967103-ls.jpg"
          alt="Freeriding in France"
        />
        <figcaption>
          <h2>Freeriding in France</h2>
          <p>
            Consectetur adipisicing elit. Distinctio
            provident eum nostrum eius consequatur, vero placeat debitis
            pariatur quo itaque quod eos error eveniet natus molestias non
            voluptas ullam nesciunt. Vero placeat debitis
            pariatur quo itaque quod eos error eveniet natus molestias non
            voluptas ullam nesciunt.
          </p>
          <dl class="meta-info">
            <dt>Views</dt>
            <dd>2.037.402</dd>

            <dt>Downloads</dt>
            <dd>41.964</dd>

            <dt>Location</dt>
            <dd>La Rosière, Montvalezan, France</dd>

            <dt>Published</dt>
            <dd>Published on August 16, 2019</dd>

            <dt>Publisher</dt>
            <dd>Matthieu Pétiard</dd>
          </dl>
        </figcaption>
      </figure>
    </div>

    <div class="content-wrap">
      <figure class="card">
        <img
          src="./images/photo-1500468756762-a401b6f17b46-ls.jpg"
          alt="Out of Track: Freerunning"
        />
        <figcaption>
          <h2>Out of Track: Freerunning</h2>
          <p>
            Vero placeat debitis
            pariatur quo itaque quod eos error eveniet natus molestias non
            voluptas ullam nesciunt. Vero placeat debitis
            pariatur quo itaque quod eos error eveniet natus molestias non
            voluptas ullam nesciunt.
          </p>
          <dl class="meta-info">
            <dt>Views</dt>
            <dd>15.520.173</dd>

            <dt>Downloads</dt>
            <dd>149.632</dd>

            <dt>Published</dt>
            <dd>Published on July 19, 2017</dd>

            <dt>Publisher</dt>
            <dd>Clique Images</dd>
          </dl>
        </figcaption>
      </figure>
    </div>

    <div class="content-wrap">
      <figure class="card">
        <img
          src="./images/photo-1580238053495-b9720401fd45-ls.jpg"
          alt="Frontside Grab"
        />
        <figcaption>
          <h2>Frontside Grab</h2>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci praesentium deserunt saepe expedita, exercitationem quasi itaque in. Amet nulla dicta, atque doloremque dignissimos non. Excepturi quisquam laudantium saepe dolor delectus.
          </p>
          <dl class="meta-info">
            <dt>Views</dt>
            <dd>2.771.931</dd>

            <dt>Downloads</dt>
            <dd>22.026</dd>

            <dt>Published</dt>
            <dd>Published on January 28, 2020</dd>

            <dt>Publisher</dt>
            <dd>Felipe Giacometti</dd>
          </dl>
        </figcaption>
      </figure>
    </div>
  </body>
</html>