Added TinDog bootstrap website
This commit is contained in:
parent
e69391b7b3
commit
996f6d0d44
@ -0,0 +1,81 @@
|
|||||||
|
# TinDog Project
|
||||||
|
|
||||||
|
HINT: To fiure out which Bootstrap components/snippets are used. Refer to the PDF below:
|
||||||
|
https://github.com/appbrewery/tindog/blob/main/Bootstrap-snippets.pdf
|
||||||
|
|
||||||
|
## SVGs:
|
||||||
|
|
||||||
|
Apple Logo:
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
|
||||||
|
class="bi bi-apple mb-1" viewBox="0 0 16 16">
|
||||||
|
<path
|
||||||
|
d="M11.182.008C11.148-.03 9.923.023 8.857 1.18c-1.066 1.156-.902 2.482-.878 2.516.024.034 1.52.087 2.475-1.258.955-1.345.762-2.391.728-2.43Zm3.314 11.733c-.048-.096-2.325-1.234-2.113-3.422.212-2.189 1.675-2.789 1.698-2.854.023-.065-.597-.79-1.254-1.157a3.692 3.692 0 0 0-1.563-.434c-.108-.003-.483-.095-1.254.116-.508.139-1.653.589-1.968.607-.316.018-1.256-.522-2.267-.665-.647-.125-1.333.131-1.824.328-.49.196-1.422.754-2.074 2.237-.652 1.482-.311 3.83-.067 4.56.244.729.625 1.924 1.273 2.796.576.984 1.34 1.667 1.659 1.899.319.232 1.219.386 1.843.067.502-.308 1.408-.485 1.766-.472.357.013 1.061.154 1.782.539.571.197 1.111.115 1.652-.105.541-.221 1.324-1.059 2.238-2.758.347-.79.505-1.217.473-1.282Z" />
|
||||||
|
<path
|
||||||
|
d="M11.182.008C11.148-.03 9.923.023 8.857 1.18c-1.066 1.156-.902 2.482-.878 2.516.024.034 1.52.087 2.475-1.258.955-1.345.762-2.391.728-2.43Zm3.314 11.733c-.048-.096-2.325-1.234-2.113-3.422.212-2.189 1.675-2.789 1.698-2.854.023-.065-.597-.79-1.254-1.157a3.692 3.692 0 0 0-1.563-.434c-.108-.003-.483-.095-1.254.116-.508.139-1.653.589-1.968.607-.316.018-1.256-.522-2.267-.665-.647-.125-1.333.131-1.824.328-.49.196-1.422.754-2.074 2.237-.652 1.482-.311 3.83-.067 4.56.244.729.625 1.924 1.273 2.796.576.984 1.34 1.667 1.659 1.899.319.232 1.219.386 1.843.067.502-.308 1.408-.485 1.766-.472.357.013 1.061.154 1.782.539.571.197 1.111.115 1.652-.105.541-.221 1.324-1.059 2.238-2.758.347-.79.505-1.217.473-1.282Z" />
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
Google Play Logo:
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
|
||||||
|
class="bi bi-google-play mb-1" viewBox="0 0 16 16">
|
||||||
|
<path
|
||||||
|
d="M14.222 9.374c1.037-.61 1.037-2.137 0-2.748L11.528 5.04 8.32 8l3.207 2.96 2.694-1.586Zm-3.595 2.116L7.583 8.68 1.03 14.73c.201 1.029 1.36 1.61 2.303 1.055l7.294-4.295ZM1 13.396V2.603L6.846 8 1 13.396ZM1.03 1.27l6.553 6.05 3.044-2.81L3.333.215C2.39-.341 1.231.24 1.03 1.27Z" />
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
Checkmark:
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" height="30" fill="currentColor" class="bi bi-check2-circle"
|
||||||
|
viewBox="0 0 16 16">
|
||||||
|
<path
|
||||||
|
d="M2.5 8a5.5 5.5 0 0 1 8.25-4.764.5.5 0 0 0 .5-.866A6.5 6.5 0 1 0 14.5 8a.5.5 0 0 0-1 0 5.5 5.5 0 1 1-11 0z" />
|
||||||
|
<path
|
||||||
|
d="M15.354 3.354a.5.5 0 0 0-.708-.708L8 9.293 5.354 6.646a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0l7-7z" />
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
Hat:
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" height="30" fill="currentColor" class="bi bi-mortarboard" viewBox="0 0 16 16">
|
||||||
|
<path d="M8.211 2.047a.5.5 0 0 0-.422 0l-7.5 3.5a.5.5 0 0 0 .025.917l7.5 3a.5.5 0 0 0 .372 0L14 7.14V13a1 1 0 0 0-1 1v2h3v-2a1 1 0 0 0-1-1V6.739l.686-.275a.5.5 0 0 0 .025-.917l-7.5-3.5ZM8 8.46 1.758 5.965 8 3.052l6.242 2.913L8 8.46Z"/>
|
||||||
|
<path d="M4.176 9.032a.5.5 0 0 0-.656.327l-.5 1.7a.5.5 0 0 0 .294.605l4.5 1.8a.5.5 0 0 0 .372 0l4.5-1.8a.5.5 0 0 0 .294-.605l-.5-1.7a.5.5 0 0 0-.656-.327L8 10.466 4.176 9.032Zm-.068 1.873.22-.748 3.496 1.311a.5.5 0 0 0 .352 0l3.496-1.311.22.748L8 12.46l-3.892-1.556Z"/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
Heart:
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" height="30" fill="currentColor" class="bi bi-arrow-through-heart"
|
||||||
|
viewBox="0 0 16 16">
|
||||||
|
<path fill-rule="evenodd"
|
||||||
|
d="M2.854 15.854A.5.5 0 0 1 2 15.5V14H.5a.5.5 0 0 1-.354-.854l1.5-1.5A.5.5 0 0 1 2 11.5h1.793l.53-.53c-.771-.802-1.328-1.58-1.704-2.32-.798-1.575-.775-2.996-.213-4.092C3.426 2.565 6.18 1.809 8 3.233c1.25-.98 2.944-.928 4.212-.152L13.292 2 12.147.854A.5.5 0 0 1 12.5 0h3a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.854.354L14 2.707l-1.006 1.006c.236.248.44.531.6.845.562 1.096.585 2.517-.213 4.092-.793 1.563-2.395 3.288-5.105 5.08L8 13.912l-.276-.182a21.86 21.86 0 0 1-2.685-2.062l-.539.54V14a.5.5 0 0 1-.146.354l-1.5 1.5Zm2.893-4.894A20.419 20.419 0 0 0 8 12.71c2.456-1.666 3.827-3.207 4.489-4.512.679-1.34.607-2.42.215-3.185-.817-1.595-3.087-2.054-4.346-.761L8 4.62l-.358-.368c-1.259-1.293-3.53-.834-4.346.761-.392.766-.464 1.845.215 3.185.323.636.815 1.33 1.519 2.065l1.866-1.867a.5.5 0 1 1 .708.708L5.747 10.96Z" />
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
## Text:
|
||||||
|
|
||||||
|
Meet new and interesting dogs nearby.
|
||||||
|
|
||||||
|
Easy to use.
|
||||||
|
So easy to use, even your dog could do it.
|
||||||
|
|
||||||
|
Elite Clientele.
|
||||||
|
We have all the dogs, the greatest dogs.
|
||||||
|
|
||||||
|
Guaranteed to work.
|
||||||
|
Find the love of your dog's life or your money back.
|
||||||
|
|
||||||
|
"I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof."
|
||||||
|
Pebbles, New York
|
||||||
|
|
||||||
|
A Plan for Every Dog's Needs
|
||||||
|
Simple and affordable price plans for you and your dog.
|
||||||
|
|
||||||
|
Chihuahua
|
||||||
|
$0/mo
|
||||||
|
5 Matches Per Day
|
||||||
|
10 Messages Per Day
|
||||||
|
Unlimited App Usage
|
||||||
|
|
||||||
|
Labrador
|
||||||
|
$15/mo
|
||||||
|
Unlimited Matches
|
||||||
|
Unlimited Messages
|
||||||
|
Unlimited App Usage
|
||||||
|
|
||||||
|
Mastiff
|
||||||
|
$29/mo
|
||||||
|
Pirority Listing
|
||||||
|
Unlimited Matches & Messages
|
||||||
|
Unlimited App Usage
|
||||||
@ -0,0 +1,28 @@
|
|||||||
|
.gradient-background {
|
||||||
|
background: linear-gradient(300deg, #00bfff, #ff4c68, #ef8172);
|
||||||
|
background-size: 180% 180%;
|
||||||
|
animation: gradient-animation 18s ease infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes gradient-animation {
|
||||||
|
0% {
|
||||||
|
background-position: 0% 50%;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
background-position: 100% 50%;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
background-position: 0% 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-square {
|
||||||
|
width: 3rem;
|
||||||
|
height: 3rem;
|
||||||
|
border-radius: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-img {
|
||||||
|
border-radius: 50%;
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
@ -0,0 +1,28 @@
|
|||||||
|
.gradient-background {
|
||||||
|
background: linear-gradient(300deg, #00bfff, #ff4c68, #ef8172);
|
||||||
|
background-size: 180% 180%;
|
||||||
|
animation: gradient-animation 18s ease infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes gradient-animation {
|
||||||
|
0% {
|
||||||
|
background-position: 0% 50%;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
background-position: 100% 50%;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
background-position: 0% 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-square {
|
||||||
|
width: 3rem;
|
||||||
|
height: 3rem;
|
||||||
|
border-radius: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-img {
|
||||||
|
height: 100px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 189 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 200 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 322 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 303 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 392 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 209 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
@ -0,0 +1,236 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>TinDog</title>
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"
|
||||||
|
integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" href="./css/style.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!-- Title -->
|
||||||
|
<section id="title" class="gradient-background">
|
||||||
|
|
||||||
|
<div class="container col-xxl-8 px-4 pt-5">
|
||||||
|
<div class="row flex-lg-row-reverse align-items-center g-5 pt-5">
|
||||||
|
<div class="col-10 col-sm-8 col-lg-6">
|
||||||
|
<img src="./images/iphone.png" class="d-block mx-lg-auto img-fluid" alt="Bootstrap Themes" height="200" loading="lazy">
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-6">
|
||||||
|
<h1 class="display-5 fw-bold text-body-emphasis lh-1 mb-3">Meet new and interesting dogs nearby.</h1>
|
||||||
|
|
||||||
|
<div class="d-grid gap-2 d-md-flex justify-content-md-start">
|
||||||
|
<button type="button" class="btn btn-light btn-lg px-4 me-md-2"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-apple mb-1" viewBox="0 0 16 16">
|
||||||
|
<path d="M11.182.008C11.148-.03 9.923.023 8.857 1.18c-1.066 1.156-.902 2.482-.878 2.516.024.034 1.52.087 2.475-1.258.955-1.345.762-2.391.728-2.43Zm3.314 11.733c-.048-.096-2.325-1.234-2.113-3.422.212-2.189 1.675-2.789 1.698-2.854.023-.065-.597-.79-1.254-1.157a3.692 3.692 0 0 0-1.563-.434c-.108-.003-.483-.095-1.254.116-.508.139-1.653.589-1.968.607-.316.018-1.256-.522-2.267-.665-.647-.125-1.333.131-1.824.328-.49.196-1.422.754-2.074 2.237-.652 1.482-.311 3.83-.067 4.56.244.729.625 1.924 1.273 2.796.576.984 1.34 1.667 1.659 1.899.319.232 1.219.386 1.843.067.502-.308 1.408-.485 1.766-.472.357.013 1.061.154 1.782.539.571.197 1.111.115 1.652-.105.541-.221 1.324-1.059 2.238-2.758.347-.79.505-1.217.473-1.282Z"></path>
|
||||||
|
<path d="M11.182.008C11.148-.03 9.923.023 8.857 1.18c-1.066 1.156-.902 2.482-.878 2.516.024.034 1.52.087 2.475-1.258.955-1.345.762-2.391.728-2.43Zm3.314 11.733c-.048-.096-2.325-1.234-2.113-3.422.212-2.189 1.675-2.789 1.698-2.854.023-.065-.597-.79-1.254-1.157a3.692 3.692 0 0 0-1.563-.434c-.108-.003-.483-.095-1.254.116-.508.139-1.653.589-1.968.607-.316.018-1.256-.522-2.267-.665-.647-.125-1.333.131-1.824.328-.49.196-1.422.754-2.074 2.237-.652 1.482-.311 3.83-.067 4.56.244.729.625 1.924 1.273 2.796.576.984 1.34 1.667 1.659 1.899.319.232 1.219.386 1.843.067.502-.308 1.408-.485 1.766-.472.357.013 1.061.154 1.782.539.571.197 1.111.115 1.652-.105.541-.221 1.324-1.059 2.238-2.758.347-.79.505-1.217.473-1.282Z"></path>
|
||||||
|
</svg> Download</button>
|
||||||
|
<button type="button" class="btn btn-outline-light btn-lg px-4"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-google-play mb-1" viewBox="0 0 16 16">
|
||||||
|
<path d="M14.222 9.374c1.037-.61 1.037-2.137 0-2.748L11.528 5.04 8.32 8l3.207 2.96 2.694-1.586Zm-3.595 2.116L7.583 8.68 1.03 14.73c.201 1.029 1.36 1.61 2.303 1.055l7.294-4.295ZM1 13.396V2.603L6.846 8 1 13.396ZM1.03 1.27l6.553 6.05 3.044-2.81L3.333.215C2.39-.341 1.231.24 1.03 1.27Z"></path>
|
||||||
|
</svg> Download</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Features -->
|
||||||
|
<section id="features">
|
||||||
|
|
||||||
|
<div class="container mt-5">
|
||||||
|
<div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
|
||||||
|
<div class="col d-flex align-items-start">
|
||||||
|
<div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" height="30" fill="currentColor" class="bi bi-check2-circle" viewBox="0 0 16 16">
|
||||||
|
<path d="M2.5 8a5.5 5.5 0 0 1 8.25-4.764.5.5 0 0 0 .5-.866A6.5 6.5 0 1 0 14.5 8a.5.5 0 0 0-1 0 5.5 5.5 0 1 1-11 0z"></path>
|
||||||
|
<path d="M15.354 3.354a.5.5 0 0 0-.708-.708L8 9.293 5.354 6.646a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0l7-7z"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="fs-2">Easy to use.</h3>
|
||||||
|
<p>So easy to use, even your dog could do it.</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col d-flex align-items-start">
|
||||||
|
<div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" height="30" fill="currentColor" class="bi bi-mortarboard" viewBox="0 0 16 16">
|
||||||
|
<path d="M8.211 2.047a.5.5 0 0 0-.422 0l-7.5 3.5a.5.5 0 0 0 .025.917l7.5 3a.5.5 0 0 0 .372 0L14 7.14V13a1 1 0 0 0-1 1v2h3v-2a1 1 0 0 0-1-1V6.739l.686-.275a.5.5 0 0 0 .025-.917l-7.5-3.5ZM8 8.46 1.758 5.965 8 3.052l6.242 2.913L8 8.46Z"></path>
|
||||||
|
<path d="M4.176 9.032a.5.5 0 0 0-.656.327l-.5 1.7a.5.5 0 0 0 .294.605l4.5 1.8a.5.5 0 0 0 .372 0l4.5-1.8a.5.5 0 0 0 .294-.605l-.5-1.7a.5.5 0 0 0-.656-.327L8 10.466 4.176 9.032Zm-.068 1.873.22-.748 3.496 1.311a.5.5 0 0 0 .352 0l3.496-1.311.22.748L8 12.46l-3.892-1.556Z"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="fs-2">Elite Clientele.</h3>
|
||||||
|
<p>We have all the dogs, the greatest dogs.</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col d-flex align-items-start">
|
||||||
|
<div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" height="30" fill="currentColor" class="bi bi-arrow-through-heart" viewBox="0 0 16 16">
|
||||||
|
<path fill-rule="evenodd" d="M2.854 15.854A.5.5 0 0 1 2 15.5V14H.5a.5.5 0 0 1-.354-.854l1.5-1.5A.5.5 0 0 1 2 11.5h1.793l.53-.53c-.771-.802-1.328-1.58-1.704-2.32-.798-1.575-.775-2.996-.213-4.092C3.426 2.565 6.18 1.809 8 3.233c1.25-.98 2.944-.928 4.212-.152L13.292 2 12.147.854A.5.5 0 0 1 12.5 0h3a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.854.354L14 2.707l-1.006 1.006c.236.248.44.531.6.845.562 1.096.585 2.517-.213 4.092-.793 1.563-2.395 3.288-5.105 5.08L8 13.912l-.276-.182a21.86 21.86 0 0 1-2.685-2.062l-.539.54V14a.5.5 0 0 1-.146.354l-1.5 1.5Zm2.893-4.894A20.419 20.419 0 0 0 8 12.71c2.456-1.666 3.827-3.207 4.489-4.512.679-1.34.607-2.42.215-3.185-.817-1.595-3.087-2.054-4.346-.761L8 4.62l-.358-.368c-1.259-1.293-3.53-.834-4.346.761-.392.766-.464 1.845.215 3.185.323.636.815 1.33 1.519 2.065l1.866-1.867a.5.5 0 1 1 .708.708L5.747 10.96Z"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="fs-2">Guaranteed to work.</h3>
|
||||||
|
<p>Find the love of your dog's life or your money back.</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Testimonial -->
|
||||||
|
<section id="testimonial">
|
||||||
|
|
||||||
|
<div class="my-5">
|
||||||
|
<div class="p-5 text-center bg-body-tertiary">
|
||||||
|
<div class="container py-5">
|
||||||
|
<h2 class="text-body-emphasis">"I no longer have to sniff other dogs for love. I've found the hottest Corgi on
|
||||||
|
TinDog. Woof."</h2>
|
||||||
|
<img class="profile-img mt-5" src="./images/dog-img.jpg" alt="dog image">
|
||||||
|
<p class="col-lg-8 mx-auto lead mt-2">
|
||||||
|
Pebbles, New York
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-3 col-sm-12">
|
||||||
|
<img src="./images/techcrunch.png" alt="techcrunch" height="30">
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-3 col-sm-12">
|
||||||
|
<img src="./images/mashable.png" alt="mashable" height="30">
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-3 col-sm-12">
|
||||||
|
<img src="./images/bizinsider.png" alt="bizinsider" height="30">
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-3 col-sm-12">
|
||||||
|
<img src="./images/tnw.png" alt="tnw" height="30">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Pricing -->
|
||||||
|
<section id="pricing">
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="pricing-header p-3 pb-md-4 mx-auto text-center">
|
||||||
|
<h2 class="display-4 fw-normal">A Plan for Every Dog's Needs</h2>
|
||||||
|
<p class="fs-5 text-body-secondary">Simple and affordable price plans for you and your dog.
|
||||||
|
</p></div>
|
||||||
|
<div class="row row-cols-1 row-cols-md-3 mb-3 text-center">
|
||||||
|
<div class="col">
|
||||||
|
<div class="card mb-4 rounded-3 shadow-sm">
|
||||||
|
<div class="card-header py-3">
|
||||||
|
<h4 class="my-0 fw-normal">Chihuahua</h4>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<h1 class="card-title pricing-card-title">$0<small class="text-body-secondary fw-light">/mo</small></h1>
|
||||||
|
<ul class="list-unstyled mt-3 mb-4">
|
||||||
|
<li>5 Matches Per Day</li>
|
||||||
|
<li>10 Messages Per Day</li>
|
||||||
|
<li>Unlimited App Usage</li>
|
||||||
|
</ul>
|
||||||
|
<button type="button" class="w-100 btn btn-lg btn-outline-dark">Sign up for free</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="card mb-4 rounded-3 shadow-sm">
|
||||||
|
<div class="card-header py-3">
|
||||||
|
<h4 class="my-0 fw-normal">Labrador</h4>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<h1 class="card-title pricing-card-title">$15<small class="text-body-secondary fw-light">/mo</small></h1>
|
||||||
|
<ul class="list-unstyled mt-3 mb-4">
|
||||||
|
<li>Unlimited Matches</li>
|
||||||
|
<li>Unlimited Messages</li>
|
||||||
|
<li>Unlimited App Usage</li>
|
||||||
|
</ul>
|
||||||
|
<button type="button" class="w-100 btn btn-lg btn-dark">Get started</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="card mb-4 rounded-3 shadow-sm border-dark">
|
||||||
|
<div class="card-header py-3 text-bg-dark border-dark">
|
||||||
|
<h4 class="my-0 fw-normal">Mastiff</h4>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<h1 class="card-title pricing-card-title">$29<small class="text-body-secondary fw-light">/mo</small></h1>
|
||||||
|
<ul class="list-unstyled mt-3 mb-4">
|
||||||
|
<li>Pirority Listing</li>
|
||||||
|
<li>Unlimited Matches & Messages</li>
|
||||||
|
<li>Unlimited App Usage</li>
|
||||||
|
</ul>
|
||||||
|
<button type="button" class="w-100 btn btn-lg btn-dark">Contact us</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<section id="contact" class="gradient-background">
|
||||||
|
|
||||||
|
<footer class="row row-cols-1 row-cols-sm-2 row-cols-md-5 py-5 mt-5">
|
||||||
|
<div class="col mb-3">
|
||||||
|
|
||||||
|
<p class="text-body-secondary">© Tindog</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>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@ -0,0 +1,243 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>TinDog</title>
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"
|
||||||
|
integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" href="./css/solution.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Title -->
|
||||||
|
<section id="title" class="gradient-background">
|
||||||
|
|
||||||
|
<div class="container col-xxl-8 px-4 pt-5">
|
||||||
|
<div class="row flex-lg-row-reverse align-items-center g-5 pt-5">
|
||||||
|
<div class="col-10 col-sm-8 col-lg-6">
|
||||||
|
<img src="./images/iphone.png" class="d-block mx-lg-auto img-fluid" alt="Bootstrap Themes" height="200"
|
||||||
|
loading="lazy">
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-6">
|
||||||
|
<h1 class="display-5 fw-bold text-body-emphasis lh-1 mb-3">Meet new and interesting dogs nearby.</h1>
|
||||||
|
|
||||||
|
<div class="d-grid gap-2 d-md-flex justify-content-md-start">
|
||||||
|
<button type="button" class="btn btn-light btn-lg px-4 me-md-2"><svg xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="16" height="16" fill="currentColor" class="bi bi-apple mb-1" viewBox="0 0 16 16">
|
||||||
|
<path
|
||||||
|
d="M11.182.008C11.148-.03 9.923.023 8.857 1.18c-1.066 1.156-.902 2.482-.878 2.516.024.034 1.52.087 2.475-1.258.955-1.345.762-2.391.728-2.43Zm3.314 11.733c-.048-.096-2.325-1.234-2.113-3.422.212-2.189 1.675-2.789 1.698-2.854.023-.065-.597-.79-1.254-1.157a3.692 3.692 0 0 0-1.563-.434c-.108-.003-.483-.095-1.254.116-.508.139-1.653.589-1.968.607-.316.018-1.256-.522-2.267-.665-.647-.125-1.333.131-1.824.328-.49.196-1.422.754-2.074 2.237-.652 1.482-.311 3.83-.067 4.56.244.729.625 1.924 1.273 2.796.576.984 1.34 1.667 1.659 1.899.319.232 1.219.386 1.843.067.502-.308 1.408-.485 1.766-.472.357.013 1.061.154 1.782.539.571.197 1.111.115 1.652-.105.541-.221 1.324-1.059 2.238-2.758.347-.79.505-1.217.473-1.282Z" />
|
||||||
|
<path
|
||||||
|
d="M11.182.008C11.148-.03 9.923.023 8.857 1.18c-1.066 1.156-.902 2.482-.878 2.516.024.034 1.52.087 2.475-1.258.955-1.345.762-2.391.728-2.43Zm3.314 11.733c-.048-.096-2.325-1.234-2.113-3.422.212-2.189 1.675-2.789 1.698-2.854.023-.065-.597-.79-1.254-1.157a3.692 3.692 0 0 0-1.563-.434c-.108-.003-.483-.095-1.254.116-.508.139-1.653.589-1.968.607-.316.018-1.256-.522-2.267-.665-.647-.125-1.333.131-1.824.328-.49.196-1.422.754-2.074 2.237-.652 1.482-.311 3.83-.067 4.56.244.729.625 1.924 1.273 2.796.576.984 1.34 1.667 1.659 1.899.319.232 1.219.386 1.843.067.502-.308 1.408-.485 1.766-.472.357.013 1.061.154 1.782.539.571.197 1.111.115 1.652-.105.541-.221 1.324-1.059 2.238-2.758.347-.79.505-1.217.473-1.282Z" />
|
||||||
|
</svg> Download</button>
|
||||||
|
<button type="button" class="btn btn-outline-light btn-lg px-4"><svg xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="16" height="16" fill="currentColor" class="bi bi-google-play mb-1" viewBox="0 0 16 16">
|
||||||
|
<path
|
||||||
|
d="M14.222 9.374c1.037-.61 1.037-2.137 0-2.748L11.528 5.04 8.32 8l3.207 2.96 2.694-1.586Zm-3.595 2.116L7.583 8.68 1.03 14.73c.201 1.029 1.36 1.61 2.303 1.055l7.294-4.295ZM1 13.396V2.603L6.846 8 1 13.396ZM1.03 1.27l6.553 6.05 3.044-2.81L3.333.215C2.39-.341 1.231.24 1.03 1.27Z" />
|
||||||
|
</svg> Download</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- Features -->
|
||||||
|
<section id="features">
|
||||||
|
<div class="container mt-5">
|
||||||
|
<div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
|
||||||
|
<div class="col d-flex align-items-start">
|
||||||
|
<div
|
||||||
|
class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" height="30" fill="currentColor" class="bi bi-check2-circle"
|
||||||
|
viewBox="0 0 16 16">
|
||||||
|
<path
|
||||||
|
d="M2.5 8a5.5 5.5 0 0 1 8.25-4.764.5.5 0 0 0 .5-.866A6.5 6.5 0 1 0 14.5 8a.5.5 0 0 0-1 0 5.5 5.5 0 1 1-11 0z" />
|
||||||
|
<path
|
||||||
|
d="M15.354 3.354a.5.5 0 0 0-.708-.708L8 9.293 5.354 6.646a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0l7-7z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="fs-2">Easy to use.</h3>
|
||||||
|
<p>So easy to use, even your dog could do it.</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col d-flex align-items-start">
|
||||||
|
<div
|
||||||
|
class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" height="30" fill="currentColor" class="bi bi-mortarboard"
|
||||||
|
viewBox="0 0 16 16">
|
||||||
|
<path
|
||||||
|
d="M8.211 2.047a.5.5 0 0 0-.422 0l-7.5 3.5a.5.5 0 0 0 .025.917l7.5 3a.5.5 0 0 0 .372 0L14 7.14V13a1 1 0 0 0-1 1v2h3v-2a1 1 0 0 0-1-1V6.739l.686-.275a.5.5 0 0 0 .025-.917l-7.5-3.5ZM8 8.46 1.758 5.965 8 3.052l6.242 2.913L8 8.46Z" />
|
||||||
|
<path
|
||||||
|
d="M4.176 9.032a.5.5 0 0 0-.656.327l-.5 1.7a.5.5 0 0 0 .294.605l4.5 1.8a.5.5 0 0 0 .372 0l4.5-1.8a.5.5 0 0 0 .294-.605l-.5-1.7a.5.5 0 0 0-.656-.327L8 10.466 4.176 9.032Zm-.068 1.873.22-.748 3.496 1.311a.5.5 0 0 0 .352 0l3.496-1.311.22.748L8 12.46l-3.892-1.556Z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="fs-2">Elite Clientele.</h3>
|
||||||
|
<p>We have all the dogs, the greatest dogs.</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col d-flex align-items-start">
|
||||||
|
<div
|
||||||
|
class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" height="30" fill="currentColor" class="bi bi-arrow-through-heart"
|
||||||
|
viewBox="0 0 16 16">
|
||||||
|
<path fill-rule="evenodd"
|
||||||
|
d="M2.854 15.854A.5.5 0 0 1 2 15.5V14H.5a.5.5 0 0 1-.354-.854l1.5-1.5A.5.5 0 0 1 2 11.5h1.793l.53-.53c-.771-.802-1.328-1.58-1.704-2.32-.798-1.575-.775-2.996-.213-4.092C3.426 2.565 6.18 1.809 8 3.233c1.25-.98 2.944-.928 4.212-.152L13.292 2 12.147.854A.5.5 0 0 1 12.5 0h3a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.854.354L14 2.707l-1.006 1.006c.236.248.44.531.6.845.562 1.096.585 2.517-.213 4.092-.793 1.563-2.395 3.288-5.105 5.08L8 13.912l-.276-.182a21.86 21.86 0 0 1-2.685-2.062l-.539.54V14a.5.5 0 0 1-.146.354l-1.5 1.5Zm2.893-4.894A20.419 20.419 0 0 0 8 12.71c2.456-1.666 3.827-3.207 4.489-4.512.679-1.34.607-2.42.215-3.185-.817-1.595-3.087-2.054-4.346-.761L8 4.62l-.358-.368c-1.259-1.293-3.53-.834-4.346.761-.392.766-.464 1.845.215 3.185.323.636.815 1.33 1.519 2.065l1.866-1.867a.5.5 0 1 1 .708.708L5.747 10.96Z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="fs-2">Guaranteed to work.</h3>
|
||||||
|
<p>Find the love of your dog's life or your money back.</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- Testimonial -->
|
||||||
|
<section id="testimonial">
|
||||||
|
<div class="my-5">
|
||||||
|
<div class="p-5 text-center bg-body-tertiary">
|
||||||
|
<div class="container py-5">
|
||||||
|
<h2 class="text-body-emphasis">"I no longer have to sniff other dogs for love. I've found the hottest Corgi on
|
||||||
|
TinDog. Woof."</h2>
|
||||||
|
<img class="profile-img mt-5" src="./images/dog-img.jpg" alt="dog image">
|
||||||
|
<p class="col-lg-8 mx-auto lead mt-2">
|
||||||
|
Pebbles, New York
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-3 col-sm-12">
|
||||||
|
<img src="./images/techcrunch.png" alt="techcrunch" height="30">
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-3 col-sm-12">
|
||||||
|
<img src="./images/mashable.png" alt="mashable" height="30">
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-3 col-sm-12">
|
||||||
|
<img src="./images/bizinsider.png" alt="bizinsider" height="30">
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-3 col-sm-12">
|
||||||
|
<img src="./images/tnw.png" alt="tnw" height="30">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- Pricing -->
|
||||||
|
<section id="pricing">
|
||||||
|
<div class="container">
|
||||||
|
<div class="pricing-header p-3 pb-md-4 mx-auto text-center">
|
||||||
|
<h2 class="display-4 fw-normal">A Plan for Every Dog's Needs</h2>
|
||||||
|
<p class="fs-5 text-body-secondary">Simple and affordable price plans for you and your dog.
|
||||||
|
</div>
|
||||||
|
<div class="row row-cols-1 row-cols-md-3 mb-3 text-center">
|
||||||
|
<div class="col">
|
||||||
|
<div class="card mb-4 rounded-3 shadow-sm">
|
||||||
|
<div class="card-header py-3">
|
||||||
|
<h4 class="my-0 fw-normal">Chihuahua</h4>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<h1 class="card-title pricing-card-title">$0<small class="text-body-secondary fw-light">/mo</small></h1>
|
||||||
|
<ul class="list-unstyled mt-3 mb-4">
|
||||||
|
<li>5 Matches Per Day</li>
|
||||||
|
<li>10 Messages Per Day</li>
|
||||||
|
<li>Unlimited App Usage</li>
|
||||||
|
</ul>
|
||||||
|
<button type="button" class="w-100 btn btn-lg btn-outline-dark">Sign up for free</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="card mb-4 rounded-3 shadow-sm">
|
||||||
|
<div class="card-header py-3">
|
||||||
|
<h4 class="my-0 fw-normal">Labrador</h4>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<h1 class="card-title pricing-card-title">$15<small class="text-body-secondary fw-light">/mo</small></h1>
|
||||||
|
<ul class="list-unstyled mt-3 mb-4">
|
||||||
|
<li>Unlimited Matches</li>
|
||||||
|
<li>Unlimited Messages</li>
|
||||||
|
<li>Unlimited App Usage</li>
|
||||||
|
</ul>
|
||||||
|
<button type="button" class="w-100 btn btn-lg btn-dark">Get started</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="card mb-4 rounded-3 shadow-sm border-dark">
|
||||||
|
<div class="card-header py-3 text-bg-dark border-dark">
|
||||||
|
<h4 class="my-0 fw-normal">Mastiff</h4>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<h1 class="card-title pricing-card-title">$29<small class="text-body-secondary fw-light">/mo</small></h1>
|
||||||
|
<ul class="list-unstyled mt-3 mb-4">
|
||||||
|
<li>Pirority Listing</li>
|
||||||
|
<li>Unlimited Matches & Messages</li>
|
||||||
|
<li>Unlimited App Usage</li>
|
||||||
|
</ul>
|
||||||
|
<button type="button" class="w-100 btn btn-lg btn-dark">Contact us</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- Footer -->
|
||||||
|
<section id="contact" class="gradient-background">
|
||||||
|
<div class="container ">
|
||||||
|
<footer class="row row-cols-1 row-cols-sm-2 row-cols-md-5 py-5 mt-5 border-top">
|
||||||
|
<div class="col mb-3">
|
||||||
|
|
||||||
|
<p class="text-body-secondary">© Tindog</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>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user