Flexbox-Basic-Layout/index.html at main · jfabrante/Flexbox-Basic-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
<!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">
    <link rel="stylesheet" href="css/styles.css">
    <title>Flexbox Basic Layout</title>
</head>
<body>
    <div class="hero">
        <p>Things are <span class="text-p">awesome </span>here at</p>
        <h1>Awesome<span class="hero-co">Co</span></h1>
        <p>We <strong>Design</strong> and <strong>Develope Awesome </strong>stuff</p>
    </div>

    <div class="sales-points">
        <div class="sales-point">
            <h2>Sales Point 1</h2>
            <p>Maecenas id volutpat tellus. Praesent at rhoncus
                ante, non sollicitudin nisl
            </p>
        </div>
        <div class="sales-point">
            <h2>Sales Point 2</h2>
            <p>Maecenas id volutpat tellus. Praesent at rhoncus
                ante, non sollicitudin nisl</p>
        </div>
        <div class="sales-point">
            <h2>Sales Point 3</h2>
            <p>Maecenas id volutpat tellus. Praesent at rhoncus
                ante, non sollicitudin nisl</p>
        </div>
    </div>

    <div class="cta">
        <div class="cta-text">
            <h2>Call to <span>Action</span></h2>
            <p>Sed lacus leo, auctor ut odio non, tincidunt blandit
                nunc. Integer mauris dolor, maximus eu consecteur non,
                imperdiet sit amet nisi. Nam in sem finibus mi hendrerit ornare
                eu eu leo. Interdum et malesuda fames ac ante ipsum primis in faucibus.
                Sed vestibulum, magna sit amet interdum fringilla
            </p>
            <a href="" class="btn">Buy Now</a>
        </div>
    </div>
</body>

</html>