RandomQuoteGenerator/style.css at master · Coder-Srinivas/RandomQuoteGenerator · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
*{
    margin:0;
    padding:0;
    box-sizing: border-box;
    color: gray;
}

body{
    min-height:100vh;
    transition: 0.5s;
    transition-timing-function: ease-in;
    background-image: linear-gradient(to right bottom, #ed4264a8, #ffedbca8);
  }

  .quote-box{
    padding:3rem;
    transition: 0.5s;
    transition-timing-function: ease-in;
  }

  .text{
    font-size:30px;
    padding-left:10px;
    transition: 0.5s;
    transition-timing-function: ease-in;
    font-family: 'Roboto', sans-serif;
    background-image: linear-gradient(to right bottom, #ed4264a8, #ffedbca8);
    color: transparent;
    -webkit-background-clip: text;
  }

  .quote{
    transition: 0.5s;
    transition-timing-function: ease-in;
  }

  .new-quote{
      font-size:15px;
      border-radius: 5px;
      cursor:pointer;
      padding-bottom: 8px;
      padding-top: 9px;
      margin-top: 5px;
      background-image: linear-gradient(to right bottom, #ed4264a8, #ffedbca8);
  }

  .text-center{
    text-align: center;
  }

  .new-quote:hover{
    opacity: 0.6;
}

  .author{
    margin:10px;
    font-size:20px;
    transition: 0.5s;
    transition-timing-function: ease-in;
    font-family: 'Open Sans Condensed', sans-serif;
    background-image: linear-gradient(to right bottom, #28313B,#485461
    );
    color: transparent;
    -webkit-background-clip: text;
  }


p{
    margin-top: 5px;
    text-align: center;
    position: absolute;
    width: 100%;
    top:21.5%;
}

.block {
  perspective: 150rem;
  position: absolute;
  top:25%;
  left: 27%;
}

.block__main {
    min-width: 45vw;
    position: absolute;
    transition: all .8s ease;
    backface-visibility: hidden;
    box-shadow: 0rem 1.5rem 4rem rgba(0, 0, 0, 0.15);
    border-radius: .5rem;
    background-image: linear-gradient(to right bottom, #F6F0EA,#F1DFD1);
  }

  .block__back {
    transform: rotateY(180deg);
  }

.rotateF{
  transform: rotateY(-180deg);
}

.rotateB{
  transform: rotate(0deg);
}