css_grid_landing/index.html at main · iGeek0/css_grid_landing · 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
<!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="assets/css/styles.css">
    <title>Document</title>
</head>

<body>
    <header class="header-wrapper">
        <div class="header-logo">
            <img class="logo" src="assets/images/logo.png" alt="logo">
        </div>
        <div class="header-title">
            <h1>Cafe mexicano</h1>
        </div>
        <div class="header-input">
            <input type="text" placeholder="Busqueda">
        </div>
    </header>
    <div class="hero-wrapper">
        <div class="hero">
            <div class="hero-inner">
                <h1>Cafe Mexicano</h1>
                <h2>100% Natural no te lo pierdas!</h2>
                <a href="https://example.com/" class="btn">Ver producto</a>
            </div>
        </div>
    </div>

    <h1 style="padding: 10px;">Nuestros productos</h1>
    <div class="product-wrapper">
        <div class="card">
            <img src="assets/images/granos.png" alt="Avatar" style="width:100%">
            <div class="container">
                <h4><b>Granos</b></h4>
                <p class="text-justify">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Alias distinctio
                    laborum labore, soluta nisi inventore minima.</p>
            </div>
        </div>
        <div class="card">
            <img src="assets/images/expreso.png" alt="Avatar">
            <div class="container">
                <h4><b>Expreso</b></h4>
                <p class="text-justify">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Alias distinctio
                    laborum labore, soluta nisi inventore minima.</p>
            </div>
        </div>
        <div class="card">
            <img src="assets/images/organico.png" alt="Avatar">
            <div class="container">
                <h4><b>Organico</b></h4>
                <p class="text-justify">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Alias distinctio
                    laborum labore, soluta nisi inventore minima.</p>
            </div>
        </div>
        <div class="card">
            <img src="assets/images/crema.png" alt="Avatar">
            <div class="container">
                <h4><b>Cremoso</b></h4>
                <p class="text-justify">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Alias distinctio
                    laborum labore, soluta nisi inventore minima.</p>
            </div>
        </div>
    </div>

    <div class="additional-wraper">
        <h1>Cafe mexicano</h1>
        <p>
            Nisi laboris adipisicing occaecat nostrud non duis officia laborum proident do aliqua deserunt. Eiusmod
            laborum do Lorem officia ad aliqua ex laboris fugiat enim adipisicing. Est elit consectetur nulla
            consectetur id aliqua laborum velit nulla eu. Lorem aliqua nostrud est quis sit nisi ad velit velit deserunt
            commodo qui enim duis. Elit eiusmod deserunt ipsum excepteur ea deserunt dolore consectetur. Nulla quis
            voluptate laboris eiusmod non. Ex consectetur consequat sint labore anim aliqua exercitation elit occaecat
            velit.

            Consectetur do sit qui ullamco quis cillum ullamco aliqua est officia. Occaecat quis aliqua ut voluptate. Ad
            reprehenderit voluptate culpa in nulla eiusmod ullamco magna.
        </p>
    </div>
    <footer>
        <h1>Contactanos en nuestras redes sociales</h1>
        <div class="social-wrapper">
            <a href="https://www.facebook.com/"><img class="network-img" src="assets/images/fb.png" alt=""></a>
            <a href="https://www.instagram.com/"><img class="network-img" src="assets/images/ig.png" alt=""></a>
            <a href="https://twitter.com/"><img class="network-img" src="assets/images/tw.png" alt=""></a>
        </div>
    </footer>


</body>

</html>

<!-- Created by :Jesus Cardenas Dominguez -->