<!DOCTYPE html>
<html lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
margin:0;font-family:Arial
}
.topnav {
overflow: hidden;
background-color: #333;
}
.with-sidebar {
display: flex;
flex-wrap: wrap;
}
.sidebar {
flex-basis: 20rem;
flex-grow: 999;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.active {
background-color: #000;
color: white;
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #555;
color: white;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
@media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
* {
box-sizing: border-box;
}
body {
padding: 20px;
font-family: Arial;
}
/* Center website */
.main {
max-width: 1000px;
margin: auto;
}
h1 {
font-size: 50px;
word-break: break-all;
}
.row {
margin: 8px -16px;
}
/* Add padding BETWEEN each column */
.row,
.row > .column {
padding: 8px;
}
/* Create four equal columns that floats next to each other */
.column {
float: left;
width: 25%;
}
/* Clear floats after rows */
.row:after {
content: "";
display: table;
clear: both;
}
/* Content */
.content {
background-color: white;
padding: 10px;
}
/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 900px) {
.column {
width: 50%;
}
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
padding: 105px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width:600px) {
.column {
width: 100%;
}
}
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
/* Float four columns side by side */
.column {
float: left;
width: 25%;
padding: 0 10px;
}
/* Remove extra left and right margins, due to padding */
.row {margin: 0 -5px;}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive columns */
@media screen and (max-width: 600px) {
.column {
width: 100%;
display: block;
margin-bottom: 20px;
}
}
/* Style the counter cards */
.card {
box-shadow: 0 4px 8px 0 rgba(255, 0, 102);
padding: 16px;
text-color: #ffffcc;
text-align: center;
background-color: #1abc9c;
}
</style>
<script src=""></script>
<body>
<div class="topnav" id="myTopnav">
<a href="https://coolvibes.w3spaces.com" class="active">Home</a>
<a href="/schedule.html">Schedule</a>
<a href="#contact">Tune in Again</a>
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<a href="#about">About</a>
<a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a>
</div>
<div style="padding-left:16px">
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
<!-- Header -->
<header id="coolvibes">
<a href="#"><img src="https://coolvibes.w3spaces.com/vibeslogo.png" style="width:65px;" class="w3-circle w3-right w3-margin w3-hide-large w3-hover-opacity"></a>
<center><img src="https://coolvibes.w3spaces.com/logo.png" style="width:25%;"><br><br></center>
</div>
</div>
</header>
<!-- End Header -->
<!-- Start Presenters -->
<center><i class="fa fa-music" aria-hidden="true"></i>Presenters</center>
<div align="right">
</div>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<img src="img_la.jpg" alt="LA" style="width:100%">
<!-- MAIN (Center website) -->
<div class="main">
<!-- Presenters Images -->
<div class="row">
<div class="column">
<div class="content">
<img src="https://coolvibes.w3spaces.com/strawbs.png" style="width:70%">
<h3>Strawbs</h3>
<style type="text/css">.WimpyPlayerPopup204, .WimpyPlayerPopup204:hover, .WimpyPlayerPopup204:visited, .WimpyPlayerPopup204:link{font-size:20px;background-color:#CFC700;position:relative;display:inline-block;overflow:hidden;padding-left:1em;padding-right:1em;margin:0px;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;cursor:pointer;height:2em;border-radius:1em;-webkit-border-radius:1em;-moz-border-radius:1em;-ms-border-radius:1em;-o-border-radius:1em;border-style:solid;border-width:1px;border-color:rgba(123,126,128,1);box-shadow:inset 0.16px 0.28px 0.3px rgba(255,255,255,0),inset -0.16px -0.28px 0.4px rgba(246,246,246,0.3),0.85px 2.769px 3px rgba(0,0,0,0.22817204301075278);-webkit-box-shadow:inset 0.16px 0.28px 0.3px rgba(255,255,255,0),inset -0.16px -0.28px 0.4px rgba(246,246,246,0.3),0.852px 2.769px 3px rgba(0,0,0,0.22817204301075278);-moz-box-shadow:inset 0.16px 0.28px 0.3px rgba(255,255,255,0),inset -0.16px -0.28px 0.4px rgba(246,246,246,0.3),0.852px 2.769px 3px rgba(0,0,0,0.22817204301075278);-ms-box-shadow:inset 0.16px 0.28px 0.3px rgba(255,255,255,0),inset -0.16px -0.28px 0.4px rgba(246,246,246,0.3),0.852px 2.769px 3px rgba(0,0,0,0.22817204301075278);-o-box-shadow:inset 0.16px 0.28px 0.3px rgba(255,255,255,0),inset -0.16px -0.28px 0.4px rgba(246,246,246,0.3),0.852px 2.769px 3px rgba(0,0,0,0.22817204301075278);white-space:nowrap;line-height:1.9em;color:#fdfdfd;font-family:Arial, Helvetica, sans-serif;text-align:center;font-weight:normal;font-style:normal;text-shadow:-0.16px -1.16px 0.23597px rgba(0,0,0,0.7),0px 1.25px 6.7px #2e4a63;-webkit-text-shadow:-0.16px -1.16px 0.23597px rgba(0,0,0,0.7),0px 1.2px 6.7px #2e4a63;-moz-text-shadow:-0.16px -1.16px 0.23597px rgba(0,0,0,0.7),0px 1.25px 6.7px #2e4a63;-ms-text-shadow:-0.16px -1.16px 0.23597px rgba(0,0,0,0.7),0px 1.25px 6.7px #2e4a63;-o-text-shadow:-0.16px -1.16px 0.23597px rgba(0,0,0,0.7),0px 1.25px 6.7px #2e4a63;font-smooth:always;-webkit-font-smoothing:antialiased;text-decoration:none;}.WimpyPlayerPopup204:active {color:#cecece;background-color:#767676;border-color:rgba(26,26,26,0.38);box-shadow:inset 0.16px 0.28px 0.3px rgba(255,255,255,0),inset -0.16px -0.28px 0.4px rgba(246,246,246,0.3),inset 0px 0px 14px rgba(0,0,0,0.4);-webkit-box-shadow:inset 0.16px 0.28px 0.3px rgba(255,255,255,0),inset -0.16px -0.28px 0.4px rgba(246,246,246,0.3),inset 0px 0px 14px rgba(0,0,0,0.4);-moz-box-shadow:inset 0.16px 0.28px 0.3px rgba(255,255,255,0),inset -0.16px -0.28px 0.4px rgba(246,246,246,0.3),inset 0px 0px 14px rgba(0,0,0,0.4);-ms-box-shadow:inset 0.16px 0.28px 0.3px rgba(255,255,255,0),inset -0.16px -0.28px 0.4px rgba(246,246,246,0.3),inset 0px 0px 14px rgba(0,0,0,0.4);-o-box-shadow:inset 0.16px 0.28px 0.3px rgba(255,255,255,0),inset -0.16px -0.28px 0.4px rgba(246,246,246,0.3),inset 0px 0px 14px rgba(0,0,0,0.4);text-shadow:none;-webkit-text-shadow:none;-moz-text-shadow:none;-ms-text-shadow:none;-o-text-shadow:none;text-decoration:none;}</style>
<a class="WimpyPlayerPopup204" href="javascript:;" onClick="window.open('https://coolvibes.w3spaces.com/request.html','wimpyPlayerPopupWindow','width=527,height=380')">Requests</a>
</div>
</div>
<div class="row">
<div class="column">
<div class="content">
<img src="https://coolvibes.w3spaces.com/jason.jpg" style="width:70%">
<h3>Jason</h3>
</div>
</div>
<div class="column">
<div class="content">
<img src="https://coolvibes.w3spaces.com/Deano.png" style="width:70%">
<h3>Deano</h3>
</div>
</div>
<!-- End Presenters Images -->
<div class="column">
<div class="content">
<p="new dj" style="width:70%">
<h3>New Presenter</h3>
</div>
</div>
<div class="column">
<div class="content">
<p="new dj" style="width:70%">
<h3>New Presenter</h3>
</div>
</div>
</div>
<!-- END MAIN -->
<!-- Finish Presenters -->
<!-- Start Programs -->
<center><i class="fa fa-music" aria-hidden="true"></i>Programs</center>
<br>
<br>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<div class="row">
<div class="column">
<div class="card">
<h3>Monday</h3>
<hr>
<h3>Jukebox</h3>
<p>12 p.m - 1 a.m</p></i>
<h3>Jukebox</h3>
<p>11 a.m - 6 p.m</p>
<h3>Jukebox</h3>
<p>2 a.m - 4 p.m</p>
</div>
</div>
<div class="column">
<div class="card">
<h3>Tuesday</h3>
<hr>
<h3>The old school show</h3>
<p>10 p.m - 1 a.m</p>
<p>with Matt</p>
<h3>Jukebox</h3>
<p>2 a.m - 4 p.m</p>
</div>
</div>
<div class="column">
<div class="card">
<h3>Wednesday</h3>
<br>
<h3>Jukebox</h3>
<p>11 a.m - 6 p.m</p>
<h3>Jukebox</h3>
<p>2 a.m - 4 p.m</p>
<h3>Thursday</h3>
<h3>Strawbs</h3>
<p>Strawbs's Show Show</p>
<p>10 p.m - 12 a.m</p>
<h3>Jukebox</h3>
<p>12 a.m - 4 p.m</p>
</div>
</div>
<div class="column">
<div class="card">
<h3>Friday</h3>
<h3>Column</h3>
<hr>
<h3>Saturday</h3>
<h3>Column</h3>
<p>Some text</p>
<p>Some text</p>
<hr>
<h3>Sunday</h3>
<h3>Column</h3>
<p>Some text</p>
<p>Some text</p>
</div>
</div>
</div>
</body>
</html>
<div align="right"><html>
<head>
<!-- text area -->
<style>
h2 {
text-shadow: 2px 2px 5px red;
}
</style>
<!-- Start Currently Playing -->
<div align="right"><h2></i>Currently Playing</div></h2>
<!-- end currently playing -->
</head>
<body>
<!-- End text area -->
<!--OnlineRadioBox Playlist widget-->
<div align="left left"><div class="orbL " id="orb_pl_5d863ea1c47b3a5d">
<style media="screen">
.orbL{position:relative;box-sizing:border-box;overflow:hidden;font-weight:normal;border:1px solid;text-align:left}.orbL br,.orbL>br{display:none!important;}.orbL p,.orbL>p{margin:0!important;padding:0!important;line-height:normal!important;font-size:inherit!important}.orbL br,.orbL>br{display:none!important}.orbLh{display:block;position:absolute;z-index:100;top:22px;right:10px;margin-top:-12px;width:21px;text-decoration:none!important;cursor:pointer}.orbLh>img{margin:0!important;border:none!important;height:24px!important;-webkit-filter:drop-shadow(2px 2px 0 rgba(47,99,160,.2));filter:drop-shadow(2px 2px 0 rgba(47,99,160,.2))}.orbLt{display:block;box-sizing:border-box;overflow:hidden;padding-left:10px!important;font-weight:normal;line-height:44px!important;min-height:44px;text-decoration:none!important}.orbLti{float:left!important;margin:10px 10px 10px 0!important;height:24px!important;width:44px!important;border:none!important;border-radius:2px!important;opacity:1!important;}.orbLtn{display:block;margin-right:54px!important;font-size:14px!important;font-weight:bold;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.orbIL{position:relative;overflow:auto;overflow-x:hidden;overflow-y:auto;margin:0!important;padding:0!important;list-style:none!important}.orbILi{box-sizing:border-box;margin:0!important;padding:0 10px!important;list-style:none!important;background-image:none;float:none!important;height: auto!important}.orbILi>a,.orbILi>span{display:block!important;height:auto!important;font-weight:normal!important;text-decoration:none!important;line-height:32px!important;font-size:14px!important;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;-webkit-transition:color .125s;transition:color .125s;border:none!important}.orbILi>a:hover,.orbILi>span:hover{background:transparent!important}.orbILi>a>time,.orbILi>span>time{display:inline-block;font-size:12px!important;width:3em}.orbILi+li{border-style:solid!important;border-width:1px 0 0!important}.orbILs{margin:0!important;padding:0!important;list-style:none!important;display:-webkit-flex;display:-ms-flexbox;display:-webkit-box;display:flex;-webkit-flex-flow:row nowrap;-ms-flex-flow:row nowrap;flex-flow:row nowrap;border-style:solid!important;border-width:0 0 1px!important}.orbILsi{display:inline-block!important;margin:0!important;padding:0!important;height:32px!important;overflow:hidden;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;-webkit-box-flex:1;flex:1 1 auto;-webkit-align-self:baseline;-ms-flex-item-align:baseline;align-self:baseline;text-align:center;font-size:11px!important;float:none!important}.orbILsi + li{border-style:solid!important;border-width:0 0 0 1px!important}.orbILsi > a,.orbILsi > span{display:block;line-height:32px!important;text-decoration:none!important;-webkit-transition:color .125s;transition:color .125s}
/* Compact */
.cmpct .orbILi>a,.cmpct .orbILi>span{line-height:24px!important;font-size:12px!important}
.cmpct .orbILi>a>time,.cmpct .orbILi>span>time{font-size:11px!important}
</style>
<style media="screen" id="orb_pl_5d863ea1c47b3a5d_settings">/*user customization*/.orbL{width:200px}.orbL{border-style: solid; border-color:#2f63a0 !important;border-radius:5px;background:#fff !important}.orbLt{background-color:#ed04f1 !important}/*common list title bg*/.orbLtn{color:#ffffff !important}/*common list title color*/.orbIL{height:122px}/*track list height: user height, e.g. 250px - 45px(title) - [33px(schedule, if enabled)] */.orbIL,.orbILs{background:#ffffff !important} /* list bg, schedule bg */.orbILi>a,.orbILi>a:visited,.orbILi>span,.orbILi>a:hover>time,.orbILi.a>a>time,.orbILi.a>span>time{color:#000000 !important} /*item color, hover-item time color, active-item time color */.orbILi>a:hover,.orbILi.a>a,.orbILi.a>span,.orbILsi>a:hover,.orbILsi>span{color:#000000 !important} /*hover-item color, active-item color, schedule hover-item color, schedule active-item color*/.orbILi>a>time,.orbILi>span>time,.orbILsi>a{color:#f00fd6 !important}/*item time color, schedule item color*/.orbILi.a,.orbILsi.a{background:#ffffff !important} /* active-item bg, schedule active-item bg */.orbILs,.orbILi+li,.orbILsi+li{border-color:rgb(255, 0, 102) !important}/* item border color, schedule border color */.orbILs{display:none}</style>
<a class="orbLh" href="https://onlineradiobox.com/" title="Internet Radio" target="_blank"><img src="//ecdn.onlineradiobox.com/img/wl.svg" alt="Internet Radio"></a>
<a class="orbLt" href="https://onlineradiobox.com/uk/urban8/" target="_blank"><img class="orbLti" src="//cdn.onlineradiobox.com/img/logo/0/52120.png" alt="CoolVibes Radio"><span class="orbLtn">CoolVibes Radio</span></a>
<script>
var orbpl_w = orbpl_w || { lang: "en-us" };
orbpl_w.cmd = orbpl_w.cmd || [];
orbpl_w.cmd.push(function() {
orbpl_w.init("orb_pl_5d863ea1c47b3a5d");
});
var s, t; s = document.createElement('script'); s.type = 'text/javascript';
s.src = "//ecdn.onlineradiobox.com/js/plwidget.min.a1649ec0.js";
t = document.getElementsByTagName('script')[0]; t.parentNode.insertBefore(s, t);
</script></div></div>
<!--OnlineRadioBox Playlist widget-->
</body>
</html>
</div>
<!-- End Programs -->
<!-- Social -->
<style>
h2 {
text-shadow: 2px 2px 5px red;
}
</style>
<center><h2></i>Social</center></h2>
<center><a href="https://facebook.com/coolvibesuk"><img src="https://img.icons8.com/nolan/64/facebook-f.png" style="width:100px;height:100px;"></a>
<a href="https://www.instagram.com/coolvibesradio/?hl=en-gb"><img src="https://img.icons8.com/nolan/64/instagram-new.png" style="width:100px;height:100px;"></a></center>
</div></center>
</div>
</div>
<style>
h2 {
text-shadow: 2px 2px 5px red;
}
</style>
<center><h2></i>Entertainment</center></h2>
<div class="responsive">
<div class="gallery">
<img src="https://coolvibes.w3spaces.com/carnivalfloat.jpg" width="600" height="20">
</a>
<div class="desc">Eastbourne Carnival 2021</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<img src="fireintown.jpg" width="600" height="200">
</a>
<div class="desc">we don't know what was going on but it looked like there was some sort of fire in one of the buildings</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<img src="disabledchildren.jpg" width="600" height="200">
</a>
<div class="desc">we heard that a special train where coming into Hastings Now We Don't Know if it where for the disabled or not
but i where bringing passengers to and from hastings!!!
</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<img src="eastbournebikes.jpg" width="600" height="400">
</a>
<div class="desc">18 september 2021 went to eastbourne to take some flicks and the bikes started
the carnival</div>
</div>
</div>
<div class="clearfix"></div>
<div class="">
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
</body>
</html>