DEV Community

Ahtsham Ajus
Ahtsham Ajus

Posted on

Today I lreaned about Media Object elements

#css #html #webdev #laravel

Here's My HTML code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="./styles.css" />
    <link rel="stylesheet" href="./normalize.css" />
  </head>
  <body>
    <div class="media">
    <div class="media__image">
      <svg class="icon icon--primary">
        <use xlink:href="../images/sprite.svg#snap"></use>
      </svg>
    </div>
    <div class="media__body">
      <h3 class="media__title">Easy Start & Managed Updates</h3>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore
        voluptatem corrupti excepturi necessitatibus amet eius, sed quam
        molestiae corporis possimus.
      </p>
    </div>
     <div> 
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Here's My CSS code

.media__image {
  background: #f3f9fa;
  width: 64px;
  height: 64px;
  border-radius: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
}
.media {
  display: flex;
}

.media__title {
  margin-top: 0;
}
.media__body {
  margin: 0 2rem;
}

.media__image {
  margin: top 1rem;
}
Enter fullscreen mode Exit fullscreen mode

Here's the Output
Alt Text

Top comments (0)

Read next

abel5173 profile image

Seeking Advice: Navigating Entry-Level Remote Job Opportunities and Skill-Building

Abel -

danieljcafonso profile image

This Month in Solid #9: SolidHack started, new fellow and API change 😎

Daniel Afonso -

sowparna_shome_d7d8838255 profile image

# Todo App with JWT-Based Authentication 🚀

Sowparna Shome -

m1dnightdev profile image

Creating Theme Systems in React with SCSS and Redux

M1dnightGMR -