Skip to content

Commit 87deaaf

Browse files
dr5hndr5hn
committed
feat: improvements
1 parent a9303fa commit 87deaaf

File tree

2 files changed

+134
-49
lines changed

2 files changed

+134
-49
lines changed

‎css/style.css‎

Lines changed: 134 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -262,15 +262,15 @@ img {
262262
intro
263263
---------------------------------*/
264264
.intro {
265-
padding-top: 140px;
265+
padding-top: 160px;
266266
padding-bottom: 100px;
267267
background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 40%, #fef3f2 100%);
268268
display: flex;
269269
align-items: center;
270270
}
271271

272272
.intro .content-text {
273-
padding-right: 30px;
273+
padding-right: 40px;
274274
}
275275

276276
.intro-image {
@@ -764,6 +764,11 @@ footer .cp {
764764
transition: all 0.3s ease;
765765
}
766766

767+
/* Adjust WhatsApp button position to avoid overlap with call button */
768+
.whatsapp-button {
769+
bottom: 100px !important;
770+
}
771+
767772
.mobile-call-button i {
768773
font-size: 24px;
769774
line-height: 60px;
@@ -800,13 +805,36 @@ footer .cp {
800805

801806
.intro {
802807
background: white;
808+
padding-top: 120px;
809+
padding-bottom: 80px;
810+
min-height: auto;
811+
}
812+
813+
.intro .content-text {
814+
padding-right: 20px;
815+
margin-bottom: 40px;
816+
}
817+
818+
/* Referral section tablet/mobile improvements */
819+
.referral-benefits {
820+
gap: 20px;
821+
flex-wrap: wrap;
822+
}
823+
824+
.benefit-item {
825+
flex: 1;
826+
min-width: 140px;
827+
}
828+
829+
.referral-box .button {
830+
margin-top: 15px;
803831
}
804832

805833
}
806834

807835
@media (max-width: 767px) {
808836
.space .button {
809-
margin-bottom: px;
837+
margin-bottom: 20px;
810838
}
811839

812840
.testimonial .swiper .content {
@@ -821,7 +849,55 @@ footer .cp {
821849
margin-top: -50px;
822850
}
823851

852+
.intro {
853+
padding-top: 140px;
854+
padding-bottom: 60px;
855+
}
856+
857+
.intro .content-text {
858+
padding-right: 0;
859+
margin-bottom: 50px;
860+
}
861+
862+
.intro-image {
863+
margin-top: 30px;
864+
}
865+
866+
/* Referral section tablet improvements */
867+
.referral {
868+
padding: 70px 0;
869+
}
870+
871+
.referral-box {
872+
padding: 40px 30px;
873+
}
874+
875+
.referral-benefits {
876+
gap: 25px;
877+
margin-bottom: 35px;
878+
}
879+
880+
.benefit-item i {
881+
font-size: 45px;
882+
}
883+
884+
.benefit-item h5 {
885+
font-size: 17px;
886+
}
887+
888+
.referral-box .button {
889+
padding: 15px 35px;
890+
font-size: 16px;
891+
}
892+
893+
/* Mobile buttons spacing for tablet */
894+
.whatsapp-button {
895+
bottom: 105px;
896+
}
824897

898+
.mobile-call-button {
899+
bottom: 25px;
900+
}
825901
}
826902

827903
@media (max-width: 575px) {
@@ -1096,10 +1172,11 @@ footer .cp {
10961172
}
10971173

10981174
@media (max-width: 991.98px) {
1099-
#navbar {
1175+
.navbar {
11001176
border-bottom: 1px solid #e5e5e5;
11011177
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
11021178
background: #fff;
1179+
padding: 15px 0;
11031180
}
11041181

11051182
.faq {
@@ -1147,6 +1224,8 @@ footer .cp {
11471224

11481225
.referral-box {
11491226
padding: 30px 20px;
1227+
border-radius: 15px;
1228+
margin: 0 10px;
11501229
}
11511230

11521231
.referral-box h2 {
@@ -1160,16 +1239,53 @@ footer .cp {
11601239
margin-bottom: 30px;
11611240
}
11621241

1242+
.referral-benefits {
1243+
flex-direction: column;
1244+
gap: 20px;
1245+
margin-bottom: 30px;
1246+
}
1247+
1248+
.benefit-item {
1249+
width: 100%;
1250+
max-width: 200px;
1251+
margin: 0 auto;
1252+
}
1253+
11631254
.benefit-item i {
11641255
font-size: 40px;
1256+
margin-bottom: 10px;
11651257
}
11661258

11671259
.benefit-item h5 {
11681260
font-size: 16px;
1261+
margin-bottom: 5px;
1262+
}
1263+
1264+
.benefit-item p {
1265+
font-size: 13px;
1266+
}
1267+
1268+
/* Hide the plus icon on mobile for better layout */
1269+
.benefit-item:nth-child(2) {
1270+
display: none;
1271+
}
1272+
1273+
.referral-box .button {
1274+
width: 100%;
1275+
max-width: 280px;
1276+
padding: 16px 20px;
1277+
font-size: 16px;
1278+
font-weight: 600;
11691279
}
11701280

11711281
.intro {
1172-
padding: 80px 0 60px;
1282+
padding: 120px 0 50px;
1283+
min-height: auto;
1284+
}
1285+
1286+
.intro .content-text {
1287+
padding-right: 0;
1288+
margin-bottom: 40px;
11731289
}
11741290

11751291
.intro h1 {
@@ -1229,10 +1345,22 @@ footer .cp {
12291345
.whatsapp-button {
12301346
width: 55px;
12311347
height: 55px;
1232-
bottom: 80px;
1348+
bottom: 95px;
12331349
right: 15px;
12341350
}
12351351

1352+
.mobile-call-button {
1353+
width: 55px;
1354+
height: 55px;
1355+
bottom: 15px;
1356+
right: 15px;
1357+
}
1358+
1359+
.mobile-call-button i {
1360+
font-size: 22px;
1361+
line-height: 55px;
1362+
}
1363+
12361364
.whatsapp-button i {
12371365
font-size: 28px;
12381366
}

‎index.html‎

Lines changed: 0 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -24,16 +24,6 @@
2424

2525
<body>
2626

27-
<!-- loader -->
28-
<div class="loader">
29-
<div class="loading">
30-
<div class="spinner-grow aloader" role="status">
31-
<span class="sr-only"></span>
32-
</div>
33-
</div>
34-
</div>
35-
<!-- end loader -->
36-
3727
<!-- navbar -->
3828
<div id="navbar" class="navbar navbar-expand-lg justify-content-center align-items-center">
3929
<div class="container">
@@ -98,39 +88,6 @@ <h1>Elevate Your Workday at SkyWork Borivali</h1>
9888
</div>
9989
<!-- end intro -->
10090

101-
<!-- social proof -->
102-
<div class="social-proof">
103-
<div class="container">
104-
<div class="row text-center">
105-
<div class="col-6 col-md-3">
106-
<div class="stat-item">
107-
<h3>5.0</h3>
108-
<p>⭐ Google Rating</p>
109-
</div>
110-
</div>
111-
<div class="col-6 col-md-3">
112-
<div class="stat-item">
113-
<h3>25+</h3>
114-
<p>Happy Members</p>
115-
</div>
116-
</div>
117-
<div class="col-6 col-md-3">
118-
<div class="stat-item">
119-
<h3>2 Min</h3>
120-
<p>From Station</p>
121-
</div>
122-
</div>
123-
<div class="col-6 col-md-3">
124-
<div class="stat-item">
125-
<h3>₹200</h3>
126-
<p>Starting Price</p>
127-
</div>
128-
</div>
129-
</div>
130-
</div>
131-
</div>
132-
<!-- end social proof -->
133-
13491
<!-- about -->
13592
<div id="about" class="about">
13693
<div class="container">

0 commit comments

Comments
 (0)