Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[BERLIN-PT-042024] Franciely Beckert #2125

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

[BERLIN-PT-042024] Franciely Beckert #2125

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5113756
Do after carousel
FranBeckert Apr 5, 2024
a84c18a
done
FranBeckert Apr 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
378 changes: 378 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,378 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bootstrap Lab</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous"
/>
<link
href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
rel="stylesheet"
/>
<style>
/* Example CSS to ensure full width and height for carousel images */
.carousel-item {
height: 45vh; /* Adjust the height of the carousel */
}
.carousel-caption {
bottom: 20%; /* Adjust caption position */
}
#section-2 {
background-color: #ed564b;
}
</style>
</head>
<body>
<!-- navbar -->
<nav class="navbar navbar-expand navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand fw-bold fs-1 py-3 px-5" href="#">Revera</a>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" aria-current="page" href="#home">Home</a>
<a class="nav-link" href="#about">About</a>
<a class="nav-link" href="#samplepage">Sample Page</a>
<a class="nav-link" href="#portfolio">Portfolio</a>
<a class="nav-link" href="#blog">Blog</a>
<a class="nav-link" href="#parentpage">Parent Page</a>
<a class="nav-link" href="#contact">Contact</a>
</div>
</div>
</div>
</nav>

<!-- section 1 -->
<div
id="carouselExampleCaptions"
class="carousel slide"
data-bs-ride="false"
>
<div class="carousel-inner">
<!-- First item -->
<div
class="carousel-item active"
style="
background-image: url('/starter-code/img/slider-1.jpg');
background-size: cover;
background-position: center;
"
>
<div class="carousel-caption d-none d-md-block">
<div
class="d-flex flex-column align-items-center justify-content-center"
>
<h1>
ETIAM MAURIS TORTOR, PHARETRA QUIS LOBORTIS IN, PHARETRA IN DIAM
</h1>
<p>
Duis tempus leo vitae ipsum viverra, blandit condimentum sapien
porttitor. Duis porttitor sed metus eget mollis. Curabitur
bibendum imperdiet tortor, ut pulvinar purus elementum nec.
Suspendisse at erat luctus; hendrerit sapien sed, consectetur
erat. Maecenas dignissim suscipit orci at molestie. Aenean
fringilla dolor vitae lacus lacinia eleifend. Suspendisse et
libero nunc. Etiam mauris tortor, pharetra […]
</p>
<a class="btn btn-primary" href="#" role="button">Read More</a>
</div>
</div>
</div>
<!-- second item -->
<div
class="carousel-item"
style="
background-image: url('/starter-code/img/slider-2.jpg');
background-size: cover;
background-position: center;
"
>
<div class="carousel-caption d-none d-md-block">
<h1>FALAURIS SOLLICITUDIN QUIS DOLOR VENENATIS FACILISIS</h1>
<p>
Donec sed dolor eu augue dignissim pellentesque. Fusce semper
tortor ornare, luctus sem in, dictum leo. Ut at congue quam!
Maecenas luctus interdum odio, eget volutpat velit hendrerit eu?
Suspendisse at magna ut sem blandit hendrerit non ut magna. Cras
quis porta dolor. Aliquam erat volutpat. Phasellus fringilla
feugiat libero nec volutpat. Maecenas fermentum bibendum […]
</p>
<a class="btn btn-primary" href="#" role="button">Read More</a>
</div>
</div>
<!-- third item -->
<div
class="carousel-item"
style="
background-image: url('/starter-code/img/slider-3.jpg');
background-size: cover;
background-position: center;
"
>
<div class="carousel-caption d-none d-md-block">
<h1>SUSPENDISSE ORNARE, FELIS FEUGIAT SUSCIPIT PHARETRA</h1>
<p>
Quisque sit amet sagittis justo. Suspendisse ornare, felis feugiat
suscipit pharetra, lorem est viverra odio; tristique tristique
diam tellus id tellus. In consectetur aliquet tristique. Curabitur
imperdiet leo in nisl consectetur mattis. Quisque bibendum, mauris
vitae suscipit ornare; est nibh elementum mauris, eu malesuada
nunc magna at justo. Proin blandit id tellus non pellentesque.
Mauris […]
</p>
<a class="btn btn-primary" href="#" role="button">Read More</a>
</div>
</div>
<!-- Fourth item -->
<div
class="carousel-item"
style="
background-image: url('/starter-code/img/slider-4.jpg');
background-size: cover;
background-position: center;
"
>
<div class="carousel-caption d-none d-md-block">
<h1>FUSCE SCELERISQUE NIBH AC NISL LUCTUS INTERDUM.</h1>
<p>
Nam luctus velit ultricies vestibulum eleifend. Proin imperdiet
varius rutrum. Curabitur placerat lacus eu ligula pellentesque
euismod? Aliquam volutpat augue id nibh auctor, at varius dui
semper? Suspendisse non pellentesque sapien, et sagittis erat.
Quisque et dignissim elit. Sed sit amet sapien ac quam vestibulum
suscipit ac id diam. Morbi accumsan est vitae tellus vulputate […]
</p>
<a class="btn btn-primary" href="#" role="button">Read More</a>
</div>
</div>
</div>
<button
class="carousel-control-prev"
type="button"
data-bs-target="#carouselExampleCaptions"
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="#carouselExampleCaptions"
data-bs-slide="next"
>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>

<!-- section 2 -->
<div class="container-fluid mt-10 py-5" id="section-2">
<div class="row text-center justify-content-center">
<!-- First Column with the Drink Icon -->
<div class="col-12 col-md-3">
<div
style="
width: 50px;
height: 50px;
border: 4px solid white;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
"
>
<i class="fas fa-glass-martini" style="color: white"></i>
</div>
<h3 class="text-white">Web design</h3>
<p class="text-white">
Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Vestibulum vehicula erat non congue cursus.
Aenean auctor nulla quis augue dictum, sed sagittis odio varius.
</p>
</div>
<!-- Second Column with the Star Icon -->
<div class="col-12 col-md-3">
<div
style="
width: 50px;
height: 50px;
border: 4px solid white;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
"
>
<i class="fas fa-star" style="color: white"></i>
<!-- Star Icon -->
</div>
<h3 class="text-white">Web development</h3>
<p class="text-white">
Duis tempus leo vitae ipsum viverra, blandit condimentum sapien
porttitor. Duis porttitor sed metus eget mollis. Curabitur bibendum
imperdiet tortor, ut pulvinar purus elementum nspendisse at erat
luctus.
</p>
</div>
<!-- Third Column with the Heart Icon -->
<div class="col-12 col-md-3">
<div
style="
width: 50px;
height: 50px;
border: 4px solid white;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
"
>
<i class="fas fa-heart" style="color: white"></i>
<!-- Heart Icon -->
</div>
<h3 class="text-white">User interface</h3>
<p class="text-white">
Cras aliquet venenatis porttitor. Donec rutrum sapien et sapien
dignissim, eu dapibus mi molestie. Suspendisse dictum convallis quam
et sodales. Praesent non enim et magna congue gravida.
</p>
</div>
</div>
</div>

<!-- section 3 -->
<div class="container" id="section-3">
<!-- Title and Description -->
<div class="row">
<div class="col-12">
<h2 class="mt-5">LATEST PROJECTS</h2>
</div>
<div class="col-12">
<p class="text-muted fw-bold">FEW OF THE LATEST PORTFOLIO ITEMS</p>
</div>
</div>
<!-- Horizontal Rule -->
<hr />
<!-- Image Blocks -->
<div class="row">
<div class="col-sm-3 col-6 portbox">
<img
src="/starter-code/img/project-1.jpg"
alt="Description 1"
class="img-fluid"
/>
<p>Nunc libero elit, iaculis nec augue non</p>
</div>
<div class="col-sm-3 col-6 portbox">
<img
src="/starter-code/img/project-2.jpg"
alt="Description 2"
class="img-fluid"
/>
<p>Phasellus aliquet iaculis neque accumsan aliquam</p>
</div>
<div class="col-sm-3 col-6 portbox">
<img
src="/starter-code/img/project-3.jpg"
alt="Description 3"
class="img-fluid"
/>
<p>Vivamus blandit ipsum sed arcu euismod</p>
</div>
<div class="col-sm-3 col-6 portbox">
<img
src="/starter-code/img/project-4.jpg"
alt="Description 4"
class="img-fluid"
/>
<p>Curabitur auctor dolor risus, vitae pellentesque arcu consequat</p>
</div>
</div>
</div>

<!-- section 4 -->
<div class="container" id="section-4">
<!-- Title and Description -->
<div class="row">
<div class="col-12">
<h2 class="mt-5">LATEST ARTICLES</h2>
</div>
<div class="col-12">
<p class="text-muted fw-bold">LATEST POSTS FROM THE BLOG</p>
</div>
</div>
<!-- Horizontal Rule -->
<hr />
<!-- Image Blocks -->
<div class="row">
<div class="col-sm-3 col-6 portbox">
<img
src="/starter-code/img/project-1.jpg"
alt="Description 1"
class="img-fluid"
/>
<p><strong>Etiam mauris tortor, pharetra quis lobortis in, pharetra in diam</strong></p>
<div class="col mb-3">
<span class="text-muted">POSTED ON</span>
<span class="text-danger">August 19, 2013</span> by
<span class="text-danger">Admin</span>
</div>
<p>Duis tempus leo vitae ipsum viverra, blandit condimentum sapien porttitor. Duis porttitor sed metus eget mollis. Curabitur bibendum imperdiet tortor, ut pulvinar purus elementum nec. Suspendisse at erat luctus; hendrerit sapien sed, consectetur erat. Maecenas dignissim suscipit orci at molestie. Aenean fringilla dolor vitae lacus lacinia eleifend. Suspendisse et libero nunc. Etiam mauris tortor, pharetra […]</p>
</div>
<div class="col-sm-3 col-6 portbox">
<img
src="/starter-code/img/project-2.jpg"
alt="Description 2"
class="img-fluid"
/>
<p><strong>Falauris sollicitudin quis dolor venenatis facilisis</strong></p>
<div class="col mb-3">
<span class="text-muted">POSTED ON</span>
<span class="text-danger">August 19, 2013</span> by
<span class="text-danger">Admin</span>
</div>
<p>Donec sed dolor eu augue dignissim pellentesque. Fusce semper tortor ornare, luctus sem in, dictum leo. Ut at congue quam! Maecenas luctus interdum odio, eget volutpat velit hendrerit eu? Suspendisse at magna ut sem blandit hendrerit non ut magna. Cras quis porta dolor. Aliquam erat volutpat. Phasellus fringilla feugiat libero nec volutpat. Maecenas fermentum bibendum […]</p>
</div>
<div class="col-sm-3 col-6 portbox">
<img
src="/starter-code/img/project-3.jpg"
alt="Description 3"
class="img-fluid"
/>
<p><strong>Suspendisse ornare, felis feugiat suscipit pharetra</strong></p>
<div class="col mb-3">
<span class="text-muted">POSTED ON</span>
<span class="text-danger">August 19, 2013</span> by
<span class="text-danger">Admin</span>
</div>
<p>Quisque sit amet sagittis justo. Suspendisse ornare, felis feugiat suscipit pharetra, lorem est viverra odio; tristique tristique diam tellus id tellus. In consectetur aliquet tristique. Curabitur imperdiet leo in nisl consectetur mattis. Quisque bibendum, mauris vitae suscipit ornare; est nibh elementum mauris, eu malesuada nunc magna at justo. Proin blandit id tellus non pellentesque. Mauris […]</p>
</div>
<div class="col-sm-3 col-6 portbox">
<img
src="/starter-code/img/project-4.jpg"
alt="Description 4"
class="img-fluid"
/>
<p><strong>Festibulum purus odio, ornare non posuere</strong></p>
<div class="col mb-3">
<span class="text-muted">POSTED ON</span>
<span class="text-danger">August 19, 2013</span> by
<span class="text-danger">Admin</span>
</div>
<p>Aenean quis rhoncus nisl, eget sollicitudin ipsum. Curabitur a elementum purus. Quisque vitae dui at arcu porttitor laoreet ac vitae nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla facilisi. Nulla egestas at nunc at volutpat. Nullam sodales at diam vel tempor. Sed pretium, leo vel pellentesque dictum, ligula […]</p>
</div>
</div>
</div>

<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"
></script>
</body>
</html>