framework-example/index.html at main · ShiftedReality90/framework-example · GitHub

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="style.css" />
    <title>Disturbed</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    </head>

<body class=".bg-dark">

  <!--Main Container-->

  <main class="container-fluid m-0 p-0">

  <!--Header-->

  <header class="row">
   <div class="col">
    <h1>Disturbed</h1>
   </div>
  </header>


  <!--My Main Content-->

  <div class="row m-3 p-2 bg-dark text-white">

<!--Left Column/Carousel/Text/Video-->

  <div class="col-md-9">

   <div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel" style="width: 100%">
    <div class="carousel-inner">

      <!-- 1st Picture-->

     <div class="carousel-item active">

      <img class="d-block w-100" src="./musician-664432_1280.jpg">

     </div>

     <!--2nd Picture-->

     <div class="carousel-item">

      <img class="d-block w-100" src="./concert-316464_1280.jpg">

     </div>

     <!-- 3rd Picure-->

     <div class="carousel-item">

      <img class="d-block w-100" src="./band-426829_1920.jpg">

     </div>
    </div>
   </div>


 <!--About The Band-->

 <p class="info">Disturbed is an American heavy metal band from Chicago, formed in 1994. The band includes vocalist David Draiman, guitarist/keyboardist Dan Donegan, bassist John Moyer and drummer Mike Wengren. Draiman, Donegan and Wengren have been involved in the band since its inception, with Moyer replacing former bassist Steve Kmak, first as session performer in 2003, and then officially in 2005.

    The band has released seven studio albums, five of which have consecutively debuted at number one on the Billboard 200. Disturbed went into hiatus in October 2011, during which the band's members focused on various side projects, and returned in June 2015, releasing their first album in four years, Immortalized in August 2015. They also released two live albums, Music as a Weapon II in February 2004 and Disturbed: Live at Red Rocks in November 2016.

    Disturbed has sold over 17 million records worldwide, making them one of the most successful rock bands in the modern era alongside Slipknot and Godsmack, among others.</p>


<!--Embedded Video-->

    <div class="ratio ratio-16x9">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/u9Dg-g7t2l4" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>

  </div>


<!-- Top Right Column Tour dates-->
 <div class="col-md-3">
 <div class="TourDates">

  <h2>Tour Dates 2021</h2>

  <ul>
    <li>Sheffield Arena - Sheffield - 26th February 2021 @ 7:30pm</li>
   <li>Elland Road Stadium - Leeds - 1st March 2021 @ 6pm</li>
   <li>Ethihad Stadium - Manchester - 5th April 2021 @ 6pm </li>
   <li>St James Park - Newcastle - 1st June 2021 @ 5.30pm</li>
   <li>Emirates Stadium - North London - 8th July 2021 @ 7.30pm</li>
   <li>Millenium Arena - London - 1st August 2021@ 5.50pm</li>
   <li>The SSE Hydro Glasgow - 25th September 2021 @ 7pm</li>
  </ul>


 </div>
 </div>

</div>

<!-- Footer Section-->
  <footer class="row">
   <div class="col">
    <p>&copy; Pete O'Connell 2021</p>
   </div>
  </footer>

</main>

<!--Scripts-->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>

</body>
</html>