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

gaundergod profile image

My minimal VS Code setup for Vue, Typescript, Tailwind CSS, etc

Gleb Kotovsky -

safdarali profile image

11 GitHub Repositories to learn NodeJs

Safdar Ali -

adrianbailador profile image

Introduction to C# and .NET

Adrián Bailador -

mshsayket profile image

Laravel 11 Display Image from Storage Folder Example

Saddam Hossain -