Skip to content

Commit 93db4e5

Browse files
solygambassolygambas
committed
add tooltips, modals, offcanvas, dropdowns
1 parent 3b831e3 commit 93db4e5

File tree

1 file changed

+169
-8
lines changed

1 file changed

+169
-8
lines changed

‎ebook-landing-page/index.html

Lines changed: 169 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,9 @@
2626
<nav class="navbar navbar-expand-md navbar-light pt-5 pb-4">
2727
<div class="container-xxl">
2828
<a href="#intro" class="navbar-brand">
29-
<i class="bi bi-book-half"></i>
30-
<span class="text-secondary fw-bold">Net Ninja Pro - the Book</span>
29+
<span class="text-secondary fw-bold"
30+
><i class="bi bi-book-half"></i> Net Ninja Pro - the Book</span
31+
>
3132
</a>
3233
<button
3334
class="navbar-toggler"
@@ -79,13 +80,27 @@ <h1>
7980
Laboriosam, dignissimos?
8081
</p>
8182
<a href="#pricing" class="btn btn-secondary btn-lg">Buy Now</a>
83+
<a
84+
href="#sidebar"
85+
class="d-block mt-3"
86+
data-bs-toggle="offcanvas"
87+
role="button"
88+
aria-controls="sidebar"
89+
>Explore my other books</a
90+
>
8291
</div>
8392
<div class="col-md-5 text-center d-none d-md-block">
84-
<img
85-
src="https://i.ibb.co/z5bBS9w/ebook-cover.png"
86-
alt="ebook cover"
87-
class="img-fluid"
88-
/>
93+
<span
94+
class="tt"
95+
data-bs-placement="bottom"
96+
title="Net Ninja Book Cover"
97+
>
98+
<img
99+
src="https://i.ibb.co/z5bBS9w/ebook-cover.png"
100+
alt="ebook cover"
101+
class="img-fluid"
102+
/>
103+
</span>
89104
</div>
90105
</div>
91106
</div>
@@ -484,6 +499,15 @@ <h2>Get in Touch</h2>
484499
class="form-control"
485500
placeholder="e.g. mario@example.com"
486501
/>
502+
<span class="input-group-text">
503+
<span
504+
class="tt"
505+
data-bs-placement="bottom"
506+
title="Enter an email address we can reply to."
507+
>
508+
<i class="bi bi-question-circle text-muted"></i>
509+
</span>
510+
</span>
487511
</div>
488512
<label for="name" class="form-label">Name:</label>
489513
<div class="mb-4 input-group">
@@ -496,6 +520,15 @@ <h2>Get in Touch</h2>
496520
class="form-control"
497521
placeholder="e.g. Mario"
498522
/>
523+
<span class="input-group-text">
524+
<span
525+
class="tt"
526+
data-bs-placement="bottom"
527+
title="Pretty self explanatory really..."
528+
>
529+
<i class="bi bi-question-circle text-muted"></i>
530+
</span>
531+
</span>
499532
</div>
500533
<label for="subject" class="form-label"
501534
>What is your question about?</label
@@ -511,7 +544,12 @@ <h2>Get in Touch</h2>
511544
</select>
512545
</div>
513546
<div class="mb-4 mt-5 form-floating">
514-
<textarea id="query" class="form-control" style="height: 140px" placeholder="query"></textarea>
547+
<textarea
548+
id="query"
549+
class="form-control"
550+
style="height: 140px"
551+
placeholder="query"
552+
></textarea>
515553
<label for="query">Your query...</label>
516554
</div>
517555
<div class="mb-4 text-center">
@@ -524,11 +562,134 @@ <h2>Get in Touch</h2>
524562
</section>
525563

526564
<!-- get updates / modal trigger -->
565+
<section class="bg-light">
566+
<div class="container">
567+
<div class="text-center">
568+
<h2>Stay in The Loop</h2>
569+
<p class="lead">Get the latest updates as they happen...</p>
570+
</div>
571+
<div class="row justify-content-center">
572+
<div class="col-md-8 text-center">
573+
<p class="text-muted my-4">
574+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero
575+
exercitationem voluptatibus porro, hic asperiores fuga illo
576+
voluptates obcaecati deleniti veritatis sunt saepe quasi deserunt
577+
ex ipsum. Est possimus, aspernatur, vitae eligendi rem odit
578+
quaerat, ipsum pariatur ratione maxime delectus fuga minus
579+
accusamus dolores iusto maiores accusantium cumque magnam placeat
580+
quia!
581+
</p>
582+
<button
583+
class="btn btn-primary"
584+
data-bs-toggle="modal"
585+
data-bs-target="#reg-modal"
586+
>
587+
Register for Updates
588+
</button>
589+
</div>
590+
</div>
591+
</div>
592+
</section>
593+
594+
<!-- modal itself -->
595+
<div
596+
class="modal fade"
597+
id="reg-modal"
598+
tabindex="-1"
599+
aria-labelledby="modal-title"
600+
aria-hidden="true"
601+
>
602+
<div class="modal-dialog">
603+
<div class="modal-content">
604+
<div class="modal-header">
605+
<h5 class="modal-title" id="modal-title">Get the Latest Updates</h5>
606+
<button
607+
class="btn-close"
608+
type="button"
609+
data-bs-dismiss="modal"
610+
aria-label="Close"
611+
></button>
612+
</div>
613+
<div class="modal-body">
614+
<p>
615+
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis,
616+
exercitationem laboriosam nihil minus voluptatibus harum aliquam
617+
consequatur pariatur inventore dignissimos illum excepturi ratione
618+
ipsum sit iusto alias eligendi fugit laborum?
619+
</p>
620+
<label for="modal-email" class="form-label"
621+
>Your email address:</label
622+
>
623+
<input
624+
type="text"
625+
class="form-control"
626+
id="modal-email"
627+
placeholder="e.g. mario@example.com"
628+
/>
629+
</div>
630+
<div class="modal-footer">
631+
<button class="btn btn-primary" type="button">Submit</button>
632+
</div>
633+
</div>
634+
</div>
635+
</div>
636+
637+
<!-- side panel / offcanvas -->
638+
<div
639+
class="offcanvas offcanvas-start"
640+
tabindex="-1"
641+
id="sidebar"
642+
aria-labelledby="sidebar-label"
643+
>
644+
<div class="offcanvas-header">
645+
<h5 class="offcanvas-title" id="sidebar-label">My Other Books</h5>
646+
<button
647+
class="btn-close"
648+
type="button"
649+
data-bs-dismiss="offcanvas"
650+
aria-label="Close"
651+
></button>
652+
</div>
653+
<div class="offcanvas-body">
654+
<p>
655+
Lorem, ipsum dolor sit amet consectetur adipisicing elit. In minima
656+
ducimus excepturi quasi tempore fugit quis voluptatibus aut error
657+
possimus, tenetur natus magni quam voluptatem quae eligendi
658+
repudiandae delectus eaque!
659+
</p>
660+
<!-- dropdown -->
661+
<div class="dropdown mt-3">
662+
<button
663+
class="btn btn-secondary dropdown-toggle"
664+
id="book-dropdown"
665+
type="button"
666+
data-bs-toggle="dropdown"
667+
>
668+
Choose a book title
669+
</button>
670+
<ul class="dropdown-menu" aria-labelledby="book-dropdown">
671+
<li>
672+
<a href="#" class="dropdown-item">Become a React Superhero</a>
673+
</li>
674+
<li>
675+
<a href="#" class="dropdown-item">Conquering Vue.js</a>
676+
</li>
677+
<li>
678+
<a href="#" class="dropdown-item">Levelling up Your Next.js</a>
679+
</li>
680+
</ul>
681+
</div>
682+
</div>
683+
</div>
527684

528685
<script
529686
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
530687
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
531688
crossorigin="anonymous"
532689
></script>
690+
<script>
691+
const tooltips = document.querySelectorAll(".tt");
692+
tooltips.forEach((tooltip) => new bootstrap.Tooltip(tooltip));
693+
</script>
533694
</body>
534695
</html>

0 commit comments

Comments
 (0)