Website for a fictional web design company (The design has been provided by Ironhack). This includes a few pages:
- a home page
- a project page
- a contact page with a form
- a 404 error page
- HTML, CSS
- Programming Language: [JavaScript]
https://valekimifirstdeploy.netlify.app
- Jarko Garrido - Prof. Bootcamp Front End
- Ironhack Barcelona
====================================
- All pages are composed by a menu, where the active pages are highlighted in compare to the inactive ones.
- Home Partners Logos are in grayscale but when hovering get the real color
- All the cards, projects and services, have a shadow and they increase their size when on hover
- When in Project or Contact page, if we click in the menu in pages we did not implemented, we get to a page 404
-
in Project Page, the informations of the different projects are taken from a given endpoint url, which i fetched with JavaScript to be able to retrieve the data in the order i needed. First project has been taken has a position [3], the other 3 in the card has been taken in a reverse order starting from position [1].
-
Contact form has been validated in Javascript with a function to give an error message if the user leaves the imput empty.
- Extra: implemented a Successful snackbar (in HTML, CSS and Javascript) for when the user submit correctly the form.
====================================
I created 2 Media Queries:
- width 780px, more adapt for tablets
- width 390px, more adapt for mobile
The main differences from the full width are the following:
the positioning of the image change to the top of the text and all together is more central aligned.
the emoji are no longer visible
input and button go vertically
the orientation change, from horizontal to vertical
all the inputs are one below the other taking the full width
the menu disappears and gives visibility to a burger menu instead
====================================
I was pretty surprised to be able to accomplished even half of what i did! So I am quite satisfied about the result. However, if I would have had more time, i would have:
- connected the burger menu when in responsive screen
- adjusted those sections in home which are larger than the other saction (testimonials and subscribe)
- made the footer responsive
- make sure that all the body stays in the center of the page
- made everything pixel perfect
- checked alternatives of the used functions in Javascript
====================================
I can tell i really enjoyed developing my first website, was a fulfilling challenge. If you have any questions or suggestions, feel free to reach out to me. Thanks for reading, Valekimi 🙆🏻♀️