ResponsiveWeb/index.html at main · Teclit/ResponsiveWeb · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive web| débutant</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper">
        <div class="logo">
            <h1><span>R-WEB</span></h1>
        </div>
        <!-- Navigation -->
        <nav class="main-nav">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>

        <!-- Top Container -->
        <section class="top-container">
            <header class="showcase">
                <h1>Your Web Presence</h1>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A, non consequuntur facere reiciendis, cumque distinctio,  iste eos impedit!</p>
                <a href="#" class="btn">Read More</a>
            </header>
            <div class="top-box top-box-a">
                <p class="price">€150</p>
                <a href="#" class="btn">Buy Now</a>
            </div>
            <div class="top-box top-box-b">
                <p class="price">€250</p>
                <a href="#" class="btn">Buy Now</a>
            </div>
        </section>

        <!-- Boxes Section-->
        <section class="boxes">
            <div class="box">
                <i class="fas fa-chart-pie fa-4x"></i>
                <h1>Analytics</h1>
                <p>Lorem voluptatibus harum dolorum rerum suscipit nam consequatur iste libero natus magni, quaerat molestias. Dolore modi sit quo minima perferendis fugiat. A, sed voluptas omnis id odit sunt.</p>
            </div>
            <div class="box">
                <i class="fas fa-globe fa-4x"></i>
                <h1>Analytics</h1>
                <p>Lorem voluptatibus harum dolorum rerum suscipit nam consequatur iste libero natus magni, quaerat molestias. Dolore modi sit quo minima perferendis fugiat. A, sed voluptas omnis id odit sunt.</p>
            </div>
            <div class="box">
                <i class="fas fa-cog fa-4x"></i>
                <h1>Analytics</h1>
                <p>Lorem voluptatibus harum dolorum rerum suscipit nam consequatur iste libero natus magni, quaerat molestias. Dolore modi sit quo minima perferendis fugiat. A, sed voluptas omnis id odit sunt.</p>
            </div>
            <div class="box">
                <i class="fas fa-users fa-4x"></i>
                <h1>Analytics</h1>
                <p>Lorem voluptatibus harum dolorum rerum suscipit nam consequatur iste libero natus magni, quaerat molestias. Dolore modi sit quo minima perferendis fugiat. A, sed voluptas omnis id odit sunt.</p>
            </div>
        </section>

        <!-- Info Section-->
        <section class="info">
            <img src="https://images.unsplash.com/photo-1471107340929-a87cd0f5b5f3?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=666&q=80" alt="">
            <div>
                <h2>Your Business On The Web</h2>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore, necessitatibus temporibus assumenda facilis ratione corrupti beatae ducimus! Atque consectetur id recusandae aliquam. Suscipit tempore harum, laborum excepturi fuga fugiat ex.
                Vero cum temporibus sed totam, natus quas tempore quo animi perferendis commodi dolor, ducimus facilis veritatis, fuga facere officia molestias explicabo. Alias, rem impedit dolor cumque tempore assumenda dolorum eaque!
                Officia, quia quibusdam, dolorem cumque corrupti nemo praesentium maxime quae in, aliquam soluta consequuntur. Inventore praesentium, fugiat blanditiis laudantium esse hic voluptate, officia totam assumenda delectus sint minima, deserunt dolorem!</p>
                <a href="#" class="btn">Learn More</a>
            </div>
        </section>

        <!-- Portfolio -->
        <section class="portfolio">
            <img src="https://source.unsplash.com/random/200x200" alt="">
            <img src="https://source.unsplash.com/random/201x200" alt="">
            <img src="https://source.unsplash.com/random/202x200" alt="">
            <img src="https://source.unsplash.com/random/203x200" alt="">
            <img src="https://source.unsplash.com/random/204x200" alt="">
            <img src="https://source.unsplash.com/random/205x200" alt="">
            <img src="https://source.unsplash.com/random/206x200" alt="">
            <img src="https://source.unsplash.com/random/207x200" alt="">
            <img src="https://source.unsplash.com/random/208x200" alt="">
            <img src="https://source.unsplash.com/random/209x200" alt="">

        </section>

        <!-- Footer -->
        <footer>
            <p><a href="#">ResponsiveGrid &copy; 2020</a></p>
        </footer>
    </div>

</body>
</html>