Untitled
unknown
plain_text
2 years ago
9.2 kB
4
Indexable
<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">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Staatliches&display=swap" rel="stylesheet">
<title>Website</title>
<link rel="icon" href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSGFLii2xlJ97Oawkz_XKpRhcYDQBTggDO-hg">
<style>
.nav{
display: flex;
justify-content: space-between;
background-color: rgba(220, 196, 200, 0.7);
padding: 25px;
border-radius: 20px;
position: fixed;
z-index: 1000000;
left: 0;
right: 0;
top: 10;
}
a{
color: #fc1f4c;
margin-left: 10px;
text-decoration:none;
font-family: 'Staatliches', cursive;
font-size: 30px;
}
.nav-links{
}
body{
padding-top: 70px;
}
@media (min-width: 375px) and (max-width: 580px) {
a{
font-size: 15px;
}
body {
background-image: url('https://wallpaperaccess.com/full/4014646.jpg');
background-size: 100% 100%;
background-repeat: no-repeat;
}
}
@media (min-width: 580px) and (max-width: 1000px) {
a:hover{
padding: 10px;
border: 1px solid red;
border-radius: 50px;
}
a{
font-size: 25px;
}
body{
background-image: url('https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
background-size: 100% 100% ;
background-repeat: no-repeat;
}
}
@media (min-width: 1000px) and (max-width: 3000px) {
a{
color: #87625a;
}
.nav{
background-color: rgba(19, 103, 132, 0.2);
}
body{
background-image: url('https://images.unsplash.com/photo-1554088559-b9c59b87915a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1074&q=80');
background-size: 100% 100% ;
background-repeat: no-repeat;
}
}
.btn:hover{
color: green;
background-color: aqua;
}
.btn{
font-size: 18px;
padding: 15px;
color: #fc1f4c;
border-radius: 10px;
border: none;
background-color: #89e79a;
font-weight: 900;
}
.slideshow-container {
position: relative;
width: 96%;
margin: 0 auto;
margin-top: 40px;
border: 2px solid rgb(193, 21, 21);
border-radius: 10px;
height: 500px; /* Add this line to set the height */
overflow: hidden;
}
.slideshow-container img {
width: 100%;
height: 100%;
object-position: center;
/* Add this line to fill the container while maintaining aspect ratio */
}
.slideshow-container .slide {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity:0;
transition: opacity 1s ease-in-out;
}
.slideshow-container .slide.active {
width: 100%;
opacity: 1;
/* Add this line to display the active slide */
}
@keyframes slideshow {
0% { opacity: 1; }
20% { opacity: 1; }
33% { opacity: 1; }
53% { opacity: 1; }
100% { opacity: 1; }
}
.slideshow-container .slide:nth-child(1) {
animation: slideshow 1s infinite;
}
.slideshow-buttons {
margin-top: 10px;
text-align: center;
}
.slideshow-buttons button {
background-color: #fc1f4c;
color: white;
border: none;
padding: 8px 16px;
border-radius: 4px;
margin: 0 5px;
cursor: pointer;
}
#services{
margin-top: 50%;
text-align: center;
background-color: #98cca2;
padding: 25px;
border-radius: 30px;
}
.heading{
color: rgb(243, 243, 243);
font-family: cursive;
}
.des{
font-family: cursive;
line-height: 50px;
font-size: 25px;
color:rgb(255, 255, 255);
}
#contact{
margin-top: 50%;
text-align: center;
background-color: burlywood;
padding: 80px;
border-radius: 30px;
}
label{
font-family: cursive;
color: black;
}
.text,.email,.number{
border-radius: 5px;
border: none;
}
.sub{
background-color: #fc1f4c;
color: white;
border: none;
padding: 8px 16px;
border-radius: 4px;
margin: 0 5px;
cursor: pointer;
}
html {
scroll-behavior: smooth;
}
/* width */
::-webkit-scrollbar {
width: 8px;
background-color: rgb(0, 0, 0);
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: rgb(43, 172, 231);
border-radius: 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #014e84;
}
.btn:hover{
background-color: black !important;
color: white !important;
transition: all 0.1s ease-in-out;
}
.btn{
cursor: pointer;
}
</style>
</head>
<body style="margin:0;">
<div class="nav">
<div class="nav-logo">
<a href="">logo</a>
</div>
<div class="nav-links">
<!-- target="_blank" -->
<a href="#home">Home</a>
<a href="contact.html">About Us</a>
<a href="#services">Servirces</a>
<a href="#contact">Contact</a>
</div>
</div>
<input type="search" name="" id="" placeholder="Search">
<div class="slideshow-container" id="home">
<div class="slide active">
<img class="de" src="image1.jpg" alt="Image 2">
</div>
<div class="slide">
<img src="image2.jpg" alt="Image 2">
</div>
<div class="slide">
<img src="image3.jpg" alt="Image 2">
</div>
</div>
<div class="slideshow-buttons">
<button id="prevButton">Previous</button>
<button id="nextButton">Next</button>
</div>
<!-- <button class="btn">Add to cart</button> -->
<div class="video" style="width: 100%; height: 800px; text-align: center; margin-top: 10%; position: relative;">
<video loop autoplay muted style="
width: 100%;
height: 100%;
object-fit: cover; " src="https://videos.ctfassets.net/wl6q2in9o7k3/4iGCXHMzvOKFNvPEdRMLNr/28dc358e1631ebbf5cc5b597cef97df8/SEAMLESS_LIMITLESS_WEBSITE_BANNER_16x9.mp4" ></video>
<h1 style="position: absolute; top: 40%; color: white; font-family: Helvetica; font-size: 32px;left: 55;">LIMITLESS. THE NEW APEX</h1>
<p style="position: absolute; top: 49%; color: white; left: 60;font-size: 16px ;font-family: roboto; ">
Find that extra 1% with Limitless’s breathable,
</p>
<p style="position: absolute; top: 53%; color: white;left: 60; font-size: 16px ;font-family: roboto; ">
sweat-wicking and cool-touch tech.
</p>
<button class="btn" style="position: absolute; left: 70; top: 62%; padding: 12.5px 32px; color:black; background-color: white; font-family: 'Roboto', sans-serif;font-weight: bold; font-size: 14px; border-radius: 20px; border: none; "> SHOP NEW RELEASES</button>
</div>
<div id="services">
<div class="heading">
<h1 class="heading">Web Hosting</h1>
</div>
<p class="des">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas possimus fuga, hic perferendis cum at enim laboriosam, earum obcaecati eveniet repellat, numquam sequi cupiditate assumenda animi quo veniam nisi magni.
A tempore in saepe numquam hic rem expedita quod! Vel magni quod natus animi cupiditate iure! Eius, necessitatibus blanditiis voluptatibus molestiae tempora fuga totam quae tenetur iusto harum, hic vel.0
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas possimus fuga, hic perferendis cum at enim laboriosam, earum obcaecati eveniet repellat, numquam sequi cupiditate assumenda animi quo veniam nisi magni.
A tempore in saepe numquam hic rem expedita quod! Vel magni quod natus animi cupiditate iure! Eius, necessitatibus blanditiis voluptatibus molestiae tempora fuga totam quae tenetur iusto harum, hic vel.0
</p>
</div>
<div id="contact">
<form >
<label class="first" > Name</label>
<input class="text" type="text">
<br><br>
<label class="sec" > Email</label>
<input class="email" type="email">
<br> <br>
<label class="tr" > Phone Number</label>
<input class="number" type="number" name="" id="">
<br><br>
<input class="sub" type="submit" value="Submit">
</form>
</div>
</body>
<script>
const slides = document.querySelectorAll('.slide');
let currentSlideIndex = 0;
const prevButton = document.getElementById('prevButton');
const nextButton = document.getElementById('nextButton');
prevButton.addEventListener('click', showPreviousSlide);
nextButton.addEventListener('click', showNextSlide);
function showPreviousSlide() {
slides[currentSlideIndex].classList.remove('active');
currentSlideIndex = (currentSlideIndex - 1 + slides.length) % slides.length;
slides[currentSlideIndex].classList.add('active');
}
function showNextSlide() {
slides[currentSlideIndex].classList.remove('active');
currentSlideIndex = (currentSlideIndex + 1) % slides.length;
slides[currentSlideIndex].classList.add('active');
}
</script>
</html>