ADWEEK Year In Review: Key Trends & Insights
This HTML snippet represents the author details and sidebar section of an article on Adweek.com. Let’s break it down:
1. Author Information (.author-bottom)
* Container: <div class="author-bottom border-top border-bottom py-5 d-flex flex-column mt-4 mb-4 gap-5"> – This is the main container for the author’s details. It has top and bottom borders, padding (py-5), uses flexbox for layout (d-flex, flex-column), and margin top/bottom (mt-4, mb-4). gap-5 adds spacing between the elements within.
* Row: <div class="row mx-0 gap-x-2 align-items-center"> - A Bootstrap row to organize the author’s image and details. mx-0 removes horizontal margins, gap-x-2 adds horizontal spacing, and align-items-center vertically aligns the items.
* Author Image:
* <div class="col-12 col-sm-2 p-0 mb-4 mb-sm-0 d-flex justify-content-center justify-content-sm-start"> – A column for the author’s image. It takes up the full width on small screens (col-12) and 2 columns on larger screens (col-sm-2). Padding is removed (p-0), and margin bottom is added (mb-4, mb-sm-0).Flexbox is used to center the image on small screens and align it to the start on larger screens.
* <a href="https://www.adweek.com/contributor/alison-weissbrot/" class="author"> – A link to the author’s profile page.
* <div class="section--story_partner"><img src="https://www.adweek.com/wp-content/uploads/2024/10/AlisonWeissbrot.jpg" alt="Headshot of Alison Weissbrot" class="image image--avatar contributor-img object-fit-cover img-fluid rounded-circle"/></div> – The author’s image. It’s a circular image (rounded-circle), responsive (img-fluid), and uses object-fit-cover to ensure the image fills the circle without distortion.
* Author details:
* <div class="col-12 col-sm-10 px-sm-3 ps-md-4 text-center text-sm-start author-details d-inline-flex flex-column gap-2"> – A column for the author’s name and bio. It takes up the full width on small screens (col-12) and 10 columns on larger screens (col-sm-10).Padding is added on larger screens (px-sm-3, ps-md-4), text is centered on small screens and aligned to the start on larger screens, and flexbox is used to stack the name and bio vertically. gap-2 adds spacing between the name and bio.
* <h4 class="text-center text-sm-start d-inline mb-0 pr-md-1 lh-1"><a class="text-decoration-none fw-bold text-uppercase" href="https://www.adweek.com/contributor/alison-weissbrot/">Alison Weissbrot</a></h4> – The author’s name, linked to their profile. It’s bold (fw-bold), uppercase (text-uppercase), and has no text decoration (text-decoration-none).
* <p class="text-center text-sm-start font-body mb-0">Alison Weissbrot is executive editor at ADWEEK, overseeing agency, brand and creative news coverage. She was previously editor in chief of Campaign US and spent nearly five years at AdExchanger covering agencies and convergent TV. She is based in New York.</p> – The author’s bio.
**2