Titel sectie | Notion

Typed JS Bestand

Download het onderstaande bestand en plaats dit JS bestand de map 'js'

typed.min.zip

Voeg de onderstaande link toe aan het index.html bestand.

Boven de laatste </body> tag

<script src="js/typed.min.js"></script>

Voeg daarna de onderstaande code toe aan het index.html bestand (tussen de slider en de slider navigatie).

		<div class="titleMessage">
			<div class="heading">
				<p class="main">NAAM</p>
				<p class="sub typed"></p>
			</div>
		</div>

Als alles goed is gegaan dan ziet het index.html bestand er als volgt uit.

HTML Bestand

index.html

<!DOCTYPE html>
<html>
<head>
	<title>Portfolio</title>
	<link rel="stylesheet" type="text/css" href="css/superslides.css">
	<link rel="stylesheet" href="<https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css>" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

	<link rel="stylesheet" type="text/css" href="css/style.css">

	<script src="<https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js>"></script>
</head>
<body>
	<div id="slides">
		<div class="overlay"></div>
		<div class="slides-container">
		    <img src="img/slide1.jpg" alt="">
		    <img src="img/slide2.jpeg" alt="">
		    <img src="img/slide3.jpeg" alt="">
		</div>

		<div class="titleMessage">
			<div class="heading">
				<p class="main">NAAM</p>
				<p class="sub typed"></p>
			</div>
		</div>

		<nav class="slides-navigation">
		    <a href="#" class="next"></a>
		    <a href="#" class="prev"></a>
		</nav>

	</div>
<script src="js/jquery.superslides.min.js"></script>
<script src="js/typed.min.js"></script>
<script src="<https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js>" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="<https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js>" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="js/script.js"></script>
</body>
</html>

Voor het positioneren van de tekst voeg de onderstaande CSS styling toe aan het bestand style.css.

CSS - Titel Sectie

css/style.css

.slides-navigation {
	z-index: 6;
}

.titleMessage {
	position: absolute;
    width: 100%;
    height: 250px;
    top: 50%;
    z-index: 5;
    text-align: center;
    margin-top: -125px;
}

.titleMessage .heading p {
	color: #fff;
    text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.4);
    font-weight: 100;
    letter-spacing: 7px;
}

.titleMessage .heading .main {
	font-size: 50px;
}

.titleMessage .heading .sub {
	font-size: 23px;
}