Designing 3 Layouts with HTML and CSS

For this week’s class we were tasked with designing 3 separate HTML/CSS layouts using CodePen. Here are the sketches of my layouts along with the actual CodePen link.

LAYOUT 1: Stray Kids Tour Announcement

For Layout 1, one of my favorite bands is a K-pop group known as “Stray Kids.” They recently announced that they would be doing a tour in the US. Therefore, I wanted to design a page that looks like a newspaper article written about them. CodePen Link: https://codepen.io/elin7/pen/WPPqBj

LAYOUT 2: Recipe for Dim Sum

For Layout 2, I love Dim Sum so I thought it’d be fun to model this layout similar to that of a recipe that you can find online. CodePen Link: https://codepen.io/elin7/pen/KJYGwe

LAYOUT 3: Fruits-Basket Themed Special Webpage for Kinokuniya Bookstores

For Layout 3, I wanted to design a mini-landing page of sorts for Kinokuniya, a Japanese bookstore that I go to very often in the city. An anime I grew up with (Fruits Basket) is getting a reboot so I designed this using art from the new animation. I added links to the original website as well. CodePen Link: https://codepen.io/elin7/pen/ZwZqPE

Note: Some of my links, you need to hit the “click to open link in new tab” option even though I thought I had copied and pasted the code word for word from the slide.