Tout Pattern
How do I make an tout pattern?
Based on bourbon refill "Side Image" http://refills.bourbon.io/ set as list items, alternate odd/even. . What is a tout pattern? How do you make a tout pattern? This script and codes were developed by David Klotz on 23 January 2023, Monday.
Tout Pattern - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Tout Pattern</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> <ul class="touts"> <li class="tout"> <div class="tout__content"> <div class="tout__content-wrapper"> <h2>Title</h2> <p>Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> </div> <div class="tout__img" style="background: url('https://photos.smugmug.com/Public/i-B2zphBP/4/5c5d42e6/O/1440x900.jpg')no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;"> <div class="caption"></div> </div> </li> <li class="tout"> <div class="tout__content"> <div class="tout__content-wrapper"> <h2>Title</h2> <p>Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> </div> <div class="tout__img" style="background: url('https://photos.smugmug.com/Public/i-B2zphBP/4/5c5d42e6/O/1440x900.jpg')no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;"> <div class="caption"></div> </div> </li>
</ul>
</body>
</html>
Tout Pattern - Script Codes CSS Codes
html, body { font-family: sans-serif;
}
*, *:before, *:after { box-sizing: border-box;
}
.touts { padding: 0; margin: 0; list-style-type: none;
}
.touts .tout { padding: 0; margin: 0;
}
@media (min-width: 60em) { .touts .tout { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
}
.touts .tout .tout__content { padding: 2em 1em;
}
@media (min-width: 40.625em) { .touts .tout .tout__content { padding: 3em 4em; }
}
@media (min-width: 60em) { .touts .tout .tout__content { padding: 4em; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; width: 50%; vertical-align: middle; }
}
@media (min-width: 90.0625em) { .touts .tout .tout__content { padding: 8em 1em; }
}
.touts .tout .tout__content .tout__content-wrapper { max-width: 640px; margin: 0 auto;
}
.touts .tout .tout__img { background-size: cover; min-height: 15em; padding: 4em; position: relative;
}
@media (min-width: 40.625em) { .touts .tout .tout__img { min-height: 30em; }
}
@media (min-width: 60em) { .touts .tout .tout__img { background-position: bottom; background-size: cover; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; width: 50%; }
}
@media (min-width: 90.0625em) { .touts .tout .tout__img { min-height: 40em; }
}
.touts .tout .tout__img .tout__caption { position: absolute; color: #fff; bottom: 0; left: 0; padding-left: 1em; font-style: italic;
}
@media (min-width: 60em) { .touts .tout:nth-child(even) .tout__content { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; }
}
@media (min-width: 60em) { .touts .tout:nth-child(even) .tout__img { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; }
}
Developer | David Klotz |
Username | dkdesign |
Uploaded | January 23, 2023 |
Rating | 3 |
Size | 3,136 Kb |
Views | 4,048 |
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!
Name | Size |
Bourbon refill accordion tabs | 3,856 Kb |
A Pen by David Klotz | 5,064 Kb |
Tout Pattern | 3,136 Kb |
Tout box hover content overlay | 4,242 Kb |
CSS Transitions Transforms Reveal v1.0 | 4,083 Kb |
Responsive Testimonial Slider v1.0 | 3,802 Kb |
My Starter Kit For Codepen | 2,012 Kb |
Tout with hover content | 3,138 Kb |
Basic Fullscreen Hero | 3,040 Kb |
Flexbox Media Object | 3,221 Kb |
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!
Name | Username | Size |
Dribbble Inspired Registration Form | Lancebush | 2,358 Kb |
Jstam.com Home Page | Jstam | 10,558 Kb |
Monochrome Form | AlienPiglet | 3,096 Kb |
A Pen by Bryan | Brydave | 2,286 Kb |
Buttons for autumn | Nikazawila | 1,795 Kb |
A Pen by boilzzz | Boilzzz | 2,761 Kb |
Blog Concept - Single Post | Marionebl | 9,603 Kb |
Fixed with using Calc | Tomleo | 2,542 Kb |
Twitch JSON API | Jvhti | 2,808 Kb |
HEXAGON | Aurumlux | 1,684 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!