Created
January 12, 2021 08:26
-
-
Save code08-ind/138e72f6412ea354e7f54e15e957ebd4 to your computer and use it in GitHub Desktop.
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
@import url("https://fonts.googleapis.com/css2?family=Fraunces:wght@800&family=Montserrat:wght@500&family=Oswald:wght@500&family=Quicksand&family=Ubuntu:wght@500&display=swap"); | |
* { | |
padding: 0; | |
margin: 0; | |
box-sizing: border-box; | |
scroll-behavior: smooth; | |
} | |
body { | |
background: #fc466b; /* fallback for old browsers */ | |
background: -webkit-linear-gradient( | |
to right, | |
#3f5efb, | |
#fc466b | |
); /* Chrome 10-25, Safari 5.1-6 */ | |
background: linear-gradient( | |
to right, | |
#3f5efb, | |
#fc466b | |
); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ | |
overflow-x: hidden; | |
} | |
h1 { | |
margin: 10px; | |
font-size: 40px; | |
font-weight: 800; | |
font-family: "Fraunces", serif; | |
color: rgb(79, 236, 6); | |
animation: slideUp 1s ease-in 0.1s 1 alternate forwards; | |
} | |
h2 { | |
margin: 10px 0 5px 0; | |
font-size: 30px; | |
font-weight: 500; | |
color: rgb(0, 255, 170); | |
letter-spacing: 2px; | |
font-family: "Oswald", sans-serif; | |
text-transform: uppercase; | |
font-style: italic; | |
overflow-x: hidden; | |
animation: slideDown 1s ease-in 0.1s 1 alternate forwards; | |
} | |
p { | |
font-size: 25px; | |
font-weight: 500; | |
color: rgb(255, 251, 0); | |
letter-spacing: 2px; | |
line-height: 1; | |
font-family: "Montserrat", sans-serif; | |
text-transform: capitalize; | |
margin-bottom: -20px; | |
animation: sizeUp 1s ease-in 0.1s 1 alternate forwards; | |
} | |
div.five div.row { | |
margin: 40px 50px; | |
display: flex; | |
flex-direction: row; | |
padding: 40px; | |
border: 6px solid #fff; | |
border-radius: 60px; | |
align-items: center; | |
justify-content: center; | |
background: #a770ef; /* fallback for old browsers */ | |
background: -webkit-linear-gradient( | |
to top, | |
#fdb99b, | |
#cf8bf3, | |
#a770ef | |
); /* Chrome 10-25, Safari 5.1-6 */ | |
background: linear-gradient( | |
to top, | |
#fdb99b, | |
#cf8bf3, | |
#a770ef | |
); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ | |
} | |
div.five div.row div.one { | |
margin: 0 20px; | |
border: 6px solid rgb(16, 90, 150); | |
padding: 50px 60px; | |
border-radius: 80px; | |
color: rgb(102, 0, 128); | |
background-color: #8bcdf3; | |
box-shadow: 6px 6px 8px 3px rgb(7, 213, 250); | |
animation: slideDown 1s ease-in 0.3s 1 alternate forwards; | |
} | |
div.five div.row div.two { | |
margin: 0 20px; | |
border: 6px solid rgb(236, 179, 20); | |
padding: 60px 50px; | |
border-radius: 80px; | |
color: rgb(241, 80, 6); | |
background-color: rgb(236, 252, 144); | |
box-shadow: 6px 6px 8px 3px rgb(223, 226, 7); | |
} | |
div.five div.row div.next img { | |
box-shadow: 6px 6px 8px 3px rgb(115, 255, 1); | |
border: 6px solid rgb(0, 199, 43); | |
border-radius: 50px; | |
margin: 0 20px; | |
animation: slideUp 1s ease-in 0.3s 1 alternate forwards; | |
} | |
div.five div.row div.one button.btn, | |
div.five div.row div.two button.btn { | |
background-color: red; | |
padding: 5px 15px; | |
outline: none; | |
border-radius: 20px; | |
color: white; | |
font-size: 15px; | |
text-transform: uppercase; | |
font-weight: 600; | |
border: 4px solid rgb(43, 255, 0); | |
margin: 15px 20px; | |
} | |
div.five div.row div.one button.btn:hover, | |
div.five div.row div.two button.btn:hover { | |
cursor: pointer; | |
background-color: rgb(43, 255, 0); | |
border: 3px solid red; | |
color: black; | |
transition: all 0.4s ease-in; | |
} | |
div.five div.row div.one h4, | |
div.five div.row div.two h4 { | |
font-size: 25px; | |
text-align: center; | |
font-family: "Ubuntu", sans-serif; | |
font-weight: 500; | |
margin: 10px; | |
} | |
div.five div.row div.one h5, | |
div.five div.row div.two h5 { | |
font-size: 18px; | |
text-align: center; | |
font-weight: 400; | |
font-family: "Quicksand", sans-serif; | |
margin: 10px; | |
} | |
@keyframes slideUp { | |
0% { | |
transform: translateX(-50%); | |
} | |
100% { | |
transform: translateX(0); | |
} | |
} | |
@keyframes slideDown { | |
0% { | |
transform: translateX(50%); | |
} | |
100% { | |
transform: translateX(0); | |
} | |
} | |
@keyframes sizeUp { | |
0% { | |
font-size: 12px; | |
margin-bottom: 0px; | |
} | |
100% { | |
font-size: 25px; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment