Skip to content

Responsive web design using flexbox, grid and css transforms to add a little bit of interactivity.

Notifications You must be signed in to change notification settings

JaiaB/From-Portland-to-Portland

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

55 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

From Portland to Portland

A responsive webpage using Flexbox, CSS Grid and Media Queries

Hi! My name is Jaia and I'm a UX/UI & Product Designer who loves Front End Development.

Flexbox and CSS Grid were combined for the layout of the website and to achieve the desired styling of specific sections. Links are clickable, opening in a new page and feature CSS transitions when hovering over them. Images from the gallery section feature CSS scaling and box shadow when hovering over them. Media Queries were used to adapt the layout and pictrue gallery when viewing in smaller screens. This webpage was originally designed for a 1280px resolution. It's responsive up to 320px. HTML markup is semantic, CSS classes and root file are named and organized according to BEM Methodology. The language links on the header section will stay underlined according to the page the user is viewing. I accomplished this using CSS only.

Overall, this project has been super fun to make, I truly meant it when I said it was built with ❤️.

Next steps

  • Learn how to keep the language link underlined using JavaScript instead of CSS.
  • Setting up the Spanish version of the website. I want to make it accessible for people who don't understand English.

Thank you for stopping by! 🤓

Link to live webpage