Add-project-description-here | Voyage-8 | https://chingu.io/
Our project is a Landing Page of Condominio Seville Las Terrazas, in which we want to show the benefits and advantages of living in a condominium like this. For the header, we implement a menu with the CSS flexbox property which directs us to different sections of the page. If the screen decreases in size, the menu disappears and a button appears that displays the menu when clicked. In the next section we insert the title of the page plus an aerial photo of the pool of the condominium. The title has a container in the shape of a polygon with the logo of the condominium and we change the shape with the CSS clip-path property to the photo. To make it responsive, when the screen on a mobile or a Tablet the image disappears and only the title remains
The section ‘areas’ are comprised by diagonal frames that represents a vision that fulfils a fantasy for the people as they’re looking for the perfect place to live in. The buttons are there as a way for showing more images per area without scrolling a lot and keep it within the correspondant section. The major challenge for me here was to insert images within that frame and keep things in place. That particular frame shape lead to create an adaptative design with a different html section and CSS style for tablets and mobiles. So we added a media query that could hide/reveal the content and style depending on screen sizes. Also until the very last minute I was pushing myself to understand some JS and create a function that allows the user to switch the div image when clicking the buttons without succeed. Hernando was super helpful on this and helped me feel realized about this!
For the Carousel section, we used CSS animations to make the images transition and the CSS Flex properties to make it responsive so that it looks nice on every screen size, also for smaller screens like tablets and mobile devices, we added media queries to make the icons on the right wrap over the carousel, that way it looks more user friendly. The biggest challenge faced here was to successfully implementing the Carousel image transition in a way that works on every screen size without the addition of lots of code.
The Testimonials section was a bit easier to make, CSS Flex was used a couple of times to put everything in place and then we added an animation to make the testimonials pass by, if you want to stop and read any of then, you just have to hover on them or touch them to make them stop.