-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
115 lines (114 loc) · 6.82 KB
/
index.html
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
<!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="shortcut icon" href="favicon.png" type="image/x-icon">
<!-- font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,400;0,700;1,400&display=swap" rel="stylesheet">
<!-- font ends here -->
<link rel="stylesheet" href="./sass/style.css">
<title>About - An example of about us page</title>
</head>
<body>
<section class="banner">
<div class="container">
<h1>About us</h1>
<p>Consectetur adipisicing elituscipit quidem facere itaque molestias vitae.</p>
</div> <!-- .container -->
</section> <!-- .banner -->
<section class="first">
<div class="container">
<p>Adipisicing ipsum dolor sit amet consectetur elit. Consectetur beatae eius, labore quasi ab neque asperiores repellendus praesentium in! Necessitatibus excepturi, accusantium esse eosnulla odit dicta deserunt iusto soluta.</p>
<p>Labore quasi <strong>abneque asperiores repellendus</strong> praesentium in! Necessitatibus excepturi, accusantium esse eos nulla odit dicta deserunt iusto. Tuasi ablabore neque <u>asperiores repellendus praesentium</u> in! Necessitatibus excepturi, accusantium esse eos nulla odit dicta deserunt iusto soluta. Labore quasi ab neque asperiores repellendus praesentium.</p>
<a class="cta" href="index.html">Discover more ⟩</a>
</div>
</section>
<section class="second">
<div class="container">
<div class="left-img">
<img src="./img/photo-1.jpg" alt="Person">
</div>
<div class="right-content">
<h2>Perspiciatis cupiditate deserunt</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum in cumque, id quisquam praesentium unde dolor fugiat mollitia perspiciatis cupiditate deserunt, odit quo non officiis optio illum eum ad expedita? Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sit enim dolorum, adipisci explicabo, officia reprehenderit velit quasi voluptatibus consectetur et accusantium quam quaerat voluptates vel sapiente consequuntur doloribus illum dolores!</p>
<a class="cta" href="index.html">Learn more »</a>
</div>
</div>
</section>
<section class="third">
<div class="container">
<div class="left-content">
<h2>Mollitia consequatur</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. In consequuntur velit repudiandae nobis sunt quisquam odio nesciunt! Saepe aspernatur in ad itaque quasi vel voluptatem recusandae nemo rem uidem facilis.</p>
<p>Aliquidorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis quo porro laborum non praesentium delectus ipsum, ullam necessitatibus assumenda voluptatem repellendus quis cumque nobis unde aliquam mollitia asperiores consequatur.</p>
<a class="cta" href="index.html">Contact us »</a>
</div>
<div class="right-img">
<img src="./img/photo-2.jpg" alt="photo">
</div>
</div> <!-- .container -->
</section> <!-- .third -->
<section class="four">
<div class="container">
<div class="member">
<img src="./img/photo-3.jpg" alt="photo">
<h3>Margaret Hilda</h3>
<p>Sitamet ipsum dolor consectetur adipisicing elit. Similique numquam aperiam commodi! Id, ipsam pariatur! Ex cupiditate officiis iste laboriosam quibusdam esse illo praesentium, nemo necessitatibus tempore.</p>
<div class="social">
<a title="LinkedIn" href="index.html"><img src="./img/linkedin.png" alt="linkedin"></a>
<a title="Facebook" href="index.html"><img src="./img/facebook.png" alt="facebook"></a>
<a title="Instagram" href="index.html"><img src="./img/instagram.png" alt="instagram"></a>
</div>
</div> <!-- .member -->
<div class="member">
<img src="./img/photo-4.jpg" alt="photo">
<h3>Justin Trudeau</h3>
<p>Lpsum dolor sit amet consectetur adipisicing elit. Similique numquam aperiam commodi! Id, ipsam pariatur! Ex cupiditate officiis iste laboriosam quibusdam esse illo praesentium.</p>
<div class="social">
<a title="LinkedIn" href="index.html"><img src="./img/linkedin.png" alt="linkedin"></a>
<a title="Instagram" href="index.html"><img src="./img/instagram.png" alt="instagram"></a>
<a title="Medium" href="index.html"><img src="./img/medium.png" alt="medium"></a>
</div> <!-- .social -->
</div> <!-- .member -->
<div class="member">
<img src="./img/photo-5.jpg" alt="photo">
<h3>Yoweri Museveni</h3>
<p>Consectetur upsum dolor sit amet adipisicing elit. Similique numquam aperiam commodi! Id ipsam pariatur! Ex cupiditate officiis iste laboriosam quibusdam esse illo praesentium, nemo necessitatibus tempore. Cupiditate officiis iste laboriosam.</p>
<div class="social">
<a title="LinkedIn" href="index.html"><img src="./img/linkedin.png" alt="linkedin"></a>
<a title="Facebook" href="index.html"><img src="./img/facebook.png" alt="facebook"></a>
<a title="Medium" href="index.html"><img src="./img/medium.png" alt="medium"></a>
</div> <!-- .social -->
</div> <!-- .member -->
</div> <!-- .container -->
</section> <!-- .four -->
<section class="five">
<div class="container">
<div class="video-wrapper">
<video width="560" height="315" controls>
<source src="./img/video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div> <!-- .video-wrapper -->
</div> <!-- .container -->
</section> <!-- .five -->
<section class="six">
<div class="container">
<h4>Taborum modi fugiat rem aliquid quod</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum laboriosam laborum modi fugiat rem aliquid quod? Non, laudantium, aperiam deserunt sequi harum mollitia sapiente magnam rem expedita voluptas necessitatibus quam!</p>
<img src="./img/photo-6.jpg" alt="let's get started">
<p><i>Magnam reprehenderit sequi provident minima! Molestiae eum repudiandae dolorem sapiente, expedita debitis corrupti quia! Suscipit, officia. Tenetur perspiciatis totam debitis maxime nam. Lorem, ipsum dolor sit amet consectetur adipisicing elit.</i></p>
<a class="cta" href="index.html">Contact us »</a>
</div>
</section>
<footer>
<div class="container">
<p>This is a free template available for download. You are free to customize, edit & upload it on your own projects. But you're not allowed to distribute or sell it.<br>All rights reserved by shihabiiuc.com</p>
</div>
</footer>
</body>
</html>