-
Notifications
You must be signed in to change notification settings - Fork 54
/
about.html
145 lines (117 loc) · 9.22 KB
/
about.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
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>About</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Condensed" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<link rel="stylesheet" href="styles/common.css">
<link rel="stylesheet" href="styles/nav.css">
<link rel="stylesheet" href="styles/footer.css">
<link rel="stylesheet" href="styles/skewed-header.css">
<link rel="stylesheet" href="styles/page-container.css">
<link rel="stylesheet" href="styles/square-grid.css">
<link rel="stylesheet" href="styles/helpers.css">
<link rel="stylesheet" href="styles/media-queries.css">
</head>
<body>
<div class="skewed-header">
<div class="header-bg" style="background-image: url('images/backgrounds/about-us.jpg');"></div>
<div class="skewed-header-wrapper">
<div class="skewed-header-content">
<div class="heading-wrapper">
<h1>About Us</h1>
</div>
<div class="links-wrapper">
<div class="nav-link">
<a href="index.html">Home</a>
</div>
<div class="nav-link">
<a href="about.html">About</a>
</div>
<div class="nav-link">
<a href="menu.html">Menu</a>
</div>
<div class="nav-link">
<a href="contact.html">Contact</a>
</div>
</div>
</div>
</div>
</div>
<div class="page-container">
<div class="content-wrapper">
<img src="images/people/chef.jpg" alt="Featured Chef" id="chef">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Beatae, repellat sequi. Placeat deleniti ipsum ea temporibus, obcaecati dolorum ipsa ut repellat, in eveniet quos dolore excepturi omnis perspiciatis ipsam alias quae officiis! Doloremque, asperiores. Veniam rerum voluptas unde nostrum sequi quo magnam optio fuga pariatur voluptates, facilis ea mollitia libero iusto ducimus nulla molestias sit obcaecati. Animi perferendis reprehenderit id nostrum! Laborum molestias autem similique eius optio amet numquam voluptate dicta adipisci eum nulla ipsum aut at temporibus mollitia accusantium facere dignissimos voluptatibus, corrupti consequatur. A odio sint dicta qui culpa, amet quis dolore exercitationem laboriosam obcaecati, possimus optio expedita ab harum recusandae sequi autem tempore, molestias facere fuga deserunt rerum. Ea tempore minus, modi, laudantium commodi fugit tempora quas placeat dolorum corporis ipsam. Sint itaque voluptatum quam nulla libero fugiat, quo facilis dolorum ducimus reprehenderit aspernatur incidunt in architecto, odit adipisci soluta expedita et doloremque eius, totam cum ipsum. Officiis aliquid ea quis nihil accusantium, quidem provident optio quibusdam distinctio! Sint facere, expedita voluptatibus architecto sequi, quo ea commodi deleniti velit hic voluptate, sapiente tempore? Atque, hic molestias id ab iste velit repudiandae sed eaque nihil maiores reiciendis numquam ea quos facilis vel debitis officiis consequatur expedita excepturi odit.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum a facere minima similique minus voluptatum maiores repellat debitis eveniet. In a veritatis sunt incidunt aspernatur quam error corrupti, ratione, iusto necessitatibus, qui vel temporibus quisquam! Minus et voluptate laboriosam nam officia quod possimus similique quis rem? Molestiae natus, officiis accusantium excepturi error quisquam possimus sequi reiciendis architecto nostrum beatae esse ex inventore quas consequuntur ipsum voluptates exercitationem enim maiores saepe veritatis. Doloremque, nesciunt saepe consequatur harum quos quam cum. Unde, voluptatibus voluptatum! Deleniti repellat voluptates sapiente quisquam placeat debitis soluta cumque aspernatur adipisci optio voluptatum a, sit culpa ex quo veniam, mollitia reiciendis eligendi ea fugit expedita. Qui consequatur aut ipsum ea est harum et id maiores porro. Blanditiis voluptates consectetur, dolorem asperiores magni rem eius illo laborum. Tempore, est saepe. Sunt nihil assumenda laborum voluptas culpa illo eligendi et adipisci iste temporibus. At saepe odit laborum ex voluptatem exercitationem doloribus itaque velit et, optio explicabo voluptatum eaque molestiae harum aut hic. Nobis, quidem voluptates! Porro voluptas repudiandae molestias nihil nesciunt optio, reprehenderit recusandae magnam id. Eos rem est eum, voluptatibus libero veritatis fugiat tempora repudiandae soluta labore aspernatur magnam, ratione optio, ad doloremque facilis quos eius molestiae deserunt nihil itaque odio amet ab. Vitae distinctio hic, eum voluptas iste culpa inventore amet odit reiciendis modi omnis, quae deleniti ullam laudantium sunt nemo aliquam expedita recusandae voluptatum? Suscipit necessitatibus, vitae esse doloremque illo debitis, natus ad rerum mollitia animi architecto at? Repellat veritatis perferendis laudantium aperiam delectus ab ex iste cupiditate magni, aliquid quo quia quasi quos fugiat et corrupti libero nesciunt quam debitis voluptas. Fuga odit veritatis ipsa ad quia id ab minima iure eaque fugit, rerum porro quo dolorem quam dicta sapiente vel veniam ipsum delectus doloremque maxime ipsam a ratione! Quod accusantium ducimus nihil tempore quaerat natus quas dolor id ipsa cum tempora nisi aliquid a, quos inventore voluptates magnam. Illo doloremque aut nobis dolor. Sint natus repellendus autem. Ipsum nihil nemo voluptate impedit excepturi earum molestias deleniti sequi velit architecto unde iusto ea possimus rerum soluta laudantium eaque voluptatum, veritatis fugit incidunt quibusdam itaque quam? Tenetur?</p>
</div>
</div>
<div class="spacer60"></div>
<div class="squares-wrapper">
<div class="squares">
<div class="square">
<div class="img-wrapper">
<img src="images/squares/fries-sq-1.jpg" alt="Fries">
</div>
<div class="square-text-wrapper">
<h1>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laboriosam, quod dolore? Quibusdam non, dolorem odit vel consequuntur temporibus distinctio eveniet. Maxime totam adipisci quod ducimus earum incidunt esse inventore dolore a voluptatibus, eligendi minus atque est veritatis nostrum ex! At accusantium ad harum veniam natus eos soluta architecto atque quidem!</p>
</div>
</div>
<div class="square">
<div class="square-text-wrapper">
<h1>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laboriosam, quod dolore? Quibusdam non, dolorem odit vel consequuntur temporibus distinctio eveniet. Maxime totam adipisci quod ducimus earum incidunt esse inventore dolore a voluptatibus, eligendi minus atque est veritatis nostrum ex! At accusantium ad harum veniam natus eos soluta architecto atque quidem!</p>
</div>
<div class="img-wrapper">
<img src="images/squares/fries-sq-2.jpg" alt="Fries">
</div>
</div>
</div>
</div>
<div class="footer">
<div class="logo-footer">
<img src="images/logos/decamp-fantastic-fries-logo-white.png" alt="Logo">
</div>
<div class="footer-phone-hours">
<span class="phone">
555 555 5555
</span>
<span class="hours">
10 am - midnight
</span>
</div>
<div class="links-wrapper">
<div class="nav-link">
<a href="index.html">Home</a>
</div>
<div class="nav-link">
<a href="about.html">About</a>
</div>
<div class="nav-link">
<a href="menu.html">Menu</a>
</div>
<div class="nav-link">
<a href="contact.html">Contact</a>
</div>
</div>
<div class="social-media-icons-wrapper">
<a href="#">
<i class="fab fa-instagram"></i>
</a>
<a href="#">
<i class="fab fa-twitter"></i>
</a>
<a href="#">
<i class="fab fa-facebook-f"></i>
</a>
</div>
<div class="copyright-wrapper">
© 2018 DevCamp | All rights reserved
</div>
</div>
</body>
</html>