Skip to content
Keenan edited this page Aug 14, 2023 · 42 revisions

Welcome to the landing_page wiki!

Objective

I will create my own copy of the Odin Project's Landing Page Layout. The layout is very simple so I will use this as an opportunity to demonstrate that I can not only improve the look of the layout but make it responsive for mobile devices. I promised my dog that I would become a software engineer. I am going make that promise a reality!

  • Project Written Mobile First
  • Demonstrates focus on writing human readable code
  • Maintain low specificity
  • Responsive Web Design
  • Accessibility
  • Royalty Free Image Use

Live Preview:

https://webdevkeenan.github.io/landing_page/

Youtube Video Demo:

https://youtu.be/U_tMbUFzRac

[Odin Project Layout]

01

landing-page_projectsketch

v1.0 [My Version]

01

v1.1

Screenshot 2023-08-06 at 12-11-43 Landing Page

v2.0 [PC/Smart TV View]

A tribute page to my beloved furry companion who passed away while I was learning to code. I decided to use gradient and a "steel blue" color because it gives the site a calm/serene tone while creating a modern look. I wanted to create a tribute for him and the best way to do that was to build a good experience for anyone that visits the site. I incorporated as much of his physical memorial that I could to the site.

Notes

  • The card is from the veterinary office.
  • The Corn Yellow Paw print Background are his actual paw prints.
  • I added interactivity and transitions to every link/button/image. Visited Links are left highlighted.

Screenshot 2023-08-09 at 10-31-01 Shadow Tribute

[Mobile view]

Screenshot 2023-08-10 at 21-20-49 Shadow Tribute

[Tablet View] (With Sliding Navbar/Menu)

Screenshot 2023-08-10 at 21-18-43 Shadow Tribute

Image Credits:

Clone this wiki locally