#html #css
#HTML #css
Вопрос:
Когда я захожу на свой веб-сайт, иногда бургер из навигационной панели исчезает. Я не знаю, почему это так, но я хочу это исправить. Кто-нибудь может сказать мне, что происходит в моем коде. У меня есть и другая проблема. Значки в моем нижнем колонтитуле также внезапно исчезли. За это время я ничего не изменил в своем коде. Поэтому мне кажется очень странным, что внезапно бургер и значки моего нижнего колонтитула больше не существуют. Если есть кто-нибудь, кто мог бы помочь мне с обеими этими проблемами, я был бы очень признателен. Заранее спасибо!
<nav>
<div class="logo">
<div id="myMenu">
<div class="logo-navbar">
<nav>
<a href="index.html"><img src="images/logo-groot.png" height="80" /></a>
</nav>
</div>
</div>
</div>
<label for="btn" class="icon">
<span class="fa fa-bars"></span>
</label>
<input type="checkbox" id="btn">
<ul>
<li><a href="index.html">Home</a></li>
<li>
<label for="btn-2" class="show">Assortiment</label>
<a href="#">Assortiment</a>
<input type="checkbox" id="btn-2">
<ul>
<li><a href="cakes.html">Cakes</a></li>
<li><a href="cat1.html">Categorie 1</a></li>
<li><a href="veiligheid.html">Veiligheid</a></li>
</ul>
</li>
<li><a href="contact.html">Contact</a></li>
<li><a href="faq.html">Veelgestelde Vragen</a></li>
</ul>
</nav>
<div class="container">
<h1 id="headline">Nog <span id="days"></span> dagen tot start online vuurwerkverkoop</h1>
<div id="countdown">
</div>
</div>
<div class="cf3">
<a href="page/speedtrap.html"><img class="bottom" src="images/actie2.jpg" /></a>
<a href="page/pyropapel.html"><img class="top" src="images/actie.jpg" /></a>
</div>
<div class="header">
<h1> Welkom op de site van Knalhuis Ochten</h1>
<p> Wij zijn al 15 jaar de vuurwerkspecialist van de Betuwe! Al 15 jaar lang staan jaarlijks onze medewerkers voor je klaar om jou een knallend nieuwjaar te geven!<p>
<p> Knalhuis Ochten is al 15 jaar een familiebedrijf. De eigenaren van Knalhuis Ochten zijn vanaf kleins af aan al gek op vuurwerk. En hebben dus ook dit jaar weer het mooiste vuurwerk uitgekozen voor in ons assortiment!</p>
</div>
<div class="topproducten">
<h3> DIT ZIJN ONZE BEST VERKOCHTE PRODUCTEN<h3>
<div class="productt">
<div class="topproduct">
<a href="page/pyropapel.html" class="bliksemlabel">
</a>
<a href="page/pyropapel.html" title="Pyropapel" class="photo">
<picture>
<img src="images/papel.png" width="200px">
</picture>
</a>
</div>
<div class="bottomproduct">
<div class="titel">
<h3><a href="page/pyropapel.html">Pyropapel</a></h3>
<p class="shots"><a href="page/pyropapel.html">490 schoten</a></p>
</div>
<div class="prijzen">
<span class="prijs"><s>€ 700,-</s></span>
<span class="groot">€ 550,-</span>
</div>
</div>
</div>
<div class="productt">
<div class="topproduct">
<a href="page/whiteredrebel.html" class="bliksemlabel">
</a>
<a href="page/whiteredrebel.html" title="White Red Rebel" class="photo">
<picture>
<img src="images/whiteredrebel.png" width="200px">
</picture>
</a>
</div>
<div class="bottomproduct">
<div class="titel">
<h3><a href="page/whiteredrebel.html">White Red Rebel</a></h3>
<p class="shots"><a href="page/whiteredrebel.html">30 schoten</a></p>
</div>
<div class="prijzen">
<span class="prijs"><s>€ 40,-</s></span>
<span class="groot">€ 30,-</span>
</div>
</div>
</div>
<div class="productt">
<div class="topproduct">
<a href="page/usainvolt.html" class="bliksemlabel">
</a>
<a href="page/usainvolt.html" title="Usain Volt" class="photo">
<picture>
<img src="images/usainvolt.png" width="200px">
</picture>
</a>
</div>
<div class="bottomproduct">
<div class="titel">
<h3><a href="page/usainvolt.html">Usain volt</a></h3>
<p class="shots"><a href="page/usainvolt.html">84 schoten</a></p>
</div>
<div class="prijzen">
<span class="groot">€ 39,99</span>
</div>
</div>
</div>
<div class="productt">
<div class="topproduct">
<a href="page/pryzm.html" class="bliksemlabel">
</a>
<a href="page/pryzm.html" title="Pryzm" class="photo">
<picture>
<img src="images/pryzm.png" width="200px">
</picture>
</a>
</div>
<div class="bottomproduct">
<div class="titel">
<h3><a href="page/pryzm.html">Pryzm</a></h3>
<p class="shots"><a href="page/pryzm.html">20 schoten</a></p>
</div>
<div class="prijzen">
<span class="groot">€ 30,-</span>
</div>
</div>
</div>
</div>
<footer class="footer-distributed">
<div class="footer-left">
<h3><span>Knalhuis Ochten</span></h3>
<p class="footer-links">
<a href="index.html">Home</a>
|
<a href="contact.html">Contact</a>
|
<a href="faq.html">Veelgestelde Vragen</a>
</p>
<p class="footer-company-name">© 2021 Timmer Website Building</p>
</div>
<div class="footer-center">
<div>
<i class="fa fa-map-marker"></i>
<p>
Den Bullick 11, 4051HB Ochten</p>
</div>
<div>
<i class="fa fa-phone"></i>
<p>0344060606</p>
</div>
<div>
<i class="fa fa-envelope"></i>
<p><a href="mailto:contactpagina.vuurwerk@gmail.com">contactpagina.vuurwerk@gmail.com</a></p>
</div>
</div>
<div class="footer-right">
<p class="footer-company-about">
<span>Het vuurwerk van de Betuwe!</span>
Welkom bij Knalhuis Ochten. Wij zijn al 15 jaar een familiebedrijf die je een knallend oud en nieuw bezorgen!</p>
<div class="footer-icons">
<a href="https://www.instagram.com/knalhuis.ochten/"><img src="images/instagram.png" height="30px"/></a>
</div>
</div>
</footer>
*{
margin: 0;
padding: 0;
user-select: none;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
background: url('https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/vibrant-new-years-banner-with-fireworks-and-royalty-free-image-609942456-1562160429.jpg?crop=1.00xw:0.511xh;0,0.241xhamp;resize=980:*');
background-repeat: no-repeat;
background-size:cover;
background-attachment: fixed;
}
nav{
background: #151515;
}
nav:after{
content: '';
clear: both;
display: table;
}
nav .logo{
float: left;
line-height: 70px;
padding-left: 60px;
}
nav ul{
float: right;
margin-right: 4px;
list-style: none;
position: relative;
}
nav ul li{
float: left;
display: inline-block;
background: #151515;
margin: 5 5px;
}
nav ul li a{
color: white;
line-height: 70px;
text-decoration: none;
font-size: 18px;
padding: 8px 15px;
}
nav ul li a:hover{
color: white;
border-radius: 5px;
box-shadow: 0 0 5px #000000,
0 0 10px #0a0a0a;
}
nav ul ul li a:hover{
box-shadow: none;
}
nav ul ul{
position: absolute;
top: 90px;
border-top: 3px solid red;
margin:0px 1px;
opacity: 0;
visibility: hidden;
transition: top .3s;
z-index:5;
}
nav ul ul ul{
border-top: none;
}
nav ul li:hover > ul{
top: 70px;
opacity: 1;
visibility: visible;
}
nav ul ul li{
position: relative;
margin: 0px -20px;
width: 175px;
float: none;
display: list-item;
border-bottom: 1px solid rgba(0,0,0,0.3);
text-align:center;
}
nav ul ul li a{
line-height: 50px;
}
nav ul ul ul li{
position: relative;
top: -60px;
left: 150px;
}
.show,.icon,input{
display: none;
}
.fa-plus{
font-size: 15px;
margin-left: 40px;
}
@media all and (max-width: 968px) {
nav ul{
margin-right: 0px;
float: left;
}
nav .logo{
padding-left: 30px;
width: 100%;
}
.show a, ul{
display: none;
}
nav ul li,nav ul ul li{
display: block;
width: 100%;
}
nav ul li a:hover{
box-shadow: none;
}
.show{
display: block;
color: white;
font-size: 18px;
padding: 0 15px;
line-height: 70px;
cursor: pointer;
}
.show:hover{
color: white;
}
.icon{
display: block;
color: white;
position: absolute;
top: 25;
right: 40px;
line-height: 70px;
cursor: pointer;
font-size: 25px;
}
nav ul ul{
top: 70px;
border-top: 0px;
float: none;
position: static;
display: none;
opacity: 1;
visibility: visible;
}
nav ul ul a{
padding-left: 40px;
}
nav ul ul ul a{
padding-left: 80px;
}
nav ul ul ul li{
position: static;
}
[id^=btn]:checked ul{
display: block;
}
nav ul ul li{
border-bottom: 0px;
}
span.cancel:before{
content: 'f00d';
}
}
#countdown li span.cancel::before {
display: none;
}
}
html,body{
height:100%;
margin:0;
}
.container {
color: yellow;
margin: 0 auto;
text-align: center;
font-size: 1.5vw;
background-color: rgba(23, 14, 13, 0.97);
width:75%;
padding-top:30px;
padding-bottom:30px;
}
h1 {
font-weight: normal;
letter-spacing: .125rem;
text-transform: uppercase;
}
.container li {
display: inline-block;
font-size: 2vw;
list-style-type: none;
padding: 1em;
text-transform: uppercase;
}
.container li span {
display: block;
font-size: 2rem;
}
.message {
font-size: 4rem;
}
#content {
display: none;
padding: 1rem;
}
#countdown li span.cancel::before{
display:none;
}
@media all and (max-width: 768px) {
h1 {
font-size: 1.5rem;
}
li {
font-size: 1.125rem;
padding: .75rem;
}
li span {
font-size: 3.375rem;
}
}
.cf3 {
background-color:rgba(23, 14, 13, 0.97);
width:75%;
margin:auto;
}
.cf3 img {
width:75%;
position:absolute;
margin:auto;
-webkit-transition: opacity 0.1 s ease-in-out;
-moz-transition: opacity 0.1s ease-in-out;
-o-transition: opacity 0.1s ease-in-out;
transition: opacity 0.1s ease-in-out;
}
@keyframes cf3FadeInOut {
0% {
opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
z-index:-1;
}
100% {
opacity:0;
z-index:-1;
}
}
.cf3 img.top {
z-index:1;
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 8s;
animation-direction: alternate;
}
.header{
color:white;
align-items:center;
text-align:center;
margin-bottom: 50px;
padding-top:30%;
background-color: rgba(23, 14, 13, 0.97);
width: 75%;
margin: auto;
padding-bottom: 100px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.topproducten{
color:white;
margin:auto;
text-align:center;
font-size: 25px;
width:75%;
background-color: rgba(20, 10, 10, 0.97);
margin-top:20px;
border-radius:10px;
text-decoration:none;
}
.topproducten p{
font-size: 16px;
}
.topproducten img{
max-height:190px;
}
.productt{
color:white;
box-sizing: border-box;
font-size:10px;
padding:30px;
position: relative;
line-height: 19px;
display:inline-block;
}
.topproduct{
background-color:black;
padding:10px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
height:200px;
}
.bottomproduct{
background-color:rgba(30, 30, 30, 0.46);
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
font-size:15px;
}
.bottomproduct .prijzen{
color:white;
font-size:15px;
font-weight: normal;
}
.bottomproduct .titel a{
text-decoration:none;
color:yellow;
}
span.prijs{
color:red;
}
footer{
position: fixed;
margin-bottom:0;
}
@media (max-height:800px){
footer { position: static; }
header { padding-top:40px; }
}
.footer-distributed{
background-color: #151515;
box-sizing: border-box;
width: 100%;
text-align: left;
font: bold 16px sans-serif;
padding: 50px 50px 60px 50px;
margin-top: 80px;
}
.footer-distributed .footer-left,
.footer-distributed .footer-center,
.footer-distributed .footer-right{
display: inline-block;
vertical-align: top;
}
/* Footer left */
.footer-distributed .footer-left{
width: 30%;
}
.footer-distributed h3{
color: #ffffff;
font: normal 36px 'Cookie', cursive;
margin: 0;
}
/* The company logo */
.footer-distributed .footer-left img{
width: 30%;
}
.footer-distributed h3 span{
color: red;
font-weight:bold;
}
/* Footer links */
.footer-distributed .footer-links{
color: #ffffff;
margin: 20px 0 12px;
}
.footer-distributed .footer-links a{
display:inline-block;
line-height: 1.8;
text-decoration: none;
color: inherit;
}
.footer-distributed .footer-company-name{
color: #8f9296;
font-size: 14px;
font-weight: normal;
margin: 0;
}
/* Footer Center */
.footer-distributed .footer-center{
width: 35%;
}
.footer-distributed .footer-center i{
background-color: #33383b;
color: #ffffff;
font-size: 25px;
width: 38px;
height: 38px;
border-radius: 50%;
text-align: center;
line-height: 42px;
margin: 10px 15px;
vertical-align: middle;
}
.footer-distributed .footer-center i.fa-envelope{
font-size: 17px;
line-height: 38px;
}
.footer-distributed .footer-center p{
display: inline-block;
color: #ffffff;
vertical-align: middle;
margin:0;
}
.footer-distributed .footer-center p span{
display:block;
font-weight: normal;
font-size:14px;
line-height:2;
}
.footer-distributed .footer-center p a{
color: yellow;
text-decoration: none;;
}
/* Footer Right */
.footer-distributed .footer-right{
width: 30%;
}
.footer-distributed .footer-company-about{
line-height: 20px;
color: #92999f;
font-size: 13px;
font-weight: normal;
margin: 0;
}
.footer-distributed .footer-company-about span{
display: block;
color: #ffffff;
font-size: 18px;
font-weight: bold;
margin-bottom: 20px;
}
.footer-distributed .footer-icons{
margin-top: 25px;
}
.footer-distributed .footer-icons a{
display: inline-block;
width: 35px;
height: 35px;
cursor: pointer;
background-color: #33383b;
border-radius: 2px;
font-size: 20px;
color: #ffffff;
text-align: center;
line-height: 35px;
margin-right: 3px;
margin-bottom: 5px;
}
/* Here is the code for Responsive Footer */
/* You can remove below code if you don't want Footer to be responsive */
@media (max-width: 880px) {
.footer-distributed .footer-left,
.footer-distributed .footer-center,
.footer-distributed .footer-right{
display: block;
width: 100%;
margin-bottom: 40px;
text-align: center;
}
.footer-distributed .footer-center i{
margin-left: 0;
}
}
Ответ №1:
Потому что вы забыли добавить cdn «font-awesome» в свой тег head, поэтому строка меню не отображается на мобильных устройствах. иногда загружается cdn, тогда значки не отображаются в нижнем колонтитуле или панели навигации.
*{
margin: 0;
padding: 0;
user-select: none;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
background: url('https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/vibrant-new-years-banner-with-fireworks-and-royalty-free-image-609942456-1562160429.jpg?crop=1.00xw:0.511xh;0,0.241xhamp;resize=980:*');
background-repeat: no-repeat;
background-size:cover;
background-attachment: fixed;
}
nav{
background: #151515;
}
nav:after{
content: '';
clear: both;
display: table;
}
nav .logo{
float: left;
line-height: 70px;
padding-left: 60px;
}
nav ul{
float: right;
margin-right: 4px;
list-style: none;
position: relative;
}
nav ul li{
float: left;
display: inline-block;
background: #151515;
margin: 5 5px;
}
nav ul li a{
color: white;
line-height: 70px;
text-decoration: none;
font-size: 18px;
padding: 8px 15px;
}
nav ul li a:hover{
color: white;
border-radius: 5px;
box-shadow: 0 0 5px #000000,
0 0 10px #0a0a0a;
}
nav ul ul li a:hover{
box-shadow: none;
}
nav ul ul{
position: absolute;
top: 90px;
border-top: 3px solid red;
margin:0px 1px;
opacity: 0;
visibility: hidden;
transition: top .3s;
z-index:5;
}
nav ul ul ul{
border-top: none;
}
nav ul li:hover > ul{
top: 70px;
opacity: 1;
visibility: visible;
}
nav ul ul li{
position: relative;
margin: 0px -20px;
width: 175px;
float: none;
display: list-item;
border-bottom: 1px solid rgba(0,0,0,0.3);
text-align:center;
}
nav ul ul li a{
line-height: 50px;
}
nav ul ul ul li{
position: relative;
top: -60px;
left: 150px;
}
.show,.icon,input{
display: none;
}
.fa-plus{
font-size: 15px;
margin-left: 40px;
}
@media all and (max-width: 968px) {
nav ul{
margin-right: 0px;
float: left;
}
nav .logo{
padding-left: 30px;
width: 100%;
}
.show a, ul{
display: none;
}
nav ul li,nav ul ul li{
display: block;
width: 100%;
}
nav ul li a:hover{
box-shadow: none;
}
.show{
display: block;
color: white;
font-size: 18px;
padding: 0 15px;
line-height: 70px;
cursor: pointer;
}
.show:hover{
color: white;
}
.icon{
display: block;
color: white;
position: absolute;
top: 25;
right: 40px;
line-height: 70px;
cursor: pointer;
font-size: 25px;
}
nav ul ul{
top: 70px;
border-top: 0px;
float: none;
position: static;
display: none;
opacity: 1;
visibility: visible;
}
nav ul ul a{
padding-left: 40px;
}
nav ul ul ul a{
padding-left: 80px;
}
nav ul ul ul li{
position: static;
}
[id^=btn]:checked ul{
display: block;
}
nav ul ul li{
border-bottom: 0px;
}
span.cancel:before{
content: 'f00d';
}
}
#countdown li span.cancel::before {
display: none;
}
}
html,body{
height:100%;
margin:0;
}
.container {
color: yellow;
margin: 0 auto;
text-align: center;
font-size: 1.5vw;
background-color: rgba(23, 14, 13, 0.97);
width:75%;
padding-top:30px;
padding-bottom:30px;
}
h1 {
font-weight: normal;
letter-spacing: .125rem;
text-transform: uppercase;
}
.container li {
display: inline-block;
font-size: 2vw;
list-style-type: none;
padding: 1em;
text-transform: uppercase;
}
.container li span {
display: block;
font-size: 2rem;
}
.message {
font-size: 4rem;
}
#content {
display: none;
padding: 1rem;
}
#countdown li span.cancel::before{
display:none;
}
@media all and (max-width: 768px) {
h1 {
font-size: 1.5rem;
}
li {
font-size: 1.125rem;
padding: .75rem;
}
li span {
font-size: 3.375rem;
}
}
.cf3 {
background-color:rgba(23, 14, 13, 0.97);
width:75%;
margin:auto;
}
.cf3 img {
width:75%;
position:absolute;
margin:auto;
-webkit-transition: opacity 0.1 s ease-in-out;
-moz-transition: opacity 0.1s ease-in-out;
-o-transition: opacity 0.1s ease-in-out;
transition: opacity 0.1s ease-in-out;
}
@keyframes cf3FadeInOut {
0% {
opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
z-index:-1;
}
100% {
opacity:0;
z-index:-1;
}
}
.cf3 img.top {
z-index:1;
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 8s;
animation-direction: alternate;
}
.header{
color:white;
align-items:center;
text-align:center;
margin-bottom: 50px;
padding-top:30%;
background-color: rgba(23, 14, 13, 0.97);
width: 75%;
margin: auto;
padding-bottom: 100px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.topproducten{
color:white;
margin:auto;
text-align:center;
font-size: 25px;
width:75%;
background-color: rgba(20, 10, 10, 0.97);
margin-top:20px;
border-radius:10px;
text-decoration:none;
}
.topproducten p{
font-size: 16px;
}
.topproducten img{
max-height:190px;
}
.productt{
color:white;
box-sizing: border-box;
font-size:10px;
padding:30px;
position: relative;
line-height: 19px;
display:inline-block;
}
.topproduct{
background-color:black;
padding:10px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
height:200px;
}
.bottomproduct{
background-color:rgba(30, 30, 30, 0.46);
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
font-size:15px;
}
.bottomproduct .prijzen{
color:white;
font-size:15px;
font-weight: normal;
}
.bottomproduct .titel a{
text-decoration:none;
color:yellow;
}
span.prijs{
color:red;
}
footer{
position: fixed;
margin-bottom:0;
}
@media (max-height:800px){
footer { position: static; }
header { padding-top:40px; }
}
.footer-distributed{
background-color: #151515;
box-sizing: border-box;
width: 100%;
text-align: left;
font: bold 16px sans-serif;
padding: 50px 50px 60px 50px;
margin-top: 80px;
}
.footer-distributed .footer-left,
.footer-distributed .footer-center,
.footer-distributed .footer-right{
display: inline-block;
vertical-align: top;
}
/* Footer left */
.footer-distributed .footer-left{
width: 30%;
}
.footer-distributed h3{
color: #ffffff;
font: normal 36px 'Cookie', cursive;
margin: 0;
}
/* The company logo */
.footer-distributed .footer-left img{
width: 30%;
}
.footer-distributed h3 span{
color: red;
font-weight:bold;
}
/* Footer links */
.footer-distributed .footer-links{
color: #ffffff;
margin: 20px 0 12px;
}
.footer-distributed .footer-links a{
display:inline-block;
line-height: 1.8;
text-decoration: none;
color: inherit;
}
.footer-distributed .footer-company-name{
color: #8f9296;
font-size: 14px;
font-weight: normal;
margin: 0;
}
/* Footer Center */
.footer-distributed .footer-center{
width: 35%;
}
.footer-distributed .footer-center i{
background-color: #33383b;
color: #ffffff;
font-size: 25px;
width: 38px;
height: 38px;
border-radius: 50%;
text-align: center;
line-height: 42px;
margin: 10px 15px;
vertical-align: middle;
}
.footer-distributed .footer-center i.fa-envelope{
font-size: 17px;
line-height: 38px;
}
.footer-distributed .footer-center p{
display: inline-block;
color: #ffffff;
vertical-align: middle;
margin:0;
}
.footer-distributed .footer-center p span{
display:block;
font-weight: normal;
font-size:14px;
line-height:2;
}
.footer-distributed .footer-center p a{
color: yellow;
text-decoration: none;;
}
/* Footer Right */
.footer-distributed .footer-right{
width: 30%;
}
.footer-distributed .footer-company-about{
line-height: 20px;
color: #92999f;
font-size: 13px;
font-weight: normal;
margin: 0;
}
.footer-distributed .footer-company-about span{
display: block;
color: #ffffff;
font-size: 18px;
font-weight: bold;
margin-bottom: 20px;
}
.footer-distributed .footer-icons{
margin-top: 25px;
}
.footer-distributed .footer-icons a{
display: inline-block;
width: 35px;
height: 35px;
cursor: pointer;
background-color: #33383b;
border-radius: 2px;
font-size: 20px;
color: #ffffff;
text-align: center;
line-height: 35px;
margin-right: 3px;
margin-bottom: 5px;
}
/* Here is the code for Responsive Footer */
/* You can remove below code if you don't want Footer to be responsive */
@media (max-width: 880px) {
.footer-distributed .footer-left,
.footer-distributed .footer-center,
.footer-distributed .footer-right{
display: block;
width: 100%;
margin-bottom: 40px;
text-align: center;
}
.footer-distributed .footer-center i{
margin-left: 0;
}
} <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title></title>
</head>
<body>
<nav>
<div class="logo">
<div id="myMenu">
<div class="logo-navbar">
<nav>
<a href="index.html"><img src="images/logo-groot.png" height="80" /></a>
</nav>
</div>
</div>
</div>
<label for="btn" class="icon">
<span class="fa fa-bars"></span>
</label>
<input type="checkbox" id="btn">
<ul>
<li><a href="index.html">Home</a></li>
<li>
<label for="btn-2" class="show">Assortiment</label>
<a href="#">Assortiment</a>
<input type="checkbox" id="btn-2">
<ul>
<li><a href="cakes.html">Cakes</a></li>
<li><a href="cat1.html">Categorie 1</a></li>
<li><a href="veiligheid.html">Veiligheid</a></li>
</ul>
</li>
<li><a href="contact.html">Contact</a></li>
<li><a href="faq.html">Veelgestelde Vragen</a></li>
</ul>
</nav>
<div class="container">
<h1 id="headline">Nog <span id="days"></span> dagen tot start online vuurwerkverkoop</h1>
<div id="countdown">
</div>
</div>
<div class="cf3">
<a href="page/speedtrap.html"><img class="bottom" src="images/actie2.jpg" /></a>
<a href="page/pyropapel.html"><img class="top" src="images/actie.jpg" /></a>
</div>
<div class="header">
<h1> Welkom op de site van Knalhuis Ochten</h1>
<p> Wij zijn al 15 jaar de vuurwerkspecialist van de Betuwe! Al 15 jaar lang staan jaarlijks onze medewerkers voor je klaar om jou een knallend nieuwjaar te geven!<p>
<p> Knalhuis Ochten is al 15 jaar een familiebedrijf. De eigenaren van Knalhuis Ochten zijn vanaf kleins af aan al gek op vuurwerk. En hebben dus ook dit jaar weer het mooiste vuurwerk uitgekozen voor in ons assortiment!</p>
</div>
<div class="topproducten">
<h3> DIT ZIJN ONZE BEST VERKOCHTE PRODUCTEN<h3>
<div class="productt">
<div class="topproduct">
<a href="page/pyropapel.html" class="bliksemlabel">
</a>
<a href="page/pyropapel.html" title="Pyropapel" class="photo">
<picture>
<img src="images/papel.png" width="200px">
</picture>
</a>
</div>
<div class="bottomproduct">
<div class="titel">
<h3><a href="page/pyropapel.html">Pyropapel</a></h3>
<p class="shots"><a href="page/pyropapel.html">490 schoten</a></p>
</div>
<div class="prijzen">
<span class="prijs"><s>€ 700,-</s></span>
<span class="groot">€ 550,-</span>
</div>
</div>
</div>
<div class="productt">
<div class="topproduct">
<a href="page/whiteredrebel.html" class="bliksemlabel">
</a>
<a href="page/whiteredrebel.html" title="White Red Rebel" class="photo">
<picture>
<img src="images/whiteredrebel.png" width="200px">
</picture>
</a>
</div>
<div class="bottomproduct">
<div class="titel">
<h3><a href="page/whiteredrebel.html">White Red Rebel</a></h3>
<p class="shots"><a href="page/whiteredrebel.html">30 schoten</a></p>
</div>
<div class="prijzen">
<span class="prijs"><s>€ 40,-</s></span>
<span class="groot">€ 30,-</span>
</div>
</div>
</div>
<div class="productt">
<div class="topproduct">
<a href="page/usainvolt.html" class="bliksemlabel">
</a>
<a href="page/usainvolt.html" title="Usain Volt" class="photo">
<picture>
<img src="images/usainvolt.png" width="200px">
</picture>
</a>
</div>
<div class="bottomproduct">
<div class="titel">
<h3><a href="page/usainvolt.html">Usain volt</a></h3>
<p class="shots"><a href="page/usainvolt.html">84 schoten</a></p>
</div>
<div class="prijzen">
<span class="groot">€ 39,99</span>
</div>
</div>
</div>
<div class="productt">
<div class="topproduct">
<a href="page/pryzm.html" class="bliksemlabel">
</a>
<a href="page/pryzm.html" title="Pryzm" class="photo">
<picture>
<img src="images/pryzm.png" width="200px">
</picture>
</a>
</div>
<div class="bottomproduct">
<div class="titel">
<h3><a href="page/pryzm.html">Pryzm</a></h3>
<p class="shots"><a href="page/pryzm.html">20 schoten</a></p>
</div>
<div class="prijzen">
<span class="groot">€ 30,-</span>
</div>
</div>
</div>
</div>
<footer class="footer-distributed">
<div class="footer-left">
<h3><span>Knalhuis Ochten</span></h3>
<p class="footer-links">
<a href="index.html">Home</a>
|
<a href="contact.html">Contact</a>
|
<a href="faq.html">Veelgestelde Vragen</a>
</p>
<p class="footer-company-name">© 2021 Timmer Website Building</p>
</div>
<div class="footer-center">
<div>
<i class="fa fa-map-marker"></i>
<p>
Den Bullick 11, 4051HB Ochten</p>
</div>
<div>
<i class="fa fa-phone"></i>
<p>0344060606</p>
</div>
<div>
<i class="fa fa-envelope"></i>
<p><a href="mailto:contactpagina.vuurwerk@gmail.com">contactpagina.vuurwerk@gmail.com</a></p>
</div>
</div>
<div class="footer-right">
<p class="footer-company-about">
<span>Het vuurwerk van de Betuwe!</span>
Welkom bij Knalhuis Ochten. Wij zijn al 15 jaar een familiebedrijf die je een knallend oud en nieuw bezorgen!</p>
<div class="footer-icons">
<a href="https://www.instagram.com/knalhuis.ochten/"><img src="images/instagram.png" height="30px"/></a>
</div>
</div>
</footer>
</body>
</html> Комментарии:
1. Извините, но я этого не понимаю