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;
}
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 |
Dropdown | 4,452 Kb |
Login screen | 3,699 Kb |
Pure CSS GitHub ribbon | 3,395 Kb |
JSCSS | 3,963 Kb |
Release CLI | 3,195 Kb |
Pulsating heart | 2,765 Kb |
Drill down table | 2,989 Kb |
Inputs with floating labels | 3,078 Kb |
Button style | 2,644 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 |
Minimal Material Design Form Input | Koenigsegg1 | 3,076 Kb |
Bootstrap 4 Gridsystem Demo | Rivella50 | 1,535 Kb |
Practice using Wixel | Emnk | 3,057 Kb |
Slider | Mohammed-fawzy | 2,634 Kb |
Masonry | Uriuriuriu | 5,005 Kb |
React Vote Component | Souporserious | 5,465 Kb |
Scroll to view if element partially out of view port height | ChrisMaki | 2,104 Kb |
SnappySnippet Test | Elmsoftware | 8,385 Kb |
Elon Musk - Tribute Page - FreeCodeCamp | Yunnimun | 8,615 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!