You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
49 lines
2.1 KiB
49 lines
2.1 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />
|
|
<link rel="stylesheet" href="style.css" />
|
|
<title>Vertical Slider</title>
|
|
</head>
|
|
<body>
|
|
<div class="slider-container">
|
|
<div class="left-slide">
|
|
<div style="background-color: #FD3555">
|
|
<h1>Nature flower</h1>
|
|
<p>all in pink</p>
|
|
</div>
|
|
<div style="background-color: #2A86BA">
|
|
<h1>Bluuue Sky</h1>
|
|
<p>with it's mountains</p>
|
|
</div>
|
|
<div style="background-color: #252E33">
|
|
<h1>Lonely castle</h1>
|
|
<p>in the wilderness</p>
|
|
</div>
|
|
<div style="background-color: #FFB866">
|
|
<h1>Flying eagle</h1>
|
|
<p>in the sunset</p>
|
|
</div>
|
|
</div>
|
|
<div class="right-slide">
|
|
<div style="background-image: url('https://images.unsplash.com/photo-1508768787810-6adc1f613514?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e27f6661df21ed17ab5355b28af8df4e&auto=format&fit=crop&w=1350&q=80')"></div>
|
|
<div style="background-image: url('https://images.unsplash.com/photo-1519981593452-666cf05569a9?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=90ed8055f06493290dad8da9584a13f7&auto=format&fit=crop&w=715&q=80')"></div>
|
|
<div style="background-image: url('https://images.unsplash.com/photo-1486899430790-61dbf6f6d98b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=8ecdee5d1b3ed78ff16053b0227874a2&auto=format&fit=crop&w=1002&q=80')"></div>
|
|
<div style="background-image: url('https://images.unsplash.com/photo-1510942201312-84e7962f6dbb?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=da4ca7a78004349f1b63f257e50e4360&auto=format&fit=crop&w=1050&q=80')"></div>
|
|
</div>
|
|
<div class="action-buttons">
|
|
<button class="down-button">
|
|
<i class="fas fa-arrow-down"></i>
|
|
</button>
|
|
<button class="up-button">
|
|
<i class="fas fa-arrow-up"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|