Wish Your Sister and friends Family HAPPY Raksha Bandhan Using Coding in HTML || CSS



WHY AND WHEN GOING TO CELLEBRATE 

In 2023, Raksha Bandhan is observed on August 30th, but it can also be celebrated on August 31st due to Bhadra Kaal. This special day is about the strong bond between siblings, where sisters tie Rakhi threads on their brothers' wrists, symbolizing love and protection.





Using HTML  & CSS

SAVE file name index.html  (as your wish you can give)

Code:

<!DOCTYPE html>

<html lang="en">


<head>

   <meta charset="UTF-8">

   <meta http-equiv="X-UA-Compatible" content="IE=edge">

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <title>Raksha Bandhan Rakhi Design</title>

   <link rel="stylesheet" href="style.css">

</head>


<body>

   <h3>Wish You A happy  </h3>


   <h1>R

      <div class="flower">

         <div class="inner-most-part"></div>

         <div class="middle-part" style="--t: 1; --l:0"></div>

         <div class="middle-part" style="--t: 0; --l:-1"></div>

         <div class="middle-part" style="--t: -1; --l:0"></div>

         <div class="middle-part" style="--t: 0; --l:1"></div>

      </div>

      ksh

      <div class="flower">

         <div class="inner-most-part"></div>

         <div class="middle-part" style="--t: 1; --l:0"></div>

         <div class="middle-part" style="--t: 0; --l:-1"></div>

         <div class="middle-part" style="--t: -1; --l:0"></div>

         <div class="middle-part" style="--t: 0; --l:1"></div>

      </div><br />

      B

      <div class="flower">

         <div class="inner-most-part"></div>

         <div class="middle-part" style="--t: 1; --l:0"></div>

         <div class="middle-part" style="--t: 0; --l:-1"></div>

         <div class="middle-part" style="--t: -1; --l:0"></div>

         <div class="middle-part" style="--t: 0; --l:1"></div>

      </div>ndh

      <div class="flower">

         <div class="inner-most-part"></div>

         <div class="middle-part" style="--t: 1; --l:0"></div>

         <div class="middle-part" style="--t: 0; --l:-1"></div>

         <div class="middle-part" style="--t: -1; --l:0"></div>

         <div class="middle-part" style="--t: 0; --l:1"></div>

      </div>n

   </h1>

   <div class="rainBg"></div>

   <!-- JAVASCRIPT -->

   <script src="app.js"></script>

   <style >

      body {


        background-image:url(https://www.fabhotels.com/blog/wp-content/uploads/2019/03/Raksha-Bandhan600x400.jpg);

      }

      * {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

  font-family: "poppins", sans-serif;

}

h3 {

  font-size: 2em;

  color: deepskyblue;

  text-transform: uppercase;

  letter-spacing: 2px;

  font-weight: 800;

  position: absolute;

  top: 30%;

  left: 50%;

  transform: translate(-50%, -50%);

}

h1 {

  text-align: center;

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  line-height: 100px;

  font-size: 6em;

  color: red;

  width: 100%;

}

.flower {

  display: inline-block;

  position: relative;

  width: 80px;

  height: 80px;

  animation: flower 5s linear infinite;

}

@keyframes flower {

  0% {

    transform: rotate(0deg);

  }

  100% {

    transform: rotate(360deg);

  }

}

.inner-most-part {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  width: 40px;

  height: 40px;

  border-radius: 50%;

  background: #f1c40f;

  z-index: 4;

}

.middle-part {

  width: 40px;

  height: 40px;

  position: absolute;

  border-radius: 50%;

  background: #3498db;

  top: calc(50% - var(--t) * 20px);

  left: calc(50% - var(--l) * 20px);

  transform: translate(-50%, -50%);

}

.rainBg {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100vh;

  overflow: hidden;

  z-index: -1;

}

.rainBg i {

  position: absolute;

  top: -7%;

  width: 10px;

  height: 40px;

  border-radius: 10px;

  z-index: 1;

  animation: animate 6s linear;

}

@keyframes animate {

  0% {

    top: -7%;

  }

  100% {

    top: 100%;

  }

}

   </style>

</body>


</ht


Comments

Post a Comment

Hello Coders If You Have any Doughts Contact Us

Popular posts from this blog

Accenture "Quality Engineer (Tester) Job Description: Roles, Responsibilities, and Skills" Apply Befor Expiry

Image
Accenture -------------------------------------------------------------- Position: Quality Engineer (Tester) BENGALURU     JOB NO. ATCI-4366344-S1689605     FULL-TIME Role Description: Enable full stack solutions through multi-disciplinary team planning and ecosystem integration to accelerate delivery and drive quality across the application lifecycle. Perform continuous testing for security, API, and regression suite. Create automation strategy, automated scripts, and support data and environment configuration. Participate in code reviews, monitor, and report defects to support continuous improvement activities for the end-to-end testing process. Must-Have Skills: Functional Test Planning Good-to-Have Skills: NA Experience: 0-2 years Qualification: Any Degree Educational Qualification: Any Degree Summary: As a Quality Engineer (Tester), you will play a crucial role in ensuring the quality of our software solutions. You will collaborate with cross-functional teams to...
Read more

"Job Preparation Guide" A Comprehensive Guide to Job Preparation: Strategies for Success

Image
Preparing for a job involves several key steps to increase your chances of success. Here's a comprehensive guide to help you prepare effectively: Self-Assessment: Identify your skills, strengths, weaknesses, and interests. Determine your career goals and aspirations. Consider what type of job or industry aligns with your skills and interests. Research: Research potential employers and industries. Explore job roles that match your skills and interests. Learn about the company culture, values, and mission of the organizations you're interested in. Stay updated on industry trends and developments. Networking: Build and maintain professional networks both online (LinkedIn, professional forums) and offline (industry events, seminars). Reach out to professionals in your desired field for informational interviews or advice. Attend career fairs and networking events to connect with potential employers. Resume and Cover Letter: Tailor your resume and cover letter to each job application...
Read more

Comparative Analysis of Java and Python: Unveiling Key Differences in Syntax, Performance, and Ecosystem

Image
 Java and Python are both popular programming languages, but they have some key differences in terms of syntax, performance, use cases, and other features. Here's a brief comparison:       Syntax: Java: It has a statically-typed syntax, which means that you need to declare the data type of a variable before using it. Java code is typically more verbose compared to Python. java Copy code public class HelloWorld {     public static void main( String[] args ) {         System.out.println (" Hello, World! ") ;     } } Python: It has a dynamically-typed syntax, allowing you to create variables without explicitly specifying their data type. Python code tends to be more concise and readable. python Copy code print("Hello, World!") Execution: Java: It is a compiled language. Java code is first compiled into bytecode, which is then executed by the Java Virtual Machine (JVM). Python: It is an interpreted language. Python code is exe...
Read more