-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
97 lines (79 loc) · 4.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
<!DOCTYPE html>
<html>
<!------- This is the head of the HTML for linking external resources & metadata ------->
<head>
<!-- The title for SEO & browser tabs -->
<title> Website Title Here </title>
<!-- Viewport meta tag -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Gridlex -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/gridlex/2.7.1/gridlex.min.css">
<!-- Add Google Fonts Here -->
<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=Baskervville:ital@0;1&family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap" rel="stylesheet">
<!-- My own custom stylesheet -->
<link rel="stylesheet" href="/style.css">
</head>
<!------ This is the body, where all of the contents of our page go ------->
<body>
<!------ Zen.Studio Banner ------>
<section class=" grid padded bg-image bg-stone tall-80 center">
<div class="col-12-middle">
<h1 class="text-xxl text-featured"> zen.studio </h1>
</div>
</section>
<!------ Welcome section ------>
<section class="grid-center padded bg-light">
<div class="col-4_md-6 padded-2">
<img src="/images/zen-studio-2.jpg" class="shape-teardrop">
</div>
<div class="col-7_md-6_xs-12-middle">
<h2 class="text-featured padded-2"> Welcome home. </h2>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, magnam facilis. Soluta sed dolorem accusantium ducimus. repellendus aut autem sapiente asperiores natus rem!</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Assumenda, esse nulla? Dolorum minus nihil inventore hic quisquam tempore quas nisi, odio aliquid dignissimos laudantium ducimus fugit voluptatum soluta eligendi repellat!</p>
<a href="#"class="button"> Book a Session </section></a>
</div>
</section>
<!------ Don't forget to breath Banner ------>
<section class=" grid padded bg-image tall-50 right bg-leaves">
<div class="col-12-middle">
<h3> Don't forget to breathe. </h3>
</div>
</section>
<!--------- Studio Section ---------->
<section class="padded bg-light grid-center">
<div class="col-5_md-6_sm-12 padded-2">
<h2 class="text-featured text-lg"> Our Studio. </h2>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi quia illum id dolor accusamus, quaerat fuga at temporibus vel officia consectetur inventore ea amet voluptate eum illo. Sint, dolor quam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad quaerat dignissimos tempore quasi ut sapiente expedita inventore, sequi itaque repellendus pariatur libero ducimus officiis quae, doloribus hic odit. Est, nostrum?</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente, porro non! Quia ut totam porro, doloremque ea sapiente laborum adipisci facere pariatur? Consequatur illo amet voluptatibus quisquam provident modi alias! Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta eligendi accusamus provident dolorum tenetur? Nostrum veritatis esse necessitatibus nesciunt dolorum molestiae impedit facere alias! Natus culpa blanditiis incidunt iste facere.</p>
<ul>
<li> something goes here </li>
<li> This has to look different </li>
<li> This makes it look more realistic </li>
<li> Dont stop just keep going </li>
</ul>
</div>
<div class="col-4_md-6_sm-12 padded-2 grid">
<div class="bg-image col-12 shape-window bg-venue tall-70"></div>
</div>
</section>
<!-------- Contact Us section -------->
<section class="grid-center padded text-featured">
<div class="col-12 padded-2 center">
<h2 class="text-xl"> Find us. <span class="sm-block">Contact us.</span> </h2>
</div>
<div class="col-4_md-6_sm-12 padded-2 left text-featured text-lato">
<p class="margin-b-0"><strong> Zen Studio. </strong></p>
<p> 222 John Smith Ave, <br> Victoria, Australia</p>
<p><em> Take a second look after the strange looking sign </em><p>
<p class="margin-b-0 text-bold"> <a href="mailto: [email protected]">Email: [email protected]</a></p>
<p class="text-bold"> <a href="tel:04555555">Phone: 04 555 5555</a> </p>
</div>
<div class="col-6_md-7_sm-12 bg-image bg-map tall-50"> </div>
</section>
<footer class="center">
<p class="text-featured"> Copyright 2021 </p>
</footer>
</body>
</html>