Skip to content

Gizem Ayaz Yegül BER WDFT OCT2023 #2119

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

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Gizem Ayaz Yegül BER WDFT OCT2023 #2119

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
183 changes: 183 additions & 0 deletions starter-code/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,183 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">REVERA</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
<div id="carouselExample" class="carousel slide">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="./img/slider-1.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="./img/slider-2.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="./img/slider-3.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="./img/slider-4.jpg" class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev" >
<span class="carousel-control-prev-icon" aria-hidden="true" style="background-color: red" ></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next" >
<span class="carousel-control-next-icon" aria-hidden="true" style="background-color: red" ></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<div class="d-flex justify-content-center" style="background-color: red" >
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec nisl massa. Quisque nec porta tellus. Curabitur pharetra vitae ligula eget pellentesque. Cras ornare nisl erat, nec mollis nunc pretium non. Nulla facilisi. Nullam lobortis augue sit amet dapibus posuere. Praesent ac elementum dui. Donec tincidunt nulla odio, id commodo nisl elementum id. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum quam lectus, finibus eu dolor sit amet, fringilla faucibus mi.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec nisl massa. Quisque nec porta tellus. Curabitur pharetra vitae ligula eget pellentesque. Cras ornare nisl erat, nec mollis nunc pretium non. Nulla facilisi. Nullam lobortis augue sit amet dapibus posuere. Praesent ac elementum dui. Donec tincidunt nulla odio, id commodo nisl elementum id. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum quam lectus, finibus eu dolor sit amet, fringilla faucibus mi.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec nisl massa. Quisque nec porta tellus. Curabitur pharetra vitae ligula eget pellentesque. Cras ornare nisl erat, nec mollis nunc pretium non. Nulla facilisi. Nullam lobortis augue sit amet dapibus posuere. Praesent ac elementum dui. Donec tincidunt nulla odio, id commodo nisl elementum id. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum quam lectus, finibus eu dolor sit amet, fringilla faucibus mi.</div>
</div>
<h1>LATEST PROJECTS</h1>
<div class="d-flex justify-content-around" >
<div class="card" style="width: 18rem;">
<img src="./img/project-1.jpg" class="card-img-top" alt="...">
<div class="card-body">
<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>
</div>
</div>
<div class="card" style="width: 18rem;">
<img src="./img/project-2.jpg" class="card-img-top" alt="...">
<div class="card-body">
<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>
</div>
</div>
<div class="card" style="width: 18rem;">
<img src="./img/project-3.jpg" class="card-img-top" alt="...">
<div class="card-body">
<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>
</div>
</div>
<div class="card" style="width: 18rem;">
<img src="./img/project-4.jpg" class="card-img-top" alt="...">
<div class="card-body">
<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>
</div>
</div>

</div>
<h1>LATEST CHANGES</h1>
<div class="d-flex justify-content-around" >
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card">
<img src="./img/slider-1.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="./img/slider-2.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="./img/slider-3.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="./img/slider-4.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
</div>

<footer class="row row-cols-1 row-cols-sm-2 row-cols-md-5 py-5 my-5 border-top" style="background-color: grey;">
<div class="col mb-3">
<a href="/" class="d-flex align-items-center mb-3 link-body-emphasis text-decoration-none">
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"></use></svg>
</a>
<p class="text-body-secondary">© 2023</p>
</div>

<div class="col mb-3">

</div>

<div class="col mb-3">
<h5>Section</h5>
<ul class="nav flex-column">
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">FAQs</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li>
</ul>
</div>

<div class="col mb-3">
<h5>Section</h5>
<ul class="nav flex-column">
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">FAQs</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li>
</ul>
</div>

<div class="col mb-3">
<h5>Section</h5>
<ul class="nav flex-column">
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">FAQs</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li>
</ul>
</div>
</footer>



<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>