Skip to content
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

Changed Site UI and Added Preloader #77

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Changed Site UI and Added Preloader #77

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
29 changes: 27 additions & 2 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,6 @@ nav{

.firsthalf {
width: 100%;
display: flex;
justify-content: flex-start;
flex-direction: column;
}
Expand Down Expand Up @@ -208,8 +207,8 @@ nav{
background-color: var(--primary-colour);
padding: 25px;
border-radius: 20px;
box-shadow: 0 0 5px 10px darkslateblue;
margin-left: 10%;
box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
}
.contributors-heading {
font-size: 2rem;
Expand Down Expand Up @@ -288,6 +287,32 @@ footer {
margin-top: 30px;
} */


/* Preloader */

.loader{
position: fixed;
top:0;
left: 0;
background-color: white;
height:100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.disppear{
animation: faded 1s forwards;
}
@keyframes faded {
100%{
opacity: 0;
visibility: hidden;
}
}

/* End Preloader */

.subscribe input {
width: 40%;
margin-top: 20px;
Expand Down
19 changes: 17 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,13 @@
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="title" content="The Shopping place for all needs!">
<meta name="description" content="Welcome! Find all the products you need all at great discounts. This is the future of shopping.">
<meta name="keywords" content=" Shopping place, marketplace,Online Shopping,">
<meta name="robots" content="index, follow">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="English">

<title>Project</title>
<link rel="icon" type="image/x-icon" href="img/online-shop.jpg">
<link rel="stylesheet" href="css/style.css" />
Expand All @@ -23,6 +30,12 @@

<body class="light-mode">


<div class="loader">
<img src="loader.gif" alt="">
</div>


<nav>
<div class="topnav" id="myTopnav">
<div class="logo"><img src="img/online-shop.jpg" alt="" />
Expand All @@ -47,7 +60,8 @@
<section class="firstsection background">


<div class=" box-main">
<center>
<div class=" box-main">
<div class="firsthalf">
<div class="secondhalf">
<img class="img" src="img/online-shop.jpg" alt=""/>
Expand All @@ -61,6 +75,7 @@
</div>
</div>
</section>
</center>
<section class="section">
<div class="para">
<p class="sectiontag m-2 text-big">OCEAN LIFE FUNDAMENTALS</p>
Expand Down Expand Up @@ -335,7 +350,7 @@ <h4 class="quick_signup">Quick Signup</h4>
</div>

<div class="copyright-txt">
<a href="#" class="copyright">Shop © 2022</a>
<a href="#" class="copyright">Copyright © 2022 All Rights Reserved</a>
</div>

<!--======================================= FOOTER MID SECTION ENDS =========================== -->
Expand Down
Binary file added loader.gif
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.
11 changes: 10 additions & 1 deletion script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,13 @@ function myFunction() {
} else {
x.className = "topnav";
}
}
}

// Preloader

var loader = document.querySelector(".loader")
window.addEventListener("load", faded);

function faded(){
loader.classList.add("disppear");
}