From 7c16b53376146ccd2ed7c6c9599f37dcfe20feea Mon Sep 17 00:00:00 2001 From: Aryan Bhandari Date: Fri, 2 Oct 2020 13:46:55 +0530 Subject: [PATCH] Added cool animation Added cool transition animation on nav bar and on learn more button , sign up button. --- css/style.css | 320 +++++++++++++++++++++++++++++--------------------- index.html | 119 ++++++++++--------- 2 files changed, 249 insertions(+), 190 deletions(-) diff --git a/css/style.css b/css/style.css index abfdabe..e179a87 100644 --- a/css/style.css +++ b/css/style.css @@ -1,184 +1,240 @@ /* resetting browser stuff */ -* { - box-sizing: border-box; + +* { + box-sizing: border-box; } + html, -body { - margin: 0; - padding: 0; - line-height: 1.5; - font-size: 16px; +body { + margin: 0; + padding: 0; + line-height: 1.5; + font-size: 16px; } + /* styling our overall page */ -body { - background: #FFF; - font-family: Arial, Helvetica, sans-serif; + +body { + background: #FFF; + font-family: Arial, Helvetica, sans-serif; } + /* styling our header */ -header { - background: #222; - color: #FFF; - padding: 20px 30px; + +header { + background: #222; + color: #FFF; + padding: 20px 30px; } + /* logo */ -#logo { - display: inline-block; - color: #FFF; - text-decoration: none; - width: 49%; + +#logo { + display: inline-block; + color: #FFF; + text-decoration: none; + width: 49%; } -#logo img { - width: 50px; - border-radius: 3px; - margin-right: 8px; - vertical-align: middle; + +#logo img { + width: 50px; + border-radius: 3px; + margin-right: 8px; + vertical-align: middle; } -#logo span { - display: inline-block; + +#logo span { + display: inline-block; } + /* main navigation */ -nav { - width: 50%; - display: inline-block; - text-align: right; + +nav { + width: 50%; + display: inline-block; + text-align: right; } -nav ul { - list-style: none; - margin: 0; + +nav ul { + list-style: none; + margin: 0; } + nav ul li { - display: inline-block; + display: inline-block; } -nav ul li a { - color: #FFF; - text-decoration: none; - display: block; - padding: 10px 15px; - border-radius: 3px; - transition: 0.3s ease all; + +.nav-link { + color: white; + text-decoration: none; + padding: 1rem; + font-weight: 600; + font-size: 18px; + letter-spacing: 0.1rem; } -nav ul li a:hover { - background: #444; + +.nav-item a:before { + content: ""; + position: absolute; + top: 8%; + width: 0; + height: 2px; + border-bottom: 2px solid greenyellow !important; + transition: all 0.3s linear; } +.nav-item a:hover:before { + width: 5%; +} + + /* styling our footer */ -footer { - background: #222; - color: #777; - padding: 40px; - text-align: center; + +footer { + background: #222; + color: #777; + padding: 40px; + text-align: center; } -footer img { - display: block; - border-radius: 5px; - width: 80px; - margin: 0 auto 10px; + +footer img { + display: block; + border-radius: 5px; + width: 80px; + margin: 0 auto 10px; } + /* styling our main content */ -.hero { - min-height: 800px; - text-align: center; - background-image: url('../img/sky.jpg'); - background-size: cover; -} -.hero-content { - color: #FFF; - padding-top: 130px; -} -.hero-content h1 { - font-size: 100px; - margin: 0; -} -.hero-content p { - font-size: 50px; -} -.hero-content a { - display: inline-block; - color: #FFF; - border: 3px solid #FFF; - border-radius: 3px; - padding: 15px 30px; - margin-right: 20px; - text-decoration: none; - font-size: 28px; + +.hero { + min-height: 800px; + text-align: center; + background-image: url('../img/sky.jpg'); + background-size: cover; } +.hero-content { + color: #FFF; + padding-top: 130px; +} + +.hero-content h1 { + font-size: 100px; + margin: 0; +} + +.hero-content p { + font-size: 50px; +} + +.hero-content a { + display: inline-block; + color: #FFF; + border: 3px solid #FFF; + border-radius: 3px; + padding: 15px 30px; + margin-right: 20px; + text-decoration: none; + font-size: 28px; + transition: 0.3s ease; +} + +.hero-content a:hover { + border: 3px solid greenyellow; + color: rgb(167, 167, 167); +} + + /* basic site sections */ -.site-section { - padding-bottom: 50px; - padding-top: 50px; + +.site-section { + padding-bottom: 50px; + padding-top: 50px; } -.site-section-secondary { - background: #EFEFEF; + +.site-section-secondary { + background: #EFEFEF; } -.site-section-inside { - width: 80%; - max-width: 1200px; - margin: 0 auto; + +.site-section-inside { + width: 80%; + max-width: 1200px; + margin: 0 auto; } + .section-header { - text-align: center; - margin-bottom: 30px; + text-align: center; + margin-bottom: 30px; } -.section-header h2 { - font-size: 30px; - letter-spacing: 2px; - text-transform: uppercase; - font-weight: 300; - color: #777; + +.section-header h2 { + font-size: 30px; + letter-spacing: 2px; + text-transform: uppercase; + font-weight: 300; + color: #777; } + /* feature boxes */ -.feature-box { - display: inline-block; - width: 33%; - padding: 20px 30px; + +.feature-box { + display: inline-block; + width: 33%; + padding: 20px 30px; } -.feature-box img { - margin-bottom: 12px; - width: 80px; + +.feature-box img { + margin-bottom: 12px; + width: 80px; } -.feature-box h5 { - font-size: 20px; - color: #999; - text-transform: uppercase; - font-weight: 300; - letter-spacing: 2px; - margin: 0; + +.feature-box h5 { + font-size: 20px; + color: #999; + text-transform: uppercase; + font-weight: 300; + letter-spacing: 2px; + margin: 0; } + /* testimonial boxes */ -.testimonial-box { - display: inline-block; - width: 33%; - padding: 20px 30px; -} -.testimonial-content { - background: #FFF; - padding: 15px; - border-radius: 4px; - margin-bottom: 15px; + +.testimonial-box { + display: inline-block; + width: 33%; + padding: 20px 30px; } -.testimonial-author { +.testimonial-content { + background: #FFF; + padding: 15px; + border-radius: 4px; + margin-bottom: 15px; } + +.testimonial-author {} + .testimonial-author img { - float: left; - width: 80px; - border-radius: 50%; - margin-right: 15px; - vertical-align: middle; + float: left; + width: 80px; + border-radius: 50%; + margin-right: 15px; + vertical-align: middle; } -.testimonial-author h5 { - font-size: 18px; - margin: 0; - padding-top:15px; + +.testimonial-author h5 { + font-size: 18px; + margin: 0; + padding-top: 15px; } + .testimonial-author span { - font-size: 14px; -} + font-size: 14px; +} \ No newline at end of file diff --git a/index.html b/index.html index 179d22e..bea552a 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,14 @@ + - + My Awesome Website + @@ -21,10 +23,10 @@ @@ -47,75 +49,75 @@

Here is Title

-
+
-
-

Key Features

-
+
+

Key Features

+
-
- Easy to Use -
Easy to Use
-

Just think of how easy this is to use. Toddlers can do it. So can you!

-
+
+ Easy to Use +
Easy to Use
+

Just think of how easy this is to use. Toddlers can do it. So can you!

+
-
- Fun to Use -
Fun to Use
-

Just think of how easy this is to use. Toddlers can do it. So can you!

-
+
+ Fun to Use +
Fun to Use
+

Just think of how easy this is to use. Toddlers can do it. So can you!

+
-
- Fun to Use -
You'll Love It
-

Just think of how easy this is to use. Toddlers can do it. So can you!

-
+
+ Fun to Use +
You'll Love It
+

Just think of how easy this is to use. Toddlers can do it. So can you!

+
-
+
-
+
-
-

What the people say

-
- -
-
- Their service is by far the most influential I've ever seen. -
-
- David East -
David East
- King of Firebase +
+

What the people say

-
-
-
- Their service is by far the most influential I've ever seen. -
-
- Holly Lloyd -
Holly Lloyd
- Queen of Scotch +
+
+ Their service is by far the most influential I've ever seen. +
+
+ David East +
David East
+ King of Firebase +
-
-
-
- Their service is by far the most influential I've ever seen. +
+
+ Their service is by far the most influential I've ever seen. +
+
+ Holly Lloyd +
Holly Lloyd
+ Queen of Scotch +
-
- Brad Green -
Brad Green
- King of Angular + +
+
+ Their service is by far the most influential I've ever seen. +
+
+ Brad Green +
Brad Green
+ King of Angular +
-
-
+
@@ -127,4 +129,5 @@
Brad Green
- + + \ No newline at end of file