function init() {
setTimeout(function() {
var bx = $('.bxslider').bxSlider();
}, 3500);
}
window.onload = init;
@charset "utf-8";
/* DO NOT USE SO MANY FONT FAMILIES UNLESS YOU KNOW WHAT YOU ARE DOING*/
/* USE 2 AT THE MOST. ONE FOR TITLES AND ONE FOR NORMAL USE*/
@import url('https://fonts.googleapis.com/css?family=Nunito|PT+Sans:700');
* {
margin: 0;
padding: 0;
border: 0;
}
html,
body {
width: 100%;
height: 100%
}
body {
font-family: "Nunito", sans-serif;
font-size: 16px;
overflow-x: hidden;
}
main {
padding: 30px 0 0;
}
section {
padding: 10px 20px;
}
p {
line-height: 1.5;
margin: 0 10px 10px;
}
li {
list-style: none;
}
h1 {
margin-top: 30px;
}
.slider {
margin: 0 auto;
}
[class*='title'] {
font-family: "PT Sans";
text-align: center;
color: #FFF;
background-color: #00aee8;
}
.title {
font-size: 48px;
}
.subtitle {
background-color: #ef233c;
font-size: 24px;
margin: 15px;
}
.boxtext {
background-color: #ef233c;
font-size: 32px;
display: flex;
justify-content: space-around;
align-items: center;
}
.bodytext {
font-size: 18px;
color: #160C28;
}
.btctitle {
font-size: 48px;
color: #000;
background-color: #FF3;
}
footer {
padding: 10px 5px 40px;
margin-top: 0;
}
footer p {
text-align: center;
font-size: 18px;
}
a,
a:link,
a:visited {
position: relative;
color: #fff;
text-decoration: none;
}
a:hover,
a:active,
a:focus {
color: transparent;
background-color: transparent;
text-shadow: -.25px -.25px 0 #fc0, -.25px .25px 0 #fc0, .25px -.25px 0 #fc0, .25px .25px 0 #fc0;
}
a.x::before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #fc0;
visibility: hidden;
transform: scaleX(0);
transition: all .5s ease-in-out 0s;
}
a.x:hover::before,
a.x:active::before,
a.x:focus::before {
visibility: visible;
transform: scaleX(1);
}
.btcbutton {
font-size: 48px;
background: rgba(255, 200, 12, 1);
}
/* THE LAST TWO RULESETS IS THE ANSWER BUT WILL MOST LIKELY
|| NOT WORK CORRECTLY WITH THE ORIGINAL CSS and HTML. THE
|| PADDING MIN-HEIGHT IS BY PREFERENCE
*/
.bx-wrapper {
margin: 0 auto;
min-height: 100px;
}
.bxslider li {
padding: 0 55px;
margin: 0 auto;
text-align: center;
color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Practical Applications</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/animatecss/3.5.2/animate.min.css">
<link href="CSS.css" rel="stylesheet">
<link href='https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css' rel='stylesheet'>
<style>
</style>
</head>
<body class="animated zoomInUp">
<header>
<h1>
<a href="index.html">
<img src="https://wemakewebsites.com/sites/default/files/styles/large/public/post_images/headline/bitcoin-logo-with-padding.png?itok=mnfN-yoC" width="100%" height="100">
</a>
</h1>
<nav>
<ul class='boxtext'>
<li class="subtitle"><a href="How.html" title="How does it work?" class='x'>How?</a></li>
<li class="subtitle"><a href="Why.html" title="Why use a blockchain?" class='x'>Why?</a></li>
<li class="subtitle"><a href="Practical_Applications.html" title="Practical Applications" class='x'>What?</a></li>
</ul>
</nav>
<h2 class="title">Practical Applications</h2>
</header>
<main>
<section class="bodytext">
<p>So far, blockchains have been as a ledger of transactions. Cryptocurrencies, as they are termed, are favoured as transactions are stored across the blockchain. This make it impossible for a government or a bank to interfere with transaction history,
and it's almost impossible for the blockchain to be compromised or lost like a bank database could be.</p>
<p>Here are some problems that you need to be aware of:</p>
<!-- slider -->
</section>
<section class='slider'>
<ul class="bxslider">
<li class="bodytext">
You obviously put some effort into this code. Why not put some effort into learning how to do it simple first. Every style you add to the stylesheet compounds your problem.
</li>
<li class="bodytext">
Don't use table, tr, and th for layout. You didn't add an end tag for h1. center tags are not supported in HTML5. id='top' is an id, id must be unique. id='top' is used on 3 different tags. Do not do that. Change it to class='top'.
</li>
<li class="bodytext">
CSS link tags must be before any script tags. Script tags should be placed before the closing end tag of body. Do not use position:absolute without wrapping it in element that has position:relative.
</li>
<li class="bodytext">
CSS.css file is commented with corrections. You need to know the fundamentals, Google search: "CSS tutorial"
</li>
<li class="bodytext">
At the beginning of page, only !doctype html is needed for HTML5. Why would you use HTML4? You need to know the fundamentals, Google search: "HTML5 tutorial"
</li>
</ul>
</section>
</main>
<footer>
<p>Let's explore the most well-known utilisation of blockchain technology to date:</p>
<p>
<a href="Bitcoin.html" class="btcbutton x"> <span>Bitcoin</span>
</a>
</p>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src='https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js'></script>
</body>
</html>