File realizzati durante la lezione
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<title>Home page personale</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/custum.css">
</head>
<body>
<div class="jumbotron-fluid py-5 bg-gradient text-light fullscreen d-flex mb-4">
<div class="container my-auto">
<div class="row">
<div class="col-12 col-sm my-auto order-2 order-lg-0 text-center text-sm-left">
<h1 class="display-4">
Bruno Migliaretti
</h1>
<p><a href="#primopiano" class="btn btn-success btn-lg">Per saperne di più</a></p>
</div>
<div class="col-12 col-sm order-0 order-lg-2">
<img src="http://lorempixel.com/800/800/sports" class="img-fluid rounded-circle">
</div>
</div>
</div>
</div>
<div class="container" id="primopiano">
<div class="row">
<div class="col-12 col-sm-6 col-lg-3">
<div class="card">
<img src="img/bosco_1 (1).jpeg" class="card-img-top" alt="Sport">
<div class="card-body">
<h5 class="card-title">Hello!</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="hello.html" class="btn btn-primary">Apri la pagina</a>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<div class="card">
<img src="img/bosco_3.jpeg" class="card-img-top" alt="Sport">
<div class="card-body">
<h5 class="card-title">Tipografia</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="tipografia/index.html" class="btn btn-primary">Apri la pagina</a>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<div class="card">
<img src="img/carnivore_3.jpeg" class="card-img-top" alt="Sport">
<div class="card-body">
<h5 class="card-title">This is flex!</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="prova-flex.html" class="btn btn-primary">Apri la pagina</a>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<div class="card">
<img src="img/foto-un-ragazzo-d-oro-1-low.jpg" class="card-img-top" alt="Sport">
<div class="card-body">
<h5 class="card-title">Hello!</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="hello.html" class="btn btn-primary">Apri la pagina</a>
</div>
</div>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>
css/custom.css
@charset "utf-8";
/* CSS Document */
.bg-gradient {
background: #3d437f; /* Old browsers */
background: -moz-linear-gradient(-45deg, #3d437f 0%, #de47ac 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #3d437f 0%,#de47ac 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #3d437f 0%,#de47ac 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3d437f', endColorstr='#de47ac',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.fullscreen {
min-height: 100vh;
}