Responsive photo tiles

Developer
Jeremy P. Beasley
Size
2,849 Kb
Views
22,264
  1. Responsive photo tiles Previews
  2. Responsive photo tiles HTML Codes
  3. Responsive photo tiles CSS Codes

How do I make an responsive photo tiles?

What is a responsive photo tiles? How do you make a responsive photo tiles? This script and codes were developed by Jeremy P. Beasley on 20 September 2022, Tuesday.

Responsive photo tiles Previews
IQ Test

Responsive photo tiles - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive photo tiles</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="block"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eu tincidunt metus. Sed in tortor commodo, ultrices leo nec, malesuada augue. In eget aliquet velit. In tempus odio et ligula pulvinar dictum. Suspendisse adipiscing tempus eros, eu consectetur nisi rutrum vitae. Cras vel pharetra ligula, et porta nulla. Nulla non nulla euismod nisl adipiscing vulputate et at sem. Pellentesque eu tortor urna. Proin quis vulputate libero. Mauris volutpat accumsan ante a mollis. Aliquam sit amet leo rutrum, iaculis tortor quis, pretium ligula. Ut porttitor elementum purus, nec fringilla sem fermentum id. Nullam aliquam dictum ante nec imperdiet. Quisque accumsan mi vitae posuere accumsan.</p> </div>
<div class="daddy"> <div class="floatcont">
<div class="floatpic left text_one"> <h1>Floating Responsive Photo Tiles</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit libero et sem bibendum accumsan. In eget leo tellus. Donec ut lectus pretium, vestibulum turpis nec, mattis felis. Mauris ut felis magna.</p> <p>Inspired by <a href="http://www.lecoldeclaudine.com/fr">http://www.lecoldeclaudine.com/fr</a>
</div>
<div class="floatpic left text_two"> <h1>This is describing something super interesting.</h1> <p>In eget leo tellus. Donec ut lectus pretium, vestibulum turpis nec, mattis felis. Mauris ut felis magna.</p>
</div> <div class="floatpic right text_three"> <h1>This is describing something super interesting.</h1> <p>In eget leo tellus. Donec ut lectus pretium, vestibulum turpis nec, mattis felis. Mauris ut felis magna.</p>
</div>
<div class="floatpic right first"> <div class="oneone" style="background-image: url(http://payload172.cargocollective.com/1/0/128/5759158/IsabelleWenzel_Bum1_905.jpg)"></div>
</div>
<div class="floatpic left second"> <div class="fourthree" style="background-image: url(http://payload172.cargocollective.com/1/0/128/5759158/IsabelleWenzel_Searching_905.jpg)"></div>
</div>
<div class="floatpic right third"> <div class="threefour" style="background-image: url(http://payload172.cargocollective.com/1/0/128/5759158/IsabelleWenzel_Table_905.jpg)"></div>
</div>
<div class="floatpic left fourth"> <div class="oneone" style="background-image: url(http://payload172.cargocollective.com/1/0/128/5759158/IsabelleWenzel_Paper.jpg)"></div>
</div>
<div class="floatpic right fifth"> <div class="oneone" style="background-image: url(http://payload172.cargocollective.com/1/0/128/5759158/IsabelleWenzel-Table3.jpg)"></div>
</div>
<div class="floatpic left sixth"> <div class="foursix" style="background-image: url(http://payload172.cargocollective.com/1/0/128/5759158/IsabelleWenzel-Bum2.jpg)"></div>
</div> </div> </div> <div class="block"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eu tincidunt metus. Sed in tortor commodo, ultrices leo nec, malesuada augue. In eget aliquet velit. In tempus odio et ligula pulvinar dictum. Suspendisse adipiscing tempus eros, eu consectetur nisi rutrum vitae. Cras vel pharetra ligula, et porta nulla. Nulla non nulla euismod nisl adipiscing vulputate et at sem. Pellentesque eu tortor urna. Proin quis vulputate libero. Mauris volutpat accumsan ante a mollis. Aliquam sit amet leo rutrum, iaculis tortor quis, pretium ligula. Ut porttitor elementum purus, nec fringilla sem fermentum id. Nullam aliquam dictum ante nec imperdiet. Quisque accumsan mi vitae posuere accumsan.</p> </div> <div class="block"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eu tincidunt metus. Sed in tortor commodo, ultrices leo nec, malesuada augue. In eget aliquet velit. In tempus odio et ligula pulvinar dictum. Suspendisse adipiscing tempus eros, eu consectetur nisi rutrum vitae. Cras vel pharetra ligula, et porta nulla. Nulla non nulla euismod nisl adipiscing vulputate et at sem. Pellentesque eu tortor urna. Proin quis vulputate libero. Mauris volutpat accumsan ante a mollis. Aliquam sit amet leo rutrum, iaculis tortor quis, pretium ligula. Ut porttitor elementum purus, nec fringilla sem fermentum id. Nullam aliquam dictum ante nec imperdiet. Quisque accumsan mi vitae posuere accumsan.</p> </div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Responsive photo tiles - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Karla:400,400italic,700,700italic);
body { padding-bottom: 300px; font-family: Karla; color: black;
}
h1 { color: blue;
}
.daddy { background: green; overflow: auto; width: 100%; height: auto;
}
.block { width: 80%; padding: 10%; background:blue; color: white;
}
.floatcont { position: relative; background: pink; width: 100%; min-height: 500px; float: left; display: block;
}
.floatpic { position: absolute; width: 40%; margin-bottom: 10vh; float: left;
}
.floatpic.left { left: 10%; float: left;
}
.floatpic.right { right: 10%; float: right;
}
.floatpic div { width: 100%; height: 1px; background-size: 100%;
}
/* ASPECT RATIOS */
.oneone { padding-bottom: 100%;
}
.threefour { padding-bottom: 133%
}
.fourthree { padding-bottom: 75%
}
.foursix { padding-bottom: 66%
}
/* CUSTOM DESIGNATIONS */
.floatpic.first { top: 10vh; z-index: 9
}
.floatpic.second { top: 60vh; width: 55%;
}
.floatpic.third { top: 100vh;
}
.floatpic.fourth { top: 150vh; /*left: 15%;*/ z-index:8; width: 35%;
}
.floatpic.fifth { top: 200vh;
width: 50%;
z-index: 7;
}
.floatpic.sixth { top: 270vh; width: 50%;	z-index: 6;
}
.text_one { width: 35%; top: 17vh;
}
.text_two { width: 23%;
top: 220vh;
z-index: 10;
}
.text_three { width: 23%;
top: 295vh;
z-index: 10;
}
Responsive photo tiles - Script Codes
Responsive photo tiles - Script Codes
Home Page Home
Developer Jeremy P. Beasley
Username jeremypbeasley
Uploaded September 20, 2022
Rating 3
Size 2,849 Kb
Views 22,264
Do you need developer help for Responsive photo tiles?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jeremy P. Beasley (jeremypbeasley) Script Codes
Name
A Pen by Jeremy P. Beasley
Scroll to Top
Calling Webcam API
Number Climb
Lightbox from BG Image
Lazy Load Test
GridGridGrid
Sprite Animation Sequence
Credit Card Form Auto-tab Continuous Typing V2
Art 3.2
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!