Front End 1 Week 1 Assignment Directions

It is time to create something beautiful. Now you are going to create your own responsive (remember the breakpoints and media query) css template with all the things you have learned.

See the demo here. Pay attention to all details.

The main idea is to recreate that template with your own style, but you have to do it twice, one with floats and the other one with flexbox. The structure of the site has 2 .html files and 2 .css files, use index.html with float.css to make the project with floats and flexbox.html with flexbox.css to make it with flexbox. Create a link in each ‘.html’ file that navigates you between those 2 .html files (as the upper right corner in the demo)

Instructions:

1. Navigation:

• At the top of the page create a Navigation bar with links that takes you to an specific part of the page using the css target property and to the index.html or flexbox.html page (as the demo).
• Create a profile imagen (avatar) at the navigation bar trying to make the idea as it were a logged user
• Style the ::hover properties for the navigation bar’s items
• Make the navigation bar static (fixed) at the top of the page

2. Set a gradient background to the cover page (Select the color of your preference)
3. Add a rule for the main title importing a new style font
4. Create rows and columns. Each one with title, image and paragraph

• Rows: one with the photo to the right site of the page and another one to the left with their titles and paragraph

• columns: create columns with title at the top or bottom of the picture and leave the paragraph (description) as the last thing.

It is mandatory to work for any numbers of columns or rows, everything has to be centered and have to wrap all the content

5. Create a social media navigation (anywhere is fine) with icons
6. Create a footer at the end of the page (no needs to be sticky)
7. Add more things to make it better
8. Create a github’s repository like: Your_user_name.github.io And push all the changes into it, also we will be able to see the live site in https://Your_user_name.github.io/ as the demo before. this way we are using github pages

Create issues on the link below on the parent repo if you are stuck and want to talk about it. You can paste code, tag people and refer to other issues there. Please use it! It will be helpful for mentors and future students to see where common problems are. Link here: https://github.com/Code-the-Dream-School/Front-End-1-Week-1-Make-it-Beautiful/issues