nouras98/relaxr

FEWD Week #3: CSS Layouts - Relaxr

Description

A hot, new NY Tech Startup, Relaxr, has approached you to help them develop a new landing page for their company. They've handed you the design file for the site, along with the copy and assets.

Starting in class, you will work to build out a more complex layout for their company site. They decided on creating a blog, and their back-end engineers will be focused on developing the blog's functionality. They want your front-end skills to style their designs using HTML and CSS so Relaxr's engineers can begin integrating.

The designers have handed you a basic design file with instructions and the JPEG below to help you bring the blog to life. Submit the finished version for homework.

---

Real-World Applications

• Build websites with multi-column layouts
• Turn complex design assets into code
• Style text on your page with Google Fonts

---

Technical Requirements

• Use CSS Flexbox or CSS Grid in your CSS to achieve a two-column layout
• Use the correct Open Sans Google Font typeface to style the text denoted in the design file and according to the JPEG provided
• Use proper filename conventions (lowercase, .html)
• Use a single external CSS stylesheet to style all pages
• Use a background image for the headers
• Add a hover effect to all the links using pseudo-classes
• Integrate drop caps using pseudo-classes

Bonus

• Link the "Blog" link in the header to GA Blog
• Link the "About" link in the header to MiSK Academy
• Up for a real challenge? Use <script> tags in your HTML and read ahead to make a dialogue box pop up when a user clicks "Sign Up Now!" that reads "We're Not Ready For Sign-Ups...Yet."

---

Resources

• Starter Code and Design File
• Documentation on integrating Drop Caps
• Documentation on CSS Pseudo-classes
• Starter Code, Assets, and Design File
• Prepare for JavaScript/jQuery
• Read ahead on jQuery basics