├── 1_simple ├── coming-soon-page │ ├── coming-soon.png │ ├── forest.jpg │ └── readme.md ├── generic-business-page │ ├── generic-business-desktop.png │ ├── generic-business-mobile.png │ ├── generic-business.gif │ └── readme.md ├── street-artist-page │ ├── images │ │ ├── boy.jpg │ │ ├── streetart.jpg │ │ ├── streetart2.jpg │ │ ├── streetart3.jpg │ │ ├── streetart4.jpg │ │ └── streetart5.jpg │ ├── readme.md │ ├── street-artist-desktop.png │ └── street-artist-mobile.png └── webpage-generic │ ├── readme.md │ ├── webpage-generic-desktop.png │ ├── webpage-generic-mobile.png │ ├── webpage-generic-tablet.png │ └── webpage-generic.gif ├── 2_moderate ├── blog │ ├── blog-desktop.png │ ├── blog-phone.png │ ├── blog-tablet.png │ ├── images │ │ ├── avatar_g.jpg │ │ ├── bridge.jpg │ │ ├── gondol.jpg │ │ ├── rock.jpg │ │ ├── skies.jpg │ │ ├── woods.jpg │ │ └── workshop.jpg │ └── readme.md └── portfolio │ ├── images │ ├── avatar3.png │ ├── coffee.jpg │ ├── sound.jpg │ └── workbench.jpg │ ├── porfolio-tablet.png │ ├── portfolio-desktop.png │ ├── portfolio-mobile.png │ ├── portfolio.gif │ └── readme.md ├── 3_complex ├── interior-design │ ├── images │ │ ├── atrium.jpg │ │ ├── bedroom.jpg │ │ ├── diningroom.jpg │ │ ├── kitchenconcrete.jpg │ │ ├── livingroom.jpg │ │ ├── livingroom2.jpg │ │ ├── team1.jpg │ │ ├── team2.jpg │ │ └── team3.jpg │ ├── interior-design-desktop.png │ ├── interior-design-mobile.png │ ├── interior-design-tablet.png │ ├── interior-design.gif │ └── readme.md └── social-media-profile │ ├── images │ ├── avatar2.png │ ├── avatar3.png │ ├── avatar5.png │ ├── avatar6.png │ ├── fjords.jpg │ ├── forest.jpg │ ├── lights.jpg │ ├── mountains.jpg │ └── nature.jpg │ ├── readme.md │ ├── social-media-profile-desktop.png │ ├── social-media-profile-mobile.png │ └── social-media-profile.gif └── readme.md /1_simple/coming-soon-page/coming-soon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gocodeup/css-bonus-challenges/c2421cae16cb4ac9dc296ef57d4246354da94bdf/1_simple/coming-soon-page/coming-soon.png -------------------------------------------------------------------------------- /1_simple/coming-soon-page/forest.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gocodeup/css-bonus-challenges/c2421cae16cb4ac9dc296ef57d4246354da94bdf/1_simple/coming-soon-page/forest.jpg -------------------------------------------------------------------------------- /1_simple/coming-soon-page/readme.md: -------------------------------------------------------------------------------- 1 | ## Specs 2 | 3 | - font-family: Raleway, sans-serif; -------------------------------------------------------------------------------- /1_simple/generic-business-page/generic-business-desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gocodeup/css-bonus-challenges/c2421cae16cb4ac9dc296ef57d4246354da94bdf/1_simple/generic-business-page/generic-business-desktop.png -------------------------------------------------------------------------------- /1_simple/generic-business-page/generic-business-mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gocodeup/css-bonus-challenges/c2421cae16cb4ac9dc296ef57d4246354da94bdf/1_simple/generic-business-page/generic-business-mobile.png -------------------------------------------------------------------------------- /1_simple/generic-business-page/generic-business.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gocodeup/css-bonus-challenges/c2421cae16cb4ac9dc296ef57d4246354da94bdf/1_simple/generic-business-page/generic-business.gif -------------------------------------------------------------------------------- /1_simple/generic-business-page/readme.md: -------------------------------------------------------------------------------- 1 | ## Specs 2 | 3 | - title font-family: "Montserrat", sans-serif; 4 | - primary font-family: Lato, sans-serif; 5 | - mobile-breakpoint: 600px and below 6 | - main content width: about 1000px 7 | - fluid navbar -------------------------------------------------------------------------------- /1_simple/street-artist-page/images/boy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gocodeup/css-bonus-challenges/c2421cae16cb4ac9dc296ef57d4246354da94bdf/1_simple/street-artist-page/images/boy.jpg -------------------------------------------------------------------------------- /1_simple/street-artist-page/images/streetart.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gocodeup/css-bonus-challenges/c2421cae16cb4ac9dc296ef57d4246354da94bdf/1_simple/street-artist-page/images/streetart.jpg -------------------------------------------------------------------------------- /1_simple/street-artist-page/images/streetart2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gocodeup/css-bonus-challenges/c2421cae16cb4ac9dc296ef57d4246354da94bdf/1_simple/street-artist-page/images/streetart2.jpg -------------------------------------------------------------------------------- /1_simple/street-artist-page/images/streetart3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gocodeup/css-bonus-challenges/c2421cae16cb4ac9dc296ef57d4246354da94bdf/1_simple/street-artist-page/images/streetart3.jpg -------------------------------------------------------------------------------- /1_simple/street-artist-page/images/streetart4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gocodeup/css-bonus-challenges/c2421cae16cb4ac9dc296ef57d4246354da94bdf/1_simple/street-artist-page/images/streetart4.jpg -------------------------------------------------------------------------------- /1_simple/street-artist-page/images/streetart5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gocodeup/css-bonus-challenges/c2421cae16cb4ac9dc296ef57d4246354da94bdf/1_simple/street-artist-page/images/streetart5.jpg -------------------------------------------------------------------------------- /1_simple/street-artist-page/readme.md: -------------------------------------------------------------------------------- 1 | ## Specs 2 | 3 | - primary font-family: Raleway, sans-serif; 4 | - Central title for "About" is font-family: "Segoe UI", Arial, sans-serif; 5 | - mobile breakpoint: 600px and below 6 | - main container width: 1500px -------------------------------------------------------------------------------- /1_simple/street-artist-page/street-artist-desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gocodeup/css-bonus-challenges/c2421cae16cb4ac9dc296ef57d4246354da94bdf/1_simple/street-artist-page/street-artist-desktop.png -------------------------------------------------------------------------------- /1_simple/street-artist-page/street-artist-mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gocodeup/css-bonus-challenges/c2421cae16cb4ac9dc296ef57d4246354da94bdf/1_simple/street-artist-page/street-artist-mobile.png -------------------------------------------------------------------------------- /1_simple/webpage-generic/readme.md: -------------------------------------------------------------------------------- 1 | ## Specs 2 | 3 | - font-family: Roboto, sans-serif; 4 | - tablet width breakpoint: 992px and below 5 | - mobile width breakpoint: 600px and below 6 | 7 | -------------------------------------------------------------------------------- /1_simple/webpage-generic/webpage-generic-desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gocodeup/css-bonus-challenges/c2421cae16cb4ac9dc296ef57d4246354da94bdf/1_simple/webpage-generic/webpage-generic-desktop.png -------------------------------------------------------------------------------- /1_simple/webpage-generic/webpage-generic-mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gocodeup/css-bonus-challenges/c2421cae16cb4ac9dc296ef57d4246354da94bdf/1_simple/webpage-generic/webpage-generic-mobile.png -------------------------------------------------------------------------------- /1_simple/webpage-generic/webpage-generic-tablet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gocodeup/css-bonus-challenges/c2421cae16cb4ac9dc296ef57d4246354da94bdf/1_simple/webpage-generic/webpage-generic-tablet.png -------------------------------------------------------------------------------- /1_simple/webpage-generic/webpage-generic.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gocodeup/css-bonus-challenges/c2421cae16cb4ac9dc296ef57d4246354da94bdf/1_simple/webpage-generic/webpage-generic.gif -------------------------------------------------------------------------------- /2_moderate/blog/blog-desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gocodeup/css-bonus-challenges/c2421cae16cb4ac9dc296ef57d4246354da94bdf/2_moderate/blog/blog-desktop.png -------------------------------------------------------------------------------- /2_moderate/blog/blog-phone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gocodeup/css-bonus-challenges/c2421cae16cb4ac9dc296ef57d4246354da94bdf/2_moderate/blog/blog-phone.png -------------------------------------------------------------------------------- /2_moderate/blog/blog-tablet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gocodeup/css-bonus-challenges/c2421cae16cb4ac9dc296ef57d4246354da94bdf/2_moderate/blog/blog-tablet.png -------------------------------------------------------------------------------- /2_moderate/blog/images/avatar_g.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gocodeup/css-bonus-challenges/c2421cae16cb4ac9dc296ef57d4246354da94bdf/2_moderate/blog/images/avatar_g.jpg -------------------------------------------------------------------------------- /2_moderate/blog/images/bridge.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gocodeup/css-bonus-challenges/c2421cae16cb4ac9dc296ef57d4246354da94bdf/2_moderate/blog/images/bridge.jpg -------------------------------------------------------------------------------- /2_moderate/blog/images/gondol.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gocodeup/css-bonus-challenges/c2421cae16cb4ac9dc296ef57d4246354da94bdf/2_moderate/blog/images/gondol.jpg -------------------------------------------------------------------------------- /2_moderate/blog/images/rock.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gocodeup/css-bonus-challenges/c2421cae16cb4ac9dc296ef57d4246354da94bdf/2_moderate/blog/images/rock.jpg -------------------------------------------------------------------------------- /2_moderate/blog/images/skies.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gocodeup/css-bonus-challenges/c2421cae16cb4ac9dc296ef57d4246354da94bdf/2_moderate/blog/images/skies.jpg -------------------------------------------------------------------------------- /2_moderate/blog/images/woods.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gocodeup/css-bonus-challenges/c2421cae16cb4ac9dc296ef57d4246354da94bdf/2_moderate/blog/images/woods.jpg -------------------------------------------------------------------------------- /2_moderate/blog/images/workshop.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gocodeup/css-bonus-challenges/c2421cae16cb4ac9dc296ef57d4246354da94bdf/2_moderate/blog/images/workshop.jpg -------------------------------------------------------------------------------- /2_moderate/blog/readme.md: -------------------------------------------------------------------------------- 1 | ## Specs 2 | 3 | - primary font-family: Raleway, sans-serif; 4 | - tablet width breakpoint: 992px and below 5 | - mobile width breakpoint: 600px and below 6 | - content container width: 1400px 7 | - footer is in a fluid container -------------------------------------------------------------------------------- /2_moderate/portfolio/images/avatar3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gocodeup/css-bonus-challenges/c2421cae16cb4ac9dc296ef57d4246354da94bdf/2_moderate/portfolio/images/avatar3.png -------------------------------------------------------------------------------- /2_moderate/portfolio/images/coffee.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gocodeup/css-bonus-challenges/c2421cae16cb4ac9dc296ef57d4246354da94bdf/2_moderate/portfolio/images/coffee.jpg -------------------------------------------------------------------------------- /2_moderate/portfolio/images/sound.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gocodeup/css-bonus-challenges/c2421cae16cb4ac9dc296ef57d4246354da94bdf/2_moderate/portfolio/images/sound.jpg -------------------------------------------------------------------------------- /2_moderate/portfolio/images/workbench.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gocodeup/css-bonus-challenges/c2421cae16cb4ac9dc296ef57d4246354da94bdf/2_moderate/portfolio/images/workbench.jpg -------------------------------------------------------------------------------- /2_moderate/portfolio/porfolio-tablet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gocodeup/css-bonus-challenges/c2421cae16cb4ac9dc296ef57d4246354da94bdf/2_moderate/portfolio/porfolio-tablet.png -------------------------------------------------------------------------------- /2_moderate/portfolio/portfolio-desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gocodeup/css-bonus-challenges/c2421cae16cb4ac9dc296ef57d4246354da94bdf/2_moderate/portfolio/portfolio-desktop.png -------------------------------------------------------------------------------- /2_moderate/portfolio/portfolio-mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gocodeup/css-bonus-challenges/c2421cae16cb4ac9dc296ef57d4246354da94bdf/2_moderate/portfolio/portfolio-mobile.png -------------------------------------------------------------------------------- /2_moderate/portfolio/portfolio.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gocodeup/css-bonus-challenges/c2421cae16cb4ac9dc296ef57d4246354da94bdf/2_moderate/portfolio/portfolio.gif -------------------------------------------------------------------------------- /2_moderate/portfolio/readme.md: -------------------------------------------------------------------------------- 1 | ## Specs 2 | 3 | - header font-family: "Segoe UI", Arial, sans-serif; 4 | - primary font-family: Verdana, sans-serif; 5 | - main container width is 1300px 6 | - mobile width breakpoint: 600px and below -------------------------------------------------------------------------------- /3_complex/interior-design/images/atrium.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gocodeup/css-bonus-challenges/c2421cae16cb4ac9dc296ef57d4246354da94bdf/3_complex/interior-design/images/atrium.jpg -------------------------------------------------------------------------------- /3_complex/interior-design/images/bedroom.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gocodeup/css-bonus-challenges/c2421cae16cb4ac9dc296ef57d4246354da94bdf/3_complex/interior-design/images/bedroom.jpg -------------------------------------------------------------------------------- /3_complex/interior-design/images/diningroom.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gocodeup/css-bonus-challenges/c2421cae16cb4ac9dc296ef57d4246354da94bdf/3_complex/interior-design/images/diningroom.jpg -------------------------------------------------------------------------------- /3_complex/interior-design/images/kitchenconcrete.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gocodeup/css-bonus-challenges/c2421cae16cb4ac9dc296ef57d4246354da94bdf/3_complex/interior-design/images/kitchenconcrete.jpg -------------------------------------------------------------------------------- /3_complex/interior-design/images/livingroom.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gocodeup/css-bonus-challenges/c2421cae16cb4ac9dc296ef57d4246354da94bdf/3_complex/interior-design/images/livingroom.jpg -------------------------------------------------------------------------------- /3_complex/interior-design/images/livingroom2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gocodeup/css-bonus-challenges/c2421cae16cb4ac9dc296ef57d4246354da94bdf/3_complex/interior-design/images/livingroom2.jpg -------------------------------------------------------------------------------- /3_complex/interior-design/images/team1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gocodeup/css-bonus-challenges/c2421cae16cb4ac9dc296ef57d4246354da94bdf/3_complex/interior-design/images/team1.jpg -------------------------------------------------------------------------------- /3_complex/interior-design/images/team2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gocodeup/css-bonus-challenges/c2421cae16cb4ac9dc296ef57d4246354da94bdf/3_complex/interior-design/images/team2.jpg -------------------------------------------------------------------------------- /3_complex/interior-design/images/team3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gocodeup/css-bonus-challenges/c2421cae16cb4ac9dc296ef57d4246354da94bdf/3_complex/interior-design/images/team3.jpg -------------------------------------------------------------------------------- /3_complex/interior-design/interior-design-desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gocodeup/css-bonus-challenges/c2421cae16cb4ac9dc296ef57d4246354da94bdf/3_complex/interior-design/interior-design-desktop.png -------------------------------------------------------------------------------- /3_complex/interior-design/interior-design-mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gocodeup/css-bonus-challenges/c2421cae16cb4ac9dc296ef57d4246354da94bdf/3_complex/interior-design/interior-design-mobile.png -------------------------------------------------------------------------------- /3_complex/interior-design/interior-design-tablet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gocodeup/css-bonus-challenges/c2421cae16cb4ac9dc296ef57d4246354da94bdf/3_complex/interior-design/interior-design-tablet.png -------------------------------------------------------------------------------- /3_complex/interior-design/interior-design.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gocodeup/css-bonus-challenges/c2421cae16cb4ac9dc296ef57d4246354da94bdf/3_complex/interior-design/interior-design.gif -------------------------------------------------------------------------------- /3_complex/interior-design/readme.md: -------------------------------------------------------------------------------- 1 | ## Specs 2 | 3 | - primary font-family: Poppins, sans-serif; 4 | - side bar is 300px wide in desktop view, rest is fluid 5 | - tablet width breakpoint: less than 662px 6 | - a css transition is used when resizing between tablet and desktop 7 | - mobile width breakpoint: 600px and under 8 | -------------------------------------------------------------------------------- /3_complex/social-media-profile/images/avatar2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gocodeup/css-bonus-challenges/c2421cae16cb4ac9dc296ef57d4246354da94bdf/3_complex/social-media-profile/images/avatar2.png -------------------------------------------------------------------------------- /3_complex/social-media-profile/images/avatar3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gocodeup/css-bonus-challenges/c2421cae16cb4ac9dc296ef57d4246354da94bdf/3_complex/social-media-profile/images/avatar3.png -------------------------------------------------------------------------------- /3_complex/social-media-profile/images/avatar5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gocodeup/css-bonus-challenges/c2421cae16cb4ac9dc296ef57d4246354da94bdf/3_complex/social-media-profile/images/avatar5.png -------------------------------------------------------------------------------- /3_complex/social-media-profile/images/avatar6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gocodeup/css-bonus-challenges/c2421cae16cb4ac9dc296ef57d4246354da94bdf/3_complex/social-media-profile/images/avatar6.png -------------------------------------------------------------------------------- /3_complex/social-media-profile/images/fjords.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gocodeup/css-bonus-challenges/c2421cae16cb4ac9dc296ef57d4246354da94bdf/3_complex/social-media-profile/images/fjords.jpg -------------------------------------------------------------------------------- /3_complex/social-media-profile/images/forest.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gocodeup/css-bonus-challenges/c2421cae16cb4ac9dc296ef57d4246354da94bdf/3_complex/social-media-profile/images/forest.jpg -------------------------------------------------------------------------------- /3_complex/social-media-profile/images/lights.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gocodeup/css-bonus-challenges/c2421cae16cb4ac9dc296ef57d4246354da94bdf/3_complex/social-media-profile/images/lights.jpg -------------------------------------------------------------------------------- /3_complex/social-media-profile/images/mountains.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gocodeup/css-bonus-challenges/c2421cae16cb4ac9dc296ef57d4246354da94bdf/3_complex/social-media-profile/images/mountains.jpg -------------------------------------------------------------------------------- /3_complex/social-media-profile/images/nature.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gocodeup/css-bonus-challenges/c2421cae16cb4ac9dc296ef57d4246354da94bdf/3_complex/social-media-profile/images/nature.jpg -------------------------------------------------------------------------------- /3_complex/social-media-profile/readme.md: -------------------------------------------------------------------------------- 1 | ## Specs 2 | 3 | - primary font-family: "Open Sans", sans-serif; 4 | - container for navbar and footer is fluid 5 | - main container width is 1400px 6 | - mobile width breakpoint: 600px and below -------------------------------------------------------------------------------- /3_complex/social-media-profile/social-media-profile-desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gocodeup/css-bonus-challenges/c2421cae16cb4ac9dc296ef57d4246354da94bdf/3_complex/social-media-profile/social-media-profile-desktop.png -------------------------------------------------------------------------------- /3_complex/social-media-profile/social-media-profile-mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gocodeup/css-bonus-challenges/c2421cae16cb4ac9dc296ef57d4246354da94bdf/3_complex/social-media-profile/social-media-profile-mobile.png -------------------------------------------------------------------------------- /3_complex/social-media-profile/social-media-profile.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gocodeup/css-bonus-challenges/c2421cae16cb4ac9dc296ef57d4246354da94bdf/3_complex/social-media-profile/social-media-profile.gif -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # CSS Bonus Challenges 2 | 3 | This repo contains various example UI's that may be used to practice HTML and CSS styling. The UI's are roughly grouped by level of complexity. No CSS frameworks should be used. Using CSS Grid, Flexbox, and SASS will be helpful but not required. For determining colors, if using a Mac, use the Digital Color Meter to determine the correct color. Again, no CSS frameworks should be used but building a custom grid system may be helpful. 4 | 5 | Each example UI contains images needed, a list of formal specifications, and in some cases, a GIF to illustrate functionality. Additional fonts and icons may need to be imported. --------------------------------------------------------------------------------