Card Mixin Chris #132

Developer
Jared Pearce
Size
2,614 Kb
Views
8,096
  1. Card Mixin Chris #132 Previews
  2. Card Mixin Chris #132 HTML Codes
  3. Card Mixin Chris #132 CSS Codes

How do I make an card mixin chris #132?

What is a card mixin chris #132? How do you make a card mixin chris #132? This script and codes were developed by Jared Pearce on 14 January 2023, Saturday.

Card Mixin Chris #132 Previews
IQ Test

Card Mixin Chris #132 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Card Mixin Chris #132</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <h1>Lighthouses of Main</h1> <!-- 1 repeating item --> <div class="item"> <a href="#"> <div class="item-image"> <img src="http://upload.wikimedia.org/wikipedia/commons/e/e0/Portland-Head-Light-House.jpg" alt="Portland Head Lighthouse" /> </div> <div class="item-header"> <h1>Portland Head Lighthouse</h1> <p>Althought designed for broad front end development use, this package is used in the context of a list view. This is one of those items.</p> </div> </a> <!-- item actions --> <div class="actions"> </div> </div> <!-- 2 repeating item --> <div class="item"> <a href="#"> <div class="item-image"> <img src="http://lighthousegetaway.com/lights/ME/pemq2.jpg" alt="Pemaquid Point Lighthouse" /> </div> <div class="item-header"> <h1>Pemaquid Point Lighthouse</h1> <p>Although designed for broad front end development use, this package is used in the context of a list view. This is one of those items.</p> </div> </a> <!-- item actions --> <div class="actions"> </div> </div> <!-- 3 repeating item --> <div class="item"> <a href="#"> <div class="item-image"> <img src="http://www.us-pictures.com/1024x768/cape_neddick_nubble_lighthouse_maine.jpg" alt="Nubble Lighthouse" /> </div> <div class="item-header"> <h1>Nubble Lighthouse</h1> <p>Althought designed for broad front end development use, this package is used in the context of a list view. This is one of those items.</p> </div> </a> <!-- item actions --> <div class="actions"> </div> </div> <!-- 4 repeating item --> <div class="item"> <a href="#"> <div class="item-image"> <img src="http://www.lighthousefriends.com/portlandbkwtr1.jpg" alt="Portland Breakwater Lighthouse" /> </div> <div class="item-header"> <h1>Portland Breakwater Lighthouse</h1> <p>Althought designed for broad front end development use, this package is used in the context of a list view. This is one of those items.</p> </div> </a> <!-- item actions --> <div class="actions"> </div> </div> <!-- repeating item --> <div class="item"> <a href="#"> <div class="item-image"> <img src="http://upload.wikimedia.org/wikipedia/commons/e/e3/Spring_Point_Ledge_Light_-_South_Portland,_Maine_-_IMG_8195.JPG" alt="Portland Head Lighthouse" /> </div> <div class="item-header"> <h1>Spring Point Ledge Lighthouse</h1> <p>Althought designed for broad front end development use, this package is used in the context of a list view. This is one of those items.</p> </div> </a> <!-- item actions --> <div class="actions"> </div> </div> <!-- repeating item --> <div class="item"> <a href="#"> <div class="item-image"> <img src="http://upload.wikimedia.org/wikipedia/commons/e/e0/Portland-Head-Light-House.jpg" alt="Portland Head Lighthouse" /> </div> <div class="item-header"> <h1>Portland Head Lighthouse</h1> <p>Althought designed for broad front end development use, this package is used in the context of a list view. This is one of those items.</p> </div> </a> <!-- item actions --> <div class="actions"> </div> </div> <!-- repeating item --> <div class="item"> <a href="#"> <div class="item-image"> <img src="http://upload.wikimedia.org/wikipedia/commons/e/e0/Portland-Head-Light-House.jpg" alt="Portland Head Lighthouse" /> </div> <div class="item-header"> <h1>Portland Head Lighthouse</h1> <p>Althought designed for broad front end development use, this package is used in the context of a list view. This is one of those items.</p> </div> </a> <!-- item actions --> <div class="actions"> </div> </div> <!-- repeating item --> <div class="item"> <a href="#"> <div class="item-image"> <img src="http://upload.wikimedia.org/wikipedia/commons/e/e0/Portland-Head-Light-House.jpg" alt="Portland Head Lighthouse" /> </div> <div class="item-header"> <h1>Portland Head Lighthouse</h1> <p>Althought designed for broad front end development use, this package is used in the context of a list view. This is one of those items.</p> </div> </a> <!-- item actions --> <div class="actions"> </div> </div> <!-- repeating item --> <div class="item"> <a href="#"> <div class="item-image"> <img src="http://upload.wikimedia.org/wikipedia/commons/e/e0/Portland-Head-Light-House.jpg" alt="Portland Head Lighthouse" /> </div> <div class="item-header"> <h1>Portland Head Lighthouse</h1> <p>Althought designed for broad front end development use, this package is used in the context of a list view. This is one of those items.</p> </div> </a> <!-- item actions --> <div class="actions"> </div> </div> <!-- repeating item --> <div class="item"> <a href="#"> <div class="item-image"> <img src="http://upload.wikimedia.org/wikipedia/commons/e/e0/Portland-Head-Light-House.jpg" alt="Portland Head Lighthouse" /> </div> <div class="item-header"> <h1>Portland Head Lighthouse</h1> <p>Althought designed for broad front end development use, this package is used in the context of a list view. This is one of those items.</p> </div> </a> <!-- item actions --> <div class="actions"> </div> </div> <!-- repeating item --> <div class="item"> <a href="#"> <div class="item-image"> <img src="http://upload.wikimedia.org/wikipedia/commons/e/e0/Portland-Head-Light-House.jpg" alt="Portland Head Lighthouse" /> </div> <div class="item-header"> <h1>Portland Head Lighthouse</h1> <p>Althought designed for broad front end development use, this package is used in the context of a list view. This is one of those items.</p> </div> </a> <!-- item actions --> <div class="actions"> </div> </div> <!-- repeating item --> <div class="item"> <a href="#"> <div class="item-image"> <img src="http://upload.wikimedia.org/wikipedia/commons/e/e0/Portland-Head-Light-House.jpg" alt="Portland Head Lighthouse" /> </div> <div class="item-header"> <h1>Portland Head Lighthouse</h1> <p>Althought designed for broad front end development use, this package is used in the context of a list view. This is one of those items.</p> </div> </a> <!-- item actions --> <div class="actions"> </div> </div>
</div>
</body>
</html>

Card Mixin Chris #132 - Script Codes CSS Codes

.container { width: 100%; border: 1px solid orange; overflow: hidden;
}
/* courtesy of Chris Coylier screencast #132*/
.item { width: 24.75%; margin-right: 2%; height: 160px; border: 1px solid #ccc; overflow: hidden; float: left;
}
.item:nth-child(n) { margin-right: 2%; margin-bottom: 2%;
}
.item:nth-child(4n) { margin-right: 0; margin-bottom: 0;
}
@media (max-width: 1200px) { .item { width: 19.6%; margin-right: 2%; } .item:nth-child(n) { margin-right: 2%; margin-bottom: 2%; } .item:nth-child(5n) { margin-right: 0; margin-bottom: 0; }
}
@media (max-width: 900px) { .item { width: 24.75%; margin-right: 2%; } .item:nth-child(n) { margin-right: 2%; margin-bottom: 2%; } .item:nth-child(4n) { margin-right: 0; margin-bottom: 0; }
}
.item_image img { max-width: 100%; margin-top: -25%; margin-left: -20%;
}
Card Mixin Chris #132 - Script Codes
Card Mixin Chris #132 - Script Codes
Home Page Home
Developer Jared Pearce
Username jaredpearce
Uploaded January 14, 2023
Rating 3
Size 2,614 Kb
Views 8,096
Do you need developer help for Card Mixin Chris #132?

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!

Jared Pearce (jaredpearce) Script Codes
Name
Loading an iframe
SVG Container
Workflow
Border-image Investigation
Interactive Process Chart
Dojo Training
Resource Library
Floats
A Pen by Jared Pearce
Simple Course Navigation
Create amazing marketing copy 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!