landing_page/index.html at main · BertaRyan/landing_page · 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
<!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">
    <title>My Landing Page</title>
    <script src="https://kit.fontawesome.com/3db8e820c1.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <div class="header">
        <nav>
            <div class="logo">
                <h1>Dummy Site</h1>
                <div class="logo-image"> <i class="fa-solid fa-user-nurse"></i></div>
            </div>
            <div class="nav-links">
                <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>
            </div>
        </nav>
    </div>

    <section class="hero">
        <div class="hero-content">
            <div class="hero-info">
                <h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore vel porro cum repellendus.</h1>

                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Veniam minima, aliquam quia aut officia
                    tempore provident maiores? Adipisci commodi aut deleniti nulla odio veritatis molestias natus ullam
                    libero illum. Fugit ratione vitae nulla, blanditiis nemo deleniti dolores veniam accusamus sit iusto
                    delectus nobis asperiores voluptas voluptatibus culpa laboriosam recusandae dolorum dignissimos
                    quidem doloribus quibusdam molestias ex quia repudiandae. Ipsum deserunt ut quidem. Dolore
                    distinctio accusantium enim similique magni aliquid veritatis quidem debitis atque, sapiente quas
                    soluta cumque! Quidem, esse voluptatem.</p>
                <button>CALL NOW</button>
            </div>
            <div class="hero-image">
                <img src="https://images.unsplash.com/photo-1614624532983-4ce03382d63d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1631&q=80"
                    alt="">
            </div>
        </div>
    </section>

    <section class="services-section">
        <h1>Services We Can Offer </h1>

        <div class="service-container">

            <div class="services">
                <div class="service-img"><i class="fa-solid fa-users-line"></i></div>
                <div class="service-content">
                    <h1>Customer Support</h1>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi assumenda ratione iste tempora
                        facilis odit!</p>
                </div>
            </div>

            <div class="services">
                <div class="service-img"><i class="fa-solid fa-wheelchair-move"></i></div>
                <div class="service-content">
                    <h1>Speedy Delivery</h1>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi assumenda ratione iste tempora
                        facilis odit!</p>
                </div>
            </div>

            <div class="services">
                <div class="service-img"><i class="fa-solid fa-circle-nodes"></i></div>
                <div class="service-content">
                    <h1>professional Design</h1>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi assumenda ratione iste tempora
                        facilis odit!</p>
                </div>
            </div>

            <div class="services">
                <div class="service-img"><i class="fa-solid fa-wheelchair-move"></i></div>
                <div class="service-content">
                    <h1>Speedy Delivery!</h1>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi assumenda ratione iste tempora
                        facilis odit!</p>
                </div>
            </div>


        </div>
    </section>

    <section class="quote">
        <div class="quote-contents">
            <p>This is an inspiring qoute, or a testimonial from a customer. Maybe it's just filling up space, or maybe
                peole will actually read it. Who knows? All i know is that it looks nice.</p>
            <div class="signature">
                <h5><i> -Random Person</i></h5>
            </div>

            <div class="bubble"></div>


        </div>

    </section>

    <section class="cta-container">

        <div class="cta">
            <div class="cta-content">
                <h1>Call to action! It's Time!</h1>
                <p>Sign up for our product by clicking that button right over there!</p>
            </div>
            <div class="cta-button">
                <button>Sign Up</button>
            </div>
        </div>
    </section>

    <section class="footer">
<h3>Copyright <sup>&copy;</sup>   The Odin Project | 2022</h3>
    </section>


</body>

</html>