├── images
    ├── tnw.png
    ├── dog-img.jpg
    ├── iphone6.png
    ├── lady-img.jpg
    ├── mashable.png
    ├── TechCrunch.png
    ├── bizinsider.png
    ├── page_image.png
    ├── page_image2.png
    ├── page_image3.png
    ├── page_image4.png
    └── page_image5.png
├── README.md
├── css
    └── styles.css
└── index.html


/images/tnw.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MelakuDemeke/tindog/HEAD/images/tnw.png


--------------------------------------------------------------------------------
/images/dog-img.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MelakuDemeke/tindog/HEAD/images/dog-img.jpg


--------------------------------------------------------------------------------
/images/iphone6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MelakuDemeke/tindog/HEAD/images/iphone6.png


--------------------------------------------------------------------------------
/images/lady-img.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MelakuDemeke/tindog/HEAD/images/lady-img.jpg


--------------------------------------------------------------------------------
/images/mashable.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MelakuDemeke/tindog/HEAD/images/mashable.png


--------------------------------------------------------------------------------
/images/TechCrunch.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MelakuDemeke/tindog/HEAD/images/TechCrunch.png


--------------------------------------------------------------------------------
/images/bizinsider.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MelakuDemeke/tindog/HEAD/images/bizinsider.png


--------------------------------------------------------------------------------
/images/page_image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MelakuDemeke/tindog/HEAD/images/page_image.png


--------------------------------------------------------------------------------
/images/page_image2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MelakuDemeke/tindog/HEAD/images/page_image2.png


--------------------------------------------------------------------------------
/images/page_image3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MelakuDemeke/tindog/HEAD/images/page_image3.png


--------------------------------------------------------------------------------
/images/page_image4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MelakuDemeke/tindog/HEAD/images/page_image4.png


--------------------------------------------------------------------------------
/images/page_image5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MelakuDemeke/tindog/HEAD/images/page_image5.png


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # tindog
 2 | [![OS - Linux](https://img.shields.io/badge/OS-Linux-blue?logo=linux&logoColor=white)](https://www.linux.org/ "Go to Linux homepage")
 3 | 
 4 | 
 5 | <h3 align="left">Languages and Tools:</h3>
 6 | <p align="left"> <a href="https://getbootstrap.com" target="_blank" rel="noreferrer"> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/bootstrap/bootstrap-plain-wordmark.svg" alt="bootstrap" width="40" height="40"/> </a> <a href="https://www.w3schools.com/css/" target="_blank" rel="noreferrer"> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/css3/css3-original-wordmark.svg" alt="css3" width="40" height="40"/> </a> <a href="https://www.w3.org/html/" target="_blank" rel="noreferrer"> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/html5/html5-original-wordmark.svg" alt="html5" width="40" height="40"/> </a> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank" rel="noreferrer"> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/javascript/javascript-original.svg" alt="javascript" width="40" height="40"/> </a> </p>
 7 | 
 8 | 
 9 | This is a simple frontend project which is built while learning full-stack web development by Dr.Angela yu the course is called  [The Complete 2022 Web Development Bootcamp](https://www.udemy.com/course/the-complete-web-development-bootcamp/) this is the best-seller course in web development on Udemy
10 | 
11 | ## In this project, I learn
12 | 1. basic HTML
13 | 2. basic CSS
14 |     - z-index
15 |     - combined selector
16 | 3. bootstrap
17 |     - carousel
18 |     - card
19 | 4. Media Query Breakpoints
20 | 
21 | ## A live link
22 | [click here to see the live web](https://melakudemeke.github.io/tindog/)
23 | 
24 | ## Result of the code
25 | ![site picture](images/page_image.png)
26 | ![site picture](images/page_image2.png)
27 | ![site picture](images/page_image3.png)
28 | ![site picture](images/page_image4.png)
29 | ![site picture](images/page_image5.png)


--------------------------------------------------------------------------------
/css/styles.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |   font-family: "Montserrat";
  3 | }
  4 | 
  5 | h1 {
  6 |   font-family: Montserrat;
  7 |   font-size: 3rem;
  8 |   line-height: 1.5;
  9 |   font-weight: 900;
 10 | }
 11 | 
 12 | h2 {
 13 |   font-family: Montserrat;
 14 |   font-size: 3rem;
 15 |   line-height: 1.5;
 16 | }
 17 | 
 18 | h3 {
 19 |   font-family: "Montserrat";
 20 |   font-weight: bold;
 21 |   font-size: 1.5rem;
 22 | }
 23 | 
 24 | #title {
 25 |   background-color: #ff4c68;
 26 |   color: white;
 27 | }
 28 | 
 29 | .container-fluid {
 30 |   padding: 3% 15% 7%;
 31 | }
 32 | 
 33 | /* Navigation bar */
 34 | .navbar {
 35 |   padding: 0 0 4.5rem;
 36 | }
 37 | 
 38 | .navbar-brand {
 39 |   font-family: "Ubuntu";
 40 |   font-size: 2.5rem;
 41 |   font-weight: bold;
 42 | }
 43 | 
 44 | .nav-item {
 45 |   padding: 0 18px;
 46 | }
 47 | 
 48 | .nav-link {
 49 |   font-size: 1.2rem;
 50 | }
 51 | 
 52 | /* download button */
 53 | .downloadbutton {
 54 |   margin: 5% 3% 5% 0;
 55 | }
 56 | 
 57 | /* features secton */
 58 | 
 59 | .featuresdiv {
 60 |   background-color: #fff;
 61 | }
 62 | 
 63 | .biggerfont {
 64 |   /* font-size: 50px; */
 65 |   color: #ef8172;
 66 |   margin-bottom: 1rem;
 67 | }
 68 | 
 69 | .biggerfont:hover {
 70 |   color: #ff4c68;
 71 | }
 72 | 
 73 | .seccontent {
 74 |   text-align: center;
 75 |   padding: 5%;
 76 | }
 77 | 
 78 | .subtex {
 79 |   color: #8f8f8f;
 80 | }
 81 | 
 82 | /* title image */
 83 | .title-image {
 84 |   width: 20%;
 85 |   transform: rotate(25deg);
 86 |   position: absolute;
 87 |   right: 30%;
 88 | }
 89 | 
 90 | #features {
 91 |   margin: 0% 15;
 92 |   padding-top: 5%;
 93 |   background-color: #fff;
 94 |   position: relative;
 95 |   z-index: 1;
 96 | }
 97 | 
 98 | /* Testimonial section */
 99 | #testimonials {
100 |   text-align: center;
101 |   background-color: #ef8172;
102 |   color: #fff;
103 | }
104 | 
105 | .testimonial-pic {
106 |   width: 10%;
107 |   border-radius: 100%;
108 |   margin: 20px;
109 | }
110 | 
111 | .carousel-item {
112 |   padding: 7% 15%;
113 | }
114 | 
115 | #press {
116 |   background-color: #ef8172;
117 |   padding-bottom: 20px;
118 |   text-align: center;
119 | }
120 | 
121 | .press-logo {
122 |   width: 15%;
123 |   margin: 20px 20px 50px;
124 | }
125 | 
126 | /* pricing section */
127 | #pricing {
128 |   padding: 100px;
129 |   text-align: center;
130 | }
131 | 
132 | .pricing-colum {
133 |   padding: 3% 2%;
134 | }
135 | 
136 | @media (max-width: 1028px) {
137 |   #title {
138 |     text-align: center;
139 |   }
140 | 
141 |   .title-image {
142 |     position: static;
143 |     transform: rotate(0);
144 |     width: 60%;
145 |   }
146 | }
147 | 
148 | /* cta section*/
149 | #cta {
150 |   background-color: #ff4c68;
151 |   text-align: center;
152 | }
153 | 
154 | .ctah3 {
155 |   color: #fff;
156 |   font-family: "Montserrat";
157 |   padding: 5% 15%;
158 |   padding-bottom: 0.5%;
159 |   font-size: 3rem;
160 | }
161 | 
162 | .ctabtn {
163 |   /* margin-bottom: 50px; */
164 |   margin: 5% 1%;
165 | }
166 | 
167 | /* footer section */
168 | #footer {
169 |   text-align: center;
170 |   padding: 2% 2%;
171 | }
172 | 
173 | .footericons {
174 |   padding-left: 1%;
175 |   padding-right: 1%;
176 | }
177 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | 
  4 | <head>
  5 |   <meta charset="utf-8">
  6 |   <title>TinDog</title>
  7 |   <!-- CSS only -->
  8 | 
  9 |   <!-- google fonts -->
 10 |   <link rel="preconnect" href="https://fonts.googleapis.com">
 11 |   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 12 |   <link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Ubuntu&display=swap" rel="stylesheet">
 13 | 
 14 |   <!-- bootstrap 5 -->
 15 |   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
 16 |     integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
 17 | 
 18 |   <!-- font awsome -->
 19 |   <script src="https://kit.fontawesome.com/094ef8f2c7.js" crossorigin="anonymous"></script>
 20 | 
 21 | 
 22 |   <!-- custom cdd -->
 23 |   <link rel="stylesheet" href="css/styles.css">
 24 | 
 25 | </head>
 26 | 
 27 | <body>
 28 | 
 29 |   <section id="title">
 30 |     <div class="container-fluid">
 31 |       <!-- Nav Bar -->
 32 |       <nav class="navbar navbar-expand-lg navbar-dark">
 33 |         <a class="navbar-brand" href="">tindog</a>
 34 | 
 35 |         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#homenavbar"
 36 |           aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
 37 |           <span class="navbar-toggler-icon"></span>
 38 |         </button>
 39 | 
 40 |         <div class="collapse navbar-collapse" id="homenavbar">
 41 | 
 42 |           <ul class="navbar-nav ms-auto">
 43 |             <li class="nav-item">
 44 |               <a class="nav-link" href="#footer">Contact</a>
 45 |             </li>
 46 | 
 47 |             <li class="nav-item">
 48 |               <a class="nav-link" href="#pricing">Pricing</a>
 49 |             </li>
 50 | 
 51 |             <li class="nav-item">
 52 |               <a class="nav-link" href="#cta">Download</a>
 53 |             </li>
 54 | 
 55 |           </ul>
 56 | 
 57 |         </div>
 58 |       </nav>
 59 |       <!-- Title -->
 60 | 
 61 | 
 62 |       <div class="row">
 63 |         <div class="col-lg-6">
 64 |           <h1>Meet new and interesting dogs nearby.</h1>
 65 |           <button type="button" class="btn btn-lg btn-dark downloadbutton"><i class="fa-brands fa-apple"></i>
 66 |             Download</button>
 67 |           <button type="button" class="btn btn-lg btn-outline-light downloadbutton"><i
 68 |               class="fa-brands fa-google-play"></i> Download</button>
 69 |         </div>
 70 |         <div class="col-lg-6">
 71 |           <img class="title-image" src="images/iphone6.png" alt="iphone-mockup">
 72 |         </div>
 73 |       </div>
 74 | 
 75 |     </div>
 76 | 
 77 |   </section>
 78 | 
 79 | 
 80 |   <!-- Features -->
 81 |   <section id="features">
 82 |     <div class="container">
 83 |       <div class="row">
 84 |         <div class="col-lg-4 seccontent">
 85 |           <i class="fa-solid fa-circle-check fa-4x biggerfont"></i>
 86 |           <h3>Easy to use.</h3>
 87 |           <p class="subtex">So easy to use, even your dog could do it.</p>
 88 |         </div>
 89 |         <div class="col-lg-4 seccontent">
 90 |           <i class="fa-solid fa-bullseye fa-4x biggerfont"></i>
 91 |           <h3>Elite Clientele</h3>
 92 |           <p class="subtex">We have all the dogs, the greatest dogs.</p>
 93 |         </div>
 94 |         <div class="col-lg-4 seccontent">
 95 |           <i class="fa-solid fa-heart fa-4x biggerfont"></i>
 96 |           <h3>Guaranteed to work.</h3>
 97 |           <p class="subtex">Find the love of your dog's life or your money back.</p>
 98 |         </div>
 99 |       </div>
100 |     </div>
101 |   </section>
102 | 
103 |   <!-- Testimonials -->
104 | 
105 |   <section id="testimonials">
106 | 
107 | 
108 |     <div id="testimonial-carousel" class="carousel slide" data-ride="false">
109 |       <div class="carousel-inner">
110 |         <div class="carousel-item active">
111 |           <h2>I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.</h2>
112 |           <img class="testimonial-pic" src="images/dog-img.jpg" alt="dog-profile">
113 |           <em>Pebbles, New York</em>
114 |         </div>
115 |      
116 |         <div class="carousel-item">
117 |           <h2>My dog used to be so lonely, but with TinDog's help, they've found the love of
118 |             their life. I think.</h2>
119 |           <img class="testimonial-pic" src="images/lady-img.jpg" alt="lady-profile">
120 |           <em>Beverly, Illinois</em>
121 |         </div>
122 |       </div>
123 |      
124 |       <button class="carousel-control-prev" type="button" data-bs-target="#testimonial-carousel" data-bs-slide="prev">
125 |         <span class="carousel-control-prev-icon"></span>
126 |       </button>
127 |      
128 |       <button class="carousel-control-next" type="button" data-bs-target="#testimonial-carousel" data-bs-slide="next">
129 |         <span class="carousel-control-next-icon"></span>
130 |       </button>
131 |     </div>
132 | 
133 |   </section>
134 | 
135 | 
136 |   <!-- Press -->
137 | 
138 |   <section id="press">
139 |     <img class="press-logo" src="images/TechCrunch.png" alt="tc-logo">
140 |     <img class="press-logo" src="images/tnw.png" alt="tnw-logo">
141 |     <img class="press-logo" src="images/bizinsider.png" alt="biz-insider-logo">
142 |     <img class="press-logo" src="images/mashable.png" alt="mashable-logo">
143 | 
144 |   </section>
145 | 
146 | 
147 |   <!-- Pricing -->
148 | 
149 |   <section id="pricing">
150 | 
151 |     <h2>A Plan for Every Dog's Needs</h2>
152 |     <p>Simple and affordable price plans for your and your dog.</p>
153 |     <div class="row ">
154 |       <div class="pricing-colum col col-lg-4 col-md-6 col-sm-12">
155 |         <div class="card">
156 |           <div class="card-header">
157 |             <h3>Chihuahua</h3>
158 |           </div>
159 |           <div class="card-body">
160 |             <h2>Free</h2>
161 |             <p>5 Matches Per Day</p>
162 |             <p>10 Messages Per Day</p>
163 |             <p>Unlimited App Usage</p>
164 |             <div class="d-grid ">
165 |               <button class="btn btn-lg  btn-outline-dark" type="button">Sign Up</button>
166 |             </div>
167 |           </div>
168 |         </div>
169 |       </div>
170 |       <div class="pricing-colum col col-lg-4 col-md-6 col-sm-12">
171 |         <div class="card">
172 |           <div class="card-header">
173 |             <h3>Labrador</h3>
174 |           </div>
175 |           <div class="card-body">
176 |             <h2>$49 / mo</h2>
177 |             <p>Unlimited Matches</p>
178 |             <p>Unlimited Messages</p>
179 |             <p>Unlimited App Usage</p>
180 |             <div class="d-grid gap-2">
181 |               <button class="btn btn-dark btn-lg" type="button">Sign Up</button>
182 |             </div>
183 |           </div>
184 |         </div>
185 |       </div>
186 |       <div class="pricing-colum col col-lg-4 col-sm-12">
187 |         <div class="card">
188 |           <div class="card-header">
189 |             <h3>Mastiff</h3>
190 |           </div>
191 |           <div class="card-body">
192 |             <h2>$99 / mo</h2>
193 |             <p>Pirority Listing</p>
194 |             <p>Unlimited Matches</p>
195 |             <p>Unlimited Messages</p>
196 |             <p>Unlimited App Usage</p>
197 |             <div class="d-grid gap-2">
198 |               <button class="btn btn-dark btn-lg" type="button">Sign Up</button>
199 |             </div>
200 |           </div>
201 |         </div>
202 |       </div>
203 | 
204 |     </div>
205 |   </section>
206 | 
207 | 
208 |   <!-- Call to Action -->
209 | 
210 |   <section id="cta">
211 | 
212 |     <h3 class="ctah3">Find the True Love of Your Dog's Life Today.</h3>
213 |     <button class="btn btn-lg btn-dark ctabtn " type="button"><i class="fa-brands fa-apple"></i> Download</button>
214 |     <button class="btn btn-lg btn-light ctabtn " type="button"><i class="fa-brands fa-google-play"></i> Download</button>
215 | 
216 |   </section>
217 | 
218 | 
219 |   <!-- Footer -->
220 | 
221 |   <footer id="footer">
222 | 
223 |     <p>
224 |       <i class="fa fa-twitter footericons" aria-hidden="true"></i>
225 |       <i class="fa fa-facebook footericons" aria-hidden="true"></i>
226 |       <i class="fa fa-instagram footericons" aria-hidden="true"></i>
227 |       <i class="fa fa-envelope footericons" aria-hidden="true"></i>
228 |     </p>
229 |     <p>© Copyright 2018 TinDog</p>
230 | 
231 |   </footer>
232 | 
233 |   <!-- JavaScript Bundle with Popper -->
234 |   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"
235 |     integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous">
236 |   </script>
237 | </body>
238 | 
239 | </html>


--------------------------------------------------------------------------------