32 |
52 |
33 |
48 |
34 | 
35 |
36 |
35 | The best fitness Gym in the town is here
37 |Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur 38 | error corporis fugit dolore adipisci aperiam omnis nisi dolores hic eius in ex id iure, ea 39 | sunt asperiores et voluptatibus dignissimos autem maiores molestias dolor rem delectus 40 | quidem! Inventore.
41 | 42 |The deal ends in
43 | 47 |
49 | 
50 |
51 |
50 | 54 |
Pricing
56 |Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi debitis provident 57 | suscipit temporibus modi voluptatem. Assumenda aspernatur ad nihil quasi expedita eligendi atque? 58 | Dolorum eum deserunt dicta iste beatae commodi, doloribus expedita hic recusandae, tempora illum 59 | consequuntur? Necessitatibus voluptate animi repellendus reiciendis!
60 |
61 |
96 |
62 |
72 | Free
63 |-
64 |
- ₹0/month 65 |
- 0 users included 66 |
- 2 GB of storage 67 |
- Email support 68 |
- Help center access 69 | 70 |
73 |
83 | Pro
74 |-
75 |
- ₹150/month 76 |
- 0 users included 77 |
- 2 GB of storage 78 |
- Email support 79 |
- Help center access 80 | 81 |
84 |
94 |
95 | Enterprise
85 |-
86 |
- ₹500/month 87 |
- 0 users included 88 |
- 2 GB of storage 89 |
- Email support 90 |
- Help center access 91 | 92 |
98 |
Compare Plans
100 |
101 |
102 |
103 |
151 |
152 |
153 | 154 | 157 | 158 |
159 |
160 |
161 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap');
2 |
3 | *{
4 | margin: 0;
5 | padding: 0;
6 | }
7 |
8 | .container{
9 | max-width: 80vw;
10 | font-family: 'Ubuntu', sans-serif;
11 | }
12 |
13 | .navbar{
14 | display: flex;
15 | height: 67px;
16 | }
17 | .navbar li{
18 | list-style: none;
19 | margin: 0 12px;
20 | }
21 |
22 | .topleft{
23 | width: 50%;
24 | }
25 |
26 | .topright{
27 | width: 50%;
28 | }
29 |
30 | .section1{
31 | max-height: 100vh;
32 | color: #711e15;
33 | }
34 |
35 | .section1 h1{
36 | color: #37110d;
37 | font-size: 2rem;
38 | }
39 |
40 | .logo{
41 | font-size: 1.3rem;
42 | }
43 |
44 | .dumbellimg{
45 | width: 289px;
46 | }
47 |
48 | .topright .gymimg{
49 | width: 466px;
50 | }
51 |
52 | .section2{
53 | padding: 73px;
54 | }
55 |
56 | .section2 h1{
57 | font-size: 2.3rem;
58 | }
59 |
60 | .section2 p{
61 | padding: 0 8vw;
62 | text-align: center;
63 | }
64 |
65 | .box{
66 | padding: 8px 0;
67 | margin: 12px 22px;
68 | min-width: 20vw;
69 | border: 2px solid rgb(120, 54, 16);
70 | border-radius: 8px;
71 | text-align: center;
72 | }
73 |
74 | .box h2{
75 | font-size: 2rem;
76 | padding: 15px 0;
77 | }
78 |
79 | .highlighted{
80 | font-size: 1.2rem;
81 | font-weight: bolder;
82 | }
83 |
84 | .box ul{
85 | list-style-type: none;
86 | }
87 |
88 | .box ul li{
89 | margin: 12px 2px;
90 | }
91 |
92 | .plantable{
93 | display: flex;
94 | justify-content: center;
95 | align-items: center;
96 | }
97 |
98 | .section3 table{
99 | width: 100%;
100 | margin-bottom: 140px;
101 | margin-top: 20px;
102 | border-collapse: collapse;
103 | }
104 |
105 | .section3 table th{
106 | width: 23vw;
107 | border-bottom: 2px solid black;
108 | padding: 15px 0;
109 | }
110 |
111 | .section3 table td{
112 | border-bottom: 2px solid black;
113 | }
114 |
115 |
116 | .section3 h1{
117 | font-size: 2.3rem;
118 | }
119 |
120 | .section3{
121 | padding: 73px;
122 | }
123 |
124 | footer{
125 | padding: 23px;
126 | text-align: center;
127 | }
128 | .buttons{
129 | display: flex;
130 | justify-content: center;
131 | align-items: center;
132 | margin: 12px;
133 | }
134 |
135 | .deal{
136 | font-size: 1.2rem;
137 | font-weight: bolder;
138 | margin: 12px 0;
139 | }
--------------------------------------------------------------------------------
/timer.js:
--------------------------------------------------------------------------------
1 |
2 |
3 | var countDownDate = new Date("Jun 5, 2022 15:37:25").getTime();
4 |
5 | var x = setInterval(function() {
6 |
7 | var now = new Date().getTime();
8 |
9 | var distance = countDownDate - now;
10 |
11 | var days = Math.floor(distance / (1000 * 60 * 60 * 24));
12 | var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
13 | var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
14 | var seconds = Math.floor((distance % (1000 * 60)) / 1000);
15 |
16 | document.getElementById("demo").innerHTML = days + "d " + hours + "h "
17 | + minutes + "m " + seconds + "s ";
18 |
19 | if (distance < 0) {
20 | clearInterval(x);
21 | document.getElementById("demo").innerHTML = "EXPIRED";
22 | }
23 | }, 1000);
--------------------------------------------------------------------------------
/utils.css:
--------------------------------------------------------------------------------
1 | .min-h-screen{
2 | min-height: 100vh;
3 | }
4 |
5 | .bg-red{
6 | background-color: red;
7 | }
8 |
9 | .mx-auto{
10 | margin-left: auto;
11 | margin-right: auto;
12 | }
13 |
14 | .flex{
15 | display: flex;
16 | }
17 |
18 | .items-center{
19 | align-items: center;
20 | }
21 |
22 | .justify-between{
23 | justify-content: space-between;
24 | }
25 |
26 | .justify-center{
27 | justify-content: center;
28 | }
29 |
30 | .flex-col{
31 | flex-direction: column;
32 | }
33 |
34 | .font-bold{
35 | font-weight: bolder;
36 | }
37 |
38 | .my-1{
39 | margin-top: 13px;
40 | margin-bottom: 13px;
41 | }
42 |
43 | .my-2{
44 | margin-top: 26px;
45 | margin-bottom: 26px;
46 | }
47 |
48 | .px-2{
49 | padding-left: 13px;
50 | padding-right: 13px;
51 | }
52 |
53 | .text-blue{
54 | color: rgb(227 74 56);;
55 | }
56 |
57 | .btn{
58 | padding:7px 12px;
59 | border: 2px solid white;
60 | border-radius: 6px;
61 | cursor: pointer;
62 | color: white;
63 | background-color: rgb(227 74 56);;
64 | }
65 |
66 | .overflow-x-hidden{
67 | overflow-x: hidden;
68 | }
69 |
70 | .text-center{
71 | text-align: center;
72 | }
--------------------------------------------------------------------------------
| Free | 105 |Pro | 106 |Enterprise | 107 ||
|---|---|---|---|
| Public | 112 |Yes | 113 |Yes | 114 |Yes | 115 |
| Private | 118 |- | 119 |Yes | 120 |Yes | 121 |
| Permissions | 127 |Yes | 128 |Yes | 129 |Yes | 130 |
| Sharing | 133 |- | 134 |Yes | 135 |Yes | 136 |
| Unlimited members | 139 |- | 140 |Yes | 141 |Yes | 142 |
| Extra security | 145 |- | 146 |- | 147 |Yes | 148 |
153 | 154 | 157 | 158 |