diff --git a/public/email/styles/styles.css b/public/email/styles/styles.css new file mode 100644 index 0000000..481a897 --- /dev/null +++ b/public/email/styles/styles.css @@ -0,0 +1,107 @@ +@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@100..900&display=swap'); + +body { + font-family: 'Alexandria', sans-serif; + font-weight: 400; + font-style: normal; +} + +h1 { + font-size: 48px; + line-height: 52px; + font-weight: 700; + text-transform: uppercase; +} + +h2 { + font-size: 28px; + line-height: 30px; + font-weight: 600; +} + +td { + padding: 0 14px; + font-size: 20px; + line-height: 28px; +} + +button { + padding: 24px 0; + font-family: 'Alexandria', sans-serif; + font-weight: 600; + font-size: 28px; + line-height: 32px; + border-radius: 10px; + width: 100%; + border: none; + cursor: pointer; + margin: 48px 0; + + filter: drop-shadow(0px 4px 12px rgba(0, 0, 0, 0.2)); +} + +button.download__wallet { + background: rgb(24, 255, 172); + background: linear-gradient( + 90deg, + rgba(24, 255, 172, 1) 0%, + rgba(24, 255, 172, 1) 100% + ); + color: rgba(19, 19, 19, 1); +} + +button.photos__button { + background: rgba(19, 19, 19, 1); + + span { + font-size: 28px; + line-height: 32px; + background: -webkit-linear-gradient(80deg, #36fff3, #18ffac); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } +} + +.footer { + display: flex; + flex-direction: column; + justify-content: end; + background-image: url(https://islamiccoin.net/email/email-footer.png); + background-repeat: no-repeat; + background-position: center; + background-size: contain; + width: 572px; + height: 235px; + text-align: center; + font-size: 16px; + line-height: 20px; + margin-top: 48px; + + a { + opacity: 50%; + } + + .social__links { + display: flex; + width: 100%; + justify-content: space-between; + padding-bottom: 26px; + } +} + +.header { + background-image: url(https://islamiccoin.net/email/email-header.png); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + width: 572px; + height: 243px; +} + +.copyright__text { + text-align: center; + font-size: 14px; + line-height: 20px; + color: white; +}