[css] code

Viewer

  1. @import url('https://fonts.googleapis.com/css?family=Lato:400,700|Montserrat:900');
  2. html {
  3.   display: grid;
  4.   min-height: 100%;
  5. }
  6. body {
  7.   display: grid;
  8.   background: #183059;
  9. }
  10. .container {
  11.   position: relative;
  12.   margin: auto;
  13.   overflow: hidden;
  14.   width: 650px;
  15.   height: 480px;
  16. }
  17. h1 {
  18.   font-family: 'Lato', sans-serif;
  19.   text-align: center;
  20.   margin-top: 2em;
  21.   font-size: 1em;
  22.   text-transform: uppercase;
  23.   letter-spacing: 5px;
  24.   color: #F6F4F3;
  25. }
  26. #timer {
  27.   color: #F6F4F3;
  28.   text-align: center;
  29.   text-transform: uppercase;
  30.   font-family: 'Lato', sans-serif;
  31.   font-size: 0.7em;
  32.   letter-spacing: 5px;
  33.   margin-top: 25%;
  34. }
  35. .days, .hours, .minutes, .seconds {
  36.   display: inline-block;
  37.   padding: 20px;
  38.   width: 100px;
  39.   border-radius: 5px;
  40. }
  41. .days {
  42.   background: #EF2F3C;
  43. }
  44. .hours {
  45.   background: #F6F4F3;
  46.   color: #183059;
  47. }
  48. .minutes {
  49.   background: #276FBF;
  50. }
  51. .seconds {
  52.   background: #F0A202;
  53. }
  54. .numbers {
  55.   font-family: 'Montserrat', sans-serif;
  56.   color: #183059;
  57.   font-size: 4em;
  58. }
  59. .white {
  60.   position: absolute;
  61.   background: #F6F4F3;
  62.   height: 85px;
  63.   width: 75px;
  64.   left: 30%;
  65.   top: 2%;
  66. }
  67. .white .triangle {
  68.   border-bottom: 14px solid #F6F4F3;
  69. }
  70. .white .string {
  71.   background: #F6F4F3;
  72.   border: 1px solid #F6F4F3;
  73. }
  74. .red {
  75.   position: absolute;
  76.   background: #EF2F3C;
  77.   left: 18%;
  78.   top: 9%;
  79.   height: 65px;
  80.   width: 70px;
  81. }
  82. .red .triangle {
  83.   border-bottom: 14px solid #EF2F3C;
  84. }
  85. .red .string {
  86.   background: #EF2F3C;
  87.   border: 1px solid #EF2F3C;
  88. }
  89. .blue {
  90.   position: absolute;
  91.   background: #276FBF;
  92.   height: 80px;
  93.   width: 80px;
  94.   left: 60%;
  95.   top: 5%;
  96. }
  97. .blue .triangle {
  98.   border-bottom: 14px solid #276FBF;
  99. }
  100. .blue .string {
  101.   background: #276FBF;
  102.   border: 1px solid #276FBF;
  103. }
  104. .balloon {
  105.   border: 1px solid #000;
  106.   border-radius: 50% 50% 50% 50%/ 40% 40% 60% 60%;
  107.   z-index: 2;
  108. }
  109. .eye {
  110.   position: absolute;
  111.   width: 7px;
  112.   height: 7px;
  113.   top: 40%;
  114.   left: 22%;
  115.   background: #000;
  116.   border-radius: 50%;
  117. }
  118. .eye:after {
  119.   content: '';
  120.   left: 35px;
  121.   width: 7px;
  122.   height: 7px;
  123.   border-radius: 50%;
  124.   background: #000;
  125.   position: absolute;
  126. }
  127. .mouth {
  128.   position: absolute;
  129.   top: 45%;
  130.   left: 43%;
  131.   width: 7px;
  132.   height: 7px;
  133.   border-radius: 50%;
  134. }
  135. .happy {
  136.   border: 2px solid;
  137.   border-color: transparent #000 #000 transparent;
  138.   transform: rotate(45deg);
  139. }
  140. .triangle {
  141.   position: absolute;
  142.   left: 40%;
  143.   bottom: -10%;
  144.   width: 0;
  145.   height: 0;
  146.   border-left: 7px solid transparent;
  147.   border-right: 7px solid transparent;
  148. }
  149. .string {
  150.   position: absolute;
  151.   height: 70px;
  152.   width: 1px;
  153.   left: 48%;
  154.   top: 100%;
  155.   z-index: -1;
  156. }
  157. .star {
  158.   width: 20px;
  159.   height: 20px;
  160.   background: #F6F4F3;
  161.   -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  162.   clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  163. }
  164. .star-red {
  165.   width: 30px;
  166.   height: 30px;
  167.   margin-left: 51px;
  168.   margin-top: -5px;
  169.   background: #EF2F3C;
  170.   -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  171.   clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  172. }
  173. footer {
  174.   position: fixed;
  175.   bottom: 0;
  176.   right: 0;
  177.   text-transform: uppercase;
  178.   padding: 10px;
  179.   font-family: 'Lato', sans-serif;
  180.   font-size: 0.7em;
  181. }
  182. footer p {
  183.   letter-spacing: 3px;
  184.   color: #EF2F3C;
  185. }
  186. footer a {
  187.   color: #F6F4F3;
  188.   text-decoration: none;
  189. }
  190. footer a:hover {
  191.   color: #276FBF;
  192. }
  193.  

Editor

You can edit this paste and save as new:


File Description
  • code
  • Paste Code
  • 13 Jun-2021
  • 3.61 Kb
You can Share it: