-
Notifications
You must be signed in to change notification settings - Fork 47
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
10 changed files
with
597 additions
and
51 deletions.
There are no files selected for viewing
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
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,40 @@ | ||
/* CSS */ | ||
.button-1 { | ||
align-self: center; | ||
background-color: #fff; | ||
background-image: none; | ||
background-position: 0 90%; | ||
background-repeat: repeat no-repeat; | ||
background-size: 4px 3px; | ||
border-radius: 15px 225px 255px 15px 15px 255px 225px 15px; | ||
border-style: solid; | ||
border-width: 2px; | ||
box-shadow: rgb(240, 90, 90) 15px 28px 25px -18px; | ||
box-sizing: border-box; | ||
color: #41403e; | ||
cursor: pointer; | ||
display: inline-block; | ||
font-family: Neucha, sans-serif; | ||
font-size: 1rem; | ||
line-height: 23px; | ||
outline: none; | ||
padding: .75rem; | ||
text-decoration: none; | ||
transition: all 235ms ease-in-out; | ||
border-bottom-left-radius: 15px 255px; | ||
border-bottom-right-radius: 225px 15px; | ||
border-top-left-radius: 255px 15px; | ||
border-top-right-radius: 15px 225px; | ||
user-select: none; | ||
-webkit-user-select: none; | ||
touch-action: manipulation; | ||
} | ||
|
||
.button-1:hover { | ||
box-shadow: rgba(197, 16, 16, 0.699) 2px 8px 8px -5px; | ||
transform: translate3d(0, 2px, 0); | ||
} | ||
|
||
.button-1:focus { | ||
box-shadow: rgba(192, 42, 42, 0.79) 2px 8px 4px -6px; | ||
} |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
.button-2 { | ||
position: relative; | ||
display: inline-block; | ||
padding: 15px 30px; | ||
text-align: center; | ||
font-size: 18px; | ||
letter-spacing: 1px; | ||
text-decoration: none; | ||
color: #725AC1; | ||
background: transparent; | ||
cursor: pointer; | ||
transition: ease-out 0.5s; | ||
border: 2px solid #725AC1; | ||
border-radius: 10px; | ||
box-shadow: inset 0 0 0 0 #725AC1; | ||
} | ||
|
||
.button-2:hover { | ||
color: white; | ||
box-shadow: inset 0 -100px 0 0 #725AC1; | ||
} | ||
|
||
.button-2:active { | ||
transform: scale(0.9); | ||
} |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,41 @@ | ||
.button-3 { | ||
background: transparent; | ||
color: #fff; | ||
font-size: 17px; | ||
text-transform: uppercase; | ||
font-weight: 600; | ||
border: none; | ||
padding: 20px 30px; | ||
perspective: 30rem; | ||
border-radius: 10px; | ||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.308); | ||
} | ||
|
||
.button-3::before { | ||
content: ''; | ||
display: block; | ||
position: absolute; | ||
width: 100%; | ||
height: 100%; | ||
top: 0; | ||
left: 0; | ||
border-radius: 10px; | ||
background: linear-gradient(320deg, rgba(0, 140, 255, 0.678), rgba(128, 0, 128, 0.308)); | ||
z-index: 1; | ||
transition: background 3s; | ||
} | ||
|
||
.button-3:hover::before { | ||
animation: rotate 1s; | ||
transition: all .5s; | ||
} | ||
|
||
@keyframes rotate { | ||
0% { | ||
transform: rotateY(180deg); | ||
} | ||
|
||
100% { | ||
transform: rotateY(360deg); | ||
} | ||
} |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,88 @@ | ||
.wrapper { | ||
display: inline-flex; | ||
list-style: none; | ||
height: 48px; | ||
width: 100%; | ||
padding-top: 7px; | ||
padding-bottom: 5px; | ||
font-family: "Poppins", sans-serif; | ||
justify-content: center; | ||
} | ||
|
||
.wrapper .icon { | ||
position: relative; | ||
background: #fff; | ||
border-radius: 50%; | ||
margin: 10px; | ||
width: 50px; | ||
height: 50px; | ||
font-size: 18px; | ||
display: flex; | ||
justify-content: center; | ||
align-items: center; | ||
flex-direction: column; | ||
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1); | ||
cursor: pointer; | ||
transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55); | ||
} | ||
|
||
.wrapper .tooltip { | ||
position: absolute; | ||
top: 0; | ||
font-size: 14px; | ||
background: #fff; | ||
color: #fff; | ||
padding: 5px 8px; | ||
border-radius: 5px; | ||
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1); | ||
opacity: 0; | ||
pointer-events: none; | ||
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); | ||
} | ||
|
||
.wrapper .tooltip::before { | ||
position: absolute; | ||
content: ""; | ||
height: 8px; | ||
width: 8px; | ||
background: #fff; | ||
bottom: -3px; | ||
left: 50%; | ||
transform: translate(-50%) rotate(45deg); | ||
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); | ||
} | ||
|
||
.wrapper .icon:hover .tooltip { | ||
top: -45px; | ||
opacity: 1; | ||
visibility: visible; | ||
pointer-events: auto; | ||
} | ||
|
||
.wrapper .icon:hover span, | ||
.wrapper .icon:hover .tooltip { | ||
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1); | ||
} | ||
|
||
.wrapper .facebook:hover, | ||
.wrapper .facebook:hover .tooltip, | ||
.wrapper .facebook:hover .tooltip::before { | ||
background: #1877F2; | ||
color: #fff; | ||
} | ||
|
||
.wrapper .twitter:hover, | ||
.wrapper .twitter:hover .tooltip, | ||
.wrapper .twitter:hover .tooltip::before { | ||
background: #1DA1F2; | ||
color: #fff; | ||
} | ||
|
||
.wrapper .instagram:hover, | ||
.wrapper .instagram:hover .tooltip, | ||
.wrapper .instagram:hover .tooltip::before { | ||
background: #E4405F; | ||
color: #fff; | ||
} | ||
|
||
|
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,58 @@ | ||
.button-5 { | ||
height: 50px; | ||
width: 150px; | ||
border: none; | ||
border-radius: 10px; | ||
cursor: pointer; | ||
position: relative; | ||
overflow: hidden; | ||
transition: all 0.5s ease-in-out; | ||
} | ||
|
||
.button-5:hover { | ||
box-shadow: .5px .5px 150px #252525; | ||
} | ||
|
||
.type1::after { | ||
content: "Thanks"; | ||
height: 50px; | ||
width: 150px; | ||
background-color: #008080; | ||
color: #fff; | ||
position: absolute; | ||
top: 0%; | ||
left: 0%; | ||
transform: translateY(50px); | ||
font-size: 1.2rem; | ||
font-weight: 600; | ||
display: flex; | ||
align-items: center; | ||
justify-content: center; | ||
transition: all 0.5s ease-in-out; | ||
} | ||
|
||
.type1::before { | ||
content: "Hover Me"; | ||
height: 50px; | ||
width: 150px; | ||
background-color: #fff; | ||
color: #008080; | ||
position: absolute; | ||
top: 0%; | ||
left: 0%; | ||
transform: translateY(0px) scale(1.2); | ||
font-size: 1.2rem; | ||
font-weight: 600; | ||
display: flex; | ||
align-items: center; | ||
justify-content: center; | ||
transition: all 0.5s ease-in-out; | ||
} | ||
|
||
.type1:hover::after { | ||
transform: translateY(0) scale(1.2); | ||
} | ||
|
||
.type1:hover::before { | ||
transform: translateY(-50px) scale(0) rotate(120deg); | ||
} |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,86 @@ | ||
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap"); | ||
|
||
section{ | ||
margin-bottom: 10vh; | ||
} | ||
|
||
.footer { | ||
position: fixed; | ||
width: 100%; | ||
background: #212529; | ||
min-height: 10px; | ||
padding: 10px 50px; | ||
display: flex; | ||
justify-content: center; | ||
align-items: center; | ||
flex-direction: column; | ||
bottom: 0px; | ||
margin-top: 10vh; | ||
} | ||
|
||
.social-icon, | ||
.menu { | ||
position: relative; | ||
display: flex; | ||
justify-content: center; | ||
align-items: center; | ||
margin: 10px 0; | ||
flex-wrap: wrap; | ||
} | ||
|
||
.social-icon__item, | ||
.menu__item { | ||
list-style: none; | ||
} | ||
|
||
.social-icon__link { | ||
font-size: 2rem; | ||
color: #fff; | ||
margin: 0 10px; | ||
display: inline-block; | ||
transition: 0.5s; | ||
} | ||
.social-icon__link:hover { | ||
transform: translateY(-10px); | ||
} | ||
|
||
.menu__link { | ||
font-size: 1.2rem; | ||
color: #fff; | ||
margin: 0 10px; | ||
display: inline-block; | ||
transition: 0.5s; | ||
text-decoration: none; | ||
opacity: 0.75; | ||
font-weight: 300; | ||
} | ||
|
||
.menu__link:hover { | ||
opacity: 1; | ||
} | ||
|
||
.footer p { | ||
color: #fff; | ||
margin: 15px 0 10px 0; | ||
font-size: 1rem; | ||
font-weight: 300; | ||
} | ||
|
||
|
||
@keyframes animateWaves { | ||
0% { | ||
background-position-x: 1000px; | ||
} | ||
100% { | ||
background-positon-x: 0px; | ||
} | ||
} | ||
|
||
@keyframes animate { | ||
0% { | ||
background-position-x: -1000px; | ||
} | ||
100% { | ||
background-positon-x: 0px; | ||
} | ||
} |
Oops, something went wrong.