diff --git a/assets/VyIu.jpg b/assets/VyIu.jpg new file mode 100644 index 0000000..803051b Binary files /dev/null and b/assets/VyIu.jpg differ diff --git a/assets/VyIu2.jpg b/assets/VyIu2.jpg new file mode 100644 index 0000000..0a12384 Binary files /dev/null and b/assets/VyIu2.jpg differ diff --git a/css/Universe.jpg b/css/Universe.jpg new file mode 100644 index 0000000..dab410a Binary files /dev/null and b/css/Universe.jpg differ diff --git a/css/style.css b/css/style.css index 86c53b8..3a0de77 100644 --- a/css/style.css +++ b/css/style.css @@ -1,21 +1,23 @@ -@import url('https://fonts.googleapis.com/css?family=Lobster'); -@import url('https://fonts.googleapis.com/css?family=Indie+Flower'); +@import url("https://fonts.googleapis.com/css?family=Lobster"); +@import url("https://fonts.googleapis.com/css?family=Indie+Flower"); * { -webkit-box-sizing: border-box; - box-sizing: border-box; + box-sizing: border-box; } body { - background: #E5E5E5; + background: #e5e5e5; background-image: url("bg.jpg"); } #card-front { - color: #FFDFDF; + color: #ffdfdf; z-index: 10; } -#card, #card-front, #card-inside { +#card, +#card-front, +#card-inside { height: 580px; } @@ -24,29 +26,31 @@ body { height: 100%; } -#card-front, #card-inside { +#card-front, +#card-inside { width: 50%; - -webkit-box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.25), 0 0 1px rgba(0, 0, 0, 0.5); - box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.25), 0 0 1px rgba(0, 0, 0, 0.5); + -webkit-box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.25), + 0 0 1px rgba(0, 0, 0, 0.5); + box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.25), 0 0 1px rgba(0, 0, 0, 0.5); position: absolute; left: 50%; } #card-inside .wrap { - background: #FFEFEF; + background: #ffefef; -webkit-box-shadow: inset 2px 0 1px rgba(0, 0, 0, 0.05); - box-shadow: inset 2px 0 1px rgba(0, 0, 0, 0.05); + box-shadow: inset 2px 0 1px rgba(0, 0, 0, 0.05); } #card { width: 960px; margin: auto; -webkit-transform-style: preserve-3d; - transform-style: preserve-3d; + transform-style: preserve-3d; -webkit-perspective: 5000px; - perspective: 5000px; + perspective: 5000px; -webkit-transform: translateX(-25%); - transform: translateX(-25%); + transform: translateX(-25%); -webkit-transition: -webkit-transform 1s ease-in-out; transition: -webkit-transform 1s ease-in-out; transition: transform 1s ease-in-out; @@ -60,19 +64,20 @@ body { #card h1 { text-align: center; - font-family: 'Lobster', cursive; + font-family: "Lobster", cursive; font-style: italic; font-size: 70px; - text-shadow: 4px 4px 0px rgba(0, 0, 0, 0.15), 1px 1px 0 #ffc8c8, 2px 2px 0 #ff9696, 3px 3px 0 #ff7d7d; - color: #FFF; + text-shadow: 4px 4px 0px rgba(0, 0, 0, 0.15), 1px 1px 0 #ffc8c8, + 2px 2px 0 #ff9696, 3px 3px 0 #ff7d7d; + color: #fff; } #card-inside { font-size: 1.3em; line-height: 1.4; -font-family: 'Lobster'; + font-family: "Lobster"; color: #331717; - font-style: italic; + /* font-style: italic; */ } p { @@ -86,25 +91,36 @@ p:first-child { p.signed { margin-top: 1.5em; text-align: center; -font-family: 'Indie Flower', cursive; + font-family: "Indie Flower", cursive; font-size: 1.5em; } - +p.hihi { + margin-top: 5em; + text-align: right; + font-family: "Indie Flower"; + font-size: 1em; +} #card-front { background-color: #ee9ca7; - background-image: -webkit-gradient(linear, left top, left bottom, from(#FF5555), to(#FF7777)); - background-image: linear-gradient(top, #FF5555 0%, #FF7777 100%); + background-image: -webkit-gradient( + linear, + left top, + left bottom, + from(#ff5555), + to(#ff7777) + ); + background-image: linear-gradient(top, #ff5555 0%, #ff7777 100%); -webkit-transform-origin: left; - transform-origin: left; + transform-origin: left; -webkit-transition: -webkit-transform 1s linear; transition: -webkit-transform 1s linear; transition: transform 1s linear; transition: transform 1s linear, -webkit-transform 1s linear; position: relative; -webkit-transform-style: preserve-3d; - transform-style: preserve-3d; + transform-style: preserve-3d; -webkit-perspective: 5000px; - perspective: 5000px; + perspective: 5000px; } #card-front:before { @@ -116,36 +132,37 @@ font-family: 'Indie Flower', cursive; display: block; background-color: #444; -webkit-transform: translateZ(-1px); - transform: translateZ(-1px); + transform: translateZ(-1px); } #card-front .wrap { -webkit-transition: background 1s linear; transition: background 1s linear; -webkit-backface-visibility: hidden; - backface-visibility: hidden; + backface-visibility: hidden; } #card-front button { position: absolute; bottom: 1em; right: -12px; - background: #F44; - color: #FFF; - font-family: 'Lobster', cursive; + background: #f44; + color: #fff; + font-family: "Lobster", cursive; font-style: italic; font-weight: bold; font-size: 1.5em; - padding: .5em; + padding: 0.5em; border: none; cursor: pointer; - -webkit-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.25), 0 0 1px rgba(0, 0, 0, 0.4); - box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.25), 0 0 1px rgba(0, 0, 0, 0.4); + -webkit-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.25), + 0 0 1px rgba(0, 0, 0, 0.4); + box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.25), 0 0 1px rgba(0, 0, 0, 0.4); } #card-front button:hover, #card-front button:focus { - background: #F22; + background: #f22; } #close { @@ -154,7 +171,7 @@ font-family: 'Indie Flower', cursive; #card.open-fully { -webkit-transform: translateX(0%); - transform: translateX(0%); + transform: translateX(0%); } #card.open-fully #close, @@ -169,7 +186,7 @@ font-family: 'Indie Flower', cursive; #card.open-half #card-front, #card.close-half #card-front { -webkit-transform: rotateY(-90deg); - transform: rotateY(-90deg); + transform: rotateY(-90deg); } #card.open-half .shadow { @@ -178,12 +195,12 @@ font-family: 'Indie Flower', cursive; #card.open-fully #card-front, #card.close-half #card-front { - background: #FFEFEF; + background: #ffefef; } #card.open-fully #card-front { -webkit-transform: rotateY(-180deg); - transform: rotateY(-180deg); + transform: rotateY(-180deg); } #card.open-fully .shadow { @@ -193,7 +210,7 @@ font-family: 'Indie Flower', cursive; footer { max-width: 500px; margin: 40px auto; -font-family: 'Lobster', cursive; + font-family: "Lobster", cursive; font-size: 14px; line-height: 1.6; color: #888; @@ -225,11 +242,11 @@ font-family: 'Lobster', cursive; width: 5px; height: 35px; -webkit-transform: translateY(-300px); - transform: translateY(-300px); + transform: translateY(-300px); -webkit-backface-visibility: hidden; - backface-visibility: hidden; + backface-visibility: hidden; -webkit-animation: in 500ms 5s ease-out forwards; - animation: in 500ms 5s ease-out forwards; + animation: in 500ms 5s ease-out forwards; } .velas:after, @@ -265,78 +282,80 @@ font-family: 'Lobster', cursive; .fuego:nth-child(1) { -webkit-animation: fuego 2s 5.5s infinite; - animation: fuego 2s 5.5s infinite; + animation: fuego 2s 5.5s infinite; } .fuego:nth-child(2) { -webkit-animation: fuego 1.5s 5.5s infinite; - animation: fuego 1.5s 5.5s infinite; + animation: fuego 1.5s 5.5s infinite; } .fuego:nth-child(3) { -webkit-animation: fuego 1s 5.5s infinite; - animation: fuego 1s 5.5s infinite; + animation: fuego 1s 5.5s infinite; } .fuego:nth-child(4) { -webkit-animation: fuego 0.5s 5.5s infinite; - animation: fuego 0.5s 5.5s infinite; + animation: fuego 0.5s 5.5s infinite; } .fuego:nth-child(5) { -webkit-animation: fuego 0.2s 5.5s infinite; - animation: fuego 0.2s 5.5s infinite; + animation: fuego 0.2s 5.5s infinite; } /* ============================================== Animation Fire */ @-webkit-keyframes fuego { - 0%, 100% { + 0%, + 100% { background: rgba(254, 248, 97, 0.5); -webkit-box-shadow: 0 0 40px 10px rgba(248, 233, 209, 0.2); - box-shadow: 0 0 40px 10px rgba(248, 233, 209, 0.2); + box-shadow: 0 0 40px 10px rgba(248, 233, 209, 0.2); -webkit-transform: translateY(0) scale(1); - transform: translateY(0) scale(1); + transform: translateY(0) scale(1); } 50% { background: rgba(255, 50, 0, 0.1); -webkit-box-shadow: 0 0 40px 20px rgba(248, 233, 209, 0.2); - box-shadow: 0 0 40px 20px rgba(248, 233, 209, 0.2); + box-shadow: 0 0 40px 20px rgba(248, 233, 209, 0.2); -webkit-transform: translateY(-20px) scale(0); - transform: translateY(-20px) scale(0); + transform: translateY(-20px) scale(0); } } @keyframes fuego { - 0%, 100% { + 0%, + 100% { background: rgba(254, 248, 97, 0.5); -webkit-box-shadow: 0 0 40px 10px rgba(248, 233, 209, 0.2); - box-shadow: 0 0 40px 10px rgba(248, 233, 209, 0.2); + box-shadow: 0 0 40px 10px rgba(248, 233, 209, 0.2); -webkit-transform: translateY(0) scale(1); - transform: translateY(0) scale(1); + transform: translateY(0) scale(1); } 50% { background: rgba(255, 50, 0, 0.1); -webkit-box-shadow: 0 0 40px 20px rgba(248, 233, 209, 0.2); - box-shadow: 0 0 40px 20px rgba(248, 233, 209, 0.2); + box-shadow: 0 0 40px 20px rgba(248, 233, 209, 0.2); -webkit-transform: translateY(-20px) scale(0); - transform: translateY(-20px) scale(0); + transform: translateY(-20px) scale(0); } } @-webkit-keyframes in { to { -webkit-transform: translateY(0); - transform: translateY(0); + transform: translateY(0); } } @keyframes in { to { -webkit-transform: translateY(0); - transform: translateY(0); + transform: translateY(0); } } .text { color: #8b6a60; - font-family: 'Lobster', cursive; + font-family: "Lobster", cursive; font-weight: 300; font-style: italic; text-align: center; @@ -355,9 +374,9 @@ font-family: 'Lobster', cursive; width: 80%; margin: auto; -webkit-backface-visibility: hidden; - backface-visibility: hidden; + backface-visibility: hidden; -webkit-transform: translateZ(-1px) rotateY(180deg); - transform: translateZ(-1px) rotateY(180deg); + transform: translateZ(-1px) rotateY(180deg); background-color: #ffefef; } @@ -368,9 +387,9 @@ font-family: 'Lobster', cursive; left: 0; right: 0; -webkit-backface-visibility: hidden; - backface-visibility: hidden; + backface-visibility: hidden; -webkit-transform: translateZ(-2px) rotateY(180deg); - transform: translateZ(-2px) rotateY(180deg); + transform: translateZ(-2px) rotateY(180deg); pointer-events: none; -webkit-transition: background 1s linear; transition: background 1s linear; @@ -385,29 +404,29 @@ font-family: 'Lobster', cursive; border: 7px solid #f5f5f5; border-bottom: 50px solid #f5f5f5; -webkit-box-shadow: 0 0 6px -1px #000; - box-shadow: 0 0 6px -1px #000; + box-shadow: 0 0 6px -1px #000; overflow: hidden; left: 0; right: 0; margin: auto; -webkit-transform: rotate(-5deg); - transform: rotate(-5deg); + transform: rotate(-5deg); clear: both; -webkit-backface-visibility: hidden; - backface-visibility: hidden; + backface-visibility: hidden; } .polaroid img, .polaroid .img { width: 100%; height: 100%; -webkit-backface-visibility: hidden; - backface-visibility: hidden; + backface-visibility: hidden; background-position: center; background-size: cover; -webkit-animation: fade-in 20s ease-in; - animation: fade-in 20s ease-in; + animation: fade-in 5s ease-in; -webkit-animation-iteration-count: 1; - animation-iteration-count: 1; + animation-iteration-count: 1; } @-webkit-keyframes fade-in { diff --git a/index.html b/index.html index 4317a70..0426f24 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@ - Happy Birthday | Siddhant Sharma + Happy Birthday Vy iu của mình @@ -22,15 +22,16 @@
-

Happy Birthday!

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco  

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco -

Made With

+

Happy Birthday!

+

Chúc mừng sinh nhật Vy iu của anh.  

+

Chúc bé của mình tuổi mới ngày càng xinh đẹp, đáng iu, và iu anh nhiều hơn. Anh thương Vy nhứt trên đờiiiiii   +

Made With

+

Khang iu cua em

-

Happy Birthday Love

+

Happy Birthday Vy iu của anh

@@ -69,7 +70,7 @@

Happy Birthday Love




-
+