-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
191 lines (190 loc) · 11.6 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
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
183
184
185
186
187
188
189
190
191
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Band Template</title>
<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=Lato:wght@300;400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer">
<link rel="stylesheet" href="style.css">
</head>
<body class="page">
<div class="search">
<form action="index.html" method="get" role="search" class="search__form">
<input type="search" id="search" class="search__input" name="q" placeholder="What are you looking for?" aria-label="Search through site content">
<i class="fa-solid fa-magnifying-glass search__submit" title="Search"></i>
</form>
<span class="search__close" title="Close">✕</span>
</div>
<div class="container">
<header class="page-header">
<div class="page-header__top">
<a href="index.html" class="page-header__logo">Logo</a>
<nav class="page-header__nav">
<ul class="page-header__list">
<li class="page-header__list-item">
<a href="#band" class="page-header__list-link">Band</a>
</li>
<li class="page-header__list-item">
<a href="#tour" class="page-header__list-link">Tour</a>
</li>
<li class="page-header__list-item">
<a href="#contact" class="page-header__list-link">Contact</a>
</li>
<li class="page-header__list-item sub-nav">
<a href="#" class="page-header__list-link">More <i class="fa-solid fa-caret-down"></i></a>
<ul class="page-header__sub-list">
<li class="page-header__sub-list-item">
<a href="#" class="page-header__sub-list-link">Merchandise</a>
</li>
<li class="page-header__sub-list-item">
<a href="#" class="page-header__sub-list-link">Extras</a>
</li>
<li class="page-header__sub-list-item">
<a href="#" class="page-header__sub-list-link">Media</a>
</li>
</ul><!-- Sub list -->
</li><!-- List item | Sub nav -->
</ul><!-- Page header list -->
</nav><!-- Page header nav -->
<button aria-label="Search" type="button" class="page-header__search page-header__btn">
<i class="fas fa-search"></i>
</button><!-- Page header search -->
<button aria-label="Mobile menu" type="button" class="page-header__mobile page-header__btn">
<i class="fa-solid fa-bars"></i>
</button>
</div><!-- Page header top -->
<div class="page-header__main">
<div class="page-header__slider slide bg1">
<h1 class="page-header__title">New York</h1>
<p class="page-header__copy">The atmosphere in New York is fantastic.</p>
</div><!-- Page header slider -->
<div class="page-header__slider slide bg2">
<h1 class="page-header__title">Chicago</h1>
<p class="page-header__copy">Thank you, Chicago - A night we won't forget.</p>
</div><!-- Page header slider -->
<div class="page-header__slider slide bg3">
<h1 class="page-header__title">Los Angeles</h1>
<p class="page-header__copy">We had the best time playing at State Historic Park!</p>
</div><!-- Page header slider -->
</div><!-- Page header main -->
</header><!-- Page header -->
<main class="page-main">
<section id="band" class="page-main__band">
<h2 class="page-main__band-title title-2">The band</h2>
<em class="dimgray-color">We love music</em>
<p class="page-main__band-copy">We have created a fictional band website. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
<div class="page-main__band-profiles">
<div>
<p>Name</p>
<img src="images/bandmember.jpg" alt="" class="page-main__band-photo">
</div>
<div>
<p>Name</p>
<img src="images/bandmember.jpg" alt="" class="page-main__band-photo">
</div>
<div>
<p>Name</p>
<img src="images/bandmember.jpg" alt="" class="page-main__band-photo">
</div>
</div><!-- Page main band profiles -->
</section><!-- Page main band -->
<section id="tour" class="page-main__tour">
<h2 class="page-main__tour-title title-2">Tour dates</h2>
<em class="nobel-color">Remember to book your tickets!</em>
<div class="page-main__tour-months">
<div class="page-main__tour-month">
<p>September</p>
<p class="ticket-no">Sold out</p>
</div><!-- Page main tour month -->
<div class="page-main__tour-month">
<p>October</p>
<p class="ticket-no">Sold out</p>
</div><!-- Page main tour month -->
<div class="page-main__tour-month">
<p>November</p>
<p class="ticket-yes">3</p>
</div><!-- Page main tour month -->
</div><!-- Page main tour months -->
<div class="page-main__tour-dates">
<div class="page-main__tour-card">
<img src="images/newyork.jpg" alt="" class="page-main__tour-card-image">
<div class="page-main__tour-card-main">
<h3 class="page-main__tour-card-title">New York</h3>
<p class="dimgray-color">Fri 27 Nov 2016</p>
<p class="page-main__tour-card-copy">Praesent tincidunt sed tellus ut rutrum sed vitae justo.</p>
<button type="button" class="page-main__tour-card-btn">Buy tickets</button>
</div>
</div><!-- Page main tour card -->
<div class="page-main__tour-card">
<img src="images/paris.jpg" alt="" class="page-main__tour-card-image">
<div class="page-main__tour-card-main">
<h3 class="page-main__tour-card-title">Paris</h3>
<p class="dimgray-color">Sat 28 Nov 2016</p>
<p class="page-main__tour-card-copy">Praesent tincidunt sed tellus ut rutrum sed vitae justo.</p>
<button type="button" class="page-main__tour-card-btn">Buy tickets</button>
</div>
</div><!-- Page main tour card -->
<div class="page-main__tour-card">
<img src="images/sanfran.jpg" alt="" class="page-main__tour-card-image">
<div class="page-main__tour-card-main">
<h3 class="page-main__tour-card-title">San Francisco</h3>
<p class="dimgray-color">Sun 29 Nov 2016</p>
<p class="page-main__tour-card-copy">Praesent tincidunt sed tellus ut rutrum sed vitae justo.</p>
<button type="button" class="page-main__tour-card-btn">Buy tickets</button>
</div>
</div><!-- Page main tour card -->
</div><!-- Page main tour dates -->
</section><!-- Page main tour -->
<section id="contact" class="page-main__contact">
<div class="page-main__contact-main">
<h2 class="page-main__contact-title title-2">Contact</h2>
<em class="dimgray-color">Fan? Drop a note!</em>
<div class="page-main__contact-stack">
<address class="page-main__contact-info">
<div>
<div class="page-main__contact-row">
<i class="fas fa-map-marker-alt page-main__contact-icon"></i>
<span>Chicago, US</span>
</div>
<div class="page-main__contact-row">
<i class="fa-solid fa-phone page-main__contact-icon"></i>
<span>Phone: +00 151515</span>
</div>
<div class="page-main__contact-row">
<i class="fa-solid fa-envelope page-main__contact-icon"></i>
<span>Email: mail@mail.com</span>
</div>
</div>
</address><!-- Page main contact info -->
<form action="index.html" method="get" class="page-main__contact-form">
<label for="name" class="page-main__contact-label">Full Name</label>
<input type="text" name="name" id="name" class="page-main__contact-input" placeholder="Name">
<label for="email" class="page-main__contact-label">Email</label>
<input type="email" name="email" id="email" class="page-main__contact-input" placeholder="Email">
<label for="message" class="page-main__contact-label">Message</label>
<textarea id="message" name="message" class="page-main__contact-textarea" placeholder="Message"></textarea>
<button type="submit" class="page-main__contact-btn">Send</button>
</form><!-- Page main contact form -->
</div><!-- Page main contact stack -->
</div><!-- Page main contact main -->
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d190255.8460334488!2d-87.73196395!3d41.83373295!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x880e2c3cd0f4cbed%3A0xafe0a6ad09c0c000!2sChicago%2C%20IL%2C%20USA!5e0!3m2!1sen!2sbg!4v1676810841892!5m2!1sen!2sbg" class="page-main__contact-map" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe><!-- Page main contact map -->
</section><!-- Page main contact -->
</main><!-- Page main -->
<footer class="page-footer">
<div class="page-footer__icons">
<a aria-label="Facebook icon" href="#" class="page-footer__link"><i class="fa-brands fa-square-facebook page-footer__icon dimgray-color"></i></a>
<a aria-label="Instagram icon" href="#" class="page-footer__link"><i class="fa-brands fa-instagram page-footer__icon dimgray-color"></i></a>
<a aria-label="Snapchat icon" href="#" class="page-footer__link"><i class="fa-brands fa-snapchat page-footer__icon dimgray-color"></i></a>
<a aria-label="Pinterest icon" href="#" class="page-footer__link"><i class="fa-brands fa-pinterest-p page-footer__icon dimgray-color"></i></a>
<a aria-label="Twitter icon" href="#" class="page-footer__link"><i class="fa-brands fa-twitter page-footer__icon dimgray-color"></i></a>
<a aria-label="Linkedin icon" href="#" class="page-footer__link"><i class="fa-brands fa-linkedin-in page-footer__icon dimgray-color"></i></a>
</div><!-- Page footer icons -->
<p class="dimgray-color">Copyright © 2023</p>
</footer><!-- Page footer -->
</div><!-- Container -->
<script src="script.js"></script>
</body>
</html>