Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
When I keep the features section, the "home.jpg" and the "home-sci" icons doesn't appear but if I remove the features section, the "home.jpg" and "home-sci" icons appeared correctly. What I need it, is keeping all of these sections but making the "home.jpg" and "home-sci" icons appear, can anyone help me? I couldn't figure out where the mistake in my codes
note: the location of image is correct, and I'm sure that I have provided the correct link source of the icons.
home.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MoTaha</title>
<link rel="icon" href="file:///C:/Users/HP/Pictures/Img/icon1.JPG">
<link rel="stylesheet" href="home.css">
<!-- box icons -->
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<!-- header design -->
<header class="header">
<a href="#" class="logo"> MoTaha <span class="animate" style="--i:1;"></span></a>
<div class="bx bx-menu" id="menu-icon">
<i class="fa-solid fa-bars" onclick="toggleMenu()"></i>
</div>
<nav class="navbar">
<a href="#home" class="active">Home</a>
<a href="#about">About</a>
<a href="#features">Features</a>
<a href="contact.html">Contact</a>
<button class="UIbtn"><a href="login.php">Log In</a></button>
<span class="active-nav"></span>
<span class="animate" style="--i:2;"></span>
</nav>
</header>
<!-- home section design -->
<section class="home show-animate" id="home">
<div class="home-content">
<h1> Math <span>with MoTaha</span><span class="animate" style="--i:2;"></span></h1>
<div class="text-animate">
<h3>Math Teacher 12Adv</h3>
<span class="animate" style="--i:3;"></span>
</div>
<p>We provide you with what you need to achieve optimal success in mathematics.</p>
<span class="animate" style="--i:4;"></span>
<div class="btn-box">
<a href="#" class="btn">To enroll</a>
<a href="#" class="btn">Watch the free lesson</a>
<a href="#" class="btn">Contact with us</a>
<span class="animate" style="--i:5;"></span>
</div>
</div>
<div class="home-sci">
<a href="https://wa.me/************"><i class='bx bxl-whatsapp'></i></a>
<a href="https://t.me/+************"><i class='bx bxl-telegram'></i></a>
<span class="animate" style="--i:6;"></span>
</div>
<div class="home-imgHover"></div>
<span class="animate home-img" style="--i:7;"></span>
</section>
<!-- features section design -->
<section class="features" id="features">
<h2 class="heading">Our <span>Features</span><span class="animate scroll" style="--i:1;"></span></h2>
<div class="features-row">
<div class="boxes_al-shadow">
<img src="file:///C:/Users/HP/Pictures/Img/presentation.png" alt="Icon 1" style="width: 60px;">
<h2>شروحات لايف + مسجلة</h2>
<p>إذا فاتتك الحصة يمكنك حضورها مسجلة</p>
</div>
<div class="boxes_al-shadow">
<img src="file:///C:/Users/HP/Pictures/Img/folder.png" alt="Icon 2" style="width: 60px;">
<h2>ملفات الشروحات</h2>
<p>كل ملف يُشرح منه سيتم إرفاقه على الموقع</p>
</div>
<div class="boxes_al-shadow">
<img src="file:///C:/Users/HP/Pictures/Img/writing.png" alt="Icon 3" style="width: 60px;">
<h2>أوراق عمل واختبارات إلكترونية</h2>
<p>درب نفسك لتحصل على نتائج أفضل</p>
</div>
</div>
<div class="features-row">
<div class="boxes_al-shadow">
<img src="file:///C:/Users/HP/Pictures/Img/chat.png" alt="Icon 4" style="width: 60px;">
<h2>مجموعات تفاعلية</h2>
<p>في حالة وجود أي استفسارات</p>
</div>
<div class="boxes_al-shadow">
<img src="file:///C:/Users/HP/Pictures/Img/graduation-hat.png" alt="Icon 5" style="width: 60px;">
<h2>تحصيل الأفضل</h2>
<p>معك حتى تنجح</p>
</div>
</div>
<span class="animate scroll" style="--i:3;"></span>
</section>
<!-- footer design -->
<footer class="footer">
<div class="footer-text">
<p>Copyright © 2024 by MoTaha | All Rights Reserved.</p>
</div>
<div class="footer-iconTop">
<a href="#"><i class='bx bx-up-arrow-alt'></i></a>
</div>
</footer>
<script src="JS.js"></script>
</body>
</html>
home.css :
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
border: none;
outline: none;
scroll-behavior: smooth;
font-family: 'Poppins', sans-serif;
}
:root {
--bg-color: #081b29;
--second-bg-color: #112e42;
--text-color: #ededed;
--main-color: #00abf0;
--bg-majorella: hsl(249, 95%, 63%, 0.05);
--red-salsa: hsl(357, 94%, 63%, 0.05);
--bg-chrome: hsl(40, 100%, 50%, 0.05);
--text-gun: hsl(209, 40%, 14%);
--weight-semiBold: 600;
--radius-20: 20px;
}
html {
font-size: 62.5%;
overflow-x: hidden;
}
body {
background: var(--bg-color);
color: var(--text-color);
font-family: sans-serif;
}
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 2rem 9%;
background: transparent;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 100;
transition: .3s;
}
.header.sticky {
background: var(--bg-color);
}
.logo {
position: relative;
font-size: 2.5rem;
color: var(--text-color);
font-weight: 600;
}
.navbar {
position: relative;
}
.navbar a {
font-size: 1.7rem;
color: var(--text-color);
font-weight: 500;
margin-left: 3.5rem;
transition: .3s;
}
.navbar a:hover,
.navbar a.active {
color: var(--main-color);
}
.UIbtn {
display: inline-block;
width: 11.5rem;
cursor: pointer;
position: relative;
justify-content: center;
align-items: center;
text-align: center;
height: 100%;
background: var(--second-bg-color);
border: .2rem solid var(--bg-color);
border-radius: .8rem;
font-size: 1.8rem;
font-weight: 600;
letter-spacing: .1rem;
color: var(--bg-color);
z-index: 1;
overflow: hidden;
transition: .5s;
}
.UIbtn a {
font-size: 1.8rem;
font-weight: 600;
letter-spacing: .1rem;
align-items: center;
text-align: center;
padding: 0px;
margin-left: auto;
margin-right: auto;
}
.UIbtn:nth-child(2) {
background: transparent;
color: var(--main-color);
padding: 0px;
margin-left: auto;
margin-right: auto;
}
.UIbtn a::before {
background: var(--second-bg-color);
padding: 0px;
margin-left: auto;
margin-right: auto;
}
#menu-icon {
position: relative;
font-size: 3.6rem;
color: var(--text-color);
cursor: pointer;
display: none;
}
section {
min-height: 100vh;
padding: 10rem 9% 2rem;
}
.home {
display: flex;
background-size: contain; /* or 100% 100% */
align-items: center;
height: 100vh;
background: url('file:///C:/Users/HP/Pictures/Img/home.jpg') no-repeat;
padding: 0 9%;
position: relative;
background-size: cover;
background-position: center;
overflow: visible;
}
.home-content {
max-width: 60rem;
z-index: 99;
}
.home-content h1 {
position: relative;
display: inline-block;
font-size: 5.6rem;
font-weight: 700;
line-height: 1.3;
}
.home-content h1 span {
color: var(--text-color);
}
.home-content .text-animate {
position: relative;
width: 32.8rem;
}
.home-content .text-animate h3 {
font-size: 3.1rem;
font-weight: 700;
color: transparent;
-webkit-text-stroke: .7px var(--main-color);
background-image: linear-gradient(var(--main-color), var(--main-color));
background-repeat: no-repeat;
-webkit-background-clip: text;
background-position: 0 0;
}
.home.show-animate .home-content .text-animate h3 {
animation: homeBgText 6s linear infinite;
animation-delay: 2s;
}
.home-content .text-animate h3::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
border-right: 2px solid var(--main-color);
z-index: -1;
}
.home.show-animate .home-content .text-animate h3::before {
animation: homeCursorText 6s linear infinite;
animation-delay: 2s;
}
.home-content p {
position: relative;
font-size: 1.6rem;
margin: 2rem 0 4rem;
}
.btn-box {
position: relative;
display: flex;
justify-content: space-between;
width: 50rem;
height: 5rem;
}
.btn-box .btn {
position: relative;
display: inline-flex;
justify-content: center;
align-items: center;
text-align: center;
width: 15rem;
height: 100%;
background: var(--main-color);
border: .2rem solid var(--main-color);
border-radius: .8rem;
font-size: 1.8rem;
font-weight: 600;
letter-spacing: .1rem;
color: var(--bg-color);
z-index: 1;
overflow: hidden;
transition: .5s;
}
.btn-box .btn:nth-child(2) {
background: transparent;
color: var(--main-color);
}
.btn-box .btn:nth-child(2):hover {
color: var(--bg-color);
}
.btn-box .btn:nth-child(2)::before {
background: var(--main-color);
}
.btn-box .btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background: var(--bg-color);
z-index: -1;
transition: .5s;
}
.btn-box .btn:hover::before {
width: 100%;
}
.btn-box .btn:hover {
color: var(--main-color);
}
.home-sci {
position: absolute;
bottom: 4rem;
left: 3rem;
width: 100px;
display: flex;
justify-content: space-between;
}
.home-sci a {
position: relative;
display: inline-flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
background: transparent;
border: .2rem solid var(--main-color);
border-radius: 50%;
font-size: 20px;
color: var(--main-color);
z-index: 1;
overflow: hidden;
transition: .5s;
}
.home-sci a:hover {
color: var(--bg-color);
}
.home-sci a::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background: var(--main-color);
z-index: -1;
transition: .5s;
}
.home-sci a:hover::before {
width: 100%;
}
.home-imgHover {
position: absolute;
top: 0;
right: 0;
width: 45%;
height: 100%;
background: transparent;
transition: 3s;
}
.home-imgHover:hover {
background: var(--bg-color);
opacity: .8;
}
.heading {
position: relative;
font-size: 5rem;
margin-bottom: 3rem;
text-align: center;
}
span {
color: var(--main-color);
}
.btn-box.btns {
display: inline-block;
width: 15rem;
}
.btn-box.btns a::before {
background: var(--second-bg-color);
}
.features {
min-height: auto;
}
.footer {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
padding: 2rem 9%;
background: var(--second-bg-color);
}
.footer-text,
.footer-iconTop {
position: relative;
}
.footer-text p {
font-size: 1.6rem;
}
.footer-iconTop a {
position: relative;
display: inline-flex;
justify-content: center;
align-items: center;
padding: .8rem;
background: var(--main-color);
border: .2rem solid var(--main-color);
border-radius: .6rem;
z-index: 1;
overflow: hidden;
}
.footer-iconTop a::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--second-bg-color);
z-index: -1;
transition: .5s;
}
.footer-iconTop a:hover::before {
width: 100%;
}
.footer-iconTop a i {
font-size: 2.4rem;
color: var(--text-color);
transition: .5s;
}
.footer-iconTop a:hover i {
color: var(--main-color);
}
/* ANIMATION RELOAD AND SCROLL */
.animate {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: var(--bg-color);
z-index: 98;
}
.animate.home-img {
width: 50%;
}
.logo .animate,
.navbar .animate,
#menu-icon .animate,
.home.show-animate .animate {
animation: showRight 1s ease forwards;
animation-delay: calc(.3s * var(--i));
}
.animate.scroll {
transition: 1s ease;
transition-delay: calc(.3s / var(--i));
animation: none;
}
section:nth-child(odd) .animate.scroll,
.footer .animate.scroll {
background: var(--second-bg-color);
}
.about.show-animate .animate.scroll,
.features.show-animate .animate.scroll,
.footer.show-animate .animate.scroll {
transition-delay: calc(.3s * var(--i));
width: 0;
}
/* BREAKPOINTS */
@media (max-width: 1200px) {
html {
font-size: 55%;
}
}
@media (max-width: 991px) {
.header {
padding: 2rem 4%;
}
section {
padding: 10rem 4% 2rem;
}
.home {
padding: 0 4%;
}
.footer {
padding: 2rem 4%;
}
}
@media (max-width: 850px) {
.animate.home-img {
width: 55%;
}
}
@media (max-width: 768px) {
.header {
background: var(--bg-color);
}
#menu-icon {
display: block;
}
.navbar {
position: absolute;
top: 100%;
left: -100%;
width: 100%;
padding: 1rem 4%;
background: var(--second-bg-color);
box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .2);
z-index: 1;
transition: .25s ease;
transition-delay: .25s;
}
.navbar.active {
left: 0;
transition-delay: 0s;
}
.navbar .active-nav {
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: var(--bg-color);
border-top: .1rem solid rgba(0, 0, 0, .2);
z-index: -1;
transition: .25s ease;
transition-delay: 0s;
}
.navbar.active .active-nav {
left: 0;
transition-delay: .25s;
}
.navbar a {
display: block;
font-size: 2rem;
margin: 3rem 0;
transform: translateX(-20rem);
transition: .25s ease;
transition-delay: 0s;
}
.navbar.active a {
transform: translateX(0);
transition-delay: .25s;
}
.home-imgHover {
pointer-events: none;
background: var(--bg-color);
opacity: .6;
}
}
@media (max-width: 520px) {
html {
font-size: 50%;
}
.home-content h1 {
display: flex;
flex-direction: column;
}
.home-sci {
width: 100px;
}
.home-sci a {
width: 38px;
height: 38px;
}
}
@media (max-width: 462px) {
.home-content h1 {
font-size: 5.2rem;
}
.contact form .input-box .input-field {
width: 100%;
}
.footer {
flex-direction: column-reverse;
}
.footer p {
margin-top: 2rem;
text-align: center;
}
}
@media (max-width: 371px) {
.home {
justify-content: center;
}
.home-content {
display: flex;
align-items: center;
flex-direction: column;
text-align: center;
}
.home-content h1 {
font-size: 5rem;
}
}
/* KEYFRAMES ANIMATION */
@keyframes homeBgText {
0%,
10%,
100% {
background-position: -33rem 0;
}
65%,
85% {
background-position: 0 0;
}
}
@keyframes homeCursorText {
0%,
10%,
100% {
width: 0;
}
65%,
78%,
85% {
width: 100%;
opacity: 1;
}
75%,
81% {
opacity: 0;
}
}
@keyframes aboutSpinner {
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
@keyframes showRight {
100% {
width: 0;
}
}
.features {
display: flex;
flex-direction: column;
align-items: center;
align-self: center;
align-content: center;
padding: 20px;
padding-bottom: 0rem;
background: var(--bg-color);
}
.features-row {
display: flex;
justify-content: space-between;
margin-bottom: 30px;
}
.boxes_al-shadow {
width: 130%;
background-color: #f7f7f7;
padding: 30px;
border: 1px solid #1f1532;
border-radius: 10px;
margin: 10px;
align-items: center;
align-content: center;
align-self: center;
text-align: center;
height: 210px;
}
.boxes_al-shadow:hover {
box-shadow: 0px 5px 15px hsl(211, 81%, 71%);
cursor: pointer;
}
.boxes_al-shadow h2{
color: #1f1b6d;
width: 100%;
font-size: 25px;
font-weight: bold;
}
.boxes_al-shadow p{
color: #081b29;
width: 100%;
font-size: 20px;
}
Please format your code properly using the three back ticks ``` it is completely unreadable otherwise.
Oh, and never ever do this in your html
Use css to handle that, it's super easy with flexbox.
@Tray2 I edited it you can see it now
@Shahid1 This is part of your problem
background: url('file:///C:/Users/HP/Pictures/Img/home (1).jpg') no-repeat;
I would suggest watching some basic HTML and CSS courses to get the basics.
Also, you actually need that much on one page? Many users might get confused.
I suggest use the KISS principle.
https://en.wikipedia.org/wiki/KISS_principle
Of course not formatted like @tray2 mentioned, it's extremely hard to tell what you are doing. But an HTML page can be nicely displayed with little CSS.
Also view some videos here on refactoring code, a suggestion only.
@jlrdw the codes are too long I know, but if you viewed these 2 files on your device it seemed not long if you view it as an html file in browser
This:
<img src="file:///C:/Users/HP/Pictures/Img/folder.png" alt="Icon 2" style="width: 60px;">
Make into url using the asset helper. An example looks like:
<img src="{{ asset('upload/imgdogs') . '/' . $row->dogpic }}" alt="" class="image">
Are you correctly pointing to public as the document root?
Use the browser dev tools to help troubleshoot problems.
@jlrdw I am in the process of making site files, so I haven't yet hosted its files on a hosting site yet Because of this, the file locations I listed are correct because I am still working on them on my computer and because the file is html I can open it with browser, my images location is in the "Img" folder in the "Pictures". I don't have any problem with featured preview, or any section I add it newly to it, the problem is that when I add section more than the home section, the "home.jpg" and "home-sci" icons is disappeared in the page. when I opened the inspector to see elements and put the mouse on home-sci command, the place of it appeared but with no icons appeared.
If I make the home.html contain only header, home section, footer the "home.jpg" and home-sci" icons appeared.
I've solved the problem there was some mistakes in css in some of them thanks for all and have a good day 🤍
Please or to participate in this conversation.