The media object
How do I make an the media object?
As made famous by Nicole Sullivan back in 2010.See her blog post at http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/ for the full low down.. What is a the media object? How do you make a the media object? This script and codes were developed by Hampus Persson on 13 September 2022, Tuesday.
The media object - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>The media object</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Lato:300'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <ul class="media-list"> <h1>THE MEDIA OBJECT</h1> <li> <div class="media"> <a href="#" class="media__img"> <img src="https://octodex.github.com/images/codercat.jpg" alt="Octocat" /> </a> <p class="media__body">Octocats are awesome. These are drawn by som awesome folks over at <a href="https://octodex.github.com/">Octodex</a></p>
</div> </li> <li> <div class="media"> <a href="#" class="media__img"><img src="https://octodex.github.com/images/labtocat.png" alt="Octocat" /></a> <p class="media__body">Octocats are awesome. These are drawn by som awesome folks over at <a href="https://octodex.github.com/">Octodex</a></p>
</div> </li> <li> <div class="media"> <a href="#" class="media__img"><img src="https://octodex.github.com/images/spidertocat.png" alt="Octocat" /></a> <p class="media__body">Octocats are awesome. These are drawn by som awesome folks over at <a href="https://octodex.github.com/">Octodex</a></p>
</div> </li> <li> <div class="media"> <a href="#" class="media__img"><img src="https://octodex.github.com/images/goretocat.png" alt="Octocat" /></a> <p class="media__body">Octocats are awesome. These are drawn by som awesome folks over at <a href="https://octodex.github.com/">Octodex</a></p>
</div> </li> <li> <div class="media"> <a href="#" class="media__img-reverse"><img src="https://octodex.github.com/images/dunetocat.png" alt="Octocat" /></a> <p class="media__body">The last Octocat got it backwards. So he's floating right. Right!?</p>
</div> </li>
</ul>
</body>
</html>
The media object - Script Codes CSS Codes
.media { display: block; padding: 15px 20px; width: 400px; border-bottom: 1px dotted #555;
}
.media::after { clear: both; content: ""; display: table;
}
.media__img, .media__img-reverse { float: left; display: block; margin-right: 10px;
}
.media__img > img, .media__img-reverse > img { background-color: #fff; border-radius: 50%; height: 60px;
}
.media__img-reverse { float: right;
}
.media__body { overflow: hidden; margin-bottom: 0;
}
body { background-color: #555; color: #eee; font-family: Lato; font-weight: 300; line-height: 1.2; text-align: center;
}
a { color: #f0f0f0;
}
h1 { background-color: #222; font-size: 2em; padding: 20px 0; text-align: center;
}
.media-list { display: inline-block; margin-top: 20px; background-color: #333; text-align: left;
}
![The media object - Script Codes](http://shots.codepen.io/hmps/pen/bEIdp-512.jpg)
Developer | Hampus Persson |
Username | hmps |
Uploaded | September 13, 2022 |
Rating | 3 |
Size | 2,731 Kb |
Views | 26,312 |
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 |
Notifications | 4,111 Kb |
Pure CSS GitHub ribbon | 3,395 Kb |
Login screen | 3,699 Kb |
The media object | 2,731 Kb |
Rotating cube | 2,161 Kb |
Dropdown | 4,452 Kb |
Slider | 4,088 Kb |
Typeahead Dropdown | 5,417 Kb |
Style input placeholders | 1,708 Kb |
Test for pseudo element animation | 3,306 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 |
Collapsing Widget | Er40 | 4,279 Kb |
Parallax-ish Sliding Content | Jdsteinbach | 2,748 Kb |
SVG Basics | HipsterBrown | 1,852 Kb |
Angular-HAML | Cwacht | 2,022 Kb |
Animated css matrix type | NielsOeltjen | 3,484 Kb |
Sticky notes with CSS3 | HaiNguyen007 | 2,146 Kb |
Masonry | Uriuriuriu | 5,005 Kb |
Responsive Minimal Blog Layout | Hackthevoid | 5,261 Kb |
Flat UI Button | Honchoman | 2,289 Kb |
Sencha Touch 2.3.1 Basic Grid Example | Trozdol | 2,770 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!