Holberton-smiling-school

Project to implement from scratch a webpage only using HTML/CSS.

• In this project, you will implement 3 web pages with Bootstrap. You will use all HTML/CSS/Accessibility/Responsive design/Bootstrap knowledges that you learned previously.

• You won’t have a lot of instruction, you are free to implement it the way that you want - the objective is simple: Have fully functional web pages that look the same as the designer file.

Requirements

• You have to use Bootstrap
• Your styles.css must be as small as you can - you must use as much as you can Bootstrap

Using

• HTML5
• CSS3
• Bootstrap
• Visual Studio Code

Scratch

In the scratch we use a Figma file with all the images of the webpage to replicate. Link to the Figma file

Files

File	Description
1- 0-index.html, styles.css	Create the header/hero piece
2- 1-index.html, styles.css	Create the section “Carousel of quotes”
3- 2-index.html, styles.css	Create the section “Most popular tutorials”
4- 3-index.html, styles.css	Create the section “Free membership”
5- 4-index.html, styles.css	Create the section “Latest videos”
6- homepage.html , styles.css	Create the footer
7- 0-pricing.html, styles.css	create the header/hero piece
8- 1-pricing.html, styles.css	Create the prices grid
9- 2-pricing.html, styles.css	create the Carousel of quotes
10- 3-pricing.html, styles.css	Create the FAQ grid
11- pricing.html, styles.css	create the footer
12- 0-courses.html, styles.css	create the header/hero piece
13- 1-courses.html, styles.css	Create the search filters section
14- 2-courses.html, styles.css	Create the result section of courses
15- courses.html, styles.css	create the footer

Result

Interactions note:

• Web pages must switch to the tablet version when the screen width is 768px
• Web pages must switch to the mobile version when the screen width is 576px
• button hover/active: opacity: 0.9

Author

• Youssef Belhadj