From c616c650a47b365ab1d7c7eac722079e27159059 Mon Sep 17 00:00:00 2001 From: ashwin Date: Mon, 11 Oct 2021 14:16:08 +0530 Subject: [PATCH] added cool gradient animation in header and footer and fix some css --- index.html | 39 +++++++++++++++++++++------------ style.css | 63 ++++++++++++++++++++++++++++++++++++++++++++++-------- 2 files changed, 79 insertions(+), 23 deletions(-) diff --git a/index.html b/index.html index 963f1ca..16604b2 100644 --- a/index.html +++ b/index.html @@ -29,7 +29,8 @@

- Let's Do It
A Simple ToDo List WebApp + Let's Do It
A Simple ToDo + List WebApp

@@ -45,11 +46,12 @@

Add Items to The List

- +
- +
@@ -79,7 +81,8 @@

Completed Tasks

About

"Let's Do It!" is a simple ToDo List webapp created using JavaScript, HTML & - CSS

+ CSS. +

Contact
@@ -87,20 +90,26 @@

Completed Tasks

+91 123 456 7891
- Varun - Herlekar - Quotes - API: + + + Varun Herlekar + + + + Quotes API +
General Message
-
LET'S DO IT,
-
KickStart Your OpenSource Journey From Here.
-
- -
+
+ LET'S DO IT, +
+
+ KickStart Your OpenSource Journey From Here. +
+
🙂🙂🙂
Feedback
@@ -119,11 +128,13 @@

Completed Tasks

-

Copyright © 2021 @ OpenSource All rights reserved

+

Copyright © 2021 @ OpenSource All rights + reserved

+ \ No newline at end of file diff --git a/style.css b/style.css index 1cea17f..2aac5a6 100644 --- a/style.css +++ b/style.css @@ -4,7 +4,7 @@ html { body { font-size: 16px; min-height: 100vh; - cursor: url("favicon.ico"), default; + /* cursor: url("favicon.ico"), default; */ display: grid; grid-template-rows: auto 1fr auto; } @@ -17,16 +17,24 @@ header { background-color: #3a3a3a; color: white; padding-top: 0.5em; + + + background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); + background-size: 400% 400%; + animation: gradient 15s ease infinite; } + h1 { font-family: Poppins; text-align: center; + transition: all 0.6s cubic-bezier(0.075, 0.82, 0.165, 1); + font-family: 'Itim', cursive; + font-weight: bold; } h1:hover { color: rgb(205, 248, 244); letter-spacing: 0.01em; - transition: all 0.6s cubic-bezier(0.075, 0.82, 0.165, 1); } #txt-pop { color: turquoise; @@ -60,7 +68,9 @@ h5 { .important { background-color: #fbf71e; } - +.btn-1{ + /* cursor: pointer; */ +} /*footer styling*/ footer .footer-1 { @@ -68,8 +78,13 @@ footer .footer-1 { position: relative; bottom: 0; left: 0; - background: #111; + background: #000000; + + background: linear-gradient(-45deg, #127928, #71830b, #200d75, #800876); + background-size: 400% 400%; + animation: gradient 15s ease infinite; } + footer .content { max-width: 1350px; margin: auto; @@ -86,28 +101,43 @@ footer .content .box { width: 33%; transition: all 0.4s ease; } + + + + footer .content .topic { font-size: 22px; font-weight: 600; color: #fff; margin-bottom: 16px; - font-family: "Times New Roman", Times, serif; + font-family: 'Josefin Sans', sans-serif; + font-weight: bold; } footer .content p { text-align: justify; - font-family: "Cambria", Georgia, "Times New Roman", serif; + font-family: 'Josefin Sans', sans-serif; + font-weight: bold; + /* font-family: 'Itim', cursive; */ } footer .content .lower .topic { margin: 24px 0 5px 0; } + +footer .content .lower a { + padding-right: 10px; +} footer .content .lower i { - padding-right: 16px; + padding-right: 2px; } + footer .content .middle { padding-left: 80px; } -footer .content .middle a { - line-height: 32px; +footer .content .middle div a { + /* line-height: 5px; */ + font-family: 'Josefin Sans', sans-serif; + font-weight: 400; + margin-bottom: 100px; } footer .content .right input[type="text"] { height: 45px; @@ -169,6 +199,7 @@ footer a { } footer a:hover { color: #eb2f06; + text-decoration: none; } @media (max-width: 1100px) { footer .content .middle { @@ -232,3 +263,17 @@ li:last-child { margin-bottom: 8px; } } + +/* Animations */ + +@keyframes gradient { + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } + 100% { + background-position: 0% 50%; + } +} \ No newline at end of file