sapphire-index.html
<!DOCTYPE html>
<html lang="en">
<script src="https://kit.fontawesome.com/b766c6b920.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="icon" href="Sapphire_Logo.png" type="img/png">
<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>sapphiere</title>
<style>
.header {
position: relative;
padding: 10px;
color: black;
border-style: solid;
border-width: 1px;
width: 100%;
height: 70px;
}
.logo {
position: absolute;
top: 0px;
left: 0px;
height: 30px;
width: 150px;
}
* {
box-sizing: border-box;
}
.why {
position: absolute;
left: 300px;
}
form.example input[type=text] {
position: absolute;
padding: 10px;
font-size: 17px;
border: 1px solid grey;
left: 400px;
width: 500px;
background: #f1f1f1;
border-radius: 10px 0px 0px 10px;
border-right: none
}
form.example button {
position: absolute;
left: 900px;
width: 50px;
padding: 10px;
color: grey;
font-size: 17px;
border: 1px solid grey;
border-left: none;
cursor: pointer;
border-radius: 0px 10px 10px 0px;
}
.menu {
position: absolute;
left: 400px;
top: 80px;
font-size: 24px;
}
.slide1 {
position: absolute;
padding: 10px;
font-size: 17px;
border: 1px solid grey;
left: 500px;
width: 500px;
background: #f1f1f1;
border-radius: 10px 0px 0px 10px;
border-right: none
}
.responsive {
position: absolute;
padding: 100px;
}
body {
font-family: Verdana, sans-serif;
}
.mySlides {
display: none;
}
img {
vertical-align: middle;
}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
background-color: #717171;
}
/* Fading animation */
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
@keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.text {
font-size: 11px
}
}
.slide1 {
position: absolute;
padding: 10px;
font-size: 17px;
border: 1px solid grey;
left: 400px;
width: 500px;
background: #f1f1f1;
border-radius: 10px 0px 0px 10px;
border-right: none
}
style>* {
box-sizing: border-box;
}
body {
font-family: Verdana, sans-serif;
}
.mySlides {
display: none;
}
img {
vertical-align: middle;
}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
background-color: #717171;
}
/* Fading animation */
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
@keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.text {
font-size: 11px
}
}
</style>
</head>
<body>
<div class="header">
<img class="logo" src="/Users/FAIZAN/Desktop/practice/img/Sapphire_Logo.png" alt="sapphire-logo">
<form class="example" action="/action_page.php">
<input type="text" placeholder="FIND YOUR FAVIOURITE" name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
<a href="https://www.faizanssj.com/blog/">
<i class="fa-solid fa-truck-fast" style="font-size: 32px; position: absolute; left: 1300px;top: 10px; "></i>
</a>
<i class="fa-solid fa-person" style="font-size: 32px; position: absolute; left: 1350px; top:10px;"></i>
<i class="fa-solid fa-bag-shopping" style="font-size: 32px; position: absolute; left: 1400px; top:10px;"></i>
<div class="menu">
<a href="/Users/FAIZAN/Desktop/practice/html/new-in.html" style="text-decoration: none; left: 0px;">New in</a>
<a href="/Users/FAIZAN/Desktop/practice/html/women.html" style="text-decoration: none;">Women</a>
<a href="/Users/FAIZAN/Desktop/practice/html/man.html" style="text-decoration: none;">Men</a>
<a href="/Users/FAIZAN/Desktop/practice/html/beauty.html" style="text-decoration: none;">Beauty</a>
<a href="/Users/FAIZAN/Desktop/practice/html/accessories.html" style="text-decoration: none;">Accessorries</a>
<a href="/Users/FAIZAN/Desktop/practice/html/home.html" style="text-decoration: none ;">Home</a>
<a href="/Users/FAIZAN/Desktop/practice/html/the-edit.html" style="text-decoration: none;">The edit</a>0
</div>
<div class="w3-content w3-section" style="max-width:1450px ">
<a href="/Users/FAIZAN/Desktop/practice/html/new-in.html ">
<img class="mySlides " src="/Users/FAIZAN/Desktop/practice/img/designs.png " style="width:100%; position: absolute; top:120px; ">
</a>
<a href="/Users/FAIZAN/Desktop/practice/html/accessories.html ">
<img class="mySlides " src="/Users/FAIZAN/Desktop/practice/img/kids-slider-banner-2.jpg " style="width:100%;position: absolute; top:120px ">
</a>
<a href="/Users/FAIZAN/Desktop/practice/html/women.html ">
<img class="mySlides " src="/Users/FAIZAN/Desktop/practice/img/dresses.jpg " style="width:100%;position: absolute; top:120px ">
</a>
</div>
<script>
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides ");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none ";
}
myIndex++;
if (myIndex > x.length) {
myIndex = 1
}
x[myIndex - 1].style.display = "block ";
setTimeout(carousel, 4000); // Change image every 2 seconds
}
</script>
<script>
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides ");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none ";
}
myIndex++;
if (myIndex > x.length) {
myIndex = 1
}
x[myIndex - 1].style.display = "block ";
setTimeout(carousel, 2000); // Change image every 2 seconds
}
</script>
</body>
</html>
Comments
Post a Comment