-
Notifications
You must be signed in to change notification settings - Fork 0
/
history.html
98 lines (83 loc) · 7.92 KB
/
history.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
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>"Culturecene: Respect The Craft"</title>
<meta name='description' content='The Beginners Guide to Hip-Hop'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Great%20Vibes" rel='stylesheet'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="css/culturecene.css">
</head>
<body>
<header>
<div class="first" style= "padding: 1% 5% 1% 5%;">
<nav class="navbar nav">
<div class="container">
<div class="row">
<img src="img/logo.png" alt="Logo" class="toplogo d-sm-none d-md-inline-block">
<ul class="nav nav-pills nav-justified">
<li class="nav-item"><a href="index.html">Home</a></li>
<li class="nav-item"><a href="history.html">History</a></li>
<li role="presentation" class="dropdown nav-item">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Scenes</a>
<ul class="dropdown-menu">
<li> <a href ="scenes.html">Map Overview</a></li>
<li> <a href ="east.html">East Coast & The Mid-West</a></li>
<li> <a href ="west.html">West Coast</a></li>
<li> <a href ="south.html">The South</a></li>
</ul>
<li class="nav-item"><a href="about.html">About</a></li>
</ul>
</div>
</div>
</nav>
</div>
</header>
<main class="historymain">
<aside class="historyGallery">
<div class="polaroid"><a href="https://en.wikipedia.org/wiki/Run-DMC" title="jam master jay, dmc & run">
<img src="https://img.redbull.com/images/c_fill,g_auto,w_1500,h_1000/q_auto,f_auto/redbullcom/2013/11/18/1331620897460_2/run-dmc" alt="Run-DMC"></a></div>
<div class="polaroid"><a href="https://en.wikipedia.org/wiki/EPMD" title="epmd - Long Island, 1988">
<img src="https://ichef.bbci.co.uk/news/976/cpsprodpb/13BD3/production/_102015808_8bbc2eb7-075d-4129-abaa-4e6722433691.jpg" alt="EPMD"></a></div>
<div class="polaroid"><a href="https://en.wikipedia.org/wiki/N.W.A" title="n.w.a - Detroit, 1989">
<img src="https://media.gq.com/photos/5f15e1477514611474a2ec68/16:9/w_3600,h_2025,c_limit/GQ-NWA-Police-072020.jpg" alt="NWA"></a></div>
<div class="polaroid"><a href="https://en.wikipedia.org/wiki/Stop_the_Violence_Movement" title="mc lyte, krs one, kool mo dee - 1989">
<img src="https://pbs.twimg.com/media/B3o45_WIgAA7E49.jpg" alt="Stop the violence movement"></a></div>
</aside>
<section class="historyContent">
<h1> Hip-hop History 101: The Golden Age</h1>
<article class="historyText">
<p> Welcome to Hip-hop. Here we will explore the golden era of hip-hop spanning between the mid-1980's to the early 1990's. The sounds, vibe and feel of the golden age tracks are representative of those years, through the technology available at the time, the cultural and societal norms regarding things like attitudes and for the most part, accelerated a much-needed exposure of the black struggles in America on to an international stage. <br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae proin sagittis nisl rhoncus mattis rhoncus. Cursus vitae congue mauris rhoncus aenean vel elit scelerisque mauris. Scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus. In tellus integer feugiat scelerisque varius morbi enim nunc faucibus. Odio pellentesque diam volutpat commodo sed egestas. Ut diam quam nulla porttitor. Ipsum suspendisse ultrices gravida dictum fusce ut placerat orci nulla. Tellus rutrum tellus pellentesque eu. Nec feugiat in fermentum posuere urna nec tincidunt.<br><br>
Aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc sed. Velit sed ullamcorper morbi tincidunt ornare massa eget egestas. Tincidunt vitae semper quis lectus nulla at volutpat. Enim facilisis gravida neque convallis a cras semper auctor. Turpis cursus in hac habitasse. Morbi enim nunc faucibus a pellentesque sit amet. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi nullam. Id diam maecenas ultricies mi eget mauris pharetra et. Mollis nunc sed id semper risus in hendrerit gravida rutrum. Imperdiet nulla malesuada pellentesque elit eget gravida cum sociis natoque. Viverra maecenas accumsan lacus vel facilisis volutpat est velit egestas. <br><br>
Dictumst quisque sagittis purus sit. Ultrices vitae auctor eu augue ut lectus arcu bibendum. Hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Ultrices tincidunt arcu non sodales neque sodales ut. Amet risus nullam eget felis. Dignissim diam quis enim lobortis scelerisque fermentum dui faucibus in. Duis tristique sollicitudin nibh sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames. Pellentesque adipiscing commodo elit at imperdiet. Purus in massa tempor nec feugiat nisl pretium fusce. Dictum sit amet justo donec enim. Suscipit adipiscing bibendum est ultricies integer quis auctor elit sed. Urna nec tincidunt praesent semper feugiat nibh sed pulvinar proin. In hac habitasse platea dictumst. Justo laoreet sit amet cursus. Amet dictum sit amet justo donec enim diam. Ac auctor augue mauris augue neque gravida in. Accumsan lacus vel facilisis volutpat est velit egestas dui id. Tempus quam pellentesque nec nam aliquam sem et tortor. Ut eu sem integer vitae justo eget magna. <br><br>
The following video highlights some key songs pulled from this era, presented by DJ Cassidy: </p></article>
<div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/AW0pRKKjHsY" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div class="fluid-container"><div class="button-box scenes">
<a href="scenes.html" id="scenesbutton" class="button nav-link">
<div class="bottom"></div>
<div class="top">
<div class="label">fresh on the scene <i class="fas fa-play"></i> </div>
<div class="button-border button-border-left"></div>
<div class="button-border button-border-top"></div>
<div class="button-border button-border-right"></div>
<div class="button-border button-border-bottom"></div>
</div>
</a>
</div></div>
</section>
</main>
<footer>
<div class="bottom">
<h4> Designed by </h4>
<img src="img/leoLogo.png" alt="Designed by Studio Leo">
</div>
<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/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</footer>
</body>
</html>