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;
}

 

Torna all'inizio