<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Automatic Image Chanege Animation | No javascript</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="banner-text">
<h1>photos <span>images</span></h1>
<p>Get your best photo ever</p>
</div>
<div class="banner">
<div class="banner-img" style="background-image: url('https://www.thespruce.com/thmb/obLSBf85swntEzXvy6uyY58_IRg=/1500x1000/filters:fill(auto,1)/stock-flowers-growing-guide-5189057-hero-b4ffebaa3bfa4918b436854abf6a8fa8.jpg')"></div>
<div class="banner-img" style="background-image: url('https://image.shutterstock.com/mosaic_250/164693082/526400839/stock-photo-light-blue-flower-on-a-white-background-isolated-with-clipping-path-closeup-big-shaggy-flower-526400839.jpg:\Users\DELL\Desktop\js\animation slider\images\2.jpg')"></div>
<div class="banner-img" style="background-image: url('https://media.istockphoto.com/photos/coral-or-pink-daisy-chamomile-isolated-on-white-background-picture-id1136423603?b=1&k=20&m=1136423603&s=612x612&w=0&h=IInonZdyhsaK4WrminGFNxtEIdq8ses2mKQmuTc4e5E=:\Users\DELL\Desktop\js\animation slider\images\3.jpg')"></div>
<div class="banner-img" style="background-image: url('https://media.istockphoto.com/photos/colorful-wedding-flower-arrangement-picture-id1153318151?b=1&k=20&m=1153318151&s=612x612&w=0&h=aBtDGVQfMfGmwKh0NZMvxKR3sT_unlW9Z2RJ3Qv03HM=')"></div>
</div>
</body>
</html>
No comments:
Post a Comment
Practice and let me know for nw code snippets