25. Background Gradient

  • CSS gradients add extra style to our site look, so we'll add it to our background.
  • We'll also apply it to our navbar.
  • We have to give credit to people who create code for our use. Always check licenses to see if you're allowed to use a bit of code.

###app/assets/stylesheets/application.css.scss

body, .navbar {
  //Gradient provided by @_ighosh at uiGradients.com
  background: #00c6ff; /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #00c6ff , #0072ff); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left, #00c6ff , #0072ff); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.navbar {
  border: none;
}

###Terminal

git status
git add .
git commit -m "Added gradient background"
git push origin pages_and_layout

Complete and Continue