RWD web pages with color block

Goal: try to create a single RWD web page with color block

1. randomly select a photo from google picture (use this one)

2. Use Adobe Color CC to create colors, and use those 5 colors as major colors for blocks

3. use webflow.com to create blocks with background color by using 5 major colors

4. insert 1:2 and 2:1 grid layout one by one for each block, and fill a white color block and random text for grid cell.

5. Applying padding 24px for each block, enlarge the font size & change font color. Done!

What’s next?

1. better alignment (center) & margin for color blocks & text

2. choose better font with proper size and color

Reference

100 Brilliant Color Combinations

Typography Cheat Sheet