diff --git a/index.html b/index.html index 8bfa982..94d6cb5 100644 --- a/index.html +++ b/index.html @@ -7,43 +7,52 @@ HarryFitness - The best fitness gym in the town -
-
-
+
-
+

The best fitness Gym in the town is here

-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur +

Lorem ipsum dolor sit amet consectetur adipisicing elit. + Consequuntur error corporis fugit dolore adipisci aperiam omnis nisi dolores hic eius in ex id iure, ea sunt asperiores et voluptatibus dignissimos autem maiores molestias dolor rem delectus quidem! Inventore.

- -

The deal ends in

-
- - -
+ +

The deal ends in

+
+ + +
@@ -99,54 +108,55 @@

Enterprise

Compare Plans

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FreeProEnterprise
PublicYesYesYes
Private-YesYes
PermissionsYesYesYes
Sharing-YesYes
Unlimited members-YesYes
Extra security--Yes
FreeProEnterprise
PublicYesYesYes
Private-YesYes
PermissionsYesYesYes
Sharing-YesYes
Unlimited members-YesYes
Extra security--Yes
@@ -156,6 +166,13 @@

Compare Plans

+ + + + + + + \ No newline at end of file diff --git a/style.css b/style.css index 4415ec8..86a664d 100644 --- a/style.css +++ b/style.css @@ -1,139 +1,322 @@ -@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&family=Roboto:wght@300;400;500;700&family=Ubuntu:wght@300;400;500&display=swap'); -*{ +* { margin: 0; padding: 0; + font-family: 'Poppins', sans-serif; + font-family: 'Roboto', sans-serif; + font-family: 'Ubuntu', sans-serif; + transition: all 0.5s; + text-decoration: none; + list-style: none; } -.container{ +.container { max-width: 80vw; - font-family: 'Ubuntu', sans-serif; + position: relative; } -.navbar{ +.navbar { display: flex; + justify-content: flex-end; height: 67px; } -.navbar li{ - list-style: none; + +.navbar li a { + color: #37110d; margin: 0 12px; + cursor: pointer; + font-size: 1.2rem; + font-weight: 500; + transition: color 0.5s; } -.topleft{ +.navbar li a:hover { + color: rgb(227 74 56); +} + +.action .menu { + font-size: 2rem; + cursor: pointer; + display: none; +} + +.topleft { width: 50%; } -.topright{ +.topright { width: 50%; } -.section1{ - max-height: 100vh; - color: #711e15; +.section1 { + max-height: 100vh; + color: #711e15; } -.section1 h1{ +.section1 h1 { color: #37110d; font-size: 2rem; } -.logo{ +.logo h3 a { + color: rgb(227 74 56); +} + +.logo h3 { font-size: 1.3rem; + font-weight: bolder; + padding: 2px 8px; + border: 2px solid; + border-image: linear-gradient(to right, tomato 50%, gray 50%); + border-image-slice: 1; +} + +.logo h3 span { + color: gray; } -.dumbellimg{ +.dumbellimg { width: 289px; } -.topright .gymimg{ +.topright .gymimg { width: 466px; } -.section2{ +.section2 { padding: 73px; } -.section2 h1{ +.section2 h1 { font-size: 2.3rem; } -.section2 p{ +.section2 p { padding: 0 8vw; text-align: center; } -.box{ +.box { padding: 8px 0; margin: 12px 22px; min-width: 20vw; - border: 2px solid rgb(120, 54, 16); border-radius: 8px; text-align: center; + box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.2), -1px -1px 8px rgba(0, 0, 0, 0.2); +} + +.box:hover { + box-shadow: 2px 2px 12px rgb(227 74 56), -1px -1px 8px rgb(227 74 56); } -.box h2{ +.box h2 { font-size: 2rem; padding: 15px 0; } -.highlighted{ +.highlighted { font-size: 1.2rem; font-weight: bolder; } -.box ul{ +.box ul { list-style-type: none; } -.box ul li{ - margin: 12px 2px; +.box ul li { + margin: 12px 2px; } -.plantable{ +.plantable { display: flex; justify-content: center; align-items: center; } -.section3 table{ +.section3 table { width: 100%; margin-bottom: 140px; margin-top: 20px; border-collapse: collapse; } -.section3 table th{ - width: 23vw; +.section3 table th { + width: 23vw; border-bottom: 2px solid black; padding: 15px 0; -} +} + +.section3 table td { + border-bottom: 2px solid black; +} + +.topleft .desc { + font-weight: 500; + font-size: 1.1rem; +} -.section3 table td{ - border-bottom: 2px solid black; -} - +.deal #demo { + color: #2a93d5; + border: 1px solid rgba(0, 0, 0, 0.2); + padding: 5px; + border-radius: 4px; +} -.section3 h1{ +.section3 h1 { font-size: 2.3rem; } -.section3{ +.section3 { padding: 73px; } -footer{ +footer { padding: 23px; text-align: center; } -.buttons{ + +.buttons { display: flex; justify-content: center; align-items: center; - margin: 12px; + flex-wrap: wrap; +} + +.buttons button { + margin: 5px 8px; } -.deal{ +.deal { font-size: 1.2rem; font-weight: bolder; margin: 12px 0; -} \ No newline at end of file +} + +.nav { + position: relative; +} + + + +/* Media Query */ +@media screen and (max-width:768px) { + header nav { + padding: 10px; + } + + .action .menu { + display: flex; + margin-left: 15px; + } + + .nav .navbar { + position: absolute; + top: 70px; + left: 0; + right: 0; + border: 1px solid rgba(0, 0, 0, 0.2); + width: 40%; + margin: 0 auto; + height: auto; + padding: 20px 30px; + display: flex; + flex-direction: column; + background-color: whitesmoke; + box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.2), -1px -1px 8px rgba(0, 0, 0, 0.2); + border-radius: 4px; + opacity: 0; + margin-right: 0px; + } + + .nav .navbar.active { + opacity: 1; + } + + .nav .links li { + margin: 10px 0; + } + + .section1 .flex { + width: 100%; + } + + .section1 .contentbox { + height: auto; + width: 100%; + color: #711e15; + flex-wrap: wrap; + justify-content: center; + align-items: center; + margin: 20px auto; + } + + .section1 h1 { + color: #37110d; + font-size: 2rem; + } + + .topright img { + display: none; + } + + .section2 .flex { + flex-direction: column; + } + + .section2 p { + font-size: 1.2rem; + } +} + +@media screen and (max-width:400px) { + .logo h3 { + font-size: 1rem; + } + hr { + display: none; + } + .deal{ + display: flex; + flex-direction: column; + gap: 10px; + } + .section2{ + padding: 60px 0; + } + .section3{ + padding:10px 0; + margin:0; + } + main{ + padding: 0; + margin-bottom: -100px; + } +} + +@media screen and (max-width:350px) { + .logo h3 { + font-size: .8rem; + } + .dumbellimg { + width: 200px; + } + .section1 h1 { + font-size: 1.5rem; + } + .topleft .desc { + font-size: 1rem; + } + .section2 p{ + font-size: 1rem; + } + .section3 h1 { + font-size: 1.5rem; + } + .nav .navbar { + width: 55%; + } + .action button{ + font-size: .6rem; + } +} diff --git a/timer.js b/timer.js index aab6f9d..a7c2866 100644 --- a/timer.js +++ b/timer.js @@ -1,6 +1,6 @@ - -var countDownDate = new Date("Jun 5, 2022 15:37:25").getTime(); + +var countDownDate = new Date("Oct 25, 2023 15:37:25").getTime(); var x = setInterval(function() { @@ -13,11 +13,16 @@ var x = setInterval(function() { var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((distance % (1000 * 60)) / 1000); - document.getElementById("demo").innerHTML = days + "d " + hours + "h " - + minutes + "m " + seconds + "s "; + document.getElementById("demo").innerHTML = days + "d " + hours + "h " + + minutes + "m " + seconds + "s " + "🎉"; if (distance < 0) { clearInterval(x); - document.getElementById("demo").innerHTML = "EXPIRED"; + document.getElementById("demo").innerHTML = "EXPIRED 😥"; } -}, 1000); \ No newline at end of file +}, 1000); + +let menuicon = document.querySelector(".action #menu"); +menu.addEventListener('click',()=>{ + document.querySelector(".nav .navbar").classList.toggle('active'); +}) \ No newline at end of file diff --git a/utils.css b/utils.css index a298c9d..e7092bf 100644 --- a/utils.css +++ b/utils.css @@ -55,14 +55,19 @@ } .btn{ - padding:7px 12px; - border: 2px solid white; - border-radius: 6px; + padding:5px 12px; + border: 2px solid rgb(227 74 56); + border-radius: 4px; cursor: pointer; color: white; - background-color: rgb(227 74 56);; + background-color: rgb(227 74 56); + font-size: .9rem; + font-weight: 500; +} +.btn:hover{ + background-color: white; + color: rgb(227 74 56); } - .overflow-x-hidden{ overflow-x: hidden; }