Untitled
unknown
html
2 years ago
7.2 kB
1
Indexable
Never
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<style>
.flex-container {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items:center;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container px-5">
<a class="navbar-brand" href="#!">Andrea.site</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="#!">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#!">About</a></li>
<li class="nav-item"><a class="nav-link" href="#!">Contact</a></li>
<li class="nav-item"><a class="nav-link" href="#!">Services</a></li>
</ul>
</div>
</div>
</nav>
<!-- Header-->
<header class="bg-dark py-5">
<div class="container px-5">
<div class="row gx-5 justify-content-center">
<div class="col-lg-6">
<div class="text-center my-5">
<h1 class="display-5 fw-bolder text-white mb-2">Benvenuto nel sito di Andrea, il primo sito</h1>
<p class="lead text-white-50 mb-4">Questo è un progetto extra-scolastico , progettato durante lo stage scuola-lavoro</p>
<div class="d-grid gap-3 d-sm-flex justify-content-sm-center">
<a class="btn btn-primary btn-lg px-4 me-sm-3" href="#features">Leggi di piu'</a>
</div>
</div>
</div>
</div>
</div>
</header>
<div class="container-main">
<br>
<h1> Diversi modi di concepire lo spazio </h1>
</br> </br>
<div class="flex-container">
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="card">
<img class="card-img-top" src="auroraboreale.png" alt="Card image cap">
<div class="card-body">
<p class="card-text">Lasciati trasportare dalla bellezza dell'aurora boreale, per lasciar spazio alle tue idee</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="card">
<img class="card-img-top" src="paesaggio.png" alt="Card image cap">
<div class="card-body">
<p class="card-text">cattura,immagina, fatti trasportare ,sentiti libero e vola come fanno le nuvole</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="card">
<img class="card-img-top" src="everest.png" alt="Card image cap">
<div class="card-body">
<p class="card-text">sentiti alto e possente come il monte everest , nessuno ti potrà abbattere e il cielo potrai toccare
-----------------
</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
<br><br><br>
<div class="conteiner-music " style="background-color:
#343a40; width:100%">
<br>
<H1 class="mt-4" style="color:white;"> La mia musica </H1>
<div class="flex-container">
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="card" style="width: 18rem; background-color:#343a40">
<div class="card-body">
<div id="carouselExampleControls" class="carousel slide mt-4" data-bs-ride="carousel" style="width:90%; height:6%;">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="sfera.png" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="sirio.png" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="plaza.png" class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev" style="width:10%; opacity:30%">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next" style="width:10%; opacity:30%">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden"></span>
</button>
</div>
</div>
</div>
</div>
<div class="card" style="width: 18rem; width: 18rem; background-color:#343a40; color:white;" >
<div class="card-body">
<h5 class="card-title">FAMOSO</h5>
<p class="card-text">Ascolta il nuovo album di Sfera Ebbasta</p>
<a href="#" class="btn btn-primary">Ascolta</a>
</div>
</div>
<div class="card text-center" style="width: 18rem; width: 18rem; background-color:#343a40; color:white;">
<div class="card-body">
<h5 class="card-title">SIRIO</h5>
<p class="card-text">Ascolta il nuovo album di Lazza.</p>
<a href="#" class="btn btn-primary">Ascolta</a>
</div>
</div>
<div class="card text-right" style="width: 18rem; width: 18rem; background-color:#343a40; color:white;">
<div class="card-body">
<h5 class="card-title">PLAZA</h5>
<p class="card-text">Ascolta il nuovo album di Capo Plaza.</p>
<a href="#" class="btn btn-primary">Ascolta</a>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-kjU+l4N0Yf4ZOJErLsIcvOU2qSb74wXpOhqTvwVx3OElZRweTnQ6d31fXEoRD1Jy" crossorigin="anonymous"></script>
<script>
</script>
</html>