Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Lorellana21/Glamping-landing-page
This is my adaptation of the Module 1`s final test aimed to develop a landing page under a given design and to resolve several points. I have used the project I created as an entrepreneur: Glamping Al-Andalus.
https://github.com/Lorellana21/Glamping-landing-page
css-animations css-flexbox css-grid css3 homepage html5 landing-page layout media-queries sass transition zeplin
Last synced: 11 days ago
JSON representation
This is my adaptation of the Module 1`s final test aimed to develop a landing page under a given design and to resolve several points. I have used the project I created as an entrepreneur: Glamping Al-Andalus.
- Host: GitHub
- URL: https://github.com/Lorellana21/Glamping-landing-page
- Owner: Lorellana21
- License: mit
- Created: 2021-04-23T07:21:41.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2021-10-29T11:31:42.000Z (about 3 years ago)
- Last Synced: 2024-07-30T21:08:28.756Z (3 months ago)
- Topics: css-animations, css-flexbox, css-grid, css3, homepage, html5, landing-page, layout, media-queries, sass, transition, zeplin
- Language: SCSS
- Homepage: https://lorellana21.github.io/Glamping-landing-page/
- Size: 6.87 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Final assessment
The exercise consists of developing a website according to a given design. Several points have to be solved:
- Use Sass.
- Use flexbox and CSS Grid.
- Use media queries.
- Solve some interactions using transitions.
#### Mobile version (in a single column down)
#### Tablet and Desktop version:
### Layout
1. The _hamburger button_ (in the top left corner) should be fixed at the top of the screen and should not disappear when scrolling. The hamburger icon must be a link to a Adalab´s web page. This hamburger menu does not display any submenus.
1. First module (_Hero_): it must be laid out with flexbox and must occupy the total height of the browser window.
1. Second module (_Tips_): it can be laid out using CSS properties of your choice.
1. Third module (_3 Reasons_): the 3 elements of the list must be laid out with CSS Grid in at least one screen size.
1. Fourth module (_Footer_): it must be laid out using flexbox. All texts in the column "ARTICLES" and all the texts in the "TWITTER" column must be links.
### Interaction
In total, there are several interactions to resolve:
1. The _arrow button_ in the hero module must link to the "3 Reasons" section.
1. The footer _arrow button_ must link to the top of the page.
1. All footer links should go to https://adalab.es.
1. In the hover of the buttons ("Go" and "3 Reasons") you must include a transition.
1. BONUS: make a small animation in the footer button.
---
## Assessment criteria
**General**:
- Use a proper file and folder structure for a web project, and link the different files and folders well.
- Use version control with branches to manage a code project.
**HTML**
- Have the code perfectly indented
- Create HTML code with correct, well-structured syntax.
- Use appropriate semantic HTML tags for each piece of content.
**CSS / Sass**
- Have the code perfectly indented
- Create Sass code with correct, well-structured syntax.
- Use some Sass features such as variables, nesting and partials.
Use CSS code that makes intensive use of class selectors. Do not use tag selectors or id
- Use class selectors in English
- Use the CSS box model appropriately to specify size, padding and margins.
- Use text and background styles for different types of elements.
- Use flexbox appropriately to organise elements into flexible boxes.
- Use media queries to make layouts fit different device sizes.
- Use positioning to place fixed and absolute elements on the screen.
- Use CSS grid to place elements using a grid.
- Use CSS transitions to add dynamism to a web project.
---
## Module summary:
