diff --git a/README.md b/README.md new file mode 100644 index 0000000..9b68a2b --- /dev/null +++ b/README.md @@ -0,0 +1,40 @@ +# Will You Be My Valentine? + +Welcome to the "Will You Be My Valentine?" project, a playful and interactive way to ask that special someone the big question this Valentine's Day. Hosted as a GitHub Page, this project offers a unique blend of creativity and technology to make your Valentine's Day proposal unforgettable. + +## Overview + +"Will You Be My Valentine?" is a web-based application that presents users with the question "Will you be my valentine?" followed by two options: "Yes" and "No". What makes this project special is the interactive and engaging way it handles responses, especially if someone tries to click "No". + +## Features + +- **Interactive Question**: The core of the project is the interactive Valentine's Day proposal. +- **Responsive Design**: Crafted to look great on both desktop and mobile devices. +- **Playful Interaction**: If the user attempts to click "No", watch out for a little surprise that might just sway their decision! + +## Technology + +This project is built using simple yet powerful web technologies: +- HTML +- CSS +- JavaScript + +## How to View + +To experience "Will You Be My Valentine?", simply visit [https://byquangthanh.github.io/valentine.github.io/](https://byquangthanh.github.io/valentine.github.io/) from any modern web browser. + +## How to Contribute + +Contributions to the "Will You Be My Valentine?" project are more than welcome. Whether it's suggesting new features, improving the design, or fixing bugs, here's how you can contribute: + +1. **Fork the Repository**: Start by forking the [project repository](https://github.com/byquangthanh/valentine.github.io) on GitHub. +2. **Clone Your Fork**: Clone your fork to your local machine for development. +3. **Create a New Branch**: Make a new branch for your changes. +4. **Make Your Changes**: Implement your feature, fix, or improvement. +5. **Commit Your Changes**: Commit your changes with a clear and descriptive commit message. +6. **Push to Your Fork**: Push your changes up to your fork. +7. **Open a Pull Request**: Back on GitHub, open a pull request from your fork to the main project. + +## Support + +If you encounter any issues or have questions about the project, feel free to open an issue on the GitHub repository. diff --git a/activities.html b/activities.html new file mode 100644 index 0000000..b205558 --- /dev/null +++ b/activities.html @@ -0,0 +1,77 @@ + + + + + + Activities + + + +
What are we doing after?
+
+
+ aquarium + +
+
+ arcade + +
+
+ cinema + +
+
+ ceramics + +
+
+ kunsthalle + +
+
+ park.jpeg + +
+
+ + + diff --git a/activities/aquarium.jpeg b/activities/aquarium.jpeg new file mode 100644 index 0000000..d0b574c Binary files /dev/null and b/activities/aquarium.jpeg differ diff --git a/activities/arcade.jpeg b/activities/arcade.jpeg new file mode 100644 index 0000000..49d1361 Binary files /dev/null and b/activities/arcade.jpeg differ diff --git a/activities/cinema.jpeg b/activities/cinema.jpeg new file mode 100644 index 0000000..9264bbc Binary files /dev/null and b/activities/cinema.jpeg differ diff --git a/activities/keramika.jpeg b/activities/keramika.jpeg new file mode 100644 index 0000000..d475363 Binary files /dev/null and b/activities/keramika.jpeg differ diff --git a/activities/kunsthalle.jpeg b/activities/kunsthalle.jpeg new file mode 100644 index 0000000..8c6f6b3 Binary files /dev/null and b/activities/kunsthalle.jpeg differ diff --git a/activities/park.jpeg b/activities/park.jpeg new file mode 100644 index 0000000..01a41e8 Binary files /dev/null and b/activities/park.jpeg differ diff --git a/congratulations.mp3 b/congratulations.mp3 new file mode 100644 index 0000000..75b5de7 Binary files /dev/null and b/congratulations.mp3 differ diff --git a/css/activities.css b/css/activities.css new file mode 100644 index 0000000..db9ba29 --- /dev/null +++ b/css/activities.css @@ -0,0 +1,40 @@ +body { + text-align: center; + margin-top: 30px; + font-family: "Courier"; + background-color: #fff5e4; + color: #ff9494; +} +#activityquestion { + font-size: 50px; + margin-bottom: 30px; +} +.activity-item { + display: inline-block; + margin: 10px; + vertical-align: top; + color: #ff9494; +} +.activity-item img { + height: 200px; + width: 200px; + border-radius: 50%; + border: 5px solid #ff9494; + object-fit: cover; + padding: 10px; +} +.activity-item label { + display: block; +} +.button { + padding: 10px 20px; + font-size: 18px; + cursor: pointer; + margin: 10px; + font-family: "courier"; + margin-bottom: 20px; + background-color: #ffe3e1; + color: #e67373; + border-radius: 12px; + border: 2px solid #ffe3e1; +} diff --git a/css/date.css b/css/date.css new file mode 100644 index 0000000..94d3ef3 --- /dev/null +++ b/css/date.css @@ -0,0 +1,60 @@ +body { + text-align: center; + margin-top: 30px; + font-family: "Courier"; + background-color: #fff5e4; + color: #ff9494; + display: flex; + flex-direction: column; +} +h1 { + font-size: 40px; +} + +form .header { + width: 100%; + display: flex; + font-size: 20px; + margin-bottom: 20px; + color: #ff9494; +} + +.form-group { + display: flex; + flex-direction: column; + justify-content: center; + font-size: 25px; +} + +.button { + padding: 6px 10px; + font-size: 15px; + cursor: pointer; + margin: 10px; + font-family: "courier"; + margin-bottom: 10px; + background-color: #ffe3e1; + color: #e67373; + border-radius: 12px; + border: 2px solid #ffe3e1; + transition: 0.3s; +} + +.button:hover { + background-color: #ff9494; + color: #ffe3e1; + border: 2px solid #ff9494; +} + +input[type="date"] { + padding: 6px 10px; + font-size: 15px; + cursor: pointer; + margin: 10px; + font-family: "courier"; + margin-bottom: 10px; + background-color: #ffe3e1; + color: #e67373; + border-radius: 12px; + border: 2px solid #ffe3e1; +} diff --git a/css/dessert.css b/css/dessert.css new file mode 100644 index 0000000..8057552 --- /dev/null +++ b/css/dessert.css @@ -0,0 +1,41 @@ +body { + text-align: center; + margin-top: 30px; + font-family: courier; + background-color: #fff5e4; + color: #ff9494; +} +#dessertquestion { + font-size: 50px; + margin-bottom: 30px; + font-weight: bold; +} +.dessert-item { + display: inline-table; + margin: 10px; + vertical-align: top; + color: #ff9494; +} +.dessert-item img { + height: 200px; + width: 200px; + border-radius: 50%; + border: 5px solid #ff9494; + object-fit: cover; + padding: 10px; +} +.dessert-item label { + display: block; +} +.button { + padding: 10px 20px; + font-size: 18px; + cursor: pointer; + margin: 10px; + font-family: "courier"; + margin-bottom: 20px; + background-color: #ffe3e1; + color: #e67373; + border-radius: 12px; + border: 2px solid #ffe3e1; +} diff --git a/css/flower.css b/css/flower.css new file mode 100644 index 0000000..6705385 --- /dev/null +++ b/css/flower.css @@ -0,0 +1,365 @@ +*, +*::after, +*::before{ + padding: 0; + margin: 0; + box-sizing: border-box; +} + +:root{ + --color-bg: linear-gradient(to top,#010329,#000005); + --color-glass:linear-gradient(to left,#142544,#1a9092); + --color-water:linear-gradient(to left,#142544,#1b6d6e); +} + +body{ + background-color: #FFF5E4; + min-height: 100vh; + display: flex; + flex-direction: column; /* Change the direction to column */ + align-items: center; + justify-content: flex-start; /* Align items to the start of the container */ + overflow: hidden; + color: #FF9494; + font-family: courier; +} + +#thankyou { + width: 100%; /* Ensure it spans the full width */ + text-align: center; /* Keep the text centered */ + margin-top: 20px; /* Add some space at the top */ + z-index: 1000; /* Ensure it's above other elements if needed */ + position: relative; /* Adjust based on layout needs */ + margin-bottom: 400px; + font-size: 50px; +} + +.flower{ + position: relative; +} + +.flower__glass{ + width:20vmin; + height: 30vmin; + background-image: var(--color-glass); + clip-path: polygon(0 0, 100% 0, 85% 100%, 15% 100%); + opacity: .8; + position: relative; +} + +.flower__glass::after{ + content: ''; + position: absolute; + bottom: 0; + left: 0; + background-color: #182843; + width: 100%; + height: 2vmin; +} + +.flower__glass::before{ + content: ''; + position: absolute; + bottom: 0; + left: 0; + background-image: var(--color-water); + width: 100%; + height: 15vmin; +} + +.f-wrapper{ + position: absolute; + left: 45%; + bottom: 2vmin; +} + +.f-wrapper--2{ + left: 50%; + bottom: 5%; + transform-origin: 10% left; + transform: rotate(20deg); +} + +.f-wrapper--3{ + left: 30%; + bottom: 5%; + transform-origin: 10% left; + transform: rotate(-10deg); +} + +.f-wrapper--3 .flower__line{ + height: 45vmin; + position: relative; +} + +.f-wrapper--3 .flower__line::after{ + content: ''; + position: absolute; + left:0; + top: 0; + width: 6vmin; + height: 6vmin; + transform: translate(-69%,-30%) rotate(-5deg); + border-radius:10vmin 10vmin 0 0; + border: 2vmin solid #104d4e; + border-bottom: transparent; + border-left: transparent; +} + +.f-wrapper--3 .flower__line::before{ + content: ''; + position: absolute; + left:-40%; + top: -1%; + width: 6vmin; + height: 2vmin; + transform-origin: right; + transform: translate(-100%,-80%) rotate(-20deg); + background-color: #104d4e; + border-radius: 2vmin; +} + +.f-wrapper--3 .flower__line{ + background-image: linear-gradient(to top,#142544,#104d4e); +} + + +.f-wrapper--2 .flower__line{ + height: 45vmin; +} + +.f-wrapper--2 .f{ + transform: translateX(-50%) rotate(20deg); +} + +.f-wrapper--3 .f{ + transform: translate(-350%,-50%) rotate(-120deg); +} + +.f-wrapper--2 .flower__leaf:not(:first-child){ + width: 3.8vmin; + height: 10vmin; + background-image: linear-gradient(to bottom, #ff43b6 ,#c22887, #1a233a 99%); +} + +.f-wrapper--3 .flower__leaf:not(:first-child){ + width: 3.8vmin; + height: 10vmin; + background-image: linear-gradient(to bottom, #ad2be0 ,#712291, #1a233a 99%); +} + +.f-wrapper--3 .flower__leaf--1{ + width: 8vmin; + height: 10vmin; + bottom: 2vmin; + background-color: #ad2be0; +} + +.f-wrapper--2 .flower__leaf--1{ + width: 8vmin; + height: 10vmin; + bottom: 2vmin; + background-color: #de118b; +} + +.f-wrapper--2 .f .flower__leaf--8{ + width: 10vmin; + height: 9vmin; + bottom: 3vmin; + left: -30%; + transform: rotate(-50deg); + background-image: linear-gradient(to left bottom, #ff43b6 ,#4d1337);; +} + +.f-wrapper--3 .f .flower__leaf--8{ + width: 10vmin; + height: 9vmin; + left: -10% !important; + background-image: linear-gradient(to left bottom, #ad2be0 ,#712291);; +} + +.flower__line{ + width: 2vmin; + height: 56vmin; + background-image: linear-gradient(to left top,#82fdff 20%,#142544,#104d4e); + border-radius: 4vmin; +} + +.f{ + position: absolute; + top: 1vmin; + left: 50%; + transform: translateX(-50%) rotate(-10deg); + width: 2vmin; + height: 2vmin; +} + + +.flower__leaf{ + position: absolute; + left: 50%; + bottom: 2vmin; + transform: translateX(-50%); + width: 5vmin; + height: 14vmin; + background-image: linear-gradient(to bottom, #ffa085 ,#fa7373, #1a233a 99%); + + clip-path: ellipse(50% 50% at 50% 50%); + transform-origin: center bottom; + animation: open-flower 2s 1s backwards; +} + +.flower__leaf--1{ + width: 10vmin; + height: 12vmin; + bottom: 3vmin; + border-radius: 50% 50% 50% 50% / 80% 80% 20% 20%; + background-color: #e24f5f; + background-image: none; + animation: open-flowe--middle 1.4s 1s backwards; +} + +.flower__leaf--2{ + transform: translateX(-50%) rotate(-30deg); +} +.flower__leaf--3{ + transform: translateX(-50%) rotate(-50deg); +} +.flower__leaf--4{ + transform: translateX(-50%) rotate(-70deg); +} + +.flower__leaf--5{ + transform: translateX(-50%) rotate(30deg); +} + +.flower__leaf--6{ + transform: translateX(-50%) rotate(50deg); +} + +.flower__leaf--7{ + transform: translateX(-50%) rotate(70deg); +} + +.flower__leaf--8{ + width: 13vmin; + height: 11vmin; + bottom: 6vmin; + left: -30%; + border-radius: none; + clip-path: none; + border-radius: 10vmin 2vmin 10vmin 2vmin; + transform: rotate(-55deg); + background-image: linear-gradient(to left bottom, #ffa085 ,#eb8b8b,#492f2f 98%); +} + +.flower__fall-down--yellow{ + animation: flower-fall-down-yellow 8s 1.2s linear forwards; +} + +.flower__fall-down--pink{ + animation: flower-fall-down-pink 5s 1.2s linear forwards; +} + +.flower__fall-down--purple{ + bottom: 4vmin; + animation:flower-fall-down-purple 6s 1.2s linear forwards, flower-falling 6s 7.2s linear infinite; +} + + +@keyframes open-flower{ + 0%{ + transform: translateX(-50%) rotate(0); + } +} + +@keyframes open-flowe--middle { + 0%{ + opacity: 0; + transform: translateX(-50%) scale(0); + } +} + +@keyframes flower-fall-down-pink { + + 0%{ + transform: rotate(-55deg); + } + + 50%{ + transform: rotateX(-100deg); + } + + 100%{ + transform:translate(2vmin,28vmin); + } + +} + +@keyframes flower-fall-down-yellow { + + 0%{ + transform: rotate(-55deg); + } + + 50%{ + bottom: 3vmin; + transform: rotateX(-100deg); + } + + 100%{ + transform:translate(2vmin,70vmin) rotate(150deg); + } + +} + +@keyframes flower-fall-down-purple { + + 0%{ + transform: rotate(-50deg); + } + + 25%{ + bottom: 1vmin ; + transform: rotateX(-100deg); + perspective: 0px; + } + + 50%{ + perspective: 0px; + transform:translate(-30vmin,2vmin) rotate(90deg); + } + + 75%{ + perspective: 0px; + transform:translate(-34vmin,-2vmin); + } + + 100%{ + transform-origin: center; + transform:translate(-34vmin,-2vmin) rotateY(-80deg) rotateX(35deg); + } + +} + +@keyframes flower-falling { + 0%,100%{ + transform-origin: center; + transform:translate(-34vmin,-2vmin) rotateY(-80deg) rotateX(35deg); + } + + 25%{ + transform-origin: center; + transform:translate(-34.4vmin,-2vmin) rotateY(-84deg) rotateX(35deg); + } + + 50%{ + transform-origin: center; + transform:translate(-32vmin,-4.2vmin) rotateY(-80deg) rotateX(35deg); + } + + 75%{ + transform-origin: center; + transform:translate(-36vmin,1.1vmin) rotateY(-80deg) rotateX(35deg); + } +} diff --git a/css/food.css b/css/food.css new file mode 100644 index 0000000..0dab90d --- /dev/null +++ b/css/food.css @@ -0,0 +1,40 @@ +body { + text-align: center; + margin-top: 30px; + font-family: "Courier"; + background-color: #fff5e4; + color: #ff9494; +} +#foodquestion { + font-size: 50px; + margin-bottom: 30px; +} +.food-item { + display: inline-block; + margin: 10px; + vertical-align: top; + color: #ff9494; +} +.food-item img { + height: 200px; + width: 200px; + border-radius: 50%; + border: 5px solid #ff9494; + object-fit: cover; + padding: 10px; +} +.food-item label { + display: block; +} +.button { + padding: 10px 20px; + font-size: 18px; + cursor: pointer; + margin: 10px; + font-family: "courier"; + margin-bottom: 20px; + background-color: #ffe3e1; + color: #e67373; + border-radius: 12px; + border: 2px solid #ffe3e1; +} diff --git a/css/lastpage.css b/css/lastpage.css new file mode 100644 index 0000000..7344afc --- /dev/null +++ b/css/lastpage.css @@ -0,0 +1,35 @@ +body { + text-align: center; + margin-top: 30px; + font-family: "Courier"; + background-color: #fff5e4; + color: #ff9494; +} +#thankyou { + font-size: 50px; + margin-bottom: 20px; +} +.rizz { + margin-bottom: 10 px; +} +.button { + padding: 10px 20px; + font-size: 18px; + cursor: pointer; + margin: 10px; + font-family: "courier"; + margin-bottom: 20px; + background-color: #ffe3e1; + color: #e67373; + border-radius: 12px; + border: 2px solid #ffe3e1; + box-shadow: 1px 1px 2px #ff9494; + transition: 0.3s; +} + +.button:hover { + background-color: #ff9494; + color: #ffe3e1; + border: 2px solid #ff9494; + box-shadow: 1px 1px 2px #ffe3e1; +} diff --git a/css/valentine.css b/css/valentine.css new file mode 100644 index 0000000..d9b3d2e --- /dev/null +++ b/css/valentine.css @@ -0,0 +1,39 @@ +body { + text-align: center; + margin-top: 30px; + font-family: "Courier"; + background-color: #fff5e4; + color: #ff9494; +} + +img { + height: 400px; + width: auto; + padding: 10px; +} + +#valentineQuestion { + font-size: 50px; + margin-bottom: 10px; +} +.answerButton { + padding: 10px 20px; + font-size: 18px; + cursor: pointer; + margin: 10px; + font-family: "courier"; + margin-bottom: 20px; + background-color: #ffe3e1; + color: #e67373; + border-radius: 12px; + border: 2px solid #ffe3e1; + box-shadow: 1px 1px 2px #ff9494; + transition: 0.3s; +} + +.answerButton:hover { + background-color: #ff9494; + color: #ffe3e1; + border: 2px solid #ff9494; + box-shadow: 1px 1px 2px #ffe3e1; +} diff --git a/date.html b/date.html new file mode 100644 index 0000000..9e1c091 --- /dev/null +++ b/date.html @@ -0,0 +1,21 @@ + + + + + + Date + + + +

Are you free on ...

+
+ +
+ + +
+
+ + diff --git a/dessert.html b/dessert.html new file mode 100644 index 0000000..201eca1 --- /dev/null +++ b/dessert.html @@ -0,0 +1,54 @@ + + + + + + Dessert + + + +
Which dessert we eatin cuh
+ +
+
+ boba + +
+
+ churro + +
+
+ che + +
+
+ mochi + +
+
+ randombun + +
+
+ taiyaki + +
+
+ + + diff --git a/food.html b/food.html new file mode 100644 index 0000000..3aeb03c --- /dev/null +++ b/food.html @@ -0,0 +1,64 @@ + + + + + + Food Selection + + + +
+ What food would you like to eat? +
+ +
+
+ Burgers, fries and fried chicken + +
+
+ dog + +
+
+ koreanfood + +
+
+ pasta + +
+
+ pizza + +
+
+ salad + +
+
+ steak + +
+
+ sushi + +
+
+ + + diff --git a/food/boba.jpeg b/food/boba.jpeg new file mode 100644 index 0000000..826d48f Binary files /dev/null and b/food/boba.jpeg differ diff --git a/food/burgers.jpeg b/food/burgers.jpeg new file mode 100644 index 0000000..03b2dc6 Binary files /dev/null and b/food/burgers.jpeg differ diff --git a/food/che.jpeg b/food/che.jpeg new file mode 100644 index 0000000..a76ce17 Binary files /dev/null and b/food/che.jpeg differ diff --git a/food/churro.jpeg b/food/churro.jpeg new file mode 100644 index 0000000..23396b1 Binary files /dev/null and b/food/churro.jpeg differ diff --git a/food/dog.jpeg b/food/dog.jpeg new file mode 100644 index 0000000..9079a51 Binary files /dev/null and b/food/dog.jpeg differ diff --git a/food/dumplings.jpeg b/food/dumplings.jpeg new file mode 100644 index 0000000..ae10700 Binary files /dev/null and b/food/dumplings.jpeg differ diff --git a/food/koreanfood.jpeg b/food/koreanfood.jpeg new file mode 100644 index 0000000..fc569e1 Binary files /dev/null and b/food/koreanfood.jpeg differ diff --git a/food/mochi.jpeg b/food/mochi.jpeg new file mode 100644 index 0000000..f13806c Binary files /dev/null and b/food/mochi.jpeg differ diff --git a/food/pasta.jpeg b/food/pasta.jpeg new file mode 100644 index 0000000..80792cf Binary files /dev/null and b/food/pasta.jpeg differ diff --git a/food/pizza.jpeg b/food/pizza.jpeg new file mode 100644 index 0000000..fd729c2 Binary files /dev/null and b/food/pizza.jpeg differ diff --git a/food/ramen.jpeg b/food/ramen.jpeg new file mode 100644 index 0000000..27c8b53 Binary files /dev/null and b/food/ramen.jpeg differ diff --git a/food/randombun.jpeg b/food/randombun.jpeg new file mode 100644 index 0000000..3eefc00 Binary files /dev/null and b/food/randombun.jpeg differ diff --git a/food/salad.jpeg b/food/salad.jpeg new file mode 100644 index 0000000..4dca5fa Binary files /dev/null and b/food/salad.jpeg differ diff --git a/food/steak.jpeg b/food/steak.jpeg new file mode 100644 index 0000000..5239e69 Binary files /dev/null and b/food/steak.jpeg differ diff --git a/food/sushi.jpeg b/food/sushi.jpeg new file mode 100644 index 0000000..f0dbc3b Binary files /dev/null and b/food/sushi.jpeg differ diff --git a/food/taiyaki.jpeg b/food/taiyaki.jpeg new file mode 100644 index 0000000..908955c Binary files /dev/null and b/food/taiyaki.jpeg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..e033ad3 --- /dev/null +++ b/index.html @@ -0,0 +1,32 @@ + + + + + + Be My Valentine + + + +
Will you be my valentine?
+ + +
+ cat asking question + + + + diff --git a/lastpage.html b/lastpage.html new file mode 100644 index 0000000..1a42e03 --- /dev/null +++ b/lastpage.html @@ -0,0 +1,62 @@ + + + + + + Document + + + +
Thank you for being my girlfriend
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + diff --git a/please.png b/please.png new file mode 100644 index 0000000..8375ef2 Binary files /dev/null and b/please.png differ diff --git a/thanks.png b/thanks.png new file mode 100644 index 0000000..f2c5014 Binary files /dev/null and b/thanks.png differ diff --git a/thankyou.html b/thankyou.html new file mode 100644 index 0000000..53ee375 --- /dev/null +++ b/thankyou.html @@ -0,0 +1,23 @@ + + + + + + Thank you + + + +
Thank you
+ + rizzler god +
+ +

Don't go yet!

+ + +