Scribd
Upload
8 views3 pages

Slide Text

The document presents a mobile phone slider showcasing various brands including OnePlus, iPhone, Samsung, and more. Each slide features an image and a brief description encouraging users to find the right mobile phone. The layout includes navigation buttons for user interaction and is styled for a visually appealing presentation.

Uploaded by

abhijeetbhalawat47
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
8 views3 pages

Slide Text

The document presents a mobile phone slider showcasing various brands including OnePlus, iPhone, Samsung, and more. Each slide features an image and a brief description encouraging users to find the right mobile phone. The layout includes navigation buttons for user interaction and is styled for a visually appealing presentation.

Uploaded by

abhijeetbhalawat47
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

<div class="property-slider">

<div class="max-width-property">
<h2>Know Your Mobile Phones</h2>
<p>Stay in style for your next</p>
<div class="slider-container">
<div class="slider">
<div class="slide">
<a href="/MobilePhones/OnePlus"><img
src="/Images/iphone16.jpg" alt=""></a>
<h6>OnePlus</h6>
<p>Let find the right mobile phone for you.</p>
</div>
<div class="slide">
<a href="/MobilePhones/iPhone"><img
src="/Images/iphone16.jpg" alt=""></a>
<h6>iPhone</h6>
<p>Let find the right mobile phone for you.</p>
</div>
<div class="slide">
<a href="/MobilePhones/Nothing"><img
src="/Images/iphone16.jpg" alt=""></a>
<h6>Nothing</h6>
<p>Let find the right mobile phone for you.</p>
</div>
<div class="slide">
<a href="/MobilePhones/Samsung"><img
src="/Images/iphone16.jpg" alt=""></a>
<h6>Samsung</h6>
<p>Let find the right mobile phone for you.</p>
</div>
<div class="slide">
<a href="/MobilePhones/Xiaomi_Redmi"><img
src="/Images/iphone16.jpg" alt=""></a>
<h6>Xiaomi/Redmi</h6>
<p>Let find the right mobile phone for you.</p>
</div>
<div class="slide">
<a href="/MobilePhones/Motorola"><img
src="/Images/iphone16.jpg" alt=""></a>
<h6>Motorola</h6>
<p>Let find the right mobile phone for you.</p>
</div>
<div class="slide">
<a href="/MobilePhones/Google"><img
src="/Images/iphone16.jpg" alt=""></a>
<h6>Google</h6>
<p>Let find the right mobile phone for you.</p>
</div>
<div class="slide">
<a href="/MobilePhones/Vivo"><img
src="/Images/iphone16.jpg" alt=""></a>
<h6>Vivo</h6>
<p>Let find the right mobile phone for you.</p>
</div>
<div class="slide">
<a href="/MobilePhones/Oppo"><img
src="/Images/iphone16.jpg" alt=""></a>
<h6>Oppo</h6>
<p>Let find the right mobile phone for you.</p>
</div>
<div class="slide">
<a href="/MobilePhones/Poco"><img
src="/Images/iphone16.jpg" alt=""></a>
<h6>Poco</h6>
<p>Let find the right mobile phone for you.</p>
</div>
<div class="slide">
<a href="/MobilePhones/Realme"><img
src="/Images/iphone16.jpg" alt=""></a>
<h6>Realme</h6>
<p>Let find the right mobile phone for you.</p>
</div>
</div>

<button class="prev">❮</button>
<button class="next">❯</button>
</div>
</div>
</div>

.property-slider {
text-align: center;
font-family: Arial, sans-serif;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
text-align: center;
margin-top: 50px; /* Add space above the slider */
}

.slider-container {
position: relative;

max-width: 100%;
margin: auto;
overflow: hidden;
}

.slider {
display: flex;
transition: transform 0.5s ease-in-out;
margin-top: 40px;
}

.slide {
min-width: 25%;
box-sizing: border-box;
padding: 10px;
}

.slide img {
width: 100%;
border-radius: 10px;
}
.slide p {
margin-top: 10px;
font-weight: 500px;
font-size: 18px;
}

button.prev, button.next {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.5);
color: white;
border: none;
padding: 10px;
cursor: pointer;
border-radius: 50%;
}

button.prev {
left: 10px;
}

button.next {
right: 10px;
}

button:hover {
background-color: rgba(0, 0, 0, 0.8);
}

You might also like