Skip to content

Commit

Permalink
cheeky
Browse files Browse the repository at this point in the history
  • Loading branch information
@Bappa0507
Bappa0507 committed Feb 20, 2024
1 parent c2c1617 commit 43cbcb9
Show file tree
Hide file tree
Showing 4 changed files with 214 additions and 102 deletions.
21 changes: 21 additions & 0 deletions propose-main/LICENSE
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
MIT License

Copyright (c) 2023 KAMRUL HOSSAIN

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
49 changes: 49 additions & 0 deletions propose-main/README.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
# Propose Site - A Fun Project

## Description

This repository contains a simple web application for proposing to your girlfriend. The project is implemented using basic HTML, CSS, and JavaScript. It's a fun and creative way to express your feelings and make a memorable proposal.

## Features

- **Interactive Design:** The site has an interactive and user-friendly design, making it engaging for users.
- **Customizable Message:** Users can customize the proposal message to make it more personal.
- **Responsive:** The site is designed to be responsive, ensuring a consistent experience across different devices.

## Usage

To use the Propose Site, follow these steps:

1. Clone the repository:

```bash
git clone https://github.com/kamrullab/propose.git
```

2. Open the `index.html` file in a web browser.

3. Customize the proposal message by clicking on the "Customize" button.

4. Enter your personalized message and click "Save."

5. After customizing the message, click on the "Propose" button to reveal the proposal.

6. Share the link with your girlfriend and surprise her with your creative proposal!

## Contribution

If you have ideas for improvement or additional features, feel free to contribute. You can fork the repository, make changes, and submit a pull request.

## License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

## Disclaimer

This project is intended for entertainment purposes only. Use it responsibly and consider the preferences and feelings of the person you are proposing to.

## Author

- [ELITE KAMRUL](https://github.com/kamrullab)

Feel free to reach out for any questions or feedback! Happy proposing! 🎉
172 changes: 144 additions & 28 deletions propose-main/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,45 +5,161 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Propose</title>
<!-- Adding Favicon -->
<link rel="shortcut icon" type="image/jpg" href="heart.png"/>
<!-- Bootstrap CDN -->
<!-- <meta name="description" content="My feelings for you in my life have only grown stronger since the day we first met. I want to seal our bond forever & today! I LOVE YOU!"> -->
<meta name="description" content=" You are the only one who understands me even more than myself. You are the only one with whom I can share everything, even my secrets. I want you to be with me always.! I LOVE YOU!">
<!-- Open Graph Image Meta Tag -->
<meta property="og:image" content="https://static.toiimg.com/thumb/msid-74004000,imgsize-511880,width-400,resizemode-4/74004000.jpg">
<link rel="shortcut icon" type="image/png" href="https://github.com/images/modules/search/mona-love.png"/>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" href="style.css">

<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}

body {
background: linear-gradient(117deg, #ff41f7 0%, rgba(255, 73, 73, 0.81) 100%);
display: flex;
align-items: center;
justify-content: center;
}

h1 {
text-align: center;
color: white;
font-size: 72px;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 20px;
}

.btn {
color: gray;
background-color: white;
border: none;
border-radius: 50px;
width: 200px;
height: 50px;
margin: 10px;
font-weight: bold;
}

.btn:hover {
background-color: #ff4690;
border: 2px solid white;
}

@media (max-width: 1148px) {
h1 {
font-size: 50px;
}
.btn {
width: 150px;
height: 40px;
}
}

@media (max-width: 795px) {
h1 {
font-size: 40px;
}
}

#showMessage {
display: none;
}

#showMessage h1 {
font-size: 50px;
}

/* Animate Text */
.ml6 {
position: relative;
}

.ml6 .text-wrapper {
position: relative;
display: inline-block;
padding-top: 0.2em;
padding-right: 0.05em;
padding-bottom: 0.1em;
overflow: hidden;
}

.ml6 .letter {
display: inline-block;
line-height: 1em;
}

/* Footer */
footer {
color: #fff;
}

footer a {
color: white;
text-decoration: none;
}
</style>
</head>
<body>
<div class="position-absolute top-50 start-50 translate-middle">
<div id="parentElement">
<div class="d-flex justify-content-center">
<lottie-player src="https://assets10.lottiefiles.com/private_files/lf30_mywfoph1.json" background="transparent" speed="1" style="width: 300px; height: 300px;" loop autoplay></lottie-player>
</div>
<h1>Will you be my Wife🥰?</h1>
<div class="d-flex justify-content-center">
<button onclick="propose()" class="btn btn-primary">Yes!</button> <br>
<button onclick="propose()" class="btn btn-primary">Of Course, Yes!</button>
</div>
<div id="parentElement">
<div class="d-flex justify-content-center">
<lottie-player src="https://assets10.lottiefiles.com/private_files/lf30_mywfoph1.json" background="transparent" speed="1" style="width: 300px; height: 300px;" loop autoplay></lottie-player>
</div>
<div class="position-absolute top-50 start-50 translate-middle" id="showMessage">
<lottie-player src="https://assets1.lottiefiles.com/packages/lf20_utsfwa3k.json" background="transparent" speed="1" style="width: 300px; height: 300px;" loop autoplay></lottie-player>
<h1 class="ml6" >
<span class="text-wrapper">
<span class="letters">I Love you!</span>
</span>
</h1>
<h1> Will you be Mine?🥰 </h1>
<div class="d-flex justify-content-center">
<button onclick="propose()" class="btn btn-primary">Yes!</button> <br>
<button onclick="propose()" class="btn btn-primary">Of Course, Yes!</button>
</div>
</div>
<!-- <footer class="position-absolute top-100 start-50 translate-middle">Made with 💝 love by <a href="">Mujahid</a> <footer> -->


<div id="showMessage" class="position-absolute top-50 start-50 translate-middle">
<lottie-player src="https://assets1.lottiefiles.com/packages/lf20_utsfwa3k.json" background="transparent" speed="1" style="width: 300px; height: 300px;" loop autoplay></lottie-player>
<h1 class="ml6">
<span class="text-wrapper">
<span class="letters">I Love you!</span>
</span>
</h1>
</div>

<!-- LottieFiles CDN -->
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<!-- Bootstrap JS CDN -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<!-- Anim JS CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<!-- Custom JavaScript -->
<script src="app.js"></script>
<script>
const parentElement = document.getElementById("parentElement");
const showMessage = document.getElementById("showMessage");
const changeColor = document.body.style;

const propose = () => {
parentElement.style.display = "none";
showMessage.style.display = "block";
changeColor.background = "linear-gradient(116.82deg, #ff94e7 0%, #27cbff 100%)";
};

// Animate Text with Anim JS
var textWrapper = document.querySelector(".ml6 .letters");
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");

anime.timeline({ loop: true })
.add({
targets: ".ml6 .letter",
translateY: ["1.1em", 0],
translateZ: 0,
duration: 750,
delay: (el, i) => 50 * i,
})
.add({
targets: ".ml6",
opacity: 0,
duration: 1000,
easing: "easeOutExpo",
delay: 1000,
});
</script>
</body>
</html>
74 changes: 0 additions & 74 deletions propose-main/style.css
View file

This file was deleted.

0 comments on commit 43cbcb9

Please sign in to comment.