Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Learning CSS with restaurant page
body {
/*color: blue;*/
font-family: Arial, Helvetica;
background: url("burgers.jpeg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
header {
background: rgba(234, 173, 91, 0.8);
color: white;
text-align: center;
margin: 20px;
padding: 20px 20px 40px; /*works like a clock starting at noon*/
header p {
color: #8A2D0F;
font-weight: bold;
text-transform: lowercase;
#page-title {
font-size: 3.2em;
.restaurant-group {
border: 1px solid rgb(234, 173, 91);
padding: 20px;
margin: 20px;
background-color: rgba(253, 236, 211, 0.9)
.restaurant-group h2 {
color: blue;
letter-spacing: 4px;
text-transform: uppercase;
color: #8A2D0F;
.restaurant-group h3 {
font-weight: normal;
font-style: italic;
color: #A2877E;
.restaurant-group a {
text-decoration: none;
border: 1px solid #8A2D0F;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
background-color: #A2877E;
color: white;
padding: 10px;
.restaurant-group a:hover {
background-color: white;
color: #A2877E;
p {
font-size: 1.2em;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-weight: 100; /*100-900 or bold or normal*/
color: #333; /*darker grey*/
line-height: 1.7;
/*Float the image to the right, but stop floating at the paragraph*/
.restaurant-group img {
float: right;
.restaurant-group p {
clear: both;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment