Skip to content

Instantly share code, notes, and snippets.

@harunpehlivan
Created May 2, 2023 21:20
Show Gist options
  • Save harunpehlivan/2110bec0590b33431e4d9d89fd150fd1 to your computer and use it in GitHub Desktop.
Save harunpehlivan/2110bec0590b33431e4d9d89fd150fd1 to your computer and use it in GitHub Desktop.
She knows...
.triangle-1
.triangle-2
.triangle-3
.triangle-4
.triangle-5
.triangle-6
.triangle-7
.triangle-9
.triangle-8
.card
quote="Ne olacağıma değil yeteneklerimin becerilerimin ve ne yapabilirim'in peşinde koşarım"
author="HARUNPEHLİVAN"
body
display: flex
align-items: center
justify-content: center
font-family: helvetica
height: 100vh
overflow: hidden
.card
background-color: #eee
padding: 50px
border-radius: 5px
width: 400px
border-left: 7px solid #F22300
box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.2)
display: flex
flex-direction: column
quote
font-size: 28px
font-family: 'Comic Neue', cursive
color: #333
author
font-weight: bold
color: dimgray
align-self: flex-end
text-transform: uppercase
.triangle-1,
.triangle-2,
.triangle-3,
.triangle-4,
.triangle-5,
.triangle-6,
.triangle-7,
.triangle-9
width: 400px
height: 400px
position: fixed
.triangle-1
background-color: #F22300
top: -100px
right: 0
transform: translate(50%, -50%) rotateZ(35deg)
z-index: -1
.triangle-2
background-color: #AA1A04
top: -98px
right: 0
transform: translate(50%, -50%) rotateZ(29deg)
z-index: -2
.triangle-3
width: 600px
background-color: #C41A00
top: -80px
right: 0
transform: translate(50%, -50%) rotateZ(24deg)
z-index: -3
.triangle-4
width: 610px
background-color: #810D00
top: -0px
right: -20px
transform: translate(50%, -50%) rotateZ(60deg)
z-index: -4
.triangle-5
width: 610px
background-color: #C4A6A2
top: -0px
right: 10px
transform: translate(50%, -50%) rotateZ(55deg)
z-index: -5
.triangle-6
width: 610px
background-color: #E5DCDB
top: -0px
right: 50px
transform: translate(50%, -50%) rotateZ(49deg)
z-index: -6
.triangle-7
width: 1000px
background-color: #F0F0F0
top: -0px
right: 50px
transform: translate(50%, -50%) rotateZ(60deg)
z-index: -7
.triangle-8
position: absolute
width: 100px
height: 100px
background-color: #DCC6C4
bottom: 0px
right: 150px
transform: rotateZ(50deg)
.triangle-9
overflow: hidden
width: 1000px
background-color: #E8D8D6
top: 100px
right: -100px
transform: translate(50%, -50%) rotateZ(79deg)
z-index: -9
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment