├── README.md ├── untoldcoding.js ├── new.html ├── index.html ├── untoldcoding.css └── index.css /README.md: -------------------------------------------------------------------------------- 1 | # Impress-your-crush -------------------------------------------------------------------------------- /untoldcoding.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function () { 2 | $(".title").click(function () { 3 | $(".container").addClass("open"); 4 | }); 5 | 6 | $(".close").click(function () { 7 | $(".container").removeClass("open"); 8 | }); 9 | }); 10 | -------------------------------------------------------------------------------- /new.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | untoldcoding 7 | 8 | 9 | 10 | 15 | 21 | 22 |

23 |

24 | 25 | Click Me 26 | 27 |

28 | 29 |

I love you baby

30 |

Be mine Forever

31 |

~untoldcoding

32 |

33 |

34 |

35 | 36 | 37 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | LOVE 8 | 9 | 10 | 11 | 12 |

13 |

14 | Thank you for always accepting me as I am and for your unwavering 15 | love💖. 16 |
I have Something for you ..Again Thankyou Love 17 | Click Here 18 |

19 |

20 | 21 |

22 |

😇

23 |

24 | 25 |

26 |

😊

27 |

28 | 29 |

30 |

I wana say you some thing

31 |

32 | 33 |

34 |

Wassup?

35 |

36 | 37 |

38 |

Hi, 😃

39 |

40 | 41 | 47 | 48 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /untoldcoding.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Pacifico); 2 | body { 3 | background: url(https://subtlepatterns.com/patterns/noise_lines.png); 4 | font-family: "Pacifico", cursive; 5 | overflow: hidden; 6 | color: #fff; 7 | } 8 | .bgoverlay { 9 | background: rgb(103, 58, 183); 10 | background: rgba(103, 58, 183, 0.7); 11 | position: absolute; 12 | top: 0; 13 | left: 0; 14 | right: 0; 15 | bottom: 0; 16 | } 17 | .container { 18 | position: relative; 19 | margin: 120px auto 0 auto; 20 | width: 320px; 21 | } 22 | 23 | .ico { 24 | display: block; 25 | width: 320px; 26 | height: 320px; 27 | } 28 | .open .ico { 29 | animation: open 4s; 30 | transform: scale(10); 31 | } 32 | .ico .title { 33 | position: absolute; 34 | top: 50%; 35 | left: 50%; 36 | margin-left: -95px; 37 | margin-top: -73px; 38 | z-index: 4; 39 | font-size: 50px; 40 | font-family: "Pacifico", cursive; 41 | color: #fff; 42 | cursor: pointer; 43 | text-shadow: 2px 4px 3px rgba(0, 0, 0, 0.3); 44 | } 45 | .open .ico .title { 46 | opacity: 0; 47 | transition: all 0.3s ease; 48 | top: -100px; 49 | } 50 | .ico:before, 51 | .ico:after, 52 | .ico2:before, 53 | .ico2:after { 54 | position: absolute; 55 | top: 0; 56 | left: 0; 57 | } 58 | .ico:before, 59 | .ico:after, 60 | .ico2:before, 61 | .ico2:after { 62 | display: block; 63 | font-size: 20em; 64 | color: #ff4081; 65 | content: "\f004"; 66 | font-family: FontAwesome; 67 | text-rendering: auto; 68 | -webkit-font-smoothing: antialiased; 69 | -moz-osx-font-smoothing: grayscale; 70 | } 71 | .ico2:before, 72 | .ico2:after { 73 | color: #e91e63; 74 | } 75 | .ico:before { 76 | z-index: 3; 77 | } 78 | .ico:after { 79 | animation: explode 4s infinite; 80 | } 81 | 82 | .ico2:before { 83 | animation: explodeSmall 3s infinite; 84 | } 85 | .ico2:after { 86 | animation: explodeSmall 2s infinite; 87 | } 88 | 89 | .endtext { 90 | opacity: 0; 91 | position: absolute; 92 | top: -100px; 93 | width: 100%; 94 | } 95 | .open .endtext { 96 | top: 0; 97 | opacity: 1; 98 | animation: show 5s; 99 | } 100 | .endtext .close { 101 | position: absolute; 102 | top: 0; 103 | right: 0; 104 | cursor: pointer; 105 | text-shadow: 2px 4px 3px rgba(0, 0, 0, 0.3); 106 | } 107 | .endtext h1, 108 | .endtext h2, 109 | .endtext h3 { 110 | text-shadow: 2px 4px 3px rgba(0, 0, 0, 0.3); 111 | text-align: center; 112 | font-weight: normal; 113 | } 114 | .endtext h1 { 115 | font-size: 50px; 116 | } 117 | .endtext h2 { 118 | font-size: 30px; 119 | } 120 | .endtext h3 { 121 | font-size: 20px; 122 | } 123 | 124 | @keyframes explode { 125 | from { 126 | transform: scale(1); 127 | opacity: 1; 128 | } 129 | to { 130 | transform: scale(1.6); 131 | opacity: 0; 132 | } 133 | } 134 | @keyframes explodeSmall { 135 | from { 136 | transform: scale(1); 137 | opacity: 1; 138 | } 139 | to { 140 | transform: scale(1.2); 141 | opacity: 0; 142 | } 143 | } 144 | 145 | @keyframes open { 146 | from { 147 | transform: scale(1); 148 | } 149 | to { 150 | transform: scale(10); 151 | } 152 | } 153 | 154 | @keyframes show { 155 | from { 156 | opacity: 0; 157 | top: -100px; 158 | } 159 | to { 160 | opacity: 1; 161 | top: 0; 162 | } 163 | } 164 | -------------------------------------------------------------------------------- /index.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: rgb(0, 0, 0); 3 | display: flex; 4 | align-items: center; 5 | justify-content: center; 6 | } 7 | 8 | .coll { 9 | width: 600px; 10 | height: 300px; 11 | object-fit: cover; 12 | cursor: pointer; 13 | transition: width 250ms ease, height 250ms ease; 14 | border-radius: 5px; 15 | background-color: rgb(86, 202, 255); 16 | /* border-radius: rgb(155, 28, 148); */ 17 | margin-top: 200px; 18 | display: inline-block; 19 | position: relative; 20 | left: -600px; 21 | } 22 | 23 | h2 { 24 | display: flex; 25 | justify-content: center; 26 | /* align-items: center; */ 27 | font-size: 70px; 28 | font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; 29 | } 30 | 31 | .coll-2 { 32 | width: 700px; 33 | height: 250px; 34 | object-fit: cover; 35 | cursor: pointer; 36 | transition: width 250ms ease, height 250ms ease; 37 | border-radius: 5px; 38 | background-color: rgb(11, 74, 168); 39 | /* border-radius: rgb(155, 28, 148); */ 40 | margin-top: 200px; 41 | display: inline-block; 42 | position: relative; 43 | right: 350px; 44 | } 45 | 46 | .coll-2 h2 { 47 | position: relative; 48 | top: 60px; 49 | display: flex; 50 | justify-content: center; 51 | font-size: 40px; 52 | font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", 53 | "Lucida Sans", Arial, sans-serif; 54 | } 55 | 56 | .coll-3 { 57 | width: 750px; 58 | height: 300px; 59 | object-fit: cover; 60 | cursor: pointer; 61 | transition: width 250ms ease, height 250ms ease; 62 | border-radius: 5px; 63 | background-color: rgb(71, 206, 18); 64 | /* border-radius: rgb(155, 28, 148); */ 65 | margin-top: 200px; 66 | display: inline-block; 67 | position: relative; 68 | left: -80px; 69 | top: 20px; 70 | } 71 | 72 | .coll-3 h2 { 73 | display: inline; 74 | justify-content: center; 75 | font-size: 50px; 76 | position: relative; 77 | right: -30px; 78 | top: 40px; 79 | } 80 | 81 | .coll-4 { 82 | width: 600px; 83 | height: 250px; 84 | object-fit: cover; 85 | cursor: pointer; 86 | transition: width 250ms ease, height 250ms ease; 87 | border-radius: 5px; 88 | background-color: rgb(255, 251, 0); 89 | /* border-radius: rgb(155, 28, 148); */ 90 | margin-top: 200px; 91 | display: inline-block; 92 | position: relative; 93 | right: -90px; 94 | } 95 | 96 | .coll-4 h2 { 97 | position: relative; 98 | top: 30px; 99 | display: flex; 100 | justify-content: center; 101 | font-size: 70px; 102 | } 103 | 104 | .coll-5 { 105 | width: 700px; 106 | height: 200px; 107 | object-fit: cover; 108 | cursor: pointer; 109 | transition: width 250ms ease, height 250ms ease; 110 | border-radius: 5px; 111 | background-color: rgb(45, 209, 127); 112 | /* border-radius: rgb(155, 28, 148); */ 113 | margin-top: 200px; 114 | display: inline-block; 115 | position: relative; 116 | right: -300px; 117 | } 118 | 119 | .coll-5 h2 { 120 | font-size: 70px; 121 | } 122 | 123 | .coll-6 { 124 | width: 900px; 125 | height: 200px; 126 | object-fit: cover; 127 | cursor: pointer; 128 | transition: width 250ms ease, height 250ms ease; 129 | border-radius: 5px; 130 | background-color: rgb(193, 209, 45); 131 | /* border-radius: rgb(155, 28, 148); */ 132 | display: inline-block; 133 | position: relative; 134 | top: 100px; 135 | right: -500px; 136 | } 137 | 138 | .coll-6 h2 { 139 | display: flex; 140 | justify-content: center; 141 | font-size: 20px; 142 | margin: 10px; 143 | } 144 | a { 145 | color: red; 146 | text-decoration: none; 147 | } 148 | --------------------------------------------------------------------------------