Week 1 Checkpoint - Site Clone

Site-Clone layout

Using Wireframes and Mock-Ups is common in the developer world, especially when working on a larger team where you will have specific designers making design decisions and developers taking those designs to make a reality. In this challenge students will complete a site based on a template provided to them by the design team.

Goals Students will demonstrate an understanding of following a design provided for them, utilizing HTML/CSS and Bootstrap to achieve the appearance of the site designed for them.

Setup A good first step is to take the template you have been given, and either open the image in a program such as paint, or draw it out on paper; that way you can better determine the architecture of your document, laying out all the containers, rows, and columns

When you are ready to start coding, you will need to create a new application in your command line and create the HTML and CSS files for it. You will also want to grab any external CSS libraries such as bootstrap and include them in your head tag.

Remember, load order is important. Pay attention to which link tag is where, in order to maintain the proper flows and overrides of your CSS.

reference: https://www.figma.com/file/vewXfmgWeQN9QCw9ELYdiI/Clone-Site?node-id=0%3A1

Requirements:

• The page utilizes the Bootstrap Grid system to maintain a proper architecture
• Appropriate use of HTML5 Semantic tags for the header, main and footer
• On mobile any elements sharing a row should stack
• Utilizes custom font on at least one element
• Sticky Navbar on scroll
• The Text Over Image is hidden on mobile (@media Rule)
• The Card spills out of the row on medium and larger screens
• Must use external Icon library (FontAwesome, Material Icons, etc.)
• Specified elements order changes based on screen size
• Cards are vertically centered with the center card larger for emphasis
• Appropriate use of Margins and Padding Stretch goals Add some CSS Animations to the page Utilize scroll to in page navigation Swap one of your images for a