Created
October 28, 2015 16:09
-
-
Save siakaramalegos/025211942f0260951964 to your computer and use it in GitHub Desktop.
Learning CSS with restaurant page
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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