From 7e23f8f9438ecd4565ac34fcfebb9cb73c654dc0 Mon Sep 17 00:00:00 2001 From: ryanzhxu Date: Mon, 5 Jul 2021 19:36:23 -0700 Subject: [PATCH 1/8] Added bootstrap, background color, and a container to web page. --- css/styles.css | 15 ++++ index.html | 184 ++++++++++++++++++++++++++++++------------------- 2 files changed, 127 insertions(+), 72 deletions(-) diff --git a/css/styles.css b/css/styles.css index e69de29b..c861bf17 100644 --- a/css/styles.css +++ b/css/styles.css @@ -0,0 +1,15 @@ + +#title { + background-color: #ff4c68; +} + +h1 { + font-family: "Montserrat", sans-serif; + font-size: 3rem; + line-height: 1.5; + font-weight: 900; +} + +.container-fluid { + padding: 3% 15%; +} diff --git a/index.html b/index.html index 5a19d4c7..094e727e 100644 --- a/index.html +++ b/index.html @@ -2,129 +2,169 @@ - - TinDog - + + TinDog + + + + + + + + + + + -
+
+
+ + + + + - + +
+
+

Meet new and interesting dogs nearby.

+ + +
+
+ iphone-mockup +
- +
-
-

Meet new and interesting dogs nearby.

- - -
-
- iphone-mockup -
+
-
+
- + -
+
-

Easy to use.

-

So easy to use, even your dog could do it.

+

Easy to use.

+

So easy to use, even your dog could do it.

-

Elite Clientele

-

We have all the dogs, the greatest dogs.

+

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.

+

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.

- dog-profile - Pebbles, New York +

I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.

+ dog-profile + Pebbles, New York - -
+
- + -
- tc-logo - tnw-logo - biz-insider-logo - mashable-logo +
+ tc-logo + tnw-logo + biz-insider-logo + mashable-logo -
+
- + -
+
-

A Plan for Every Dog's Needs

-

Simple and affordable price plans for your and your dog.

+

A Plan for Every Dog's Needs

+

Simple and affordable price plans for your and your dog.

-

Chihuahua

-

Free

-

5 Matches Per Day

-

10 Messages Per Day

-

Unlimited App Usage

- +

Chihuahua

+

Free

+

5 Matches Per Day

+

10 Messages Per Day

+

Unlimited App Usage

+ -

Labrador

-

$49 / mo

-

Unlimited Matches

-

Unlimited Messages

-

Unlimited App Usage

- +

Labrador

+

$49 / mo

+

Unlimited Matches

+

Unlimited Messages

+

Unlimited App Usage

+ -

Mastiff

-

$99 / mo

-

Pirority Listing

-

Unlimited Matches

-

Unlimited Messages

-

Unlimited App Usage

- +

Mastiff

+

$99 / mo

+

Pirority Listing

+

Unlimited Matches

+

Unlimited Messages

+

Unlimited App Usage

+ -
+
- + -
+
-

Find the True Love of Your Dog's Life Today.

- - +

Find the True Love of Your Dog's Life Today.

+ + -
+
- + - From 493126fb1731dc5f523596ccbce1e32845eb9682 Mon Sep 17 00:00:00 2001 From: ryanzhxu Date: Tue, 6 Jul 2021 11:44:45 -0700 Subject: [PATCH 2/8] Added color for buttons and icons from Font Awesome. --- index.html | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 094e727e..66746a74 100644 --- a/index.html +++ b/index.html @@ -5,13 +5,19 @@ TinDog + + + + + + @@ -55,8 +61,8 @@

Meet new and interesting dogs nearby.

- - + +
From b43127d8461cd799abe42c19e2f01609db5bf06a Mon Sep 17 00:00:00 2001 From: ryanzhxu Date: Tue, 6 Jul 2021 13:27:28 -0700 Subject: [PATCH 3/8] Changed navbar brand font to Ubuntu and repositioned paddings for navbar. --- css/styles.css | 36 ++++++++++++++++++++++++++++++++++-- index.html | 4 ++-- 2 files changed, 36 insertions(+), 4 deletions(-) diff --git a/css/styles.css b/css/styles.css index c861bf17..bddb0cac 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1,6 +1,14 @@ +body { + font-family: "Montserrat", sans-serif; +} #title { background-color: #ff4c68; + color: #fff; +} + +.container-fluid { + padding: 3% 15%; } h1 { @@ -10,6 +18,30 @@ h1 { font-weight: 900; } -.container-fluid { - padding: 3% 15%; +/* Navigation Bar */ + +.navbar { + padding: 0 0 4.5rem; +} + +.navbar-brand { + font-family: "Ubuntu"; + font-size: 2.5rem; + font-weight: bold; +} + +.nav-item { + padding: 0 18px; +} + +.nav-link { + font-size: 1.2rem; + font-family: "Montserrat"; + font-weight: 300; +} + +/* Download Buttons */ + +.download-button { + margin: 5% 3% 5% 0; } diff --git a/index.html b/index.html index 66746a74..3f65b59b 100644 --- a/index.html +++ b/index.html @@ -61,8 +61,8 @@

Meet new and interesting dogs nearby.

- - + +
From 1822622dc582958d94cff7bdd8d1a52e8ae11eda Mon Sep 17 00:00:00 2001 From: ryanzhxu Date: Tue, 6 Jul 2021 15:13:48 -0700 Subject: [PATCH 4/8] Added icons and center-aligned text in features. --- css/styles.css | 39 ++++++++++++++++++++++++++++++++++++++- index.html | 27 ++++++++++++++++++++------- 2 files changed, 58 insertions(+), 8 deletions(-) diff --git a/css/styles.css b/css/styles.css index bddb0cac..47a9dec4 100644 --- a/css/styles.css +++ b/css/styles.css @@ -13,11 +13,21 @@ body { h1 { font-family: "Montserrat", sans-serif; - font-size: 3rem; + font-size: 3.5rem; line-height: 1.5; font-weight: 900; } +h3 { + font-family: "Montserrat"; + font-size: 1.5rem; + font-weight: 700; +} + +p { + color: #8f8f8f; +} + /* Navigation Bar */ .navbar { @@ -45,3 +55,30 @@ h1 { .download-button { margin: 5% 3% 5% 0; } + +/* Title Image */ + +.title-image { + width: 60%; + transform: rotate(25deg); +} + +/* Features Section */ + +#features { + padding: 7% 15%; +} + +.feature-box { + text-align: center; + padding: 5%; +} + +.icon { + color: #ef8172; + margin-bottom: 1rem; +} + +.icon:hover { + color: #ff4c68; +} diff --git a/index.html b/index.html index 3f65b59b..85323b38 100644 --- a/index.html +++ b/index.html @@ -66,7 +66,7 @@

Meet new and interesting dogs nearby.

- iphone-mockup + iphone-mockup
@@ -80,14 +80,27 @@

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.

+
+ +

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.

+
+ +

Guaranteed to work.

+

Find the love of your dog's life or your money back.

+
+ +
From 31138e3b8978ea627151732f5d9a63fdc5d48ee4 Mon Sep 17 00:00:00 2001 From: ryanzhxu Date: Tue, 6 Jul 2021 16:10:21 -0700 Subject: [PATCH 5/8] Added card styling for pricing section. --- css/styles.css | 47 +++++++++++++++++++++ index.html | 112 ++++++++++++++++++++++++++++++++++++------------- 2 files changed, 130 insertions(+), 29 deletions(-) diff --git a/css/styles.css b/css/styles.css index 47a9dec4..2436005b 100644 --- a/css/styles.css +++ b/css/styles.css @@ -18,6 +18,13 @@ h1 { font-weight: 900; } +h2 { + font-family: "Montserrat"; + font-size: 3rem; + line-height: 1.5; + font-weight: 700; +} + h3 { font-family: "Montserrat"; font-size: 1.5rem; @@ -82,3 +89,43 @@ p { .icon:hover { color: #ff4c68; } + +/* Testimonial Section */ + +#testimonials { + text-align: center; + background-color: #ef8172; + color: #fff; +} + +.testimonial-image { + width: 10%; + border-radius: 100%; + margin: 20px; +} + +.carousel-item { + padding: 7% 15%; +} + +#press { + background-color: #ef8172; + text-align: center; + padding-bottom: 3%; +} + +.press-logo { + width: 15%; + margin: 20px 20px 50px; +} + +/* Pricing Section */ + +#pricing { + padding: 100px; + text-align: center; +} + +.pricing-column { + padding: 3% 2%; +} diff --git a/index.html b/index.html index 85323b38..f309192b 100644 --- a/index.html +++ b/index.html @@ -109,13 +109,35 @@

Guaranteed to work.

-

I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.

- dog-profile - Pebbles, New York + + + + -
@@ -123,10 +145,10 @@

I no longer have to sniff other dogs for love. I've found the hottest Corgi
- tc-logo - tnw-logo - biz-insider-logo - mashable-logo + + + +
@@ -138,30 +160,62 @@

I no longer have to sniff other dogs for love. I've found the hottest Corgi

A Plan for Every Dog's Needs

Simple and affordable price plans for your and your dog.

+
+ +
+
+
+

Chihuahua

+
+ +
+

Free

+

5 Matches Per Day

+

10 Messages Per Day

+

Unlimited App Usage

+ +
+
+
+ + +
+
+
+

Labrador

+
+ +
+

$49 / mo

+

Unlimited Matches

+

Unlimited Messages

+

Unlimited App Usage

+ +
+
+
-

Chihuahua

-

Free

-

5 Matches Per Day

-

10 Messages Per Day

-

Unlimited App Usage

- +
+
+
+

Mastiff

+
+ +
+

$99 / mo

+

Pirority Listing

+

Unlimited Matches

+

Unlimited Messages

+

Unlimited App Usage

+ +
+
+
-

Labrador

-

$49 / mo

-

Unlimited Matches

-

Unlimited Messages

-

Unlimited App Usage

- -

Mastiff

-

$99 / mo

-

Pirority Listing

-

Unlimited Matches

-

Unlimited Messages

-

Unlimited App Usage

- +
From 4966d353991aa6e5893da5cfbbbb6ebcecd36ba7 Mon Sep 17 00:00:00 2001 From: ryanzhxu Date: Tue, 6 Jul 2021 19:11:37 -0700 Subject: [PATCH 6/8] Used z-index in CSS to reposition title-image. --- css/styles.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/css/styles.css b/css/styles.css index 2436005b..6ec8d61b 100644 --- a/css/styles.css +++ b/css/styles.css @@ -68,12 +68,15 @@ p { .title-image { width: 60%; transform: rotate(25deg); + position: absolute; } /* Features Section */ #features { padding: 7% 15%; + background-color: #fff; + position: relative; } .feature-box { From b4ff9c19a6d2ac5456422d28ccadf2cceeebdf82 Mon Sep 17 00:00:00 2001 From: ryanzhxu Date: Wed, 7 Jul 2021 21:15:41 -0700 Subject: [PATCH 7/8] Added cta section and footer section. --- css/styles.css | 41 ++++++++++++++++++++++++++++++++++++++++- index.html | 11 ++++++++--- 2 files changed, 48 insertions(+), 4 deletions(-) diff --git a/css/styles.css b/css/styles.css index 6ec8d61b..271cd1a2 100644 --- a/css/styles.css +++ b/css/styles.css @@ -8,7 +8,7 @@ body { } .container-fluid { - padding: 3% 15%; + padding: 3% 15% 7%; } h1 { @@ -69,6 +69,7 @@ p { width: 60%; transform: rotate(25deg); position: absolute; + right: 30%; } /* Features Section */ @@ -132,3 +133,41 @@ p { .pricing-column { padding: 3% 2%; } + +/* CTA Section */ + +#cta { + background-color: #ff4c68; + color: #fff; + padding: 7% 15%; + text-align: center; +} + +.cta-heading { + font-family: "Montserrat"; + font-size: 3.5rem; + font-weight: 900; + line-height: 1.5; +} + +#footer { + padding: 7% 15%; + background-color: #fff; + text-align: center; +} + +.special-icon { + margin: 20px 10px; +} + +@media (max-width: 1028px) { + + #title { + text-align: center; + } + + .title-image { + position: static; + transform: rotate(0); + } +} diff --git a/index.html b/index.html index f309192b..3d680138 100644 --- a/index.html +++ b/index.html @@ -224,9 +224,9 @@

$99 / mo

-

Find the True Love of Your Dog's Life Today.

- - +

Find the True Love of Your Dog's Life Today.

+ +
@@ -235,6 +235,11 @@

Find the True Love of Your Dog's Life Today.

+ + + + +

© Copyright 2018 TinDog

From be5d88f23f640942063f9d2461f043913408d857 Mon Sep 17 00:00:00 2001 From: ryanzhxu Date: Mon, 26 Jul 2021 18:17:25 -0700 Subject: [PATCH 8/8] Added classes for sections to combine same styles across web page. --- css/styles.css | 101 +++++++++++++++++++++++++------------------------ index.html | 98 +++++++++++++++++++++++++++-------------------- 2 files changed, 108 insertions(+), 91 deletions(-) diff --git a/css/styles.css b/css/styles.css index 271cd1a2..30974c3b 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1,38 +1,46 @@ body { - font-family: "Montserrat", sans-serif; + font-family: "Montserrat"; + text-align: center; } -#title { - background-color: #ff4c68; - color: #fff; +h1, h2, h3, h4, h5, h6 { + font-family: "Montserrat"; + font-weight: 700; } -.container-fluid { - padding: 3% 15% 7%; +p { + color: #8f8f8f; } -h1 { - font-family: "Montserrat", sans-serif; +/* Headings */ + +.big-heading { + font-family: "Montserrat"; + font-weight: 900; font-size: 3.5rem; line-height: 1.5; - font-weight: 900; } -h2 { - font-family: "Montserrat"; +.section-heading { font-size: 3rem; line-height: 1.5; - font-weight: 700; } -h3 { - font-family: "Montserrat"; - font-size: 1.5rem; - font-weight: 700; +/* Container */ + +.container-fluid { + padding: 7% 15%; } -p { - color: #8f8f8f; +/* Sections */ + +.colored-section { + background-color: #ff4c68; + color: #fff; +} + +.white-section { + background-color: #fff; } /* Navigation Bar */ @@ -63,6 +71,13 @@ p { margin: 5% 3% 5% 0; } +/* Title Section */ + +#title .container-fluid { + padding: 3% 15% 7%; + text-align: left; +} + /* Title Image */ .title-image { @@ -75,14 +90,16 @@ p { /* Features Section */ #features { - padding: 7% 15%; - background-color: #fff; + position: relative; } +.feature-title { + font-size: 1.5rem; +} + .feature-box { - text-align: center; - padding: 5%; + padding: 4.5%; } .icon { @@ -97,9 +114,12 @@ p { /* Testimonial Section */ #testimonials { - text-align: center; background-color: #ef8172; - color: #fff; +} + +.testimonial-text { + font-size: 3rem; + line-height: 1.5; } .testimonial-image { @@ -108,13 +128,8 @@ p { margin: 20px; } -.carousel-item { - padding: 7% 15%; -} - #press { background-color: #ef8172; - text-align: center; padding-bottom: 3%; } @@ -127,7 +142,11 @@ p { #pricing { padding: 100px; - text-align: center; +} + +.price-text { + font-size: 3rem; + line-height: 1.5; } .pricing-column { @@ -136,30 +155,12 @@ p { /* CTA Section */ -#cta { - background-color: #ff4c68; - color: #fff; - padding: 7% 15%; - text-align: center; -} - -.cta-heading { - font-family: "Montserrat"; - font-size: 3.5rem; - font-weight: 900; - line-height: 1.5; -} - -#footer { - padding: 7% 15%; - background-color: #fff; - text-align: center; -} - .special-icon { margin: 20px 10px; } +/* Footer Section */ + @media (max-width: 1028px) { #title { diff --git a/index.html b/index.html index 3d680138..3789ebfc 100644 --- a/index.html +++ b/index.html @@ -25,7 +25,7 @@ -
+
@@ -42,13 +42,13 @@
@@ -60,7 +60,7 @@
-

Meet new and interesting dogs nearby.

+

Meet new and interesting dogs nearby.

@@ -78,26 +78,32 @@

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.

+
+ +
+ +

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.

+
+
@@ -107,18 +113,18 @@

Guaranteed to work.

-
+