├── twitter.png.png ├── index.html └── style.css /twitter.png.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Raja7765/quotes-generator/HEAD/twitter.png.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ITS Your Quote's 6 | 7 | 8 | 9 |
10 |

ITS Your Quote's

11 |
12 |
Loading...
13 | Loading... 14 |
15 |
16 |
17 |
18 | 33 | 34 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,300&display=swap'); 2 | *{ 3 | margin: 0; 4 | padding: 0; 5 | box-sizing:border-box; 6 | font-family: 'Roboto', sans-serif; 7 | } 8 | body{ 9 | background: #bbc6fa; 10 | } 11 | .quote-box{ 12 | background: #fff; 13 | width: 700px; 14 | position: absolute; 15 | top: 50%; 16 | left: 50%; 17 | transform: translate(-50%,-50%); 18 | padding: 40px; 19 | border-radius: 10px; 20 | text-align: center; 21 | box-shadow: 0 10px 20px 0px rgba(0, 0, 0, 0.15); 22 | } 23 | .quote-box h2{ 24 | font-size: 32px; 25 | margin-bottom: 40px; 26 | position: relative; 27 | } 28 | .quote-box h2::after{ 29 | content: ''; 30 | width: 75px; 31 | height: 3px; 32 | border-radius: 3px; 33 | background: rgb(23,125,229); 34 | position: absolute; 35 | bottom: -10px; 36 | left: 50%; 37 | transform: translateX(-50%); 38 | } 39 | .quote-box blockquote{ 40 | font-size: 26px; 41 | min-height: 110px; 42 | } 43 | .quote-box blockquote::before, .quote-box blockquote::after{ 44 | content: '"'; 45 | } 46 | .quote-box span{ 47 | display: block; 48 | margin-top: 10px; 49 | float: right; 50 | position: relative; 51 | } 52 | .quote-box span::before{ 53 | content: ''; 54 | width: 20px; 55 | height: 2px; 56 | background: rgb(23,124,229); 57 | position: absolute; 58 | top: 50%; 59 | left: -30px; 60 | } 61 | .quote-box div{ 62 | width: 100%; 63 | margin-top: 50px; 64 | display: flex; 65 | justify-content: center; 66 | } 67 | button{ 68 | background: rgb(23, 124, 229); 69 | color: #fff; 70 | border-radius: 25px; 71 | border: 1px solid rgb(23, 124, 229); 72 | width: 150px; 73 | height: 50px; 74 | display: flex; 75 | align-items: center; 76 | justify-content: center; 77 | margin: 5px; 78 | cursor: pointer; 79 | } 80 | .quote-box button img{ 81 | width: 20px; 82 | margin-right: 10px; 83 | } 84 | .quote-box button:nth-child(2){ 85 | background: transparent; 86 | color: #333; 87 | } 88 | img 89 | { 90 | width: 50px; 91 | height: 50px; 92 | } 93 | .tit{ 94 | align-items: center; 95 | } --------------------------------------------------------------------------------