From 95af291fbd0dfc9b5760ba500d9e614dfbb55667 Mon Sep 17 00:00:00 2001 From: Eleos Date: Mon, 10 Jan 2022 21:48:13 +0100 Subject: [PATCH 1/2] added button hover effect --- css/style.css | 84 ++++++++++----------- index.html | 197 +++++++++++++++++++++++++------------------------- 2 files changed, 141 insertions(+), 140 deletions(-) diff --git a/css/style.css b/css/style.css index abfdabe..32bd042 100644 --- a/css/style.css +++ b/css/style.css @@ -1,9 +1,9 @@ /* resetting browser stuff */ -* { +* { box-sizing: border-box; } html, -body { +body { margin: 0; padding: 0; line-height: 1.5; @@ -11,68 +11,68 @@ body { } /* styling our overall page */ -body { - background: #FFF; +body { + background: #fff; font-family: Arial, Helvetica, sans-serif; } /* styling our header */ -header { +header { background: #222; - color: #FFF; + color: #fff; padding: 20px 30px; } /* logo */ -#logo { +#logo { display: inline-block; - color: #FFF; + color: #fff; text-decoration: none; width: 49%; } -#logo img { +#logo img { width: 50px; border-radius: 3px; margin-right: 8px; vertical-align: middle; } -#logo span { +#logo span { display: inline-block; } /* main navigation */ -nav { +nav { width: 50%; display: inline-block; text-align: right; } -nav ul { +nav ul { list-style: none; margin: 0; } nav ul li { display: inline-block; } -nav ul li a { - color: #FFF; +nav ul li a { + color: #fff; text-decoration: none; display: block; padding: 10px 15px; border-radius: 3px; transition: 0.3s ease all; } -nav ul li a:hover { +nav ul li a:hover { background: #444; } /* styling our footer */ -footer { +footer { background: #222; color: #777; padding: 40px; text-align: center; } -footer img { +footer img { display: block; border-radius: 5px; width: 80px; @@ -80,43 +80,47 @@ footer img { } /* styling our main content */ -.hero { +.hero { min-height: 800px; text-align: center; - background-image: url('../img/sky.jpg'); + background-image: url("../img/sky.jpg"); background-size: cover; } -.hero-content { - color: #FFF; +.hero-content { + color: #fff; padding-top: 130px; } -.hero-content h1 { +.hero-content h1 { font-size: 100px; margin: 0; } -.hero-content p { +.hero-content p { font-size: 50px; } -.hero-content a { +.hero-content a { display: inline-block; - color: #FFF; - border: 3px solid #FFF; + color: #fff; + border: 3px solid #fff; border-radius: 3px; padding: 15px 30px; margin-right: 20px; text-decoration: none; font-size: 28px; } +.hero-content a:hover { + background-color: #444; + transition: all 350ms ease; +} /* basic site sections */ -.site-section { +.site-section { padding-bottom: 50px; padding-top: 50px; } -.site-section-secondary { - background: #EFEFEF; +.site-section-secondary { + background: #efefef; } -.site-section-inside { +.site-section-inside { width: 80%; max-width: 1200px; margin: 0 auto; @@ -125,7 +129,7 @@ footer img { text-align: center; margin-bottom: 30px; } -.section-header h2 { +.section-header h2 { font-size: 30px; letter-spacing: 2px; text-transform: uppercase; @@ -134,16 +138,16 @@ footer img { } /* feature boxes */ -.feature-box { +.feature-box { display: inline-block; width: 33%; padding: 20px 30px; } -.feature-box img { +.feature-box img { margin-bottom: 12px; width: 80px; } -.feature-box h5 { +.feature-box h5 { font-size: 20px; color: #999; text-transform: uppercase; @@ -153,20 +157,18 @@ footer img { } /* testimonial boxes */ -.testimonial-box { +.testimonial-box { display: inline-block; width: 33%; padding: 20px 30px; } -.testimonial-content { - background: #FFF; +.testimonial-content { + background: #fff; padding: 15px; border-radius: 4px; margin-bottom: 15px; } -.testimonial-author { -} .testimonial-author img { float: left; width: 80px; @@ -174,10 +176,10 @@ footer img { margin-right: 15px; vertical-align: middle; } -.testimonial-author h5 { +.testimonial-author h5 { font-size: 18px; margin: 0; - padding-top:15px; + padding-top: 15px; } .testimonial-author span { font-size: 14px; diff --git a/index.html b/index.html index 179d22e..b78192f 100644 --- a/index.html +++ b/index.html @@ -1,130 +1,129 @@ - - + + My Awesome Website - - - - + + +
- - - - - - - + + + + +
- - -
- -
-

Here is Title

-

The best and most comprehensive website ever.

- - Learn More - Sign Up -
+ +
+ +
+

Here is Title

+

The best and most comprehensive website ever.

+ + Learn More + Sign Up
+
- -
+ +
- -
-

Key Features

-
- -
- 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 -
You'll Love It
-

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

-
- -
+
+

Key Features

+
+ +
+ 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 +
You'll Love It
+

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

+
+
- -
+ +
+
+

What the people say

+
-
-

What the people say

+
+
+ Their service is by far the most influential I've ever seen.
- -
-
- Their service is by far the most influential I've ever seen. -
-
- David East -
David East
- King of Firebase -
+
+ David East +
David East
+ King of Firebase
+
-
-
- 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.
- -
-
- Their service is by far the most influential I've ever seen. -
-
- Brad Green -
Brad Green
- King of Angular -
+
+ Holly Lloyd +
Holly Lloyd
+ Queen of Scotch
+
+
+
+ Their service is by far the most influential I've ever seen. +
+
+ Brad Green +
Brad Green
+ King of Angular +
+
-
- +
- - + From a0f78f703195c6d13c06ef7a58497128003804bb Mon Sep 17 00:00:00 2001 From: Eleos Date: Mon, 10 Jan 2022 22:30:04 +0100 Subject: [PATCH 2/2] back to top button --- css/style.css | 16 ++++++++++++++++ index.html | 3 +++ js/script.js | 18 ++++++++++++++++++ 3 files changed, 37 insertions(+) create mode 100644 js/script.js diff --git a/css/style.css b/css/style.css index 32bd042..d6db066 100644 --- a/css/style.css +++ b/css/style.css @@ -79,6 +79,22 @@ footer img { margin: 0 auto 10px; } +#myBtn { + display: none; + position: fixed; + bottom: 20px; + right: 30px; + z-index: 99; + border: none; + outline: none; + background-color: #232a3c; + color: white; + cursor: pointer; + padding: 15px; + border-radius: 10px; + font-size: 18px; +} + /* styling our main content */ .hero { min-height: 800px; diff --git a/index.html b/index.html index b78192f..97fabe0 100644 --- a/index.html +++ b/index.html @@ -124,6 +124,9 @@
Brad Green
Footer Logo My Website
Copyright © 2016-3010 +
+ + diff --git a/js/script.js b/js/script.js new file mode 100644 index 0000000..bb0906c --- /dev/null +++ b/js/script.js @@ -0,0 +1,18 @@ +myButton = document.getElementById("myBtn"); + +window.onscroll = function () { + scrollFunction(); +}; + +function scrollFunction() { + if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { + myButton.style.display = "block"; + } else { + myButton.style.display = "none"; + } +} + +function topFunction() { + document.body.scrollTop = 0; + document.documentElement.scrollTop = 0; +}