-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
186 lines (160 loc) · 9.4 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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Global site tag (gtag.js) - Google Analytics.
This will only work if users click on "I accept" on the cookie consent banner.-->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2YRG54NPH3"></script>
<!-- My own custom CSS-->
<link rel="stylesheet" href="./css/stylesheet.css">
<!-- Bootstrap CSS. -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<!-- Metas. -->
<meta charset="UTF-8">
<meta name="author" content="Wistarr">
<meta name="description" content="A web development company">
<meta name="keywords" content="Web Development, Web Developers, Website, Web App, Company, Wistarr">
<!-- Meta to make the webpage's text responsive. -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- This will make the website searchable in Google (by using the Google Search Console). -->
<meta name="google-site-verification" content="AaQTtLv_GWE6YXV5WReOwOsTUaPQsongekTm-Gdl6YM" />
<!-- End of Metas. -->
<title>Wistarr Home</title>
</head>
<!-- Navbar using the "Litera" theme from Bootswatch. -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<!-- Inside "navbar-brand", I need to put the Wistarr logo. -->
<a class="navbar-brand" href="#">
<!-- The Wistarr logo. The 145 px with is the best looking width for the logo. -->
<img src="./img/logo.png" width="145" alt="Wistarr Logo" class="d-inline-block align-middle mr-2">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor03"
aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor03">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<!-- This highlights in black the text in the navbar of the tab of the page that I'm currently in
(in this case, I'm currently in "home"). -->
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="portfolio.html">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="privacy_n_legal.html">Privacy and Legal</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</nav> <!-- End of navbar. -->
<body>
<!-- Grid system with 1 row and 2 columns. -->
<div class="container">
<div class="row">
<!-- Column that contains the slogan and the rest of the text in "home". -->
<div class="col-sm">
<!-- Slogan -->
<br>
<h1>We achieve things.</h1>
<h1>We do them well.</h1>
<h1>Wistarr has you covered.</h1>
<br>
<p>Welcome to Wistarr's official website. We make websites and web apps. Click the button below
to see our portfolio, which shows some of our work. </p>
<br>
<!-- "Check our portfolio" JS button that sends me to the portfolio.html page.
Source: https://stackoverflow.com/questions/2906582/how-to-create-an-html-button-that-acts-like-a-link
-->
<button class="btn btn-primary" onclick="location.href='portfolio.html';">
<b>Check our portfolio</b>
</button>
</div>
<div class="col-sm"> <!-- Column that contains an image. -->
<br>
<!-- Image. Photo by Carl Heyerdahl on Unsplash.
Link to photo: https://unsplash.com/photos/KE0nC8-58MQ -->
<!-- I added a class called "responsive" to make the photo responsive (check the CSS file.) -->
<img class="responsive" src="img/home_comprimido.jpg" alt="Computer with an onscreen message that says 'Do More'." height="300px" width="600px">
</div>
</div>
</div> <!-- End of the grid. -->
<!-- I inserted the footer within the body. -->
<footer class="container-fluid">
<!-- Website's footer. -->
<!-- I need to insert at least some text to make the footer to change color from the CSS code. -->
<!-- I need to make a 4x1 grid for the sitemap on the footer. -->
<div>
<!-- This div will act as a row and it will center the links of the sitemap. -->
<div class="row" style="text-align: center">
<div class="col-sm">
<!-- The CSS code that makes the links remain white are on the CSS file. -->
<a href="#"><p><b>Home</b></p></a>
<a href="portfolio.html"><p><b>Portfolio</b></p></a>
</div>
<div class="col-sm">
<a href="about.html"><p><b>About us</b></p></a>
<a href="privacy_n_legal.html"><p><b>Privacy and Legal</b></p></a>
</div>
<div class="col-sm">
<a href="contact.html"><p><b>Contact Us</b></p></a>
</div>
<!-- Social media buttons. -->
<div class="col-sm">
<p class="social-media-headline"><b>Follow Us On Our Social Media:</b></p>
<div class="icon-padding-2"> <!-- This will add horizontal padding to all of the social media icons. -->
<!-- Social media icons. -->
<!-- Icons made by Pixel perfect from www.flaticon.com -->
<a href="https://www.instagram.com/wistarr_official/" target="_blank">
<img src="img/instagram2.png" alt="Instagram icon." width="32px" height="32px">
</a>
<a href="https://twitter.com/WistarrOfficial" target="_blank">
<img src="img/twitter2.png" alt="Twitter icon." width="32px" height="32px">
</a>
<a href="https://www.facebook.com/WistarrOfficial" target="_blank">
<img src="img/facebook2.png" alt="Facebook icon." width="32px" height="32px">
</a>
<a href="https://www.youtube.com/channel/UCJILUfxW5nKJDUCVaZIQquA" target="_blank">
<img src="img/youtube2.png" alt="YouTube icon." width="32px" height="32px">
</a>
</div>
</div>
</div>
</div> <!-- End of 4x1 grid. -->
<!-- This will contain the copyright information in small text at the bottom of the footer. -->
<div id="copyright_1" class="text-center">
<p>Icons made by <a href="https://www.flaticon.com/authors/pixel-perfect" title="Pixel perfect"
target="_blank"><u>Pixel perfect</u></a> from <a href="https://www.flaticon.com/" title="Flaticon"
target="_blank"><u> www.flaticon.com</u></a></p>
<!-- This JS script will automatically update the year once a new year comes in (i.e: if it's 2021, it will update
to 2021.)
Source: https://kerstinmartin.com/blog/copyright-notice -->
<p class="copyright-line">© Copyright <script>document.write(new Date().getFullYear())</script> Wistarr. All rights reserved.</p>
</div> <!-- End of footer -->
<!-- Cookie consent banner text. Some of the code was taken
from https://github.com/Godsont/Cookie-Consent-Banner/blob/master/index.html -->
<div class="cookie-container">
<p>
We use cookies to collect some information about people who use our website. You can read how we use cookies
in our <a href="privacy_n_legal.html" target="_blank"><u>Privacy Policy and our Terms and Conditions</u>
</a>. Click "I Accept" if you give us your permission to use our cookies to collect your information.
</p>
<button class="cookie-btn">
I Accept
</button>
</div> <!-- End of cookie consent banner text. -->
<!-- JS code from the "js" folder. -->
<script src="./js/main.js"></script>
<!-- Boostrap JS. -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</footer>
</body>
</html>