generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
165 lines (132 loc) · 6.14 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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- META TAGS -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Everything is Better with Pizza Book Club: a book club for book and pizza lovers in Dublin, Ireland.">
<meta name="keywords" content="book, pizza, book club, dublin, ireland">
<!-- FAVICON -->
<link rel="shortcut icon" href="assets/images/favicon.ico" type="image/x-icon">
<!-- STYLESHEET -->
<link rel="stylesheet" href="assets/css/styles.css">
<title>Everything is Better with Pizza Book Club 🍕📚</title>
</head>
<body>
<!-- HEADER with logo and nav -->
<header>
<a href="index.html">
<img id="logo" src="assets/images/logo.png" alt="Logo" width="150">
</a>
<nav>
<ul id="menu">
<li>
<a href="index.html" class="active">Home</a>
</li>
<li>
<a href="2023-picks.html">2023 Picks</a>
</li>
<li>
<a href="join-us.html">Join Us</a>
</li>
</ul>
</nav>
</header>
<!-- LANDING PAGE SECTION -->
<section id="landing-page">
<div id="landing-background"></div>
<div id="container-landing-text">
<div id="landing-text">
<h3>Everything is Better with Pizza</h3>
<h2>Book Club</h2>
<p>Do you love pizza? Do you love books?</p>
<p>If you answered yes for both questions this is the right place for you.</p>
</div>
</div>
</section>
<!-- ABOUT US SECTION -->
<section id="about-us">
<h1>About Us</h1>
<p>We are people passionate about reading great books and eating great pizzas.</p>
<p>The list of books is pre-defined based on suggestions we collect from all members about the books they plan to read on the following year.</p>
<!-- DIV with all the steps to join the club -->
<div id="container-steps">
<div class="steps">
<h3>Step 1</h3>
<p>Join the club on our <a href="join-us.html">Join Us</a> page</p>
<i class="fa-solid fa-right-to-bracket fa-2xl"></i>
</div>
<div class="steps">
<h3>Step 2</h3>
<p>Check here the <a href="2023-picks.html">current book</a> we are reading</p>
<i class="fa-solid fa-book fa-2xl"></i>
</div>
<div class="steps">
<h3>Step 3</h3>
<p>Start reading the book</p>
<i class="fa-solid fa-book-open-reader fa-2xl"></i>
</div>
<div class="steps">
<h3>Step 4</h3>
<p>Check your email with the details of our next meeting</p>
<i class="fa-solid fa-envelope-open-text fa-2xl"></i>
</div>
<div class="steps">
<h3>Step 5</h3>
<p>Eat all the pizza and talk about the book</p>
<i class="fa-solid fa-pizza-slice fa-2xl"></i>
</div>
</div>
</section>
<!-- MEETINGS SECTION -->
<section id="meetings" class="reverse-section">
<h1>Meetings</h1>
<p>By the end of each month and email will be sent with details of our next meetings.</p>
<p>Every meeting is at a different location.
<p>We meet there to discuss about the book we read during that month.</p>
<!-- DIV with the pictures showing meetings -->
<div id="meetings-pictures">
<div class="meeting-img-frame">
<div class="meeting-img" id="meeting-img-left"></div>
</div>
<div class="meeting-img-frame">
<div class="meeting-img" id="meeting-img-center"></div>
</div>
<div class="meeting-img-frame">
<div class="meeting-img" id="meeting-img-right"></div>
</div>
</div>
</section>
<!-- CONTACT SECTION -->
<section id="contact">
<!-- DIV with the contact us part of the section -->
<div id="contact-us">
<h1>Contact Us</h1>
<p>Email: everythingis@betterwithpizza.com</p>
<p>Phone: (01) 123 4567</p>
</div>
<!-- DIV with the follow us part of the section -->
<div id="follow-us">
<h1>Follow Us</h1>
<div id="follow-us-links">
<a href="https://www.facebook.com/" target="_blank" rel="noopener" aria-label="Link to our Facebook Page"><i class="fa-brands fa-square-facebook fa-2xl"></i></a>
<a href="https://twitter.com/" target="_blank" rel="noopener" aria-label="Link to our Twitter Page"><i class="fa-brands fa-square-twitter fa-2xl"></i></a>
<a href="https://www.instagram.com/" target="_blank" rel="noopener" aria-label="Link to our Instagram Page"><i class="fa-brands fa-square-instagram fa-2xl"></i></a>
<a href="https://www.youtube.com/" target="_blank" rel="noopener" aria-label="Link to our YouTube Page"><i class="fa-brands fa-square-youtube fa-2xl"></i></a>
</div>
</div>
</section>
<!-- FOOTER -->
<footer class="reverse-section">
<p>© Everything is Better with Pizza Book Club</p>
<p>Website developed by Tanise Carvalho as part of the Code Institute Diploma in Full Stack Software Development</p>
<div id="footer-links">
<a href="https://github.com/tanisecarvalho" target="_blank" rel="noopener" aria-label="Link to the developer's GitHub Page"><i class="fa-brands fa-github"></i></a>
<a href="https://www.linkedin.com/in/tanisecarvalho/" target="_blank" rel="noopener" aria-label="Link to the developer's LinkedIn Page"><i class="fa-brands fa-linkedin-in"></i></a>
</div>
</footer>
<!-- font awesome script -->
<script src="https://kit.fontawesome.com/8c15ffabc0.js" crossorigin="anonymous"></script>
</body>
</html>