Responsive/index.html at main · nii238686/Responsive · 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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!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>Responsive Website Design</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- Banner -->
    <div class="banner">
        <header>
            <a href="#" class="logo">Al-Xaramaey</a>
            <div class="toggle"></div>
        </header>
        <img src="/img/bg.jpg" alt="">
        <div class="content">
            <h2>Sucess by Design</h2>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi sunt doloribus, repellat voluptates adipisci ullam quas blanditiis quo tempora excepturi natus dolores, maxime, atque nihil molestias distinctio est esse molestiae.</p>

        </div>
    </div>


    <!-- About -->
    <section class="about">
        <div class="contentBx">
            <h2 class="heading">About Us</h2>
            <p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam quaerat necessitatibus iusto atque recusandae, blanditiis non vitae sit accusantium quod voluptate tempore, fuga reiciendis consequuntur reprehenderit quos consequatur quidem magni. <br><br>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, minima. Doloremque, deleniti consequatur? Explicabo inventore rerum nisi tempore provident, pariatur quo molestias consequatur ducimus ratione nostrum id aliquid ut consectetur!</p>
        </div>
        <div class="imgBx"></div>
    </section>

    <!-- Services -->
    <section class="services">
        <h2 class="heading">Our services</h2>
        <p class="text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reiciendis voluptates doloribus cumque ea incidunt, eos distinctio ut, exercitationem ipsam error soluta tempora deserunt, accusantium qui harum suscipit in sapiente officiis.</p>
        <div class="container">
            <div class="serviceBx">
               <div>
                <img src="/img/icon1.png" alt="">
                <h2>Design</h2>
               </div>
            </div>
            <div class="serviceBx">
               <div>
                <img src="/img/icon2.png" alt="">
                <h2>Development</h2>
               </div>
            </div>
            <div class="serviceBx">
               <div>
                <img src="/img/icon3.png" alt="">
                <h2>Branding</h2>
               </div>
            </div>
        </div>
    </section>

    <!-- Technology -->

    <section class="technology">
        <div class="contenBx">
            <h2 class="heading">We use cutting edge technology</h2>
            <p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus ipsum totam harum eius perspiciatis. Asperiores illo ducimus sunt at eum soluta id beatae temporibus tempore! Iusto temporibus incidunt mollitia libero?</p>

        </div>
        <div class="imgBx">
            <img src="/img/tech.png" alt="">
        </div>
    </section>

    <!-- Client -->

    <section class="client">
        <h2 class="heading">Our Client</h2>
        <p class="text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laborum, facilis? Eos reiciendis fugiat maiores ducimus impedit cum consequuntur architecto? Repudiandae quia est blanditiis laborum reiciendis neque tempora incidunt suscipit natus!</p>
        <div class="imgBx">
            <img src="/img/brand1.png" alt="">
            <img src="/img/brand2.png" alt="">
            <img src="/img/brand3.png" alt="">
            <img src="/img/brand4.png" alt="">
        </div>
    </section>

    <!-- Tesimonials -->

    <section class="testimonials">
        <h2 class="heading">What Our Client says</h2>
        <div class="container">
            <div class="contentBx">
                <div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis porro, reprehenderit saepe eius tempora est impedit. Suscipit blanditiis ad sapiente neque natus accusantium velit qui explicabo nostrum nulla? Quam, nostrum!</p> <br>
                    <h3>Someone famous</h3>
                </div>
            </div>
            <div class="contentBx">
                <div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis porro, reprehenderit saepe eius tempora est impedit. Suscipit blanditiis ad sapiente neque natus accusantium velit qui explicabo nostrum nulla? Quam, nostrum!</p> <br>
                    <h3>Someone famous</h3>
                </div>
            </div>
        </div>
    </section>

    <!-- Contect -->

    <section class="contact">
        <h2 class="heading">Contact</h2>
        <p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt dolorem necessitatibus quo iusto porro! Illum obcaecati explicabo cum tempora amet possimus doloribus vero, similique quis reiciendis deserunt provident repellendus distinctio.</p>
    </section>

    <section class="about">
        <div class="contentBx redbg">
            <div class="form">
                <div class="inputBx">
                    <input type="text" name="" placeholder="Full Name ">
                </div>
                <div class="inputBx">
                    <input type="text" name="" placeholder="Email Address ">
                </div>
                <div class="inputBx">
                    <input type="text" name="" placeholder="Mobile No. ">
                </div>
                <div class="inputBx">
                   <textarea placeholder="Write your massage here"></textarea>
                </div>
                <div class="inputBx">
                    <input type="submit" name="" value="Send"">
                </div>
            </div>
        </div>
        <div class="imgBx2"></div>
    </section>

    <!-- footer -->

    <section class="footer">
        <p class="text">Design & Development By online Dugsiye</p>
        <ul>
            <p class="text">Follow us on:</p>
            <li><a href="#"><img src="/img/facebook.png" alt=""></a></li>
            <li><a href="#"><img src="/img/linkedin.png" alt=""></a></li>
            <li><a href="#"><img src="/img/twitter.png" alt=""></a></li>
        </ul>
    </section>
</body>
</html>