kelloggs_cpt
New Coder
Good day,
i am a newby at coding; you help and advise will be greatly appreciated.
my countdown clock is "blocking" my h1 text, i think my style sheet needs fixing?
please help
[CODE lang="html" title="Countdown clock"]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Jemma's Confirmation</title>
<!-- This is the Bootstrap CSS -->
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface|Open+Sans:300,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-10 col-sm-6 col-4"><a href="index.html">Jemma's Confirmation</a></div>
<div class="col-lg-1 col-sm-3 col-4">Church Service</div>
<div class="col-lg-1 col-sm-3 col-4"><a href="rsvp.html">Reception Lunch</a></div>
</div>
</div>
<br>
<div>
<h1>You are invited to <br>Jemma Thieras' Confirmation</h1>
</div>
<br>
<br>
<br>
<div id="countdown">
<div id='tiles'></div>
<div class="labels">
<li>Days</li>
<li>Hours</li>
<li>Mins</li>
<li>Secs</li>
</div>
</div>
<!-- This is the Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<script src="timer.js"></script>
</body>
</html>[/CODE]
i am a newby at coding; you help and advise will be greatly appreciated.
my countdown clock is "blocking" my h1 text, i think my style sheet needs fixing?
please help
[CODE lang="html" title="Countdown clock"]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Jemma's Confirmation</title>
<!-- This is the Bootstrap CSS -->
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface|Open+Sans:300,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-10 col-sm-6 col-4"><a href="index.html">Jemma's Confirmation</a></div>
<div class="col-lg-1 col-sm-3 col-4">Church Service</div>
<div class="col-lg-1 col-sm-3 col-4"><a href="rsvp.html">Reception Lunch</a></div>
</div>
</div>
<br>
<div>
<h1>You are invited to <br>Jemma Thieras' Confirmation</h1>
</div>
<br>
<br>
<br>
<div id="countdown">
<div id='tiles'></div>
<div class="labels">
<li>Days</li>
<li>Hours</li>
<li>Mins</li>
<li>Secs</li>
</div>
</div>
<!-- This is the Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<script src="timer.js"></script>
</body>
</html>[/CODE]
[CODE lang="css" title="CSS | Countdown clock positioning"]@font-face {
font-family: "Alex Brush";
src: url('myfont-webfont.eot?#iefix')
format('embedded-opentype'),
url('myfont-webfont.woff') format('woff'),
url('myfont-webfont.ttf') format('truetype'),
url('myfont-webfont.svg#svgFontName')
format('svg');
}
body{
word-wrap:break-word;
color: #eee;
background: pink;
}
h1{
text-align: center;
font: normal 85px/130px "Alex Brush", "Brush Script MT", sans-serif;
word-wrap:break-word;
}
#countdown{
width: 465px;
height: 112px;
text-align: center;
background: #222;
background-image: -webkit-linear-gradient(top, #222, #333, #333, #222);
background-image: -moz-linear-gradient(top, #222, #333, #333, #222);
background-image: -ms-linear-gradient(top, #222, #333, #333, #222);
background-image: -o-linear-gradient(top, #222, #333, #333, #222);
border: 1px solid #111;
border-radius: 5px;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.6);
margin: auto;
padding: 24px 0;
position: relative;
top: 0; bottom: 0; left: 0; right: 0;
}
#countdown:before{
content:"";
width: 8px;
height: 65px;
background: #444;
background-image: -webkit-linear-gradient(top, #555, #444, #444, #555);
background-image: -moz-linear-gradient(top, #555, #444, #444, #555);
background-image: -ms-linear-gradient(top, #555, #444, #444, #555);
background-image: -o-linear-gradient(top, #555, #444, #444, #555);
border: 1px solid #111;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
display: block;
position: relative;
top: 48px; left: -10px;
}
#countdown:after{
content:"";
width: 8px;
height: 65px;
background: #444;
background-image: -webkit-linear-gradient(top, #555, #444, #444, #555);
background-image: -moz-linear-gradient(top, #555, #444, #444, #555);
background-image: -ms-linear-gradient(top, #555, #444, #444, #555);
background-image: -o-linear-gradient(top, #555, #444, #444, #555);
border: 1px solid #111;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
display: block;
position: relative;
top: 48px; right: -10px;
}
#countdown #tiles{
position: relative;
z-index: 1;
}
#countdown #tiles > span{
width: 92px;
max-width: 92px;
font: bold 48px 'Droid Sans', Arial, sans-serif;
text-align: center;
color: #111;
background-color: #ddd;
background-image: -webkit-linear-gradient(top, #bbb, #eee);
background-image: -moz-linear-gradient(top, #bbb, #eee);
background-image: -ms-linear-gradient(top, #bbb, #eee);
background-image: -o-linear-gradient(top, #bbb, #eee);
border-top: 1px solid #fff;
border-radius: 3px;
box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.7);
margin: 0 7px;
padding: 18px 0;
display: inline-block;
position: relative;
}
#countdown #tiles > span:before{
content:"";
width: 100%;
height: 13px;
background: #111;
display: block;
padding: 0 3px;
position: relative;
top: 41%; left: -3px;
z-index: -1;
}
#countdown #tiles > span:after{
content:"";
width: 100%;
height: 1px;
background: #eee;
border-top: 1px solid #333;
display: block;
position: relative;
top: 48%; left: 0;
}
#countdown .labels{
width: 100%;
height: 25px;
text-align: center;
position: relative;
bottom: 8px;
}
#countdown .labels li{
width: 102px;
font: bold 15px 'Droid Sans', Arial, sans-serif;
color: #f47321;
text-shadow: 1px 1px 0px #000;
text-align: center;
text-transform: uppercase;
display: inline-block;
}
[/CODE]
Attachments
Last edited:
