On the first page (were the start button is) is supposed to be an image with the text "Start de reis" and an orange start button. But i don't know what i am doing wrong.
And on my snippet the text and the background text is white so you can't see the rest of my site for some reason but that doesn't really matter hopefully.
Can someone maybe help? If so, thanks a lot.
body {
position: relative;
background-color: black;
height: 100%;
}
#section1 {
height: auto;
color: #fff;
background-color: transparent;
}
#section2 {
padding-top: 50px;
height: auto;
color: #fff;
background-color: transparent;
}
#section3 {
padding-top: 50px;
height: auto;
color: #fff;
background-color: transparent;
}
#section41 {
padding-top: 50px;
height: auto;
color: #fff;
background-color: transparent;
}
#section42 {
padding-top: 50px;
height: auto;
color: #fff;
background-color: transparent;
}
.voorstellen {
max-width: 35%;
font-size: 20px;
color: white;
margin: 0 auto;
font-family: "Roboto"sans-serif;
position: center;
text-transform: none;
}
h1.startdereis {
/* tekst met start de reis */
color: white;
text-transform: uppercase;
font-size: 70px;
text-align: center;
font-family: sans-serif;
z-index: 100;
}
.knop {
/* start knop */
margin-left: 100%;
z-index: 100;
}
.knop1 {
/* start knop*/
border: 3px solid white;
padding: 10px 30px;
color: white;
text-decoration: none;
margin-right: 5px;
font-size: 13px;
text-transform: uppercase;
background-color: darkorange;
font-family: "Roboto", sans-serif;
margin-left: -300px;
}
.a12345 {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)) url(https://i.ibb.co/WppGWkx/straat.jpg);
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.logo {
width: 100px;
height: auto;
filter: brightness(0) invert(1);
float: left;
margin-left: 2%;
}
.container {
position: relative;
text-align: center;
color: white;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style3.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img class="logo" src="http://www.pngonly.com/wp-content/uploads/2017/06/Lion-Tattoo-Clipart-PNG-Image-03.png"> </a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="#section1">Home</a></li>
<li><a href="#section2">Voorstellen</a></li>
<li><a href="#section3">Hobby's</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Toekomstdromen <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#section41">Toekomstdromen</a></li>
<li><a href="#section42">About</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
<div id="section1" class="container-fluid">
<div class="container">
<div class="a12345"></div>
<div class="centered">
<h1 class="startdereis">Start De Reis</h1>
<div class="knop">
<a href="#section2" class="knop1"> Start </a>
</div>
</div>
</div>
</div>
<div id="section2" class="container-fluid">
<div class="voorstellen">
<h2>Wie ben ik?</h2>
<p>
Mijn volledige naam is Duco Gerard van de Schepop. Mijn tweede naam komt van mijn hele muzikale opa, die ik helaas nooit gekent heb. Op het moment dat ik werd geboren had ik geen opa's meer en nog maar een oma. Mijn enige oma die nog leefde woonde
in Duitsland. We zochten haar meestal om de vakantie op. Voor mij was het meestal best saai want ik sprak toen ik klein was nog geen Duits, dus was het moeilijk om met mijn oma te praten en in een bejaardenhuis is nou eenmaal weinig te doen. Toen
ik in de tweede klas wat Duits had geleerd en zover was om zelf een gesprek met mijn oma aan tegaan i.p.v dat mijn ouder het zouden vertalen stierf mijn rond die tijd jammer genoeg.
<br><br>
Het was misschien al een beetje duidelijk maar ik heb dus een familie die dus uit Duitsers en uit Nederlanders bestaat. Contact hebben met de Duitse kant van de familie is erg lastig omdat het best een stuk rijden is naar Duitsland. Als
ik dus tijd doorbreng met famillie is het meestal met de famillie uit Nederland, wat ik eigenlijk niet heel erg vindt. Ik heb een hele leuke familie en daar ben ik erg blij mee.
<br><br>
Nu even genoeg over mijn opa's en oma's. Ik woon vijtien jaar in Soest met mijn vader, moeder en sinds dat ik drie werd ook een kleiner zusje. Er is niet echt iets bijzonders dat ik kan vertellen over mijn gezin, we zijn gewoon gewoontjes.
Ikzelf zit op dit moment in de vierde klas op Het Baarnsch Lyceum. Mijn paket is NT en het gaat me wel goed af. De school vindt zelf dat ik het zo goed doe dat ik drie uur in de week niet meer hoef te komen. Heel bijzonder is het ook weer niet want
die uren waren toch een soort van tussenuren. De bedoeling is dat je in deze uren, waar ik dus niet meer heen ga, huiswerk kan/moet maken dit doet alleen bijna niemand en iedereen zit eigenlijk gewoon te wachten totdat het saaie uur voorbij is.
<br><br>
Ik hoop dat ik nu genoeg over mezelf heb verteld en dat je nu al beter weet wie ik ben. Ik weet dat ik niet een heel spannend vaarhaal heb maarja, ik moet nou eenmaal een blog maken hè.
</p>
</div>
</div>
<div id="section3" class="container-fluid">
<div class="voorstellen">
<h2>Mijn hobby's</h2>
<p>
Toen ik in groep vijf zat vonden mijn ouders het maar een tijd dat ik op een sport ging. Op dat moment zat ik op scouting waar ik toen iedere zaterdag naar toe ging. Via een kies je sport folder ben ik op klimmen gekomen. Dit vond ik tijdens de proeflessen erg leuk maar al snel werd het saaier en saaier dus daar was ik snel weer van af. Vervolgens ben ik op honkbal gegaan, hier zit ik tot de dag van vandaag nog steeds op en ik heb nog steeds veel plezier tijdens het honkballen. Een sport vinden die ik leuk vond en een sport waar je niet snel geblesseerd kan raken, want ik raak heel snel geblesseerd, was heel erg moeilijk. Daarom ben ik dan ook heel erg blij dat ik honkbal heb geprobeerd.
<br><br>
Naast honkbal heb ik nog andere hobby's, vooral achter de computer of op de televisie. Ik vind het namelijk erg leuk om te gamen. Ik heb ook iets van tien verschillende spellen. Hier een klein lijstje van enkele populaire spellen die ik speel:
</p>
<ul>
<li>Overwatch</li>
<li>GTA V</li>
<li>Fortnite</li>
</ul>
<p>
Ook vind ik het heel fijn om af en toe een Netflix film te kijken of om een YouTube video te kijken.
<br><br>
De laatste hobby maar wel een van de leukste is piano spelen. Ik speel al sinds dat ik klein ben piano en tot de dag van vandaag ben ik er druk mee bezig. Toen ik kleiner was voelde het meer als een verplichting en was ik niet zo gemotiveerd maar nu ik wat ouder ben kan ik meer mijn eigen smaak uitkiezen en krijg ik meer plezier met piano spelen.
</p>
</div>
</div>
<div id="section41" class="container-fluid">
<div class="voorstellen">
<p>
lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum
</p>
</div>
</div>
<div id="section42" class="container-fluid">
<div class="voorstellen">
<p>
lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum
</p>
</div>
</div>
</body>
</html>
