Core 2 Interaction: Lab – Week 2: HTML Structure Analysis

Screenshot

Analysis

          
          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
                        .
                        .
                        .
                        .
                        .
                        .


          
More or Less Magazine

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.

Questions