...
Om antwoord te krijgen op deze deelvraag ga ik een prototype maken voor elk gekozen framework. Voor ieder framework ga ik een kleine home pagina maken om zo een eerlijk oordeel te kunnen geven.
Bootstrap
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
<!DOCTYPE html>
<html lang="en" class="h-100">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>
<body>
<link href="cover.css" rel="stylesheet">
</head>
<body class="d-flex h-100 text-center text-white bg-dark">
<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
<header class="mb-auto">
<div>
<h3 class="float-md-start mb-0">Smalltalk-PROTOTYPE</h3>
<nav class="nav nav-masthead justify-content-center float-md-end">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Contact</a>
</nav>
</div>
</header>
<main class="px-3">
<h1>Made by Sem.</h1>
<p class="lead">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Et pariatur quaerat voluptas vitae sequi optio nesciunt reprehenderit alias, nostrum magni accusamus, iusto cupiditate. Dolor officia sed, atque est quia dolores.</p>
<p class="lead">
<a href="#" class="btn btn-lg btn-secondary fw-bold border-white bg-white">Learn more</a>
</p>
</main>
<footer class="mt-auto text-white-50">
<p>Smalltalk-PROTOTYPE</p>
</footer>
</div>
</body>
</html> |
De homepagina die ik gemaakt met behulp van bootstrap ziet er als volgt uit:
...