Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /*
- style.css
- =======================
- Couleurs
- =======================
- Black #000000
- Darker gray #222222
- Gray #444444
- Blue gray #cddde5
- Orange #ef6047
- Hero background #c8dae3
- =======================
- */
- /* ---------------------
- General styles
- --------------------- */
- html {
- -webkit-font-smoothing: antialiased;
- text-rendering: optimizeLegibility;
- }
- body {
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
- font-size: 14px;
- line-height: 20px;
- color: #444444;
- margin: 0;
- }
- .clearfix:before, .clearfix:after {
- content:"";
- display:table;
- }
- .clearfix:after {
- clear:both;
- }
- .clearfix {
- zoom: 1; /* for IE6/7 */
- }
- /* ---------------------
- Global styles
- --------------------- */
- .column {
- float:left;
- margin-right: 20px;
- }
- .four {
- width:220px;
- }
- .last {
- margin-right: 0;
- }
- input[type="text"], input[type="email"] {
- position : relative;
- padding: 10px;
- border: solid 1px #ccc;
- width: 200px;
- }
- /* ---------------------
- Typography
- --------------------- */
- h1, h2, h3 {
- font-weight: 300;
- margin: 0;
- line-height: 45px;
- }
- h4, h5, h6 {
- font-weight: bold;
- margin: 5px 0;
- }
- h1 {
- font-size: 48px;
- }
- h2 {
- font-size: 24px;
- }
- h3 {
- font-size: 30px;
- }
- h4{
- font-size: 18px;
- margin: 10px 0;
- }
- h5{
- font-size: 13px;
- margin:0;
- text-transform:uppercase;
- }
- p {
- margin-bottom: 10px;
- }
- /* ---------------------
- Layout
- --------------------- */
- .container {
- width: 940px;
- padding: 0 10px;
- margin: 0 auto;
- }
- .container-2 {
- padding: 15px 0 15px 5px;
- background: #000000;
- }
- header {
- }
- #logo {
- background: #000000;
- }
- #hero {
- background: #c8dae3;
- background-image: url("../images/photo_header.png");
- background-repeat: no-repeat;
- background-position: center;
- background-size: cover;
- }
- #hero-title {
- width: 520 px;
- padding: 60px 0;
- float: left;
- }
- #call-to-action {
- margin: 40px 0;
- }
- #hero-image{
- float:right;
- margin: 10px 0 -30px 0;
- }
- #content {
- padding: 100px 0;
- }
- #column-content {
- width: 700px;
- float:left;
- }
- #lead-in {
- margin-bottom: 30px;
- }
- /* ---------------------
- Sidebar
- --------------------- */
- aside {
- background: #444444;
- width : 160px;
- color: #fff;
- float:left;
- margin-left:20px;
- padding: 30px;
- font-size: 12px;
- line-height: 18px;
- }
- aside .widget {
- margin: 10px 0;
- }
- aside .widget h4 {
- font-weight: 200;
- font-style: 20px;
- margin: 0 0 10px;
- }
- aside .socials a {
- position : relative;
- margin: 5px;
- }
- aside .socials a:hover {
- top: -1px;
- }
- /* ---------------------
- Secondary cta
- --------------------- */
- #secondary-cta {
- background: #cddde5;
- padding: 30px 0;
- }
- #secondary-cta h4 {
- font-weight: 200;
- font-size: 24px;
- float: left;
- margin-left: 20px;
- }
- #secondary-cta form {
- margin:0;
- float:right;
- margin-right: 20px;
- }
- /* ---------------------
- Footer
- --------------------- */
- footer {
- background: #444444;
- color: #fff;
- padding: 50px 0;
- }
- footer #copyright {
- width: 280px;
- float:left;
- }
- footer nav {
- width: 340px;
- float:right;
- }
- footer a {
- color: #fff;
- text-decoration: none;
- }
- footer nav a {
- margin: 0 0 0 15px;
- }
- footer a:hover {
- color: #00c0ff;
- }
- /* ---------------------
- Navigation
- --------------------- */
- nav ul {
- margin:0;
- padding:0;
- float: right;
- }
- nav ul li {
- list-style: none;
- float: left;
- }
- header nav ul li a {
- display: block;
- color: #fff;
- text-decoration: none;
- font-weight: bold;
- padding:20px;
- border-left: solid 1px #333;
- }
- header nav ul li a:hover {
- background: #222;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement