Static Websites :
Sun Feb 07 2021 18:14:07 GMT+0000 (UTC)
/* Project : Natour : - Jonas */ .element { //Will always keep in top background-position : top; } //Center the data using old school way. .parent { position : relative; } .text-box { position: absolute; top : 50%; left : 50%; transform: translate(-50%,-50%); text-align : center; } .heading { animation-name: from-left; animation-duration: 2s; animation-iteration-count:3 //How many times the animation should iterate. } //3D feel for button click. a:hover{ transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,.2); } a:active{ transform: translateY(-1px); box-shadow: 0 5px 10px rgba(0,0,0,.2); } // Button affect. .btn:link, .btn:visited { display: inline-block; text-decoration: none; text-transform: uppercase; background: white; border-radius: 128px; padding: 12px 40px; transition: all .2 s ease-in; position: relative; } .btn::after { //Adding at the back of the original button. content : ""; position: absolute; display: inline-block; top:0; right : 0; border-radius: 128px; background-color: grey; height: 100%; width : 100%; opacity: .5; z-index: -1; transition: all .4s; } .btn:hover::after { //When hovered it should show can box shadow going on. transform: scaleX(1.4) scaleY(1.6); opacity: 0; } //Inheritance. * { box-sizing: inherit; //For all the elements will inherit from 'body'. } html { font-size : 62.5% /* (62.5% of the size of user's browser's font size.) */ } body { box-sizing : border-box; } /* ********************************************************** */ /* Title : Build a Responsive Website | HTML, CSS Grid, Flexbox & More. ( Youtube ) By : Travery Media */ /* ********************************************************** */
Comments