├── style ├── images │ ├── cute-cat.gif:Zone.Identifier │ └── cute-cat.gif └── css │ ├── styles.css │ └── yes_styles.css ├── README.md ├── yes.html └── index.html /style/images/cute-cat.gif:Zone.Identifier: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /style/images/cute-cat.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OlieWu/tinawina/HEAD/style/images/cute-cat.gif -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # tinawina 2 | Hi Guys! 3 | 4 | I made this little webpage after a friend showed me something similar my girlfriend had liked on instagram. 5 | 6 | Feel free to use this code for your site or however y'all see fit! 7 | 8 | URL: olie.wu.github.io/tinawina/ 9 | -------------------------------------------------------------------------------- /yes.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 |
10 |

Yippie!!!

11 |
12 |
13 | Cute animated illustration 14 |
15 |

See you soon for a suprise!

16 |
17 | 18 | 19 | -------------------------------------------------------------------------------- /style/css/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | height: 100vh; 6 | background-color: #F8C8DC; 7 | } 8 | 9 | /* Position the "No" button absolutely within body */ 10 | #noButton { 11 | position: absolute; 12 | margin-left: 150px; 13 | transition: 0.5s; 14 | /* Smooth movement */ 15 | } 16 | 17 | #yesButton { 18 | position: absolute; 19 | margin-right: 150px; 20 | /* Smooth movement */ 21 | } 22 | 23 | .header_text { 24 | font-family: 'Nunito'; 25 | font-size: 50px; 26 | font-weight: bold; 27 | color: white; 28 | text-align: center; 29 | margin-top: 20px; 30 | margin-bottom: 0px; 31 | } 32 | 33 | .buttons { 34 | display: flex; 35 | flex-direction: row; 36 | justify-content: center; 37 | align-items: center; 38 | margin-top: 20px; 39 | margin-left: 20px; 40 | /* optional: adds some space between the buttons */ 41 | } 42 | 43 | .btn { 44 | background-color: #FFB6C1; 45 | color: white; 46 | padding: 15px 32px; 47 | text-align: center; 48 | display: inline-block; 49 | font-size: 16px; 50 | margin: 4px 2px; 51 | cursor: pointer; 52 | border: none; 53 | border-radius: 12px; 54 | transition: background-color 0.3s ease; 55 | } 56 | 57 | .btn:hover { 58 | background-color: #FAF9F6; 59 | } 60 | 61 | .gif_container { 62 | display: flex; 63 | justify-content: center; 64 | align-items: center; 65 | margin-left: 90px; 66 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 |
10 |

Do you wanna go out with me ehe

11 |
12 |
13 | Cute animated illustration 14 |
15 |
16 | 17 | 18 | 30 |
31 |
32 | 33 | 34 | -------------------------------------------------------------------------------- /style/css/yes_styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | height: 100vh; 6 | background-color: #F8C8DC; 7 | } 8 | 9 | /* Position the "No" button absolutely within body */ 10 | #noButton { 11 | position: absolute; 12 | margin-left: 150px; 13 | transition: 0.5s; 14 | /* Smooth movement */ 15 | } 16 | 17 | #yesButton { 18 | position: absolute; 19 | margin-right: 150px; 20 | /* Smooth movement */ 21 | } 22 | 23 | .header_text { 24 | font-family: 'Nunito'; 25 | font-size: 50px; 26 | font-weight: bold; 27 | color: white; 28 | text-align: center; 29 | margin-top: 20px; 30 | margin-bottom: 0px; 31 | } 32 | 33 | .text { 34 | font-family: 'Nunito'; 35 | font-size: 25px; 36 | font-weight: bold; 37 | color: white; 38 | text-align: center; 39 | margin-top: 20px; 40 | margin-bottom: 0px; 41 | } 42 | 43 | .buttons { 44 | display: flex; 45 | flex-direction: row; 46 | justify-content: center; 47 | align-items: center; 48 | margin-top: 20px; 49 | margin-left: 20px; 50 | /* optional: adds some space between the buttons */ 51 | } 52 | 53 | .btn { 54 | background-color: #FFB6C1; 55 | color: white; 56 | padding: 15px 32px; 57 | text-align: center; 58 | display: inline-block; 59 | font-size: 16px; 60 | margin: 4px 2px; 61 | cursor: pointer; 62 | border: none; 63 | border-radius: 12px; 64 | transition: background-color 0.3s ease; 65 | } 66 | 67 | .btn:hover { 68 | background-color: #FAF9F6; 69 | } 70 | 71 | .gif_container { 72 | display: flex; 73 | justify-content: center; 74 | align-items: center; 75 | } --------------------------------------------------------------------------------