Scribd
Upload
2 views

HTML

The document is an HTML template for a website titled 'X-Dev' featuring a carousel of design sliders related to animals. Each slider includes an image, author, title, topic, description, and buttons for 'SEE MORE' and 'SUBSCRIBE'. The layout also includes a navigation menu and thumbnail previews for each slider item.

Uploaded by

nitinnaresh08062011
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
2 views

HTML

The document is an HTML template for a website titled 'X-Dev' featuring a carousel of design sliders related to animals. Each slider includes an image, author, title, topic, description, and buttons for 'SEE MORE' and 'SUBSCRIBE'. The layout also includes a navigation menu and thumbnail previews for each slider item.

Uploaded by

nitinnaresh08062011
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>X-Dev</title>
<link rel="stylesheet" href="xdev.css">
</head>
<body>
<header>
<nav>
<a href="">Home</a>
<a href="">Contacts</a>
<a href="">Info</a>
</nav>
</header>

<!-- carousel -->


<div class="carousel">
<!-- list item -->
<div class="list">
<div class="item">
<img src="image/img1.jpg">
<div class="content">
<div class="author">X-Dev</div>
<div class="title">DESIGN SLIDER</div>
<div class="topic">ANIMAL</div>
<div class="des">
<!-- lorem 50 -->
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Ut sequi, rem magnam nesciunt minima placeat, itaque eum neque officiis unde, eaque
optio ratione aliquid assumenda facere ab et quasi ducimus aut doloribus non
numquam. Explicabo, laboriosam nisi reprehenderit tempora at laborum natus unde.
Ut, exercitationem eum aperiam illo illum laudantium?
</div>
<div class="buttons">
<button>SEE MORE</button>
<button>SUBSCRIBE</button>
</div>
</div>
</div>
<div class="item">
<img src="image/img2.jpg">
<div class="content">
<div class="author">X-Dev</div>
<div class="title">DESIGN SLIDER</div>
<div class="topic">ANIMAL</div>
<div class="des">
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Ut sequi, rem magnam nesciunt minima placeat, itaque eum neque officiis unde, eaque
optio ratione aliquid assumenda facere ab et quasi ducimus aut doloribus non
numquam. Explicabo, laboriosam nisi reprehenderit tempora at laborum natus unde.
Ut, exercitationem eum aperiam illo illum laudantium?
</div>
<div class="buttons">
<button>SEE MORE</button>
<button>SUBSCRIBE</button>
</div>
</div>
</div>
<div class="item">
<img src="image/img3.jpg">
<div class="content">
<div class="author">X-Dev</div>
<div class="title">DESIGN SLIDER</div>
<div class="topic">ANIMAL</div>
<div class="des">
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Ut sequi, rem magnam nesciunt minima placeat, itaque eum neque officiis unde, eaque
optio ratione aliquid assumenda facere ab et quasi ducimus aut doloribus non
numquam. Explicabo, laboriosam nisi reprehenderit tempora at laborum natus unde.
Ut, exercitationem eum aperiam illo illum laudantium?
</div>
<div class="buttons">
<button>SEE MORE</button>
<button>SUBSCRIBE</button>
</div>
</div>
</div>
<div class="item">
<img src="image/img4.jpg">
<div class="content">
<div class="author">X-Dev</div>
<div class="title">DESIGN SLIDER</div>
<div class="topic">ANIMAL</div>
<div class="des">
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Ut sequi, rem magnam nesciunt minima placeat, itaque eum neque officiis unde, eaque
optio ratione aliquid assumenda facere ab et quasi ducimus aut doloribus non
numquam. Explicabo, laboriosam nisi reprehenderit tempora at laborum natus unde.
Ut, exercitationem eum aperiam illo illum laudantium?
</div>
<div class="buttons">
<button>SEE MORE</button>
<button>SUBSCRIBE</button>
</div>
</div>
</div>
</div>
<!-- list thumnail -->
<div class="thumbnail">
<div class="item">
<img src="image/img1.jpg">
<div class="content">
<div class="title">
Name Slider
</div>
<div class="description">
Description
</div>
</div>
</div>
<div class="item">
<img src="image/img2.jpg">
<div class="content">
<div class="title">
Name Slider
</div>
<div class="description">
Description
</div>
</div>
</div>
<div class="item">
<img src="image/img3.jpg">
<div class="content">
<div class="title">
Name Slider
</div>
<div class="description">
Description
</div>
</div>
</div>
<div class="item">
<img src="image/img4.jpg">
<div class="content">
<div class="title">
Name Slider
</div>
<div class="description">
Description
</div>
</div>
</div>
</div>
<!-- next prev -->

<div class="arrows">
<button id="prev"><</button>
<button id="next">></button>
</div>
<!-- time running -->
<div class="time"></div>
</div>

<script src="xdev.js"></script>
</body>
</html>

You might also like