forked from buas-media-interactive/prj4-group-template
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhero.html
100 lines (85 loc) · 4.29 KB
/
hero.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
<!doctype html>
<html lang="en" class="h-100">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<!-- Own Styles -->
<link rel="stylesheet" href="css/styles.css">
<!-- Bootstrap Javascript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<title>PRJ4 Base Group Template — Hero Section UX</title>
<!-- Google Analytics code goes just below here (check PRJ4 Guide for details) -->
<!-- End of Google Analytics code -->
</head>
<body class="h-100 d-flex flex-column">
<!-- Navigation bar, adapted from https://getbootstrap.com/docs/5.1/components/navbar/ -->
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">
<img src="images/YouUp Small.svg" width="40" alt="Breda University of Applied Sciences">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link " aria-current="page" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="cards.html">Our Team</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="hero.html">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="carousel.html">Locations</a>
</li>
<li class="nav-item">
<a class="nav-link" href="corporate.html">Corporate</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- End of navigation bar -->
<!-- Start of section adapted from https://getbootstrap.com/docs/5.1/examples/album/ -->
<header class="py-2 py-md-4 py-lg-5 text-center container-fluid bg-gradient text-light">
<img src="images/SkyScraperHorizontal.jpg" width="660px">
<div class="row has-bg-img">
<div class="col-md-8 col-lg-6 mx-auto py-5">
<h1 class="display-3">About Us</h1>
<p class="lead">A dating service designed to have the time of your life. The first 100 people to like our Facebook page and subscribe to our YouTube channel will get the opportunity to attend a FREE event in our skyscraper! </p>
<p class="mt-5">
<a href="https://www.facebook.com/profile.php?id=100090911655749" class="btn btn-lg btn-primary m-1 d-block d-sm-inline">Facebook</a>
<a href="https://www.youtube.com/@YouUpOfficial" class="btn btn-lg btn-danger m-1 d-block d-sm-inline">Youtube</a>
</p>
</div>
</div>
</header>
<!-- End of hero section -->
<!-- A footer with socials -->
<footer class="shadow-lg mt-auto py-4 bg-body">
<div class="container d-flex justify-content-between align-items-center">
<p>
© 2020–2021 — YouUp Inc.
</p>
<ul class="list-unstyled d-flex align-items-center opacity-75">
<li>
<a href="https://www.facebook.com/profile.php?id=100090911655749" target="_blank">
<img class="m-2" src="images/facebook.svg" alt="Follow us on" width="26">
</a>
</li>
<li>
<a href="https://www.youtube.com/@YouUpOfficial" target="_blank">
<img class="m-2" src="images/youtube.svg" alt="Follow us on YouTube" width="26">
</a>
</li>
</ul>
</div>
</footer>
<!-- End of the grid -->
</body>
</html>