The media object

Developer
Hampus Persson
Size
2,731 Kb
Views
26,312
  1. The media object Previews
  2. The media object HTML Codes
  3. The media object CSS Codes

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 Previews
IQ Test

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
The media object - Script Codes
Home Page Home
Developer Hampus Persson
Username hmps
Uploaded September 13, 2022
Rating 3
Size 2,731 Kb
Views 26,312
Do you need developer help for The media object?

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!

Hampus Persson (hmps) Script Codes
Name
Badge animation
Slide like Mailbox
Login screen
JSCSS
Z-level shadows
Release CLI
Dropdown
Pure CSS GitHub ribbon
Rotating cube
Filter list
Create amazing captions 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!