hi freecodecamp team, basically i’ve been trying to
debug my website? but i can’t for life of me see what is causing
my site not to change BG color? code here
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<html>
<title>Coolvibes|Reloaded</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://coolvibes-reloaded.com/w3.css">
<link rel="stylesheet" href="http://coolvibes-reloaded.com/fonts.css">
<link rel="stylesheet" href="http://coolvibes-reloaded.com/font-awesome.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
<div class="cc_player" data-username="coolvibes" data-size="sm" data-style="light">Loading ...</div><script language="javascript" type="text/javascript" src="http://boogie.vside-radio.com:2199/system/player.js"></script>
<center><img src="images\header.png" height="123" width="440" class-"LOGO" alt="coolvibes alightens you with tons of different tunes to entertain you"></center>
<center>
<p>You're Tuned To</p>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<head>
<div id="snow"></div>
<title>Station Activity</title>
<style type="text/css">
td {
font-size: 0.6em;
}
/* temporary for testing purposes */
#NowOn {
border: 0px solid black;
font-size: 11.5px;
color: white;
background: transparent;
height: 65px;
width: 350px;
}
</style>
<script type="text/javascript">
/* NOT CURRENTLY USED
var thedate = new Date();
var dayofweek = thedate.getDay();
var hourofday = thedate.getHours();
var GMT = new Date().getTimezoneOffset();
var offsetGMT = +1 new Date().getTimezoneOffset()/01:00;
*/
// Sun=0 1 2 3 4 5 Sat=6
var DayOfWeek = new Array('Weekend', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Weekend');
var NoShow = 'No Show Scheduled<br />for COOLVIBES';
var DH = new Array(7);
for (d = 0; d < 7; d++) {
DH[d] = new Array(24);
for (h = 0; h < 24; h++) {
DH[d][h] = '';
}
}
DH[1][10] = 'Monday at 10 AM<br>AUTOMIX<br>with auto';
DH[1][08] = 'Monday at 8 AM<br>AUTOMIX<br>with auto';
DH[1][12] = 'Auto mix<br>with auto parrott<br>Monday at Noon<br>No Genre';
DH[1][14] = 'auto<br>with auto parrott<br>Monday at 2 PM<br>No Genre';
DH[1][16] = 'No Show Name<br>with Katy Cox<br>Monday at 4 PM<br>Rap';
DH[1][17] = 'The Greatest<br>with DJ Fresh<br>Monday at 5 PM<br>No Genre';
DH[1][18] = 'Revolution Corner<br>with Randy Underwood<br>Monday at 6 PM<br>No Genre';
DH[1][20] = 'Daily Affirmation<br>with DJ Hightower<br>Monday at 8 PM<br>No Genre';
DH[1][22] = 'No Show Name<br>with David Doggett<br>Monday 10 to Midnight<br>No Genre';
DH[1][23] = 'No Show Name<br>with David Doggett<br>Monday at 11 PM<br>No Genre';
DH[2][13] = 'No Show Name<br>with Michelle Caillouet<br>Tuesday at 1 PM<br>Rock';
DH[2][08] = 'Gingernation<br>with DJ Harvey<br>Tuesday at 8 AM<br>Mix n Match';
DH[2][16] = 'No Show Name<br>with Sweet Action Jackson<br>Tuesday at 4 PM<br>Rock';
DH[2][20] = 'The Rock Hour<br>with Dan the Man<br>Tuesday at 8 PM<br>No Genre';
DH[3][10] = 'Love Me! Hate Me!<br>with DJ Nia<br>Wednesday at 10 AM<br>No Genre';
DH[3][11] = 'Westcoast Wednesdays<br>with DJ Smoove<br>Wednesday at 11 AM<br>No Genre';
DH[3][15] = 'The Storm Hour<br>with the Weatherman and Reba<br>Wednesday 3 to 5 PM<br>Classic Rock';
DH[3][16] = 'The Storm Hour<br>with the Weatherman and Reba<br>Wednesday at 4 PM<br>Classic Rock';
DH[3][22] = 'EZ Does It<br>with DJ EZ<br>Wednesday at 10 PM<br>Rap';
DH[4][12] = 'automix<br>with autodj<br>Thursday Noon to 2 PM<br>mix';
DH[4][22] = 'Request Show<br>with Strawbs<br>Thursday 8 PM to 10pm<br>Mix n Match';
DH[4][13] = 'automix<br>with autodj<br>Thursday at 1 PM<br>mix';
DH[4][14] = 'The Hour<br>with DJ V-Jeezy<br>Thursday at 2 PM<br>No Genre';
DH[4][22] = 'Request Show<br>with DJ Strawbs<br>Thursday at 10 PM<br>No Genre';
DH[5][10] = 'Friday at 10 AM<br>Christian Music<br>with Jammin J';
DH[5][11] = 'Friday at 11 AM<br>Christian Music<br>with Jammin J';
DH[5][12] = 'Friday at Noon<br>automix<br>with autodj';
DH[5][13] = 'Friday at 1 PM<br>automix<br>with auto';
DH[5][09] = 'Friday at 9 AM<br>Mix n Match<br>with Will';
DH[5][14] = 'Friday at 2 PM<br>automix<br>with autodj';
DH[5][15] = 'Friday at 3 PM<br>automix<br>with autodj';
DH[5][16] = 'Friday at 4 PM<br>automix<br>with autodj';
DH[5][17] = 'Friday at 5 PM<br>automix<br>with autodj';
DH[5][19] = 'Friday at 7 PM<br>Mix n Match<br>with Will';
DH[5][22] = 'Friday at 10 PM<br>Dance/Trance<br>with Dean';
DH[5][23] = 'Friday at 11 PM<br>automix<br>with autodj';
DH[6][18] = 'Saturday at 6 PM<br>automix<br>with automix';
DH[6][19] = 'Saturday at 7 PM<br>Dance/Trance<br>with Dean';
DH[6][13] = 'Saturday at 1 PM<br>Old School/Reggae<br>with El Carlito';
DH[6][22] = 'Saturday at 10 PM<br>mix<br>with autodj';
DH[6][23] = 'Saturday at 11 PM<br>mix<br>with autodj';
DH[7][18] = 'Sunday at 6 PM<br>Request Show<br>with Strawbs';
DH[7][21] = 'Sunday at 9 PM<br>Old School/Reggae<br>with El Carlito';
// Add more when schedule is known. Note: there may be better ways to do this when information is known.
function OnNow() {
var thedate = new Date();
var dayofweek = thedate.getDay();
var hourofday = thedate.getHours();
// alert(dayofweek+':'+hourofday+'<br />'+DH[dayofweek][hourofday]);
var showOn = DH[dayofweek][hourofday];
}
function NowON() {
var thedate = new Date();
var dayofweek = thedate.getDay();
var hourofday = thedate.getHours();
var showOn = DH[dayofweek][hourofday];
if (showOn == '') {
showOn = thedate + '<p />No Show Scheduled';
}
document.getElementById('NowOn').innerHTML = showOn;
}
</script>
</head>
<BODY onLoad="NowON()">
<!-- Unhide this if table display desired
<script type="text/javascript">
document.write(TableStationSchedule())
</script>
-->
<script type="text/javascript">
document.write(NowON));
</script>
<div id='NowOn' onClick="NowON()">Click For Now On COOLVIBES</div>
</body>
</html>
</center>
<body>
<div class="topnav" id="myTopnav">
<a href="https://coolvibes-reloaded.com/index.html" class="active">Home</a>
<a href="https://coolvibes-reloaded.com/Schedule.html">Schedule</a>
<a href="https://coolvibes-reloaded.com/tunein.html">Tunein Again</a>
<a href="https://coolvibes-reloaded.com/mobile.html">Mobile</a>
<a href="https://coolvibes-reloaded.com/Birthday.html">Birthday</a>
<a href="https://coolvibes-reloaded.com/featured.html">Featured</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</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 -->
<!-- End Header -->
<!-- Start Presenters -->
<div align="right">
</div>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path fill="#333" fill-opacity="1" d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,117.3C672,107,768,117,864,133.3C960,149,1056,171,1152,154.7C1248,139,1344,85,1392,58.7L1440,32L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"></path>
</svg>
<div align="center">
<div style="height: 40px;width: 300px; background-color: #A00000;color:white;">
<i class="fa-fw fas fa-snowflake"></i>Presenters!
</div>
</div>
</div>
<center><style type="text/css">.WimpyPlayerPopup406, .WimpyPlayerPopup406:hover, .WimpyPlayerPopup406:visited, .WimpyPlayerPopup406:link{font-size:20px;background-color:#2D2D2D;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;}.WimpyPlayerPopup406: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="WimpyPlayerPopup406" href="javascript:;" onClick="window.open('https://coolvibes-reloaded.com/DjRequests','wimpyPlayerPopupWindow','width=527,height=280')">Requests</a></center>
<p>
<center><p>If You Would Like a Tune Played,
<br />
Our DJ's Will Hunt It Down And Wack It On!</p>
</p></center>
<!-- Presenters Images -->
<div align="center">
<!-- MAIN (Center website) -->
<div class="main">
<!-- Portfolio Gallery Grid -->
<div class="row">
<div class="column">
<div class="content">
<img src="images/strawb1.jpg" height="123" width="240"">
</div>
</div>
<div class="column">
<div class="content">
<img src="images/jason.jpg" height="123" width="240">
<h3>DJ Reuben</h3>
</div>
</div>
<div class="column">
<div class="content">
<img src="images/default-image.jpg" height="123" width="240">
<h3>Deano</h3>
</div>
</div>
<div class="column">
<div class="content">
<img src="images/kayley1.jpg" height="123" width="240">
<h3>Kayley</h3>
</div>
</div>
<!-- END GRID -->
</div>
<!-- END MAIN -->
</div>
</div>
</div>
<!-- End Presenters Images -->
</div>
<!-- END MAIN -->
<!-- Finish Presenters -->
<!-- Start Programs -->
<p style="page-break-before: always">
<div align="center">
<div style="height: 40px;width: 300px; background-color: #A00000;color:blue;">
<i class="fa-fw fas fa-snowflake"></i>Programs!
</div>
</div>
<div class="sidebar s1">
<a class="sidebar-toggle" title="Expand Sidebar"><i class="fa icon-sidebar-toggle"></i></a>
<div class="sidebar-content">
<div class="sidebar-top group">
<br>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<table>
<tr>
<th>Kayley's Show</th>
<th>Strawb's Show</th>
<th>Ray's Show</th>
<th>G-Force Reggae</th>
<th>New Presenter</th>
</tr>
<tr>
<td>New Presenter</td>
<td>New Presenter</td>
<td><a href="http://shoutcastservices.uk/DJ-Ray/"target="_blank"><b>Click here for DJ Ray</b></a></td>
<td>New Presenter</td>
<td>New Presenter</td>
</tr>
<tr>
<td>New Presenter</td>
<td>New Presenter</td>
<td>New Presenter</td>
<td>New Presenter</td>
<td>New Presenter</td>
</tr>
</table>
</body>
</html>
<p style="page-break-before: always">
<div align="right">
<html>
<head>
<!-- text area -->
<!-- Start Currently Playing -->
<div align="right">
<div style="height: 40px;width: 300px; background-color: #A00000;color:white;">
<i class="fa-fw fas fa-snowflake"></i>Currently Playing!
</div>
</div>
<!-- end currently playing -->
</head>
<body>
<!-- End text area -->
<p class="round3"><span class="cc_streaminfo" data-type="song" data-username="coolvibes">Loading ...</span>
<script language="javascript" type="text/javascript" src="http://boogie.vside-radio.com:2199/system/streaminfo.js"></script>
<br /><img class="cc_streaminfo" data-type="trackimageurl" data-username="coolvibes" /><br /><a href="#" class="cc_streaminfo" data-type="trackbuyurl" data-username="coolvibes"></a><br />
</p>
<hr />
<!-- Start Coolvibes Babe Of The Month! -->
<div align="right">
<div style="height: 40px;width: 300px; background-color: #A00000;color:white;">
<h3>Smart Babe Of The Month!</h3>
</div>
</div>
<p><div align="right">Fancy Having Your image here? Contact us today</p></div>
<div align="right"><img src="images/" height="100px" width="100px">
<div align="right"><a href="mailto:jnlravers@gmail.com">Email:Coolvibes-Reloaded</a></div>
</div>
</div>
<!-- Finish Coolvibes Babe Of The Month! -->
</body>
</html>
</div>
<!-- End Programs -->
<!-- Social -->
<div align="right">
<div style="height: 40px;width: 300px; background-color: #A00000;color:white;">
<h3>
<div class="tree" id="mkm">Social!
</h3>
</div>
</div>
</div>
<div align="right"><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>
<a href="https://twitter.com/coolvibesradio"><img src="https://img.icons8.com/nolan/64/twitter-squared.png" style="width:100px;height:100px;"></a></center>
</div>
</div>
</div>
</div>
<div align="center">
<div style="height: 40px;width: 300px; background-color: #A00000;color:white;">
<i class="fa-fw fas fa-snowflake"></i>Entertainment!
</div>
</div>
<html>
<head>
</head>
<body>
<div align="center"><img src="images/lol.jpg" height="200px" width="200px">
<div align="center">
<div style="height: 40px;width: 300px; background-color: #A00000;color:white;">
<i class="fa-fw fas fa-snowflake"></i>Special!
</div>
</div>
</div>
<div align="center"><img src="images/funny.jpg" height="200px" width="200px">
<p><center>we saw this on our turkey holiday, thought we'd post it</p></center>
</div>
<br />
<div align="center">
<div style="height: 40px;width: 300px; background-color: #A00000;color:white;">
<i class="fa-fw fas fa-snowflake"></i>Subscribe to our newsletter for updates!
</div>
</div>
</div>
<div align="center"><iframe src="https://coolvibes-reloaded.com/email form.html" height="300" width="490" title="Iframe Example"></iframe></div>
<!-- Footer -->
<footer class="w3-container w3-padding-32 w3-dark-grey">
<div class="w3-row-padding">
<div class="w3-third">
<div align="center">
<h3>
<p>other ways of tuneing in</p>
</h3>
<div id="cc_tunein">
<a href="http://boogie.vside-radio.com:2199/tunein/coolvibes.pls"><img align="absmiddle" src="http://boogie.vside-radio.com:2199/system/images/tunein-pls.png" border="0" alt="Winamp, iTunes" title="Winamp, iTunes" /></a>
<a href="http://boogie.vside-radio.com:2199/tunein/coolvibes.asx"><img align="absmiddle" src="http://boogie.vside-radio.com:2199/system/images/tunein-asx.png" border="0" alt="Windows Media Player" title="Windows Media Player" /></a>
<a href="http://boogie.vside-radio.com:2199/tunein/coolvibes.ram"><img align="absmiddle" src="http://boogie.vside-radio.com:2199/system/images/tunein-ram.png" border="0" alt="Real Player" title="Real Player" /></a>
<a href="http://boogie.vside-radio.com:2199/tunein/coolvibes.qtl"><img align="absmiddle" src="http://boogie.vside-radio.com:2199/system/images/tunein-qtl.png" border="0" alt="QuickTime" title="QuickTime" /></a>
<center>
<p>ways of tunein in</p>
</center>
<center>
<p>Download the Get Me Radio! Roku TV App from <a href="https://channelstore.roku.com/en-gb/details/b97490a8fb5758527be0396e43422e42/get-me-radio">here</a> and then search for Coolvibes Radio.
</center>
</p>
<center>
<p>Download the Get Me Radio! Android App <a href="https://play.google.com/store/apps/details?id=com.getmeradio.gmr">from here</a> and search for Coolvibes Radio on our Mobile App.
</center>
</p>
</div>
</div>
</div>
</div>
</footer>
<div>
<center>© Copyright 2021 | 2024 <strong>Coolvibes Reloaded</strong> | All Rights Reserved | Site by <a href="http://www.coolvibes-reloaded.com/" target="_blank">coolvibes</a>
</div>
</center>
<!-- End page content -->
</div>
<script>
// Script to open and close sidebar
function w3_open() {
document.getElementById("mySidebar").style.display = "block";
document.getElementById("myOverlay").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
document.getElementById("myOverlay").style.display = "none";
}
</script>
</body>
</html>
<!-- partial -->
</body>
</html>
css:
* {
box-sizing: border-box;
}
body {
background-color: #00000;
color: #00000;
line-height: 2;
text-align: justify;
font-family: verdana, arial, helvetica;
}
@media only screen and (min-width: 600px) {
header {
margin: 5px auto;
display: flex;
align-items: flex-end;
}
.logo {
width: 205%;
}
h1 {
font-size: 3em;
line-height: 4;
color: yellow;
margin-left: 30px;
}
h1:hover {
font-size: 3.2em;
line-height: 4.2em;
color: pink;
}
nav {
height: 70px;
background-color: yellow;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
margin: 10px 0 20px 0;
}
nav ul {
display: flex;
list-style-type: none;
justify-content: space-between;
}
nav ul li {
margin: 10px 25px;
}
nav ul li a {
background-color: lightblue;
height: 45px;
padding: 5px 35px;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
#section1 {
grid-area: part1;
}
#section2 {
grid-area: part2;
}
#section3 {
grid-area: part3;
}
#section4 {
grid-area: part4;
}
#section5 {
grid-area: part5;
}
#section6 {
grid-area: part6;
}
#section7 {
grid-area: part7;
}
#section8 {
grid-area: part8;
}
#section9 {
grid-area: part9;
}
#section10 {
grid-area: part10;
}
main {
display: grid;
background: linear-gradient(to bottom, #33ccff 0%, #ff99cc 100%);
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
height: 1300px;
margin-top: 30px;
grid-template-areas:
"part1 part1 part2 part3"
"part1 part1 part4 part5"
"part6 part7 part10 part10"
"part8 part9 part10 part10";
grid-gap: 20px;
}
.card {
box-shadow: rgb(255, 0, 102) 0px 4px 8px 0px;
text-align: center;
background-color: rgb(26, 188, 156);
padding: 16px;
}
.textbox {
background-color: #0000ff67;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
margin: 10px 0 20px 0;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dd8383;
}
* {
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 rgb(26, 188, 156);
padding: 16px;
text-align: center;
background-color: #ff6666;
}
* {
box-sizing: border-box;
}
body {
background-color: #fff;
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%;
}
}
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #04aa6d;
color: white;
}
.topnav .icon {
display: none;
}
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {
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;
}
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
background-color: #ff6666;
box-shadow: 0 4px 8px 0 rgb(26, 188, 156);
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
box-shadow: #ffcc00;
}
tr:nth-child(even) {
background-color: #dddddd;
box-shadow: #ffcc00;
}
ul {
/* Remove the ul default styling */
list-style: none;
}
li i {
margin-right: 20px;
}