Skip to content

Fixed The Error.. #88

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
nerdyawedee wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Fixed The Error.. #88

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
97250b0
Fixed The Error..
nerdyawedee Oct 8, 2023
485a0ed
Added dark/light mode
nerdyawedee Oct 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added images/moon.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/sun (1).png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
34 changes: 19 additions & 15 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,8 @@
<!-- Fav Icon -->
<link rel="icon" href="images/logo.png" type="image/gif" sizes="16x16">
<!-- Bootstrap CSS -->
<!-- <script src="switch.js"></script> -->

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- Main css -->
Expand All @@ -40,14 +42,15 @@
<main class="container">
<!-- Header start -->
<header>
<nav class="navbar navbar-expand-lg navbar-light fill">
<nav class="navbar navbar-expand-lg navbar-light fill" >
<a class="navbar-brand" href="/index.html"><img src="images/logo.png" alt=""></a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>

</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
Expand All @@ -71,6 +74,7 @@
<li class="nav-item active">
<a class="nav-link" href="#contact">Contact Us</a>
</li>
<img src="/images/moon.png" id="icon">
</ul>
</div>
</nav>
Expand All @@ -90,8 +94,8 @@
<div class="carousel-item active">
<div class="row">
<div class="col-md-6 mack">
<h1>Iphone 15 Pro</h1>
<p>Both models are 0.31 inches (7.80 mm) thick, with the iPhone 15 weighing 6.02
<h1 class="me">Iphone 15 Pro</h1>
<p class="for">Both models are 0.31 inches (7.80 mm) thick, with the iPhone 15 weighing 6.02
ounces (171 grams) and the iPhone 15 Plus weighing 7.09 ounces (201 grams).
The iPhone 15 models feature an all-glass front and a colorful, matte glass
back that is framed by a color-matched aerospace-grade aluminum frame.</p>
Expand All @@ -113,8 +117,8 @@ <h1>Iphone 15 Pro</h1>
<div class="carousel-item">
<div class="row">
<div class="col-md-6 mack">
<h2>Alexa</h2>
<p>Alexa is the intelligent cloud-based voice AI that you can talk to on [your product].
<h2 class="me">Alexa</h2>
<p class="for">Alexa is the intelligent cloud-based voice AI that you can talk to on [your product].
Speak to Alexa through [your product] to play music, hear the news, check weather,
control smart home devices, and more.</p>
<a class="mack-btn">Buy Now
Expand All @@ -135,8 +139,8 @@ <h2>Alexa</h2>
<div class="carousel-item">
<div class="row">
<div class="col-md-6 mack">
<h2>Apple Smartwatch</h2>
<p>Apple Watch is a wearable smartwatch that allows users to accomplish a variety of
<h2 class="me">Apple Smartwatch</h2>
<p class="for">Apple Watch is a wearable smartwatch that allows users to accomplish a variety of
tasks, including making phone calls, sending text messages and reading email.</p>
<a class="mack-btn">Buy Now
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-arrow-right"
Expand Down Expand Up @@ -166,7 +170,7 @@ <h2>Apple Smartwatch</h2>
<div class="row">
<div class="col-md-6">

<h2>SmartPhones</h2>
<h2 class="fo">SmartPhones</h2>

</div>
<div class="col-md-6 text-right">
Expand Down Expand Up @@ -247,7 +251,7 @@ <h5><b>$150</b></h5>
<div class="row">
<div class="col-md-6">

<h2>Men Tshirts</h2>
<h2 class="fo">Men Tshirts</h2>

</div>
<div class="col-md-6 text-right">
Expand Down Expand Up @@ -331,7 +335,7 @@ <h5><b>$30</b></h5>
<div class="row">
<div class="col-md-6">

<h2>Woman Jackets</h2>
<h2 class="fo">Woman Jackets</h2>

</div>
<div class="col-md-6 text-right">
Expand Down Expand Up @@ -409,7 +413,7 @@ <h5><b>$20</b></h5>
<div class="row">
<div class="col-md-6">

<h2>Kids Section</h2>
<h2 class="fo">Kids Section</h2>

</div>
<div class="col-md-6 text-right">
Expand Down Expand Up @@ -487,7 +491,7 @@ <h5><b>$20</b></h5>
<div class="laptop-header">
<div class="row">
<div class="col-md-6">
<h2>About Us</h2>
<h2 class="fo">About Us</h2>
</div>
</div>
</div>
Expand Down Expand Up @@ -518,7 +522,7 @@ <h4 class="card-title"><b>Who we are</b></h4>
<div class="container">
<div class="row text-center">
<div class="col-md-12">
<h2>Categories</h2>
<h2 class="fo">Categories</h2>
<hr>
</div>
</div>
Expand Down Expand Up @@ -553,7 +557,7 @@ <h2>Shoes</h2>
<div class="laptop-header">
<div class="row">
<div class="col-md-6">
<h2>Contact us</h2>
<h2 class="fo">Contact us</h2>
</div>
</div>
</div>
Expand Down
21 changes: 21 additions & 0 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,24 @@ function topFunction() {
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}
$(document).ready(function(){
$(window).scroll(function(){
var scroll = $(window).scrollTop();
if (scroll > 100) {
$(".navbar").removeClass('rgb(255, 239, 239)').css( "backdrop-filter","blur(6px)");
}else{
$(".navbar").css("background" , "").addClass('rgb(255, 239, 239)');
}
});
});
// function to Toggle Light and Dark Mode
var icon = document.getElementById("icon");
icon.onclick = function(){
document.body.classList.toggle("dark-theme");
if(document.body.classList.contains("dark-theme")){
icon.src = "/images/sun (1).png";
}
else{
icon.src = "/images/moon.png";
}
}
40 changes: 34 additions & 6 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,16 @@
html {
scroll-behavior: smooth;
}

:root{
--primary-color:rgb(255, 239, 239);
--secondary-color:black;
}
body {
font-family: "Abel", sans-serif;
font-size: large;
background-color: rgb(255, 239, 239);
background-color: var(--primary-color);
}


h2{
font-size: 2.5rem;
}
Expand All @@ -25,7 +27,21 @@ p {
cursor: pointer;
}


.dark-theme{
--primary-color:rgb(38, 37, 37);
--secondary-color:white;
}
#icon{
width:20px;
height:20px;
cursor:pointer;
margin-top:10px;
}
#smartphone, #MenTshirt , #WomanMenTshirt,
#Kids, #categories, #About ,#contact {.container .fo{
color: var(--secondary-color);
}
}
/* Header nav start */

a.nav-link {
Expand All @@ -39,7 +55,12 @@ a.nav-link {
nav.fill ul li a.nav-link {
transition: all 0.5s;
}

header{
position:sticky;
top:0px;
z-index:20;
/* style="background-color: #ffffffcc;" */
}
nav.fill ul li a.nav-link:after {
text-align: left;
content: ".";
Expand Down Expand Up @@ -76,7 +97,12 @@ nav.fill ul li a.nav-link:after {
}

/* End */

#mack-book .row .me{
color:var(--secondary-color);
}
#mack-book .row .for{
color:var(--secondary-color);
}
/* section Mack book start */

section#mack-book {
Expand Down Expand Up @@ -236,13 +262,15 @@ a.laptop-btn:hover svg.bi.bi-arrow-right {

hr {
width: 130px;

background-image: linear-gradient(145deg, #f1c40f, #e67e22);
height: 10px;
border: none;
border-radius: 50px;
margin-bottom: 50px;
}
.categories-card {
background-color:rgb(255, 239, 239);
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);;
padding: 5%;
transition: ease-in-out 0.2s;
Expand Down