css-grid-miniprojects/cards.html at main · jose-devcode/css-grid-miniprojects · 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
<!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>Cards || Grid Mini Projects</title>
    <!-- google fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400&family=Source+Sans+Pro:wght@400;600;700&display=swap"
      rel="stylesheet"
    />
    <!-- font awesome -->
    <link rel="stylesheet" href="fontawesome-free-5.9.0-web/css/all.min.css" />
    <!-- styles css -->
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <section class="cards">
      <div class="title">
        <h1>three column layout</h1>
      </div>
      <div class="cards-center">
        <!-- single card -->
        <article class="card">
          <div
            class="card-img"
            style="
              background: url(./images/image-1.jpeg) center/cover no-repeat;
            "
          ></div>
          <!-- card info -->
          <div class="card-info">
            <h3>card title</h3>
            <p>
              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deserunt
              dolorem rerum qui suscipit laudantium error.
            </p>
          </div>
          <!-- card footer -->
          <div class="card-footer">
            <span><i class="fab fa-twitter"></i></span>
            <span><i class="fab fa-facebook"></i></span>
            <span><i class="fab fa-squarespace"></i></span>
            <span><i class="fab fa-linkedin"></i></span>
          </div>
        </article>
        <!-- end of single card -->

        <!-- single card -->
        <article class="card">
          <div
            class="card-img"
            style="
              background: url(./images/image-2.jpeg) center/cover no-repeat;
            "
          ></div>

          <!-- card info -->
          <div class="card-info">
            <h3>card title</h3>
            <p>
              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deserunt
              dolorem rerum qui suscipit laudantium error. Lorem ipsum dolor sit
              amet, consectetur adipisicing elit. Exercitationem, laborum
              reiciendis quasi quibusdam fuga voluptatum! Quasi odit vel soluta
              autem nostrum, aliquam minima dolorem distinctio unde deleniti
              quod! Atque corrupti tenetur unde! Porro vero, maxime cupiditate
              molestiae officiis dicta voluptate.
            </p>
          </div>
          <!-- card footer -->
          <div class="card-footer">
            <span><i class="fab fa-twitter"></i></span>
            <span><i class="fab fa-facebook"></i></span>
            <span><i class="fab fa-squarespace"></i></span>
            <span><i class="fab fa-linkedin"></i></span>
          </div>
        </article>
        <!-- end of single card -->

        <!-- single card -->
        <article class="card">
          <div
            class="card-img"
            style="
              background: url(./images/image-3.jpeg) center/cover no-repeat;
            "
          ></div>
          <!-- card info -->
          <div class="card-info">
            <h3>card title</h3>
            <p>
              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deserunt
              dolorem rerum qui suscipit laudantium error.
            </p>
          </div>
          <!-- card footer -->
          <div class="card-footer">
            <span><i class="fab fa-twitter"></i></span>
            <span><i class="fab fa-facebook"></i></span>
            <span><i class="fab fa-squarespace"></i></span>
            <span><i class="fab fa-linkedin"></i></span>
          </div>
        </article>
        <!-- end of single card -->
        <!-- single card -->
        <article class="card">
          <div
            class="card-img"
            style="
              background: url(./images/image-4.jpeg) center/cover no-repeat;
            "
          ></div>
          <!-- card info -->
          <div class="card-info">
            <h3>card title</h3>
            <p>
              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deserunt
              dolorem rerum qui suscipit laudantium error.
            </p>
          </div>
          <!-- card footer -->
          <div class="card-footer">
            <span><i class="fab fa-twitter"></i></span>
            <span><i class="fab fa-facebook"></i></span>
            <span><i class="fab fa-squarespace"></i></span>
            <span><i class="fab fa-linkedin"></i></span>
          </div>
        </article>
        <!-- end of single card -->
      </div>
    </section>
    <a href="index.html" class="btn">back to Home</a>
  </body>
</html>