├── .gitignore
├── README.md
├── css
    └── styles.css
├── images
    ├── TechCrunch.png
    ├── bizinsider.png
    ├── dog-img.jpg
    ├── iphone6.png
    ├── lady-img.jpg
    ├── mashable.png
    └── tnw.png
└── index.html


/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | 
 6 | # testing
 7 | /coverage
 8 | 
 9 | # production
10 | /build
11 | 
12 | # misc
13 | .DS_Store
14 | .env.local
15 | .env.development.local
16 | .env.test.local
17 | .env.production.local
18 | 
19 | npm-debug.log*
20 | yarn-debug.log*
21 | yarn-error.log*
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Angela Yu Web Development - Intermediate Bootstrap
 2 | # HTML/CSS & Bootstrap - Tin Dog Website
 3 | 
 4 | - [About this project](#about)
 5 | - [Features](#features)
 6 | - [Requirements](#requirements)
 7 | - [Technical Information](#technical_information)
 8 | 
 9 | <a name="about"></a>
10 | ## About
11 | In this code along I refactored the provided starter files using
12 | HTML, CSS, and Bootstrap.
13 | 
14 | <a name="features"></a>
15 | ## Features
16 | - [x] HTML
17 | - [x] CSS
18 | - [x] Bootstrap
19 | 
20 | <a name="requirements"></a>
21 | ## Requirements
22 | - HTML
23 | - CSS
24 | - Bootstrap
25 | 
26 | <a name="technical_information"></a>
27 | ## Technical Information
28 | 
29 | To run the site on your local machine
30 | 
31 | 1. Download or clone the repository onto your machine.
32 | 2. Extract the .zip file.
33 | 3. Open .html file in your browser.
34 | 5. Alternatively you can click on the following [Site Link](https://jsoto3000.github.io/js-TinDog-Start-master/ "Site Link") to view.
35 | 


--------------------------------------------------------------------------------
/css/styles.css:
--------------------------------------------------------------------------------
  1 | /*
  2 | 
  3 | Code Refactoring
  4 | 
  5 | 1. Readability
  6 | 2. Modularity
  7 |   Allows you to drill down on a specifiv section ad figure out
  8 |   problems, or change a particular section, without affecting
  9 |   the rest of the website
 10 | 3. Effciiency
 11 | 4. Length
 12 | 
 13 | */
 14 | 
 15 | /*
 16 | 
 17 | Hierarchy over selectors:
 18 | 
 19 | 1. IDs (use them sparingly)
 20 | 2. Classes
 21 | 3. HTML Elements
 22 | 
 23 | Inline styles are more specific than internal or external css styles
 24 | (but avoid them at all costs)
 25 | 
 26 | Also last css rule has priority
 27 | 
 28 | */
 29 | 
 30 | 
 31 | body {
 32 |   font-family: "Montserrat";
 33 |   text-align: center;
 34 | }
 35 | 
 36 | h1, h2, h3, h4, h5, h6 {
 37 |   font-family: "Montserrat-Bold";
 38 | }
 39 | 
 40 | p {
 41 |   color: #8f8f8f;
 42 | }
 43 | 
 44 | /* Headings */
 45 | .big-heading {
 46 |   font-family: "Montserrat-Black";
 47 |   font-size: 3.5rem;
 48 |   line-height: 1.5;
 49 | }
 50 | 
 51 | .section-heading {
 52 |   font-size: 3rem;
 53 |   line-height: 1.5;
 54 | }
 55 | 
 56 | /* Containers */
 57 | .container-fluid {
 58 |   padding: 3% 15% 7%;
 59 | }
 60 | 
 61 | /* Sections */
 62 | .colored-section {
 63 |   background-color: #ff4c68;
 64 |   color: #fff;
 65 | }
 66 | 
 67 | .white-section {
 68 |   background-color: #fff;
 69 | }
 70 | 
 71 | /* Navigation Bar */
 72 | .navbar {
 73 |   padding: 0 0 4.5rem;
 74 | }
 75 | 
 76 | .navbar-brand {
 77 |   font-family: "Ubuntu";
 78 |   font-size: 2.5rem;
 79 |   font-weight: bold;
 80 | }
 81 | 
 82 | .nav-item {
 83 |   padding: 0 18px;
 84 | }
 85 | 
 86 | .nav-link {
 87 |   font-size: 1.2rem;
 88 |   font-family: "Montserrat-Light";
 89 | }
 90 | 
 91 | /* Buttons */
 92 | .download-button {
 93 |   margin: 5% 3% 5% 0;
 94 | }
 95 | 
 96 | /* Title Section */
 97 | 
 98 | #title {
 99 |   background-color: #ff4c68;
100 |   color: #fff;
101 |   text-align: left;
102 | }
103 | 
104 | /* Title Image */
105 | .title-image {
106 |   width: 60%;
107 |   transform: rotate(25deg);
108 |   position: absolute;
109 |   right: 15%;
110 | }
111 | 
112 | /* with space parent child hierarchical selectors read right to left */
113 | 
114 | /* no space read left to right with no hierarchy and no parent/child relationship */
115 | 
116 | #title .container-fluid {
117 |   padding: 3% 14% 7%;
118 | }
119 | 
120 | /* Features Section */
121 | #features {
122 |   position: relative;
123 |   background-color: #fff;
124 |   z-index: 1;
125 | }
126 | 
127 | .feature-title {
128 |   font-size: 1.5rem;
129 | }
130 | 
131 | .feature-box {
132 |   padding: 4.5%;
133 | }
134 | 
135 | .icon {
136 |   color: #ef8172;
137 |   margin-bottom: 1rem;
138 | }
139 | 
140 | .icon:hover {
141 |   color: #ff4c68;
142 | }
143 | 
144 | /* Testimonial Section */
145 | #testimonials {
146 |   background-color: #ef8172;
147 |   text-align: center;
148 | }
149 | 
150 | .testimonial-text {
151 |   font-size: 3rem;
152 |   line-height: 1.5;
153 | }
154 | 
155 | .testimonial-image {
156 |   width: 10%;
157 |   border-radius: 100%;
158 |   margin: 20px;
159 | }
160 | 
161 | #press {
162 |   background-color: #ef8172;
163 |   padding-bottom: 3%;
164 | }
165 | 
166 | .press-logo {
167 |   width: 15%;
168 |   margin: 20px 20px 50px;
169 | }
170 | 
171 | /* Pricing Section */
172 | #pricing {
173 |   padding: 100px;
174 |   text-align: center;
175 | }
176 | 
177 | .price-text {
178 |   font-size: 3rem;
179 |   line-height: 1.5;
180 | }
181 | 
182 | .pricing-column {
183 |   padding: 3% 2%;
184 | }
185 | 
186 | /* CTA Section */
187 | /* Footer Section */
188 | .social-icon {
189 |   margin: 20px 10px;
190 | }
191 | 
192 | /* @media <type> <feature> */
193 | 
194 | @media only screen and (max-width: 1028px) {
195 |   #title {
196 |     text-align: center;
197 |   }
198 | 
199 | 
200 |   .title-image {
201 |     position: static;
202 |     transform: rotate(0deg);
203 |   }
204 | }
205 | 
206 | 
207 | 
208 | /* Small devices (portrait tablets and large phones, 600px and up) */
209 | 
210 | /* @media only screen and (min-width: 600px) {
211 |   #title {
212 |     text-align: center;
213 |   }
214 | 
215 |   .title-image {
216 |     position: static;
217 |     transform: rotate(0deg);
218 |   }
219 | } */
220 | 
221 | 
222 | /* Extra small devices (phones, 600px and down) */
223 | 
224 | /* @media only screen and (max-width: 600px) {
225 |   #title {
226 |     text-align: center;
227 |   }
228 | 
229 |   .title-image {
230 |     position: static;
231 |     transform: rotate(0deg);
232 |   }
233 | } */
234 | 


--------------------------------------------------------------------------------
/images/TechCrunch.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsoto3000/js-TinDog-Start-master/f56d44483a6a6db2bce754a1a8d8f6edde87617e/images/TechCrunch.png


--------------------------------------------------------------------------------
/images/bizinsider.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsoto3000/js-TinDog-Start-master/f56d44483a6a6db2bce754a1a8d8f6edde87617e/images/bizinsider.png


--------------------------------------------------------------------------------
/images/dog-img.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsoto3000/js-TinDog-Start-master/f56d44483a6a6db2bce754a1a8d8f6edde87617e/images/dog-img.jpg


--------------------------------------------------------------------------------
/images/iphone6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsoto3000/js-TinDog-Start-master/f56d44483a6a6db2bce754a1a8d8f6edde87617e/images/iphone6.png


--------------------------------------------------------------------------------
/images/lady-img.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsoto3000/js-TinDog-Start-master/f56d44483a6a6db2bce754a1a8d8f6edde87617e/images/lady-img.jpg


--------------------------------------------------------------------------------
/images/mashable.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsoto3000/js-TinDog-Start-master/f56d44483a6a6db2bce754a1a8d8f6edde87617e/images/mashable.png


--------------------------------------------------------------------------------
/images/tnw.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsoto3000/js-TinDog-Start-master/f56d44483a6a6db2bce754a1a8d8f6edde87617e/images/tnw.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | 
  4 | <head>
  5 |   <meta charset="utf-8">
  6 |   <title>TinDog</title>
  7 | 
  8 |   <!-- Google Fonts -->
  9 |   <link href="https://fonts.googleapis.com/css?family=Montserrat|Ubuntu" rel="stylesheet">
 10 | 
 11 |   <!-- CSS Stylesheets -->
 12 |   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
 13 |   <link rel="stylesheet" href="css/styles.css">
 14 | 
 15 |   <!-- Font Awesome -->
 16 |   <script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
 17 | 
 18 |   <!-- Bootstrap Scripts -->
 19 |   <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
 20 |   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
 21 |   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
 22 | </head>
 23 | 
 24 | <body>
 25 | 
 26 |   <section class="colored-section" id="title">
 27 | 
 28 |     <div class="container-fluid">
 29 | 
 30 |       <!-- Nav Bar -->
 31 | 
 32 |       <nav class="navbar navbar-expand-lg navbar-dark">
 33 | 
 34 |         <a class="navbar-brand" href="">tindog</a>
 35 | 
 36 |         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02">
 37 |           <span class="navbar-toggler-icon"></span>
 38 |         </button>
 39 | 
 40 |         <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
 41 | 
 42 |           <ul class="navbar-nav ml-auto">
 43 |             <li class="nav-item">
 44 |               <a class="nav-link" href="#footer">Contact</a>
 45 |             </li>
 46 |             <li class="nav-item">
 47 |               <a class="nav-link" href="#pricing">Pricing</a>
 48 |             </li>
 49 |             <li class="nav-item">
 50 |               <a class="nav-link" href="#cta">Download</a>
 51 |             </li>
 52 |           </ul>
 53 | 
 54 |         </div>
 55 |       </nav>
 56 | 
 57 | 
 58 |       <!-- Title -->
 59 | 
 60 |       <div class="row">
 61 | 
 62 |         <div class="col-lg-6">
 63 |           <h1 class="big-heading">Meet new and interesting dogs nearby.</h1>
 64 |           <button type="button" class="btn btn-dark btn-lg download-button"><i class="fab fa-apple"></i> Download</button>
 65 |           <button type="button" class="btn btn-outline-light btn-lg download-button"><i class="fab fa-google-play"></i> Download</button>
 66 |         </div>
 67 | 
 68 |         <div class="col-lg-6">
 69 |           <img class="title-image" src="images/iphone6.png" alt="iphone-mockup">
 70 |         </div>
 71 | 
 72 |       </div>
 73 | 
 74 |     </div>
 75 | 
 76 |   </section>
 77 | 
 78 | 
 79 |   <!-- Features -->
 80 | 
 81 |   <section class="white-section" id="features">
 82 | 
 83 |     <div class="container-fluid">
 84 | 
 85 |       <div class="row">
 86 |         <div class="feature-box col-lg-4">
 87 |           <i class="icon fas fa-check-circle fa-4x"></i>
 88 |           <h3 class="feature-title">Easy to use.</h3>
 89 |           <p>So easy to use, even your dog could do it.</p>
 90 |         </div>
 91 | 
 92 |         <div class="feature-box col-lg-4">
 93 |           <i class="icon fas fa-bullseye fa-4x"></i>
 94 |           <h3 class="feature-title">Elite Clientele</h3>
 95 |           <p>We have all the dogs, the greatest dogs.</p>
 96 |         </div>
 97 | 
 98 |         <div class="feature-box col-lg-4">
 99 |           <i class="icon fas fa-heart fa-4x"></i>
100 |           <h3 class="feature-title">Guaranteed to work.</h3>
101 |           <p>Find the love of your dog's life or your money back.</p>
102 |         </div>
103 |       </div>
104 | 
105 | 
106 |     </div>
107 |   </section>
108 | 
109 | 
110 |   <!-- Testimonials -->
111 | 
112 |   <section class="colored-section" id="testimonials">
113 | 
114 |     <div id="testimonial-carousel" class="carousel slide" data-ride="carousel" data-interval="5000" data-pause="hover">
115 |       <div class="carousel-inner">
116 |         <div class="carousel-item active container-fluid">
117 |           <h2 class="testimonial-text">I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.</h2>
118 |           <img class="testimonial-image" src="images/dog-img.jpg" alt="dog-profile">
119 |           <em>Pebbles, New York</em>
120 |         </div>
121 |         <div class="carousel-item container-fluid">
122 |           <h2 class="testimonial-text">My dog used to be so lonely, but with TinDog's help, they've found the love of their life. I think.</h2>
123 |           <img class="testimonial-image" src="images/lady-img.jpg" alt="lady-profile">
124 |           <em>Beverly, Illinois</em>
125 |         </div>
126 |       </div>
127 |       <a class="carousel-control-prev" href="#testimonial-carousel" role="button" data-slide="prev">
128 |         <span class="carousel-control-prev-icon"></span>
129 |       </a>
130 |       <a class="carousel-control-next" href="#testimonial-carousel" role="button" data-slide="next">
131 |         <span class="carousel-control-next-icon"></span>
132 |       </a>
133 |     </div>
134 | 
135 |   </section>
136 | 
137 | 
138 |   <!-- Press -->
139 | 
140 |   <section class="colored-section" id="press">
141 |     <img class="press-logo" src="images/techcrunch.png" alt="tc-logo">
142 |     <img class="press-logo" src="images/tnw.png" alt="tnw-logo">
143 |     <img class="press-logo" src="images/bizinsider.png" alt="biz-insider-logo">
144 |     <img class="press-logo" src="images/mashable.png" alt="mashable-logo">
145 | 
146 |   </section>
147 | 
148 | 
149 |   <!-- Pricing -->
150 | 
151 |   <section class="white-section" id="pricing">
152 | 
153 |     <h2 class="section-heading">A Plan for Every Dog's Needs</h2>
154 |     <p>Simple and affordable price plans for your and your dog.</p>
155 | 
156 |     <div class="row">
157 | 
158 |       <div class="pricing-column col-lg-4 col-md-6">
159 |         <div class="card">
160 |           <div class="card-header">
161 |             <h3>Chihuahua</h3>
162 |           </div>
163 |           <div class="card-body">
164 |             <h2 class="price-text">Free</h2>
165 |             <p>5 Matches Per Day</p>
166 |             <p>10 Messages Per Day</p>
167 |             <p>Unlimited App Usage</p>
168 |             <button class="btn btn-lg btn-block btn-outline-dark" type="button">Sign Up</button>
169 |           </div>
170 |         </div>
171 |       </div>
172 | 
173 |       <div class="pricing-column col-lg-4 col-md-6">
174 |         <div class="card">
175 |           <div class="card-header">
176 |             <h3>Labrador</h3>
177 |           </div>
178 |           <div class="card-body">
179 |             <h2 class="price-text">$49 / mo</h2>
180 |             <p>Unlimited Matches</p>
181 |             <p>Unlimited Messages</p>
182 |             <p>Unlimited App Usage</p>
183 |             <button class="btn btn-lg btn-block btn-dark" type="button">Sign Up</button>
184 |           </div>
185 |         </div>
186 |       </div>
187 | 
188 |       <div class="pricing-column col-lg-4 col-md-12">
189 |         <div class="card">
190 |           <div class="card-header">
191 |             <h3>Mastiff</h3>
192 |           </div>
193 |           <div class="card-body">
194 |             <h2 class="price-text">$99 / mo</h2>
195 |             <p>Pirority Listing</p>
196 |             <p>Unlimited Matches</p>
197 |             <p>Unlimited Messages</p>
198 |             <p>Unlimited App Usage</p>
199 |             <button class="btn btn-lg btn-block btn-dark" type="button">Sign Up</button>
200 | 
201 |           </div>
202 |         </div>
203 |       </div>
204 | 
205 | 
206 | 
207 |     </div>
208 | 
209 |   </section>
210 | 
211 | 
212 |   <!-- Call to Action -->
213 | 
214 |   <section class="colored-section" id="cta">
215 | 
216 |     <div class="container-fluid">
217 | 
218 |       <h3 class="big-heading">Find the True Love of Your Dog's Life Today.</h3>
219 |       <button class="download-button btn btn-lg btn-dark" type="button"><i class="fab fa-apple"></i> Download</button>
220 |       <button class="download-button btn btn-lg brn-light" type="button"><i class="fab fa-google-play"></i> Download</button>
221 |     </div>
222 |   </section>
223 | 
224 | 
225 |   <!-- Footer -->
226 | 
227 |   <footer class="white-section" id="footer">
228 |     <div class="container-fluid">
229 |       <i class="social-icon fab fa-facebook-f"></i>
230 |       <i class="social-icon fab fa-twitter"></i>
231 |       <i class="social-icon fab fa-instagram"></i>
232 |       <i class="social-icon fas fa-envelope"></i>
233 |       <p>© Copyright 2018 TinDog</p>
234 |     </div>
235 |   </footer>
236 | 
237 | 
238 | </body>
239 | 
240 | </html>
241 | 


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