FlexBox/index.html at master · FelipeFullStack/FlexBox · 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
<!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="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">

    <title>Document</title>
</head>

<body>
    <section>
        <div class="conteiner">
            <div class="fotoCard">
                <div class="foto-usuario">
                    <img src="images/usuario.png" alt="">
                </div>
                <div class="fotosocial">
                    <img src="images/facebook.svg" alt="">
                    <img src="images/linkedin.svg" alt="">
                    <img src="images/twitter.svg" alt="">
                </div>
            </div>
            <div class="texto">
                <div>
                    <h2>Jane Doe</h2>
                </div>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Provident quidem,
                    perspiciatis eos, beatae eum pariatur commodi quam sapiente esse officia quibusdam ipsam quod. Fug
                    it dolorum at laborum perspiciatis autem officiis.</p>
                <button class="boton">Ver Mais</button>
            </div>
        </div>
        <div class="conteiner">
            <div class="fotoCard">
                <div class="foto-usuario">
                    <img src="images/usuario.png" alt="">
                </div>
                <div class="fotosocial">
                    <img src="images/facebook.svg" alt="">
                    <img src="images/linkedin.svg" alt="">
                    <img src="images/twitter.svg" alt="">
                </div>
            </div>
            <div class="texto">
                <div>
                    <h2>Jane Doe</h2>
                </div>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Provident quidem,
                    perspiciatis eos, beatae eum pariatur commodi quam sapiente esse officia quibusdam ipsam quod. Fug
                    it dolorum at laborum perspiciatis autem officiis.</p>
                <button class="boton">Ver Mais</button>
            </div>
        </div>
        <div class="conteiner">
            <div class="fotoCard">
                <div class="foto-usuario">
                    <img src="images/usuario.png" alt="">
                </div>
                <div class="fotosocial">
                    <img src="images/facebook.svg" alt="">
                    <img src="images/linkedin.svg" alt="">
                    <img src="images/twitter.svg" alt="">
                </div>
            </div>
            <div class="texto">
                <div>
                    <h2>Jane Doe</h2>
                </div>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Provident quidem,
                    perspiciatis eos, beatae eum pariatur commodi quam sapiente esse officia quibusdam ipsam quod. Fug
                    it dolorum at laborum perspiciatis autem officiis.</p>
                <button class="boton">Ver Mais</button>
            </div>
        </div>
        <div class="conteiner">
            <div class="fotoCard">
                <div class="foto-usuario">
                    <img src="images/usuario.png" alt="">
                </div>
                <div class="fotosocial">
                    <img src="images/facebook.svg" alt="">
                    <img src="images/linkedin.svg" alt="">
                    <img src="images/twitter.svg" alt="">
                </div>
            </div>
            <div class="texto">
                <div>
                    <h2>Jane Doe</h2>
                </div>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Provident quidem,
                    perspiciatis eos, beatae eum pariatur commodi quam sapiente esse officia quibusdam ipsam quod. Fug
                    it dolorum at laborum perspiciatis autem officiis.</p>
                <button class="boton">Ver Mais</button>
            </div>
        </div>
    </section>
</body>

</html>