CSS Layout and Animations by Design+Code

Author:Design+Code
Language: eng
Format: epub
Published: 2019-06-26T16:00:00+00:00

$color-1: #ffe1d1; $color-2: #ffdbca; // :root { // /* BASE COLORS */ // --color-1: #ffe1d1; // --color-2: #ffdbca; // } body { overflow-x: hidden; font-family: Alegreya, serif; } //Header .header { font-weight: bold; font-size: 20px; //setting up first grid. display: grid; grid-template-columns: 20% 1fr; } .header-logo { align-self: center; margin-left: 2rem; } #logo { transition: all 0.5s ease-out; } #logo:hover { transform: perspective(400px) translate3d(-10px, 0px, -10px) scale(0.93); } .header-letter { font-size: 30px; color: #6a4a39; } .menu { font-size: 20px; color: #000000; opacity: 0.7; list-style: none; // setting up flexbox for menu display: flex; justify-content: flex-end; &-item { margin: 47px 45px; position: relative; } } // setting up line animation for menu items. .menu-item::after { content: ""; display: block; width: 100%; height: 3px; background-color: #6a4a39; position: absolute; visibility: hidden; transform-origin: left; transform: scale(0); transition: 0.25s ease-out; } .menu-item:hover::after { visibility: visible; transform: scale(1); } .menu-item:last-of-type { color: #ff7676; border-bottom: 4px solid #f8d1be; } //Hero section .container { background: linear-gradient(to left, $color-1, $color-2); max-width: 1500px; margin: 0 auto; } .hero_container { position: relative; min-height: 550px; display: grid; grid-template-areas: "lamp title sun sun" "lamp title sun sun"; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, minmax(0px, auto)); border-bottom: 1px solid #ff8989; } .hero_cta { grid-area: title; justify-self: end; align-self: center; font-family: Alegreya; font-style: normal; line-height: normal; z-index: 3; } .lamp { grid-area: lamp; height: auto; justify-self: start; align-self: end; position: absolute; bottom: -350px; } //Hero Call to Action .cta_title { font-size: 60px; line-height: 69px; font-weight: bold; } .cta_description { font-size: 20px; color: #333333; margin-bottom: 2rem; } .cta_btn { width: 200px; height: 44px; position: absolute; bottom: -23px; cursor: pointer; background: rgb(51, 51, 51); box-shadow: rgba(255, 163, 148, 0.1) 0px 5px 10px; border: none; border-radius: 5px; font-family: Alegreya; font-weight: bold; font-size: 20px; text-align: center; color: #ffffff; transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0s; &:hover { transform: translateY(-3px); opacity: 0.7; } } //Waves .hide { visibility: hidden; } #waves { justify-self: end; max-width: 1500px; width: 100%; grid-column: 1/5; align-self: end; grid-row: 2/2; } //Sun .container_sun { grid-area: sun; align-self: end; justify-self: start; img { max-width: 400px; min-width: 200px; width: 100%; } } // Plane SVG #planes { width: 100%; transform-style: preserve-3d; grid-area: sun; justify-self: end; align-self: end; } //second section .two { background: #fff; background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/780593/Group%202-1.png"); background-repeat: no-repeat; background-position: 35% 0; background-size: cover; } .stairs { max-width: 300px; }

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.