Skip to content

Commit 51d0036

Browse files
M-YasirGhaffarM-YasirGhaffar
committed
fixed text
1 parent 9a7cc69 commit 51d0036

File tree

3 files changed

+22
-115
lines changed

3 files changed

+22
-115
lines changed

‎assets/css/styles.css

+2-51
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,10 @@
11
/*=============== GOOGLE FONTS ===============*/
22
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");
33

4-
/* @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap'); */
5-
64
/*=============== VARIABLES CSS ===============*/
75
:root {
86
--header-height: 3.5rem;
97

10-
/*========== Colors ==========*/
11-
/*Color mode HSL(hue, saturation, lightness)*/
12-
/* --first-color: hsl(228, 66%, 53%);
13-
--first-color-alt: hsl(228, 66%, 47%);
14-
--first-color-light: hsl(228, 62%, 59%);
15-
--first-color-lighten: hsl(228, 100%, 97%);
16-
--second-color: hsl(25, 83%, 53%);
17-
--title-color: hsl(228, 57%, 28%);
18-
--text-color: hsl(228, 15%, 50%);
19-
--text-color-light: hsl(228, 12%, 75%);
20-
--border-color: hsl(228, 99%, 98%);
21-
--body-color: #fff;
22-
--container-color: #fff; */
23-
248
--first-color: hsl(30, 70%, 60%);
259
--first-color-alt: hsl(30, 70%, 45%);
2610
--first-color-light: hsl(30, 60%, 55%);
@@ -126,17 +110,6 @@ button {
126110

127111
/*========== Variables Dark theme ==========*/
128112
body.dark-theme {
129-
/* --first-color-alt: hsl(228, 66%, 47%); */
130-
/* --first-color-light: hsl(228, 62%, 59%); */
131-
/* --first-color-lighten: hsl(228, 100%, 97%); */
132-
/* --text-color-light: hsl(228, 12%, 75%); */
133-
/* --first-color: hsl(228, 66%, 62%);
134-
--second-color: hsl(25, 57%, 54%);
135-
--title-color: hsl(228, 8%, 95%);
136-
--text-color: hsl(228, 8%, 70%);
137-
--border-color: hsl(228, 16%, 14%);
138-
--body-color: hsl(228, 12%, 8%);
139-
--container-color: hsl(228, 16%, 12%); */
140113

141114
--first-color: hsl(30, 70%, 62%);
142115
--second-color: hsl(25, 57%, 54%);
@@ -234,7 +207,6 @@ body.dark-theme {
234207

235208
.main {
236209
overflow: hidden;
237-
/* For the animations ScrollReveal*/
238210
}
239211

240212
/*=============== HEADER & NAV ===============*/
@@ -408,7 +380,7 @@ nav {
408380
position: relative;
409381
display: flex;
410382
justify-content: center;
411-
bottom: -2rem;
383+
bottom: -4rem;
412384
}
413385

414386
.home__orbe {
@@ -654,7 +626,6 @@ nav {
654626
transition: all 0.3s ease;
655627
}
656628

657-
/*Rotate icon and add shadows*/
658629
.accordion-open {
659630
box-shadow: 0 12px 32px hsla(228, 66%, 45%, .1);
660631
transition: .4s;
@@ -673,7 +644,6 @@ nav {
673644
transition: rotate(-180deg);
674645
}
675646

676-
677647
/*=============== CONTACT ===============*/
678648
.contact__container {
679649
row-gap: 2rem;
@@ -766,9 +736,6 @@ nav {
766736
box-shadow: 0 8px 24px hsla(228, 66%, 45%, .1);
767737
}
768738

769-
770-
771-
772739
/*=============== SUBSCRIBE ===============*/
773740
.subscribe {
774741
padding: 2.5rem 0;
@@ -789,7 +756,7 @@ nav {
789756
}
790757

791758
.subscribe__description {
792-
color: var(--text-color);
759+
color: var(--first-color-lighten);
793760
font-size: var(--small-font-size);
794761
margin-bottom: 2rem;
795762
}
@@ -823,13 +790,6 @@ nav {
823790
font-size: 4rem;
824791
}
825792

826-
/* .links__intro {
827-
display: flex;
828-
flex-direction: column;
829-
justify-content: center;
830-
align-items: center;
831-
} */
832-
833793
.footer__description,
834794
.footer__link {
835795
font-size: var(--small-font-size);
@@ -1132,10 +1092,6 @@ nav {
11321092
display: none;
11331093
}
11341094

1135-
/* .nav__button {
1136-
display: inline-block;
1137-
} */
1138-
11391095
.active-link {
11401096
background: none;
11411097
box-shadow: none;
@@ -1200,10 +1156,6 @@ nav {
12001156
height: 100px;
12011157
}
12021158

1203-
/* .popular__container {
1204-
padding-top: 3rem;
1205-
} */
1206-
12071159
.popular__card {
12081160
width: 320px;
12091161
padding: .75rem .75rem 2rem;
@@ -1311,7 +1263,6 @@ nav {
13111263

13121264
}
13131265

1314-
13151266
@media screen and (min-width: 1040px) {
13161267
.container {
13171268
margin-left: auto;

‎assets/js/main.js

+3-41
Original file line numberDiff line numberDiff line change
@@ -33,17 +33,6 @@ const toggleItem = (item) => {
3333
accordionContent.style.height = accordionContent.scrollHeight + 'px'
3434
item.classList.add('accordion-open');
3535
}
36-
37-
38-
// /* Inside toggleItem function */
39-
// if (item.classList.contains('accordion-open')) {
40-
// accordionContent.style.maxHeight = '0';
41-
// item.classList.remove('accordion-open');
42-
// } else {
43-
// accordionContent.style.maxHeight = accordionContent.scrollHeight + 'px';
44-
// item.classList.add('accordion-open');
45-
// }
46-
4736
}
4837

4938
const accordionItems = document.querySelectorAll('.value__accordion-item')
@@ -56,38 +45,19 @@ accordionItems.forEach((item) => {
5645
if (openItem && openItem !==item) {
5746
toggleItem(openItem);
5847
}
59-
60-
// /* Inside accordionHeader.addEventListener */
61-
// const arrowIcon = accordionHeader.querySelector('.value__accordion-arrow i');
62-
// if (item.classList.contains('accordion-open')) {
63-
// arrowIcon.style.transform = 'rotate(180deg)';
64-
// } else {
65-
// arrowIcon.style.transform = 'rotate(0deg)';
66-
// }
67-
6848
});
6949
});
70-
71-
72-
73-
74-
75-
76-
77-
78-
7950
/*=============== SCROLL SECTIONS ACTIVE LINK ===============*/
8051
const sections = document.querySelectorAll('section[id]');
8152

8253
function scrollActive() {
83-
const scrollY = window.pageYOffset; // Use pageYOffset instead of pageXOffset
54+
const scrollY = window.pageYOffset;
8455

8556
sections.forEach((current) => {
8657
const sectionHeight = current.offsetHeight,
8758
sectionTop = current.offsetTop - 58,
8859
sectionId = current.getAttribute('id');
8960

90-
// Fix the typo in the variable name 'scroollY'
9161
if (scrollY > sectionTop && scrollY <= sectionTop + sectionHeight) {
9262
document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.add('active-link');
9363
} else {
@@ -111,12 +81,9 @@ function scrollUP() {
11181

11282
window.addEventListener('scroll', scrollUP);
11383

114-
// Attach click event listener to the scroll-up button
11584
const scrollUpButton = document.getElementById('scroll-up');
11685
scrollUpButton.addEventListener('click', (event) => {
117-
event.preventDefault(); // Prevent default anchor tag behavior
118-
119-
// Smoothly scroll to the top of the page (home section)
86+
event.preventDefault();
12087
window.scrollTo({
12188
top: 0,
12289
behavior: 'smooth'
@@ -126,22 +93,18 @@ scrollUpButton.addEventListener('click', (event) => {
12693

12794
/*=============== DARK LIGHT THEME ===============*/
12895

129-
13096
const themeButton = document.getElementById('theme-button');
13197
const darkTheme = 'dark-theme';
132-
const iconTheme = 'bx-sun'; // Corrected icon class
98+
const iconTheme = 'bx-sun';
13399

134-
// Function to toggle the theme
135100
const toggleTheme = () => {
136101
document.body.classList.toggle(darkTheme);
137102
themeButton.classList.toggle(iconTheme);
138103

139-
// Save the user's theme preference in local storage
140104
localStorage.setItem('selected-theme', document.body.classList.contains(darkTheme) ? 'dark' : 'light');
141105
localStorage.setItem('selected-icon', themeButton.classList.contains(iconTheme) ? 'bx bx-moon' : 'bx bx-sun');
142106
};
143107

144-
// Check user's preferred theme from local storage
145108
const selectedTheme = localStorage.getItem('selected-theme');
146109
const selectedIcon = localStorage.getItem('selected-icon');
147110

@@ -152,7 +115,6 @@ if (selectedTheme) {
152115

153116
themeButton.addEventListener('click', toggleTheme);
154117

155-
156118
document.querySelectorAll('.popup-enabled').forEach((element)=>{
157119
element.addEventListener('click', (event)=>{
158120
event.preventDefault();

‎index.html

+17-23
Original file line numberDiff line numberDiff line change
@@ -129,16 +129,14 @@ <h1 class="home__value-number">
129129
</div>
130130
</section>
131131

132-
133-
134132
<!--==================== POPULAR ====================-->
135133
<section class="popular section" id="popular">
136134
<div class="container">
137135
<span class="section__subtitle">
138136
Best Choice
139137
</span>
140138
<h2 class="section__title">
141-
Popular residences <span>.</span>
139+
Popular <span>residences.</span>
142140
</h2>
143141
<div class="popular__container swiper">
144142
<div class="swiper-wrapper">
@@ -243,7 +241,7 @@ <h3 class="popular__title">
243241
<div class="value__content">
244242
<div class="value__data">
245243
<span class="section__subtitle">Our Value</span>
246-
<h2 class="section__title">Value We Give To You <span>.</span></h2>
244+
<h2 class="section__title">Value We Give To <span>You.</span></h2>
247245
<p class="value__description">
248246
Lorem, ipsum dolor sit amet od?
249247
Lorem, ipsum dolor sit amet od?
@@ -358,26 +356,24 @@ <h3 class="value__accordion-title">
358356
<div class="contact__data">
359357
<span class="section__subtitle">Contact Us</span>
360358
<h2 class="section__title">
361-
Easy to Contact us<span>.</span>
359+
Easy to Contact <span>Us.</span>
362360
</h2>
363361
<p class="contact__description">
364-
If you liked this website
362+
If you liked this website please contact at Lorem ipsum dolor sit amet.
365363
</p>
366364
</div>
367365

368366
<div class="contact__card">
369367
<div class="contact__card-box">
370368
<div class="contact__card-info">
371-
<i class='bx bxs-down-arrow'></i>
369+
<i class='bx bxs-phone-incoming'></i>
372370
<div>
373371
<h3 class="contact__card-title">
374372
Phone Number
375373
</h3>
376374

377375
<p class="contact__card-description">
378-
Pakistan
379-
+923153216418
380-
9AM-5PM
376+
Lorem ipsum dolor sit.
381377
</p>
382378
</div>
383379
</div>
@@ -387,16 +383,14 @@ <h3 class="contact__card-title">
387383
</div>
388384
<div class="contact__card-box">
389385
<div class="contact__card-info">
390-
<i class='bx bxs-down-arrow'></i>
386+
<i class='bx bxs-bell'></i>
391387
<div>
392388
<h3 class="contact__card-title">
393389
Email
394390
</h3>
395391

396392
<p class="contact__card-description">
397-
example@
398-
gmail.com
399-
Typically Reply in 24hr-48hr
393+
Lorem ipsum dolor sit amet, consectetur.
400394
</p>
401395
</div>
402396
</div>
@@ -406,14 +400,14 @@ <h3 class="contact__card-title">
406400
</div>
407401
<div class="contact__card-box">
408402
<div class="contact__card-info">
409-
<i class='bx bxs-down-arrow'></i>
410-
<div>
403+
<i class='bx bx-envelope'></i>
404+
<div>
411405
<h3 class="contact__card-title">
412-
Lorem the Contact
406+
Land Line
413407
</h3>
414408

415409
<p class="contact__card-description">
416-
Accusantium qui in repudiandae unde! lul
410+
Accusantium qui in repudiandae unde
417411
</p>
418412
</div>
419413
</div>
@@ -423,14 +417,14 @@ <h3 class="contact__card-title">
423417
</div>
424418
<div class="contact__card-box">
425419
<div class="contact__card-info">
426-
<i class='bx bxs-down-arrow'></i>
420+
<i class='bx bxs-phone'></i>
427421
<div>
428422
<h3 class="contact__card-title">
429-
Lorem the Contact
423+
Other
430424
</h3>
431425

432426
<p class="contact__card-description">
433-
Loremdolor sitconsectetur adipisicing
427+
Accusantium qui in repudiandae unde
434428
</p>
435429
</div>
436430
</div>
@@ -462,7 +456,7 @@ <h1 class="subscribe__title">
462456
</main>
463457

464458
<!--==================== LOGOS ====================-->
465-
<section class="logos section">
459+
<!-- <section class="logos section">
466460
<div class="logos__container container grid">
467461
<div class="logos__img">
468462
<img src="assets/img/logo1.png" alt="">
@@ -477,7 +471,7 @@ <h1 class="subscribe__title">
477471
<img src="assets/img/logo4.png" alt="">
478472
</div>
479473
</div>
480-
</section>
474+
</section> -->
481475

482476
<!--==================== FOOTER ====================-->
483477
<footer class="footer section">

0 commit comments

Comments
 (0)