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 |
Tout with hover content | 3,138 Kb |
A Pen by David Klotz | 5,064 Kb |
My Starter Kit For Codepen | 2,012 Kb |
Responsive Testimonial Slider v1.0 | 3,802 Kb |
Flexbox Layout | 3,647 Kb |
CSS Transitions Transforms Reveal v1.0 | 4,083 Kb |
Tout box hover content overlay | 4,242 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 |
Mostly Fluid | Mccreath | 3,308 Kb |
Coming Soon | MariamMassadeh | 1,680 Kb |
E-mail Template | SoloMDFK | 4,871 Kb |
Adding and Removing Element | Accimeesterlin | 2,119 Kb |
Flip test | Madhes | 1,635 Kb |
Horizontal Navigation with Floats | Gymratpacks | 5,403 Kb |
Importable Clearfix | Corysimmons | 1,411 Kb |
SlideDown FixedMenu | Mp_graphic | 5,602 Kb |
Bootstrap 4 Gridsystem Demo | Rivella50 | 1,535 Kb |
Tab Menus | Zephyr | 3,180 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!