body { background-color: #F9F9F9; } body, h1, h2, h3 { font-family: "Roboto", Helvetica, Arial, sans-serif; font-weight: 300; } .container { } .line { position: relative; } .line .decorator { position: absolute; left: 0px; width: 50px; border-top: 1px solid #F60; } header { background: #FFF; height: 70px; line-height: 70px; text-align: center; position: fixed; top: 0; width: 100%; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15); z-index: 1; } header .container { position: relative; padding: 0 20px; } header img { position: absolute; left: 10px; top: 15px; } @media (max-width: 768px) { header h3 { display: none; } } section { margin-top: 90px; margin-bottom: 70px; } .link { box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15); margin-bottom: 20px; text-align: center; cursor: pointer; } .link .body { position:relative; height: 150px; background-color: white; background-size: cover; background-repeat: no-repeat; } .link .body .overlay { position: relative; top: 0px; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); opacity: 1; z-index: 10; font-size: 80px; color: white; line-height: 150px; } .link .body .overlay:hover { background: linear-gradient(135deg, rgba(255,102,0,1) 0%,rgba(255,102,0,0.5) 50%,rgba(30,87,153,0) 100%); } .link .footer { height: 50px; background-color: #F60; color: white; line-height: 50px; text-transform: uppercase; } footer { background: #333; color: #fff; height: 50px; line-height: 50px; text-align: center; position: fixed; bottom: 0; width: 100%; box-shadow: 0 -2px 4px 0 rgba(0, 0, 0, 0.15); }