4card-feature-section/index.html at master · Steffan153/4card-feature-section · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png" />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;600&display=swap"
    />
    <title>Frontend Mentor | Four card feature section</title>
    <style>
      body {
        font-family: Poppins, sans-serif;
        background-color: hsl(0, 0%, 98%);
      }
      main {
        display: flex;
        flex-flow: column wrap;
        justify-content: center;
        align-items: center;
        margin: auto;
        margin-top: 30px;
        max-width: 1140px;
      }
      .title {
        font-weight: 200;
        font-size: 26px;
        color: hsl(234, 12%, 34%);
      }
      .powby {
        font-size: 27px;
        font-weight: 600;
        margin-bottom: 15px;
        color: hsl(234, 12%, 34%);
      }
      .desc {
        font-weight: 300;
        color: hsl(229, 6%, 66%);
        font-size: 13px;
        margin-bottom: 40px;
      }
      header {
        max-width: 500px;
        text-align: center;
      }
      .vertical {
        display: flex;
        flex-flow: column nowrap;
      }
      .cards {
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        align-items: center;
      }
      .card {
        background: white;
        padding: 30px;
        border-radius: 5px;
        box-shadow: 0 8px 8px #ccc;
        margin-bottom: 20px;
        margin-right: 20px;
        display: inline-block;
        max-width: 300px;
      }
      .card img {
        margin-left: auto;
        display: block;
        margin-top: 10px;
      }
      .card .card-tit {
        font-size: 25px;
        font-weight: 600;
        margin-bottom: 10px;
      }
      .card .card-desc {
        font-weight: 400;
        font-size: 14px;
        color: hsl(229, 6%, 66%);
      }
      .supervisor {
        border-top: 4px solid hsl(180, 62%, 55%);
      }
      .team-builder {
        border-top: 4px solid hsl(0, 78%, 62%);
      }
      .karma {
        border-top: 4px solid hsl(34, 97%, 64%);
      }
      .calculator {
        border-top: 4px solid hsl(212, 86%, 64%);
      }
      @media (max-width: 1050px) {
        .cards {
          flex-flow: column nowrap;
        }
      }
    </style>
  </head>
  <body>
    <main>
      <header>
        <div class="title">Reliable, efficient delivery</div>
        <div class="powby">Powered by Technology</div>

        <div class="desc">
          Our Artificial Intelligence powered tools use millions of project data points to ensure that your
          project is successful
        </div>
      </header>

      <div class="cards">
        <div class="card supervisor">
          <div class="card-tit">Supervisor</div>
          <div class="card-desc">Monitors activity to identify project roadblocks</div>
          <img src="images/icon-supervisor.svg" alt="Supervisor icon" />
        </div>

        <div class="vertical">
          <div class="card team-builder">
            <div class="card-tit">Team Builder</div>
            <div class="card-desc">Scans our talent network to create the optimal team for your project</div>
            <img src="images/icon-team-builder.svg" alt="Team Builder icon" />
          </div>

          <div class="card karma">
            <div class="card-tit">Karma</div>
            <div class="card-desc">Regularly evaluates our talent to ensure quality</div>
            <img src="images/icon-karma.svg" alt="Karma icon" />
          </div>
        </div>

        <div class="card calculator">
          <div class="card-tit">Calculator</div>
          <div class="card-desc">Uses data from past projects to provide better delivery estimates</div>
          <img src="images/icon-calculator.svg" alt="Calculator icon" />
        </div>
      </div>
    </main>
  </body>
</html>