body
div#app
div
div.hidden lg:block lg:h-15
header.lg:bg-white fixed top-0 left-0 w-full z-40 transition
-margin duration-300
main
div
div.relative mb-12 lg-mb-24
div.bg-brand-gray relative
img
div.sticky bottom-0
div.fade-up big
div.absolute top-0 left-0 w-full my-8
div.px-8 mt-8 md:mt-0
div.sticky bottom-0
div.mt-4 md:mt-8 px-4 lg:px-8
ul.sm:flex flex-wrap justify center -mx-4
li.lg:w-1/3:mb-20
a.group
div
div.notouch:group-hover:rounded-img pb-ratio-
portrait relative bg-brand-gray overlfow-hidden
rounded-none transition-radius duration-400
div.text-center
h2.text-exl md:text-6xl mt-8 font-windsor
break-words
div.text-bump mt-8 font-janson px-2 max-w-prose
mx-auto whitespace-pre-linex
div.line-clamp-3 mb-4
div.line-clamp-3
li
li
li
.
.
.
.
.
.
There were many dividers, some not named. It was well structured. This is the main page. Within it, there was a header with a divider icon that linked to things like shopping and subscribing. The right corner has a shopping car. Under the header, the large image showcases the most recent(?) article. The text with the link to the article and the name scrolls on top of the image. It's a sticky that starts from the overlap and then as you scroll, it gets back to its place. I could see that this webpage uses "position" to create interesting elements.
The different articles are in an un-ordered list below the feature article. The list is consistent of links to the different articles. They all had the same format. Each had a hover effect that rounded the image. It was a cool way to signify the mouse. When hovering over the article, some of them had other images or even a video that replaced the original image for the article. In the code, you can see a new line pop up that was hidden before. The line would say:div.absolute inset-0 bg-brand-grayer. I was unable to inspect it well because everytime I tried to click on the div it would go away.
I think that I had a bit harder time reading this, or many other websites because I'm not used to seeing the styling in the html code.