Media object module

Developer
Tom Hermans
Size
3,344 Kb
Views
8,096
  1. Media object module Previews
  2. Media object module HTML Codes
  3. Media object module CSS Codes

How do I make an media object module?

Inspired by Nicole Sullivan's media object. (http://www.stubbornella.org/?p=497 ) A re-usable (modular) media block (cfr. FB stream). What is a media object module? How do you make a media object module? This script and codes were developed by Tom Hermans on 09 December 2022, Friday.

Media object module Previews
IQ Test

Media object module - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Media object module</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> <!-- Experiment with media object stubbornella, necolas etc.. -->
<div id="container"> <hr> <div class="media cf"> <div class="img img-medium"> <img src="http://placekitten.com/50/50" alt=""> </div> <div class="content"> A little bit of content </div> </div> <hr> <div class="media cf"> <div class="img img-medium"> <img src="http://placekitten.com/100/100" alt=""> </div> <div class="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis adipiscing est. Curabitur vel dui dolor. Vestibulum molestie fermentum diam, nec interdum ante molestie ut. Integer consequat iaculis auctor. Duis vitae felis ligula, ultrices blandit dolor. </div> </div> <hr> <div class="media cf"> <div class="img img-medium"> <img src="http://placekitten.com/50/50" alt=""> </div> <div class="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis adipiscing est. Curabitur vel dui dolor. Vestibulum molestie fermentum diam, nec interdum ante molestie ut. Integer consequat iaculis auctor. Duis vitae felis ligula, ultrices blandit dolor. <div> <img src="http://placekitten.com/32/32" alt=""> <img src="http://placekitten.com/32/32" alt=""> <img src="http://placekitten.com/32/32" alt=""> </div> <div class="media cf"> <i class="img icon icon-a"></i> <div class="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> </div> </div> </div> <hr> <div class="media cf"> <div class="img icon icon-a"></div> <div class="content"> <strong><a href="#">necolas opened pull request 234</a> on <a href="#">paulirish/project</a> 20 minutes ago</strong> <div class="media cf"> <div class="img img-medium"> <img src="http://placekitten.com/32/32" alt=""> </div> <div class="content"> Added common class for long text wrap (whitespace) <div>2 commits with 10 additions and 0 deletions</div> </div> </div> </div> </div> <hr> <div class="media cf"> <div class="img icon icon-a"></div> <div class="content"> <strong><a href="#">scottjehl</a> pushed to gh-pages at <a href="#">scottjehlscottjehl/Respond</a> about 2 hours ago</strong> <div class="media cf"> <div class="img img-medium"> <img src="http://placekitten.com/32/32" alt=""> </div> <div class="content"> <div class="media cf"> <div class="img"> <img src="http://placekitten.com/20/20" alt=""> </div> <div class="content"> <a href="">9c172d8</a> updated license. MIT should be sufficient </div> </div> <div class="media cf"> <div class="img"> <img src="http://placekitten.com/20/20" alt=""> </div> <div class="content"> <a href="">8955dcb</a> updated min file </div> </div> <div class="media cf"> <div class="img"> <img src="http://placekitten.com/20/20" alt=""> </div> <div class="content"> <a href="">77ac03c</a> Merging in the comment-free parser. Respond.js no longer needs CS... </div> </div> <a href="">14 more commits ></a> </div> </div> </div> </div>
</div>
</body>
</html>

Media object module - Script Codes CSS Codes

body { margin: 0; font: 12px/1.4 sans-serif; color: #222; background: #fff;
}
#container { width: 500px; margin: 0 auto;
}
/* ----- REUSABLE IMG BLOCK ----- */
.media { overflow: hidden; _overflow: visible; zoom: 1; *zoom: 1; margin: .7rem;
}
.media:before, .media:after { display: table; content: "";
}
.media:after { clear: both;
}
.media .img { float: left; margin: 0 .5rem 0 0;
}
.media .img.alignleft { float: left; margin: 0 .7rem .7rem 0;
}
.media .img.alignright { float: right; margin: 0 0 .7rem .7rem;
}
.media .img img { display: block;
}
.media .content { display: table-cell; width: 1000rem; *width: auto; *zoom: 1;
}
.media .content .icon { display: inline-block; width: 16px; height: 16px; padding: 0; margin: 0 .3rem 0 0; background: url(http://placekitten.com/16/16);
}
.media .content .icon-a { background-position: 0 0;
}
.media .icon { display: inline-block; width: 16px; height: 16px; padding: 0; margin: 0 .3rem 0 0; background: url(http://placekitten.com/16/16);
}
.media .icon-a { background-position: 0 0;
}
Media object module - Script Codes
Media object module - Script Codes
Home Page Home
Developer Tom Hermans
Username tomhermans
Uploaded December 09, 2022
Rating 3
Size 3,344 Kb
Views 8,096
Do you need developer help for Media object module?

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!

Tom Hermans (tomhermans) Script Codes
Name
Imagemap pure css trial
Styled selectbox
Text in circle
Table Row Toggle
Simple circle cutout css
Responsive Form
Snappy snippet try
Sticky Navigation
CSS Kwicks
Bulleted list with font-icon snippet
Create amazing SEO content 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!