-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhorizon.html
183 lines (170 loc) · 8.4 KB
/
horizon.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
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="images/x-icon" href="./images/icon.svg" />
<link rel="stylesheet" href="./css/style.css" />
<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:wght@300;400;700;900&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<script src="./js/nav.js" defer></script>
<title>Arch Scape</title>
</head>
<body>
<!-- Nav bar -->
<nav class="sticky top-0 bg-white z-10">
<!-- Container -->
<div class="container mx-auto flex justify-between items-center p-6">
<!-- Logo container -->
<div>
<a href="./index.html"><img src="
./images/logo.svg" alt="logo" class="h-20" /></a>
</div>
<!-- Mobile hamburger-menu container -->
<div class="flex flex-col space-y-2 lg:hidden cursor-pointer" id="hamburger-menu">
<span class="bg-black inline-block w-8 h-0.5"></span>
<span class="bg-black inline-block w-8 h-0.5"></span>
<span class="bg-black inline-block w-8 h-0.5"></span>
</div>
<!-- Mobile menu container -->
<div class="hidden z-20 fixed inset-0 bg-darkGray opacity-80 flex-col space-y-4 justify-center items-center" id="mobile-menu">
<div class="flex flex-col ml-[50%] mb-16 text-white text-2xl cursor-pointer" id="close">
<i class="fa-solid fa-x" style="color: #ffffff;"></i></div>
<a
href="./index.html"
class="text-sm py-2 px-4 uppercase text-white tracking-verywide border-y border-white border-opacity-0 transition duration-300 hover:border-opacity-100"
>Home</a
>
<a
href="./projects.html"
class="text-sm py-2 px-4 uppercase text-white tracking-verywide border-y border-white border-opacity-0 transition duration-300 hover:border-opacity-100"
>Projects</a
>
<a
href="./about.html"
class="text-sm py-2 px-4 uppercase text-white tracking-verywide border-y border-white border-opacity-0 transition duration-300 hover:border-opacity-100"
>About</a
>
<a
href="./contact.html"
class="text-sm py-2 px-4 uppercase text-white tracking-verywide border-y border-white border-opacity-0 transition duration-300 hover:border-opacity-100"
>Contact</a
>
</div>
<!-- Menu container -->
<div class="hidden lg:flex space-x-12 items-center">
<!-- Item 1 -->
<a
href="./index.html"
class="text-sm py-2 px-4 uppercase text-darkGray tracking-verywide border-y border-darkGray border-opacity-0 transition duration-300 hover:border-opacity-100"
>Home</a
>
<!-- Item 2 -->
<a
href="./projects.html"
class="text-sm py-2 px-4 uppercase text-darkGray tracking-verywide border-y border-darkGray"
>Projects</a
>
<!-- Item 3 -->
<a
href="./about.html"
class="text-sm py-2 px-4 uppercase text-darkGray tracking-verywide border-y border-darkGray border-opacity-0 transition duration-300 hover:border-opacity-100"
>About</a
>
<!-- Item 4 -->
<a
href="./contact.html"
class="text-sm py-2 px-4 uppercase text-darkGray tracking-verywide border-y border-darkGray border-opacity-0 transition duration-300 hover:border-opacity-100"
>Contact</a
>
</div>
</div>
</nav>
<!-- Header -->
<section class="bg-containerBgGray">
<div
class="container mx-auto flex flex-col-reverse lg:flex-row justify-between py-8 px-6"
>
<!-- Content container -->
<div
class="w-full lg:w-1/2 lg:max-w-xl flex flex-col space-y-8 mr-4 mt-4 lg:mt-0"
>
<!-- Title -->
<h1 class="text-4xl lg:text-6xl text-medGray font-light">
Project<br /><span class="text-darkGray font-bold capitalize">Horizon</span>
</h1>
</div>
</section>
<!-- Project Section -->
<section>
<div class="container mx-auto p-4 grid grid-cols-12 gap-4 bg-containerBgGray">
<img src="./images/projects/horizon/2.jpg" alt="" class="col-span-12">
<div class="grid grid-cols-12 gap-4 col-span-12">
<img src="./images/projects/horizon/1.jpg" alt="" class="col-span-12 lg:col-span-5">
<div class="col-span-12 lg:col-span-7 flex flex-col justify-center space-y-4">
<h2 class="text-3xl lg:text-5xl font-bold text-darkGray capitalize">Horizon</h2>
<p class="text-darkGray font-light">Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque pariatur dolorem praesentium rem magni necessitatibus, ex laborum dolore similique vero dolorum ducimus harum nam obcaecati neque, sunt suscipit nesciunt? Inventore asperiores tempore, quos fugit magnam eos nihil, perferendis alias, aliquid harum doloremque est delectus facilis blanditiis nesciunt impedit similique temporibus! Modi ipsa tempore ipsum dolore corporis enim? Ipsa, nemo magni reiciendis cum, iste consequuntur tenetur dolore ab laborum, veniam exercitationem amet debitis. Repellat, perferendis nulla amet iste possimus maiores iure porro, voluptatem, tenetur fugit voluptate. <br> <br> Eaque sequi voluptatem exercitationem in rem laboriosam officiis repudiandae vitae adipisci labore illum harum et ipsam corrupti reprehenderit, facere animi reiciendis libero ex temporibus quam. Tempora, repellat aliquam. Totam ea mollitia, ex provident ipsam quae. Maiores eligendi ut nemo odio quo quae dolore laborum, ea sequi dignissimos doloremque quos harum velit! Numquam id adipisci beatae eos officia? Cum delectus, alias in veniam et assumenda perspiciatis.</p> </div>
</div>
<img src="./images/projects/horizon/3.jpg" alt="" class="col-span-12">
</div>
</section>
<!-- Footer -->
<section class="bg-darkGray text-white p-8 mt-40">
<div class="container mx-auto flex flex-col p-8 space-y-10 items-center lg:items-start lg:flex-row lg:justify-between lg:space-y-0">
<!-- Logo -->
<img src="./images/logo-white.svg" alt="" class="h-16" />
<!-- Menu -->
<ul class="flex flex-col space-y-3">
<li class="font-bold">Menu</li>
<li><a href="./index.html">Home</a></li>
<li><a href="./projects.html">Projects</a></li>
<li><a href="./about.html">About</a></li>
<li><a href="./contact.html">Contact</a></li>
</ul>
<!-- Contacts -->
<ul class="flex flex-col space-y-3">
<li class="font-bold">Contacts</li>
<li class="flex items-center space-x-2">
<img src="./images/elements/location.svg" alt="" />
<span
>1234 Sample Street<br />
Austin Texas 78704</span
>
</li>
<li class="flex items-center space-x-2">
<img src="./images/elements/phone.svg" alt="" />
<span></span>
512.333.2222</span
>
</li>
<li class="flex items-center space-x-2">
<img src="./images/elements/email.svg" alt="" />
<span></span>
[email protected]</span
>
</ul>
<!-- Social media -->
<ul class="flex flex-col space-y-3">
<li class="font-bold">Social Media</li>
<li class="flex flex-col items-center space-y-4 lg:flex-row lg:space-x-10 lg:space-y-0">
<a href="#"><img src="./images/elements/facebook.svg" alt=""></a>
<a href="#"><img src="./images/elements/twitter.svg" alt=""></a>
<a href="#"><img src="./images/elements/Linked-in.svg" alt=""></a>
<a href="#"><img src="./images/elements/pininterest.svg" alt=""></a>
</li>
</ul>
</div>
</section>
</body>
</html>