Skip to content

Commit cf5c4be

Browse files
solygambassolygambas
committed
add sass and faq
1 parent 93db4e5 commit cf5c4be

File tree

10 files changed

+345
-34
lines changed

10 files changed

+345
-34
lines changed

‎README.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -96,15 +96,15 @@ Based on [Materialize Tutorial](https://www.youtube.com/playlist?list=PL4cUxeGkc
9696

9797
A responsive landing page with Bootstrap 5.
9898

99-
<!-- [See Demo on CodePen]() -->
99+
[See Demo on CodePen](https://codepen.io/solygambas/full/oNWymQV)
100100

101101
[See ebook-landing-page folder](https://github.com/solygambas/html-css-frameworks/tree/master/ebook-landing-page)
102102

103-
<!-- <p align="center">
103+
<p align="center">
104104
<a href="https://github.com/solygambas/html-css-frameworks/tree/master/ebook-landing-page">
105105
<img src="ebook-landing-page/screenshot.jpg">
106106
</a>
107-
</p> -->
107+
</p>
108108

109109
### Features
110110

‎ebook-landing-page/.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules/

‎ebook-landing-page/README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22

33
A responsive landing page with Bootstrap 5.
44

5-
<!-- [See Demo on CodePen](#)
5+
[See Demo on CodePen](https://codepen.io/solygambas/full/oNWymQV)
66

77
<p align="center">
88
<img src="screenshot.png">
9-
</p>-->
9+
</p>
1010

1111
## Features
1212

‎ebook-landing-page/index.html‎

Lines changed: 152 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,13 @@
88
rel="stylesheet"
99
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css"
1010
/>
11-
<link
11+
<!-- <link
1212
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
1313
rel="stylesheet"
1414
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
1515
crossorigin="anonymous"
16-
/>
16+
/> -->
17+
<link rel="stylesheet" href="./sass/main.min.css" />
1718
<style>
1819
section {
1920
padding: 60px 0;
@@ -376,22 +377,22 @@ <h2 class="accordion-header" id="heading-5">
376377
</section>
377378

378379
<!-- reviews list -->
379-
<section id="reviews" class="bg-light">
380+
<section id="reviews" class="bg-altlight">
380381
<div class="container-lg">
381382
<div class="text-center">
382-
<h2><i class="bi bi-stars"></i> Book Reviews</h2>
383+
<h2><i class="bi bi-stars text-altdark"></i> Book Reviews</h2>
383384
<p class="lead">What my students have said about the book...</p>
384385
</div>
385386
<div class="row justify-content-center my-5">
386387
<div class="col-lg-8">
387388
<div class="list-group">
388389
<div class="list-group-item py-3">
389390
<div class="pb-2">
390-
<i class="bi bi-star-fill"></i>
391-
<i class="bi bi-star-fill"></i>
392-
<i class="bi bi-star-fill"></i>
393-
<i class="bi bi-star-fill"></i>
394-
<i class="bi bi-star-fill"></i>
391+
<i class="bi bi-star-fill text-altdark"></i>
392+
<i class="bi bi-star-fill text-altdark"></i>
393+
<i class="bi bi-star-fill text-altdark"></i>
394+
<i class="bi bi-star-fill text-altdark"></i>
395+
<i class="bi bi-star-fill text-altdark"></i>
395396
</div>
396397
<h5 class="mb-1">A must-buy for every aspiring web dev</h5>
397398
<p class="mb-1">
@@ -404,11 +405,11 @@ <h5 class="mb-1">A must-buy for every aspiring web dev</h5>
404405
</div>
405406
<div class="list-group-item py-3">
406407
<div class="pb-2">
407-
<i class="bi bi-star-fill"></i>
408-
<i class="bi bi-star-fill"></i>
409-
<i class="bi bi-star-fill"></i>
410-
<i class="bi bi-star-fill"></i>
411-
<i class="bi bi-star-half"></i>
408+
<i class="bi bi-star-fill text-altdark"></i>
409+
<i class="bi bi-star-fill text-altdark"></i>
410+
<i class="bi bi-star-fill text-altdark"></i>
411+
<i class="bi bi-star-fill text-altdark"></i>
412+
<i class="bi bi-star-half text-altdark"></i>
412413
</div>
413414
<h5 class="mb-1">A must-buy for every aspiring web dev</h5>
414415
<p class="mb-1">
@@ -421,11 +422,11 @@ <h5 class="mb-1">A must-buy for every aspiring web dev</h5>
421422
</div>
422423
<div class="list-group-item py-3">
423424
<div class="pb-2">
424-
<i class="bi bi-star-fill"></i>
425-
<i class="bi bi-star-fill"></i>
426-
<i class="bi bi-star-fill"></i>
427-
<i class="bi bi-star-fill"></i>
428-
<i class="bi bi-star-fill"></i>
425+
<i class="bi bi-star-fill text-altdark"></i>
426+
<i class="bi bi-star-fill text-altdark"></i>
427+
<i class="bi bi-star-fill text-altdark"></i>
428+
<i class="bi bi-star-fill text-altdark"></i>
429+
<i class="bi bi-star-fill text-altdark"></i>
429430
</div>
430431
<h5 class="mb-1">A must-buy for every aspiring web dev</h5>
431432
<p class="mb-1">
@@ -438,11 +439,11 @@ <h5 class="mb-1">A must-buy for every aspiring web dev</h5>
438439
</div>
439440
<div class="list-group-item py-3">
440441
<div class="pb-2">
441-
<i class="bi bi-star-fill"></i>
442-
<i class="bi bi-star-fill"></i>
443-
<i class="bi bi-star-fill"></i>
444-
<i class="bi bi-star-fill"></i>
445-
<i class="bi bi-star-fill"></i>
442+
<i class="bi bi-star-fill text-altdark"></i>
443+
<i class="bi bi-star-fill text-altdark"></i>
444+
<i class="bi bi-star-fill text-altdark"></i>
445+
<i class="bi bi-star-fill text-altdark"></i>
446+
<i class="bi bi-star-fill text-altdark"></i>
446447
</div>
447448
<h5 class="mb-1">A must-buy for every aspiring web dev</h5>
448449
<p class="mb-1">
@@ -455,11 +456,11 @@ <h5 class="mb-1">A must-buy for every aspiring web dev</h5>
455456
</div>
456457
<div class="list-group-item py-3">
457458
<div class="pb-2">
458-
<i class="bi bi-star-fill"></i>
459-
<i class="bi bi-star-fill"></i>
460-
<i class="bi bi-star-fill"></i>
461-
<i class="bi bi-star-fill"></i>
462-
<i class="bi bi-star"></i>
459+
<i class="bi bi-star-fill text-altdark"></i>
460+
<i class="bi bi-star-fill text-altdark"></i>
461+
<i class="bi bi-star-fill text-altdark"></i>
462+
<i class="bi bi-star-fill text-altdark"></i>
463+
<i class="bi bi-star text-altdark"></i>
463464
</div>
464465
<h5 class="mb-1">A must-buy for every aspiring web dev</h5>
465466
<p class="mb-1">
@@ -591,6 +592,128 @@ <h2>Stay in The Loop</h2>
591592
</div>
592593
</section>
593594

595+
<!-- faq -->
596+
<section>
597+
<div class="container">
598+
<div class="text-center">
599+
<h2>Frequently Asked Questions</h2>
600+
<p class="lead">
601+
Get information on frequent questions or concerns...
602+
</p>
603+
</div>
604+
<div class="row justify-content-center">
605+
<div class="col-md-8 text-start">
606+
<nav>
607+
<div class="nav nav-tabs" id="nav-tab" role="tablist">
608+
<button
609+
class="nav-link active"
610+
id="nav-refund-tab"
611+
data-bs-toggle="tab"
612+
data-bs-target="#nav-refund"
613+
type="button"
614+
role="tab"
615+
aria-controls="nav-refund"
616+
aria-selected="true"
617+
>
618+
Refund Policy
619+
</button>
620+
621+
<button
622+
class="nav-link"
623+
id="nav-update-tab"
624+
data-bs-toggle="tab"
625+
data-bs-target="#nav-update"
626+
type="button"
627+
role="tab"
628+
aria-controls="nav-update"
629+
aria-selected="false"
630+
>
631+
Upcoming Updates
632+
</button>
633+
634+
<button
635+
class="nav-link"
636+
id="nav-extras-tab"
637+
data-bs-toggle="tab"
638+
data-bs-target="#nav-extras"
639+
type="button"
640+
role="tab"
641+
aria-controls="nav-extras"
642+
aria-selected="false"
643+
>
644+
Included Extras
645+
</button>
646+
</div>
647+
</nav>
648+
<div class="tab-content" id="nav-tabContent">
649+
<div
650+
class="tab-pane fade show active p-3"
651+
id="nav-refund"
652+
role="tabpanel"
653+
aria-labelledby="nav-refund-tab"
654+
>
655+
<h2>Refund Policy</h2>
656+
<p>
657+
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
658+
Distinctio provident corporis aut, ipsa tenetur vel illo
659+
excepturi voluptate molestiae magnam, totam est id alias dicta
660+
a assumenda corrupti et repellat.
661+
</p>
662+
<p>
663+
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
664+
Distinctio provident corporis aut, ipsa tenetur vel illo
665+
excepturi voluptate molestiae magnam, totam est id alias dicta
666+
a assumenda corrupti et repellat.
667+
</p>
668+
</div>
669+
670+
<div
671+
class="tab-pane fade p-3"
672+
id="nav-update"
673+
role="tabpanel"
674+
aria-labelledby="nav-update-tab"
675+
>
676+
<h2>Upcoming Updates</h2>
677+
<p>
678+
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
679+
Quasi, cupiditate nam aperiam possimus, ratione modi enim
680+
inventore reiciendis ipsum mollitia, adipisci accusamus!
681+
Dolorem omnis illo incidunt ex, sit minus numquam.
682+
</p>
683+
<p>
684+
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
685+
Quasi, cupiditate nam aperiam possimus, ratione modi enim
686+
inventore reiciendis ipsum mollitia, adipisci accusamus!
687+
Dolorem omnis illo incidunt ex, sit minus numquam.
688+
</p>
689+
</div>
690+
691+
<div
692+
class="tab-pane fade p-3"
693+
id="nav-extras"
694+
role="tabpanel"
695+
aria-labelledby="nav-extras-tab"
696+
>
697+
<h2>Included Extras</h2>
698+
<p>
699+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
700+
Facere voluptates nostrum vel officiis! Magni animi assumenda
701+
numquam exercitationem facilis! Excepturi, doloremque illo.
702+
Voluptate, natus molestias? Enim repellendus earum ad sunt!
703+
</p>
704+
<p>
705+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
706+
Facere voluptates nostrum vel officiis! Magni animi assumenda
707+
numquam exercitationem facilis! Excepturi, doloremque illo.
708+
Voluptate, natus molestias? Enim repellendus earum ad sunt!
709+
</p>
710+
</div>
711+
</div>
712+
</div>
713+
</div>
714+
</div>
715+
</section>
716+
594717
<!-- modal itself -->
595718
<div
596719
class="modal fade"

‎ebook-landing-page/package-lock.json‎

Lines changed: 51 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎ebook-landing-page/package.json‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"name": "ebook-landing-page",
3+
"version": "1.0.0",
4+
"description": "A responsive landing page with Bootstrap 5.",
5+
"main": "index.js",
6+
"scripts": {
7+
"test": "echo \"Error: no test specified\" && exit 1"
8+
},
9+
"keywords": [],
10+
"repository": {
11+
"type": "git",
12+
"url": "git+https://github.com/solygambas/html-css-frameworks.git"
13+
},
14+
"author": "solygambas",
15+
"license": "ISC",
16+
"bugs": {
17+
"url": "https://github.com/solygambas/html-css-frameworks/issues"
18+
},
19+
"dependencies": {
20+
"bootstrap": "^5.0.2"
21+
}
22+
}

‎ebook-landing-page/sass/main.min.css‎

Lines changed: 7 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎ebook-landing-page/sass/main.min.css.map‎

Lines changed: 89 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎ebook-landing-page/sass/main.scss‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
// custom variable values
2+
$primary: #c29938;
3+
$light: #fbf5e5;
4+
5+
// import the functions & variables to access theme colors
6+
@import "../node_modules/bootstrap/scss/_functions";
7+
@import "../node_modules/bootstrap/scss/_variables";
8+
9+
$custom-theme-colors: (
10+
"altlight": #f2ebfa,
11+
"altdark": #522192,
12+
);
13+
14+
// merge the maps to add new theme colors
15+
$theme-colors: map-merge($custom-theme-colors, $theme-colors);
16+
17+
// import bootstrap
18+
@import "../node_modules/bootstrap/scss/bootstrap";

‎ebook-landing-page/screenshot.png‎

52.8 KB
Loading

0 commit comments

Comments
 (0)