index.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<!-- Required meta tags -->
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />

		<!-- Bootstrap CSS -->
		<link
			href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css"
			rel="stylesheet"
			integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6"
			crossorigin="anonymous"
		/>

		<!-- Custom CSS -->
		<link rel="stylesheet" href="style.css" />

		<title>Responsive Bootstrap Website</title>
	</head>
	<body class="bg-dark text-white">
		<!-- Navigation -->
		<nav class="navbar navbar-expand-lg navbar-dark bg-dark pt-lg-3 sticky-top">
			<div class="container">
				<a class="navbar-brand fw-bold fs-2" href="#"
					>Eis<span class="limegreen">Diner</span></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 fs-4">
						<li class="nav-item mx-lg-2">
							<a class="nav-link text-white" href="#">Start</a>
						</li>
						<li class="nav-item mx-lg-2">
							<a class="nav-link text-white" href="#products"> Produkte </a>
						</li>
						<li class="nav-item mx-lg-2">
							<a class="nav-link text-white" href="#about">Über uns</a>
						</li>
						<li class="d-flex align-items-center mx-lg-2 mt-2 mt-lg-0">
							<a
								href="http://www.facebook.de"
								target="_blank"
								class="icon-link text-white"
								><i class="fab fa-facebook fa-lg me-2 mx-lg-2"></i
							></a>
							<a
								href="http://www.twitter.de"
								target="_blank"
								class="icon-link text-white"
								><i class="fab fa-twitter fa-lg mx-2"></i
							></a>
							<a
								href="http://www.instagram.de"
								target="_blank"
								class="icon-link text-white"
								><i class="fab fa-instagram fa-lg mx-2"></i
							></a>
						</li>
					</ul>
				</div>
			</div>
		</nav>

		<!-- Image Slider -->
		<div
			id="carouselExampleFade"
			class="carousel slide carousel-fade"
			data-bs-ride="carousel"
		>
			<div class="carousel-inner">
				<div class="carousel-item active" data-bs-interval="8000">
					<div
						class="slider-image"
						style="background-image: url('assets/image_01.jpg')"
					></div>
				</div>
				<div class="carousel-item" data-bs-interval="8000">
					<div
						class="slider-image"
						style="background-image: url('assets/image_02.jpg')"
					></div>
				</div>
				<div class="carousel-item" data-bs-interval="8000">
					<div
						class="slider-image"
						style="background-image: url('assets/image_03.jpg')"
					></div>
				</div>
			</div>
			<button
				class="carousel-control-prev"
				type="button"
				data-bs-target="#carouselExampleFade"
				data-bs-slide="prev"
			>
				<span class="carousel-control-prev-icon" aria-hidden="true"></span>
				<span class="visually-hidden">Previous</span>
			</button>
			<button
				class="carousel-control-next"
				type="button"
				data-bs-target="#carouselExampleFade"
				data-bs-slide="next"
			>
				<span class="carousel-control-next-icon" aria-hidden="true"></span>
				<span class="visually-hidden">Next</span>
			</button>
		</div>

		<!-- Website Infos -->
		<div class="container mt-5">
			<h1 class="limegreen fw-bold">Lecker Eis!</h1>
			<p>
				Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magnam dicta
				totam ratione nostrum aperiam quasi corrupti quisquam a qui debitis,
				ipsa aliquam rerum dolorum provident consequuntur ea, iusto
				exercitationem! Eius eaque animi quae quia praesentium, corporis
				assumenda hic dolores voluptatibus porro impedit id atque tenetur
				perspiciatis itaque laboriosam nihil! Velit.
			</p>
			<p>
				Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet deserunt
				incidunt inventore blanditiis tempore provident est quibusdam.
				Necessitatibus distinctio ea earum sequi id praesentium corrupti
				deleniti laborum expedita perferendis dignissimos dolorem tempora dicta
				repudiandae eos nobis voluptatem cupiditate eaque, vitae quae ab nemo
				quaerat harum? Libero quam asperiores doloremque exercitationem!
				Repellat quia placeat debitis porro odio tempora eaque facilis
				excepturi!
			</p>
		</div>

		<!-- Produkte -->
		<div id="products" class="container">
			<h2 class="limegreen fw-bold">Unser bestes Eis</h2>
			<p>
				Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi ad enim
				voluptate in optio expedita culpa perferendis aliquid laborum aut, sequi
				dolore labore tenetur, ducimus voluptatibus reiciendis? Qui impedit
				voluptatem reprehenderit facere velit eveniet aperiam, aliquid animi
				delectus dolorum totam earum assumenda ipsam optio natus cumque.
				Molestiae distinctio quaerat sequi.
			</p>
			<div class="card-group text-dark">
				<div class="card border-0 rounded-0">
					<div
						style="background-image: url('assets/product_01.jpg')"
						class="card-image"
						alt="..."
					></div>
					<div class="card-body">
						<h5 class="card-title fw-bold fs-2">Power Pistazie</h5>
						<p class="card-text">
							This is a wider card with supporting text below as a natural
							lead-in to additional content. This content is a little bit
							longer.
						</p>
					</div>
				</div>
				<div class="card border-0 rounded-0">
					<div
						style="background-image: url('assets/product_02.jpg')"
						class="card-image"
						alt="..."
					></div>
					<div class="card-body">
						<h5 class="card-title fw-bold fs-2">Sixpack Killer</h5>
						<p class="card-text">
							This card has supporting text below as a natural lead-in to
							additional content.
						</p>
					</div>
				</div>
				<div class="card border-0 rounded-0">
					<div
						style="background-image: url('assets/product_03.jpg')"
						class="card-image"
						alt="..."
					></div>
					<div class="card-body">
						<h5 class="card-title fw-bold fs-2">Tombo Mango Schleck</h5>
						<p class="card-text">
							This is a wider card with supporting text below as a natural
							lead-in to additional content. This card has even longer content
							than the first to show that equal height action.
						</p>
					</div>
				</div>
			</div>
		</div>

		<!-- Über uns -->
		<div id="about" class="container">
			<h2 class="limegreen fw-bold">Unser Team</h2>
			<p class="mb-5">
				Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi ad enim
				voluptate in optio expedita culpa perferendis aliquid laborum aut, sequi
				dolore labore tenetur, ducimus voluptatibus reiciendis? Qui impedit
				voluptatem reprehenderit facere velit eveniet aperiam, aliquid animi
				delectus dolorum totam earum assumenda ipsam optio natus cumque.
				Molestiae distinctio quaerat sequi.
			</p>
			<div class="my-5">
				<div
					class="about-image float-lg-start mx-auto mx-lg-5"
					style="background-image: url('assets/human_01.jpg')"
				></div>
				<div class="p-lg-5">
					<h3 class="fs-2 limegreen">Eis Meister</h3>
					<p>
						Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo
						necessitatibus minima corporis aut porro odio perspiciatis libero
						consequuntur at cumque, voluptatibus, quaerat fugiat mollitia
						voluptatem eveniet fuga, aspernatur vitae ea.
					</p>
				</div>
				<div class="clearfix"></div>
			</div>

			<div class="my-5">
				<div
					class="about-image float-lg-end mx-auto mx-lg-5"
					style="background-image: url('assets/human_02.jpg')"
				></div>
				<div class="p-lg-5">
					<h3 class="fs-2 limegreen">Miss Mango</h3>
					<p>
						Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo
						necessitatibus minima corporis aut porro odio perspiciatis libero
						consequuntur at cumque, voluptatibus, quaerat fugiat mollitia
						voluptatem eveniet fuga, aspernatur vitae ea.
					</p>
				</div>
				<div class="clearfix"></div>
			</div>

			<div class="my-5">
				<div
					class="about-image float-lg-start mx-auto mx-lg-5"
					style="background-image: url('assets/human_03.jpg')"
				></div>
				<div class="p-lg-5">
					<h3 class="fs-2 limegreen">Pistazien Papst</h3>
					<p>
						Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo
						necessitatibus minima corporis aut porro odio perspiciatis libero
						consequuntur at cumque, voluptatibus, quaerat fugiat mollitia
						voluptatem eveniet fuga, aspernatur vitae ea.
					</p>
				</div>
				<div class="clearfix"></div>
			</div>
		</div>

		<!-- Footer -->
		<div class="footer py-5">&copy 2021 EisDiner</div>

		<script
			src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"
			integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8"
			crossorigin="anonymous"
		></script>
	</body>
</html>