Skip to content

Commit

Permalink
Merge pull request #2 from peneetawojcik/peneeta-branch
Browse files Browse the repository at this point in the history 
added another section
  • Loading branch information
@peneeta
peneeta authored May 13, 2022
2 parents d4f32f4 + 8fc7f9f commit ed64226
Showing 1 changed file with 196 additions and 23 deletions.
219 changes: 196 additions & 23 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">

<!-- Custom Style Sheet -->
<link rel="stylesheet" href="style.css">
<title>Bootstrap Cheat Sheet</title>
</head>
Expand Down Expand Up @@ -180,45 +182,216 @@ <h2 class="text-center mb-4"> Frequently Asked Questions</h2>

<!-- Accordion Initialization -->
<div class="accordion-item">

<!-- Item One -->
<h2 class="accordion-header" id="flush-headingOne">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
Accordion Item #1
</button>

<!-- Item 1 -->
<h2 class="accordion-header">
<button
class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#question-one"
> Where are you located? </button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#questions">
<div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the first item's accordion body.</div>
<div
id="question-one"
class="accordion-collapse collapse"
data-bs-parent="#questions">
<div class="accordion-body">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut ab inventore illum nemo dolor. Autem, ipsam facere aliquam accusantium, ipsum sapiente maxime tenetur vero recusandae et similique laudantium minima dolorum voluptas sed quisquam dicta ducimus nesciunt! Quisquam esse ut ipsa unde, fugit sint iusto, vero iste ex molestiae non quas.
</div>
</div>
</div>

<!-- Item 2 -->
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
Accordion Item #2
</button>
<h2 class="accordion-header">
<button
class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#question-two"
> Cost of Attendance </button>
</h2>
<div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the second item's accordion body. Let's imagine this being filled with some actual content.</div>
<div
id="question-two"
class="accordion-collapse collapse"
data-bs-parent="#questions">
<div class="accordion-body">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut ab inventore illum nemo dolor. Autem, ipsam facere aliquam accusantium, ipsum sapiente maxime tenetur vero recusandae et similique laudantium minima dolorum voluptas sed quisquam dicta ducimus nesciunt! Quisquam esse ut ipsa unde, fugit sint iusto, vero iste ex molestiae non quas.
</div>
</div>
</div>

<!-- Item 3 -->
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
Accordion Item #3
</button>
<h2 class="accordion-header">
<button
class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#question-three"
> Useful Skills </button>
</h2>
<div
id="question-three"
class="accordion-collapse collapse"
data-bs-parent="#questions">
<div class="accordion-body">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut ab inventore illum nemo dolor. Autem, ipsam facere aliquam accusantium, ipsum sapiente maxime tenetur vero recusandae et similique laudantium minima dolorum voluptas sed quisquam dicta ducimus nesciunt! Quisquam esse ut ipsa unde, fugit sint iusto, vero iste ex molestiae non quas.
</div>
</div>

<!-- Item 4 -->
<h2 class="accordion-header">
<button
class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#question-four"
> Contact Points </button>
</h2>
<div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.</div>
<div
id="question-four"
class="accordion-collapse collapse"
data-bs-parent="#questions">
<div class="accordion-body">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut ab inventore illum nemo dolor. Autem, ipsam facere aliquam accusantium, ipsum sapiente maxime tenetur vero recusandae et similique laudantium minima dolorum voluptas sed quisquam dicta ducimus nesciunt! Quisquam esse ut ipsa unde, fugit sint iusto, vero iste ex molestiae non quas.
</div>
</div>
</div>
</div>
</div>
</div>
</section>

<!-- Tiles -->

<section id="instructors" class="p-5 bg-primary">
<div class="container">
<h2 class="text-center text-white">Tiles</h2>
<p class="lead text-center text-white mb-5">
Example tile layout to display attributes. Below are some random people generated by a bot.
</p>

<div class="row g-4">

<!-- First Tile -->
<div class="col-md-6 col-lg-3">
<div class="card bg-light">
<div class="card-body text-center">
<img src="https://randomuser.me/api/portraits/men/11.jpg" class="rounded-circle mb-3" alt="">

<h3 class="card-title mb-3">John Doe</h3>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam praesentium dolorum enim recusandae commodi repellendus!</p>

<!-- Fancy contact icons -->
<a href="#" id=""><i class="bi bi-twitter text-dark mx-1"></i></a>

<a href="#" id=""><i class="bi bi-facebook text-dark mx-1"></i></a>

<a href="#" id=""><i class="bi bi-linkedin text-dark mx-1"></i></a>

<a href="#" id=""><i class="bi bi-instagram text-dark mx-1"></i></a>

</div>
</div>
</div>

<!-- Second Tile -->
<div class="col-md-6 col-lg-3">
<div class="card bg-light">
<div class="card-body text-center">
<img src="https://randomuser.me/api/portraits/women/11.jpg" class="rounded-circle mb-3" alt="">

<h3 class="card-title mb-3">Jane Doe</h3>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam praesentium dolorum enim recusandae commodi repellendus!</p>

<!-- Fancy contact icons -->
<a href="#" id=""><i class="bi bi-twitter text-dark mx-1"></i></a>

<a href="#" id=""><i class="bi bi-facebook text-dark mx-1"></i></a>

<a href="#" id=""><i class="bi bi-linkedin text-dark mx-1"></i></a>

<a href="#" id=""><i class="bi bi-instagram text-dark mx-1"></i></a>

</div>
</div>
</div>

<!-- Third Tile -->
<div class="col-md-6 col-lg-3">
<div class="card bg-light">
<div class="card-body text-center">
<img src="https://randomuser.me/api/portraits/men/12.jpg" class="rounded-circle mb-3" alt="">

<h3 class="card-title mb-3">Minecraft Steve</h3>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam praesentium dolorum enim recusandae commodi repellendus!</p>

<!-- Fancy contact icons -->
<a href="#" id=""><i class="bi bi-twitter text-dark mx-1"></i></a>

<a href="#" id=""><i class="bi bi-facebook text-dark mx-1"></i></a>

<a href="#" id=""><i class="bi bi-linkedin text-dark mx-1"></i></a>

<a href="#" id=""><i class="bi bi-instagram text-dark mx-1"></i></a>

</div>
</div>
</div>

<!-- Fourth Tile -->
<div class="col-md-6 col-lg-3">
<div class="card bg-light">
<div class="card-body text-center">
<img src="https://randomuser.me/api/portraits/women/12.jpg" class="rounded-circle mb-3" alt="">

<h3 class="card-title mb-3">Banana Bread</h3>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam praesentium dolorum enim recusandae commodi repellendus!</p>

<!-- Fancy contact icons -->
<a href="#" id=""><i class="bi bi-twitter text-dark mx-1"></i></a>

<a href="#" id=""><i class="bi bi-facebook text-dark mx-1"></i></a>

<a href="#" id=""><i class="bi bi-linkedin text-dark mx-1"></i></a>

<a href="#" id=""><i class="bi bi-instagram text-dark mx-1"></i></a>

</div>
</div>
</div>
</div>
</div>
</section>

<!-- Contacts -->
<section class="p-5">
<div class="container">
<div class="row g-4">
<div class="col-md">
<h2 class="text-center mb-4">Contact Info</h2>
<ul class="list-group list-group-flush lead">
<li class="list-group-item">
<span class="fw-bold">Main Location:</span> Zoom.us
</li>

<li class="list-group-item">
<span class="fw-bold">Home Phone: </span> (123)-456-7890
</li>

<li class="list-group-item">
<span class="fw-bold">Cell Phone:</span> (098)-765-4321
</li>

<li class="list-group-item">
<span class="fw-bold">Password:</span> 12340
</li>
</ul>
</div>
</div>
</div>
</section>

<!-- Script Tags -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
Expand Down

0 comments on commit ed64226

Please sign in to comment.