Created
July 27, 2016 02:42
-
-
Save imrizzy/6f44d32cecb41c4c11d17dca12defae2 to your computer and use it in GitHub Desktop.
Practice 1
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
/* http://provenanceraleigh.com/ */ | |
@import url('//fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,700,800,900,300italic,400italic|Quicksand:100,200,300,400,500,600,700,800,900,300italic,400italic|Montserrat:100,200,300,400,500,600,700,800,900,300italic,400italic&subset=latin,latin-ext'); | |
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css'); | |
.clear { | |
clear: both; | |
} | |
body { | |
width: 100%; | |
height: auto; | |
padding: 0; | |
margin: 0; | |
font-family: 'Quicksand'; | |
-webkit-font-smoothing: antialiased; | |
} | |
.container-one { | |
/* background-color: #9cf; */ | |
background-image: url(http://provenanceraleigh.com/wp-content/uploads/2015/11/hero-banner-homepage.jpg); | |
background-size: 100%; | |
background-repeat: no-repeat; | |
height: 670px; | |
width: 100%; | |
margin: 0; | |
padding: 0; | |
display: inline-block; | |
float: left; | |
position: relative; | |
} | |
.container-one .fa-angle-down { | |
color: #439f46; | |
margin: 0; | |
padding: 0; | |
display: block; | |
left: 50%; | |
bottom: 20px; | |
position: absolute; | |
} | |
.container-one .header .address { | |
text-align: left; | |
color: white; | |
font-size: 13px; | |
padding-left: 15px; | |
float: left; | |
font-size: 0.6em; | |
} | |
.container-one .header .pn { | |
text-align: right; | |
color: white; | |
font-size: 13px; | |
padding-right: 15px; | |
float: right; | |
font-size: 0.6em; | |
} | |
.container-one .header .nav { | |
color: white; | |
height: 110px; | |
width: 100%; | |
float: left; | |
} | |
.container-one .header .nav .left { | |
float: left; | |
list-style-type: none; | |
overflow: hidden; | |
padding: 0; | |
margin: 0 0 0 25px; | |
} | |
.container-one .header .nav .left li { | |
display: inline-block; | |
margin: 0; | |
padding: 0; | |
font-size: 0.9em; | |
} | |
.container-one .header .nav .left li a:link { | |
display: block; | |
color: white; | |
text-decoration: none; | |
opacity: 0.3; | |
padding: 44px 20px; | |
text-align: center; | |
} | |
.container-one .header .nav .left li a:hover { | |
opacity: 1; | |
} | |
.container-one .header .nav .right { | |
float: right; | |
list-style-type: none; | |
overflow: hidden; | |
margin: 0 25px 0 0; | |
padding: 0; | |
} | |
.container-one .header .nav .right li{ | |
display: inline-block; | |
margin: 0; | |
padding: 0; | |
font-size: 0.9em; | |
} | |
.container-one .header .nav .right li a:link{ | |
display: block; | |
color: white; | |
text-decoration: none; | |
opacity: 0.3; | |
padding: 44px 20px; | |
text-align: center; | |
} | |
.container-one .header .nav .right li a:hover { | |
opacity: 1; | |
} | |
/* center image inside floated div that has floated elements */ | |
.container-one .header .nav .logo { | |
position: absolute; | |
left: 0; | |
right: 0; | |
margin: auto; | |
height: 108px; | |
} | |
.container-two { | |
height: auto; | |
width: 100%; | |
margin: 0; | |
padding: 0; | |
display: inline-block; | |
float: left; | |
position: relative; | |
background-image: url('http://provenanceraleigh.com/wp-content/themes/bridge-child/img/texture-beige.jpg'); | |
} | |
.container-two .promo { | |
background-image: url(http://provenanceraleigh.com/wp-content/uploads/2015/11/homepage-video-background.jpg?id=48); | |
background-size: cover; | |
background-position: center center; | |
width: 66%; | |
height: 520px; | |
float: right; | |
display: block; | |
position: relative; | |
} | |
.container-two .promo .play { | |
position: absolute; | |
background-color: rgba(0,0,0,0.3); | |
} | |
.container-two .promo .play:hover .fa-play { | |
color: #439f46; | |
} | |
.circle, .fa-play { | |
transition: all .7s ease; | |
} | |
.container-two .promo .play .fa-play:hover { | |
color: #439f46; | |
} | |
.container-two .promo .play .fa-play { | |
display: block; | |
float: left; | |
height: 50px; | |
width: 50px; | |
color: white; | |
} | |
.circle { | |
border: 2px solid white; | |
border-radius: 50%; | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
box-sizing: border-box; | |
width: 100px; | |
height: 100px; | |
padding: 20px 0 0 30px; | |
} | |
.circle:hover { | |
border-color: #439f46; | |
} | |
.container-two .container-def { | |
background-image: url('http://provenanceraleigh.com/wp-content/themes/bridge-child/img/texture-white.jpg'); | |
position: absolute; | |
margin: 0 0 0 60px; | |
padding: 0; | |
width: 33%; | |
top: 30%; | |
box-shadow: 0 0 40px rgba(0, 0, 0, 0.2); | |
} | |
.container-two .container-def .def-section { | |
padding: 3vw 10%; | |
margin: 0; | |
font-weight: 300; | |
} | |
.caps { | |
color: #6f625a; | |
text-transform: uppercase; | |
font-size: 14px; | |
} | |
.container-two .container-def .def-section .title { | |
position: absolute; | |
/* text-transform: uppercase; */ | |
/* font-size: 14px; */ | |
top: -34px; | |
left: 0; | |
/* color: #6f625a; */ | |
} | |
.container-two .container-def .def-section .word { | |
margin: 0; | |
padding: 0; | |
color: #303030; | |
font-size: 24px; | |
} | |
.container-two .container-def .def-section .def { | |
margin: 20px 0 30px; | |
padding: 0; | |
color: #303030; | |
font-size: 18px; | |
line-height: 1.5; | |
} | |
.container-two .container-def .def-section hr { | |
width: 65px; | |
height: 3px; | |
margin-top: 15px; | |
margin-left: 0; | |
padding: 0; | |
background-color: #fa9a3b; | |
display: block; | |
border: none; | |
} | |
/* .hr { | |
width: 65px; | |
height: 3px; | |
margin-top: 15px; | |
margin-left: 0; | |
padding: 0; | |
background-color: #fa9a3b; | |
display: block; | |
border: none; | |
} */ | |
.container-three { | |
display: inline-block; | |
height: auto; | |
width: 100%; | |
margin: 0; | |
padding: 60px 0 60px; | |
background: linear-gradient(to bottom, #273035 0%, #060C10 100%); | |
box-sizing: border-box; | |
} | |
.container-three .phil { | |
box-sizing: border-box; | |
width: 90%; | |
height: 650px; | |
padding: 0; | |
margin: auto; | |
background-image: url('http://provenanceraleigh.com/wp-content/themes/bridge-child/img/texture-black.jpg'); | |
position: relative; | |
box-shadow: 0 0 40px rgba(0, 0, 0, 0.2); | |
} | |
.container-three .phil .left { | |
background-image: url('http://provenanceraleigh.com/wp-content/uploads/2015/11/philosophy-teddy-foraging.jpg'); | |
background-repeat: no-repeat; | |
display: inline-block; | |
float: none; | |
width: auto; | |
height: 100%; | |
width: 30%; | |
padding: 0; | |
margin: 0; | |
} | |
.container-three .phil .middle { | |
display: inline-block; | |
width: 40%; | |
height: 100%; | |
padding: 100px 0; | |
margin: 0; | |
float: none; | |
position: absolute; | |
left: 30%; | |
box-sizing: border-box; | |
} | |
.container-three .phil .middle .title { | |
text-align: center; | |
margin-bottom: 20px; | |
} | |
.container-three .phil .middle .fa-quote-right { | |
color: #fa8a3b; | |
font-size: 20px; | |
float: none; | |
display: block; | |
text-align: center; | |
margin-left: auto; | |
margin-right: auto; | |
margin-bottom: 20px; | |
} | |
.container-three .phil .middle .explanation { | |
margin: 0; | |
height: 100%; | |
padding: 0 55px; | |
color: white; | |
font-weight: 400; | |
text-align: center; | |
display: table-cell; | |
vertical-align: middle; | |
} | |
.container-three .phil .middle .founder-name { | |
color: #6f625a; | |
text-align: center; | |
line-height: 1px; | |
margin-top: 40px; | |
} | |
.container-three .phil .middle .founder-title { | |
text-align: center; | |
line-height: 1px; | |
} | |
.container-three .phil .middle hr { | |
width: 65px; | |
height: 3px; | |
margin-top: 20px; | |
padding: 0; | |
background-color: #fa9a3b; | |
display: block; | |
text-align: center; | |
border: none; | |
} | |
.container-three .phil .right { | |
display: inline-block; | |
width: 30%; | |
height: 100%; | |
padding: 0; | |
margin: 0; | |
float: right; | |
background-image: url('http://provenanceraleigh.com/wp-content/uploads/2015/11/philosophy-radish.jpg'); | |
box-sizing: border-box; | |
} | |
.container-three .discover-button { | |
text-align: center; | |
} | |
.container-three #discover { | |
display: inline-block; | |
position: relative; | |
margin-top: 50px; | |
padding: 8px 15px 8px; | |
text-align: center; | |
letter-spacing: 1px; | |
font-weight: bold; | |
font-size: 13px; | |
color: #439f46; | |
text-transform: uppercase; | |
text-decoration: none; | |
border: 2px solid #439f46; | |
border-radius: 3px; | |
transition: all .2s ease; | |
} | |
.container-three #discover:hover { | |
background-color: #439f46; | |
color: white; | |
transition: all .2s ease; | |
} | |
.container-four { | |
background-image: url('http://provenanceraleigh.com/wp-content/uploads/2015/11/philosophy-homepage-pork-bg-sliced-2.jpg'); | |
background-size: cover; | |
background-repeat: no-repeat; | |
display: block; | |
height: 800px; | |
width: 100%; | |
position: relative; | |
} | |
.container-five { | |
background-image: url('http://provenanceraleigh.com/wp-content/themes/bridge-child/img/texture-white.jpg'); | |
background-size: 125px 125px; | |
background-repeat: repeat; | |
position: relative; | |
display: block; | |
width: 100%; | |
height: 700px; | |
margin: 0; | |
padding: 70px 5% 100px; | |
box-sizing: border-box; | |
} | |
.container-five .food-drink { | |
background-image: url('http://provenanceraleigh.com/wp-content/themes/bridge-child/img/texture-black.jpg'); | |
background-size: cover; | |
background-repeat: repeat; | |
display: block; | |
height: 100%; | |
width: auto; | |
box-sizing: border-box; | |
box-shadow: 0 0 40px rgba(0, 0, 0, 0.2); | |
} | |
.container-five .food-drink .image { | |
background-image: url('http://provenanceraleigh.com/wp-content/uploads/2015/12/provenance-slider-6.jpg'); | |
background-repeat: no-repeat; | |
background-size: cover; | |
background-position: center center; | |
/* float: left; */ | |
margin: 0; | |
padding: 0; | |
height: 100%; | |
width: 60%; | |
display: inline-block; | |
} | |
.container-five .food-drink .copy { | |
display: inline-block; | |
width: 40%; | |
height: 100%; | |
float: right; | |
margin: 0; | |
padding: 50px 5%; | |
box-sizing: border-box; | |
text-align: center; | |
} | |
.container-five .food-drink .copy #menus-button { | |
display: inline-block; | |
position: relative; | |
margin: 40px 0; | |
padding: 8px 15px 8px; | |
text-align: center; | |
letter-spacing: 1px; | |
font-weight: bold; | |
font-size: 13px; | |
color: #439f46; | |
text-transform: uppercase; | |
text-decoration: none; | |
border: 2px solid #439f46; | |
border-radius: 3px; | |
transition: all .2s ease; | |
} | |
.container-five .food-drink .copy #menus-button:hover { | |
background-color: #439f46; | |
color: white; | |
transition: all .2s ease; | |
} | |
.container-five .food-drink .copy .title { | |
color: white; | |
margin: 0; | |
padding: 0; | |
} | |
.container-five .food-drink .copy .farmers { | |
color: white; | |
margin: 40px 0 0 0; | |
padding: 0; | |
line-height: 1.5; | |
} | |
.container-five .food-drink .copy .hoo { | |
color: white; | |
font-size: 14px; | |
text-transform: uppercase; | |
margin: 0; | |
padding: 0; | |
line-height: 1.5; | |
} | |
.container-five .food-drink .copy hr { | |
width: 65px; | |
height: 3px; | |
/* margin-top: 15px; */ | |
/* margin-left: 0; */ | |
padding: 0; | |
background-color: #fa9a3b; | |
display: block; | |
border: none; | |
} | |
.container-five .food-drink .copy .hoo-text { | |
color: white; | |
font-size: 16px; | |
margin: 0; | |
padding: 0; | |
line-height: 1.5; | |
} | |
.container-six { | |
background-image: url('http://provenanceraleigh.com/wp-content/uploads/2015/11/bokchoi-background-e1448914969933.jpg'); | |
background-size: cover; | |
background-position: center center; | |
position: relative; | |
display: block; | |
height: 700px; | |
width: 100%; | |
padding: 50px 5%; | |
margin: 0; | |
box-sizing: border-box; | |
} | |
.container-six .box { | |
margin: 0; | |
padding: 0; | |
height: 100%; | |
width: 100%; | |
box-sizing: border-box; | |
display: block; | |
position: relative; | |
} | |
.container-six .upcoming { | |
background-image: url('http://provenanceraleigh.com/wp-content/themes/bridge-child/img/texture-white.jpg'); | |
background-size: 125px 125px; | |
background-repeat: repeat; | |
height: 100%; | |
width: auto; | |
margin: 0; | |
padding: 0; | |
display: block; | |
box-shadow: 0 0 40px rgba(0, 0, 0, 0.2); | |
box-sizing: border-box; | |
} | |
.container-six .title { | |
text-transform: uppercase; | |
color: white; | |
font-size: 14px; | |
letter-spacing: 1px; | |
margin: 0 ; | |
padding: 0 0 10px 0; | |
box-sizing: border-box; | |
} | |
.container-six .upcoming .events { | |
display: inline-block; | |
height: 100%; | |
width: 50%; | |
float: left; | |
padding: 70px; | |
box-sizing: border-box; | |
} | |
.container-six .upcoming .events .title { | |
color: #303030; | |
font-size: 24px; | |
letter-spacing: 1px; | |
margin: 0; | |
padding: 0; | |
} | |
.container-six .upcoming .events .subtitle { | |
color: #303030; | |
font-size: 14px; | |
letter-spacing: normal; | |
margin: 0; | |
padding: 0; | |
text-transform: uppercase; | |
line-height: 1.3; | |
} | |
.container-six .upcoming .subscription { | |
display: inline-block; | |
height: 100%; | |
width: 50%; | |
float: right; | |
padding: 70px; | |
box-sizing: border-box; | |
} | |
.container-six .upcoming .subscription .title { | |
color: #303030; | |
font-size: 24px; | |
letter-spacing: 1px; | |
margin: 0; | |
padding: 0; | |
} | |
.container-six .upcoming .subscription .subtitle { | |
color: #303030; | |
font-size: 14px; | |
letter-spacing: normal; | |
margin: 0; | |
padding: 0; | |
line-height: 1.3; | |
text-transform: uppercase; | |
} | |
.container-six .upcoming hr { | |
width: 65px; | |
height: 3px; | |
margin-top: 15px; | |
margin-bottom: 15px; | |
margin-left: 0; | |
padding: 0; | |
background-color: #fa9a3b; | |
display: inline-block; | |
border: none; | |
} | |
.container-six .upcoming p { | |
font-size: 18px; | |
font-weight: 400; | |
color: #6f625a; | |
line-height: 1.5; | |
margin: 0; | |
padding: 0; | |
} | |
.container-six #learn { | |
display: inline-block; | |
position: relative; | |
margin-top: 50px; | |
padding: 8px 15px 8px; | |
text-align: center; | |
letter-spacing: 1px; | |
font-weight: bold; | |
font-size: 13px; | |
color: #439f46; | |
text-transform: uppercase; | |
text-decoration: none; | |
border: 2px solid #439f46; | |
border-radius: 3px; | |
transition: all .2s ease; | |
} | |
.container-six #learn:hover { | |
background-color: #439f46; | |
color: white; | |
transition: all .2s ease; | |
} | |
footer { | |
width: 100%; | |
height: 100%; | |
margin: 0; | |
padding: 0; | |
box-sizing: border-box; | |
position: relative; | |
display: block; | |
} | |
footer .signup { | |
background-image: url('http://provenanceraleigh.com/wp-content/themes/bridge-child/img/texture-white.jpg'); | |
background-size: 125px 125px; | |
background-repeat: repeat; | |
box-sizing: border-box; | |
text-transform: lowercase; | |
color: ##818181; | |
text-align: center; | |
padding: 45px 10% 30px; | |
} | |
footer .signup .text { | |
padding: 0; | |
margin: 0; | |
} | |
footer .signup .inputbox { | |
position: relative; | |
box-sizing: border-box; | |
margin: 0; | |
padding: 30px 0; | |
text-align: center; | |
} | |
footer .signup input { | |
padding: 12px 20px; | |
display: inline-block; | |
float: none; | |
text-align: center; | |
} | |
footer .signup input[type="email"] { | |
background-color: #313c42; | |
border-radius: 3px; | |
border-bottom-right-radius: 0; | |
border-top-right-radius: 0; | |
border: none; | |
font: inherit; | |
margin: 0 auto; | |
font-size: 17px; | |
} | |
footer .signup input[type="submit"] { | |
background-color: #439f46; | |
border-radius: 3px; | |
border-bottom-left-radius: 0; | |
border-top-left-radius: 0; | |
border: none; | |
font: inherit; | |
color: white; | |
font-size: 17px; | |
font-weight: 600; | |
box-sizing: border-box; | |
margin: 0 auto; | |
} | |
footer .img-gallery { | |
display: block; | |
position: relative; | |
height: 300px; | |
margin: 0; | |
padding: 0; | |
} | |
footer .img-gallery .one { | |
background-image: url('https://scontent.cdninstagram.com/t51.2885-15/s320x320/e35/13329241_100665567023779_415065387_n.jpg?ig_cache_key=MTI2MDIxOTI2MTg0MDI1NDkyNA%253D%253D.2'); | |
background-size: cover; | |
background-repeat: no-repeat; | |
width: 25%; | |
height: 100%; | |
float: left; | |
margin: 0; | |
padding: 0; | |
} | |
footer .img-gallery .two { | |
background-image: url('https://scontent.cdninstagram.com/t51.2885-15/s320x320/e35/13256748_880491378746093_875743967_n.jpg?ig_cache_key=MTI1OTQ4MTcxODIzNjYzNjU1OA%253D%253D.2'); | |
background-size: cover; | |
background-repeat: no-repeat; | |
width: 25%; | |
height: 100%; | |
margin: 0; | |
padding: 0; | |
float: left; | |
} | |
footer .img-gallery .three { | |
background-image: url('https://scontent.cdninstagram.com/t51.2885-15/s320x320/e35/13249730_1313498808665933_816773340_n.jpg?ig_cache_key=MTI1OTAwNzIyNjQ0ODE3NjIwOA%253D%253D.2'); | |
background-size: cover; | |
background-repeat: no-repeat; | |
width: 25%; | |
height: 100%; | |
margin: 0; | |
padding: 0; | |
float: left; | |
} | |
footer .img-gallery .four { | |
background-image: url('https://scontent.cdninstagram.com/t51.2885-15/s320x320/e35/13249867_496327090567178_1028189707_n.jpg?ig_cache_key=MTI1NzU3MTc2ODY2MDkxMTE3NA%253D%253D.2'); | |
background-size: cover; | |
background-repeat: no-repeat; | |
width: 25%; | |
height: 100%; | |
margin: 0; | |
padding: 0; | |
float: right; | |
} | |
footer .buffer { | |
display: block; | |
background-image: url('http://provenanceraleigh.com/wp-content/themes/bridge-child/img/texture-blue.jpg'); | |
background-size: 125px 125px; | |
background-repeat: repeat; | |
height: 215px; | |
width: 100%; | |
padding: 0; | |
margin: 0; | |
text-align: center; | |
box-sizing: border-box; | |
} | |
footer .buffer .container { | |
margin: 0; | |
padding: 40px 0; | |
display: block; | |
position: relative; | |
height: 100%; | |
box-sizing: border-box; | |
} | |
footer .buffer .container .logo { | |
background-image: url('http://provenanceraleigh.com/wp-content/uploads/2015/11/footer-logo.png'); | |
background-size: cover; | |
background-repeat: no-repeat; | |
display: inline-block; | |
margin: 0; | |
padding: 0; | |
width: 135px; | |
height: 135px; | |
} | |
footer .contact { | |
background-image: url('http://provenanceraleigh.com/wp-content/themes/bridge-child/img/texture-blue-dk.jpg'); | |
background-size: 125px 125px; | |
background-repeat: repeat; | |
display: block; | |
position: relative; | |
padding: 7px 0; | |
margin: 0; | |
width: 100%; | |
height: 100%; | |
box-sizing: border-box; | |
text-align: center; | |
} | |
.contact-styling { | |
color: #939598; | |
font-size: 12px; | |
font-weight: 600; | |
letter-spacing: 0.5px; | |
line-height: 1; | |
width: 30%; | |
height: auto; | |
float: none; | |
margin: 0; | |
padding: 0; | |
box-sizing: border-box; | |
display: inline-block; | |
} | |
footer .contact .hoo { | |
text-align: left; | |
} | |
footer .contact .add { | |
text-transform: uppercase; | |
} | |
footer .contact .copyright { | |
text-transform: uppercase; | |
text-align: right; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment