Jai Sri Ram Using Coding 2024

In the Jai Sri Ram Using Coding 2024 Blog, we can see Jai Sri Ram Using Coding 2024 in HTML/CSS/JavaScript.

Jai Sri Ram Using Coding 2024: A Digital Expression of Devotion

In a realm where technology and spirituality converge, imagine expressing your deep devotion through the art of coding. What if you could weave a digital tapestry that not only showcases your technical skills but also reverberates with the divine essence of “Jai Sri Ram”? Join us in this guide as we embark on a unique journey to create a digital masterpiece using HTML, CSS, and JavaScript, transcending traditional boundaries to express profound love and devotion in the digital age.

Jai Sri Ram Proposal: Unveiling Love Through Code

Let’s infuse the essence of Jai Sri Ram into a digital proposal that transcends traditional boundaries. In this guide, we will utilize the power of HTML, CSS, and JavaScript to craft a unique and unforgettable experience. From setting the stage with HTML to adding a touch of romance with CSS and infusing JavaScript magic, this proposal will be a blend of technology and spirituality.

Setting the Digital Stage with HTML

Start by creating the foundation with HTML. This markup language will serve as the canvas for your heartfelt Jai Sri Ram proposal. Use the essential HTML structure, providing a head for metadata and a body to house the magical experience:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Jai Sri Ram Proposal 2024</title>
    <!-- Additional metadata and stylesheets go here -->
</head>
<body>
    <!-- Your Jai Sri Ram proposal content will unfold here -->
    <div class="area">Jai Shree Ram 🙏</div>
    <div class="div1">
        <video id="myVideo" height="320">
            <source src="video/video.mp4" type="video/mp4">
        </video>
    </div>
    <div class="div1">
        <button id="chang1" class="custom-btn btn-12" onclick="playVid()"><span id="chang">Click!</span><span>Jai Shree Ram</span></button>
    </div>
    <div class="body">
        <div class="card">
            <div class="wrapper">
                <img src="https://i.pinimg.com/564x/73/13/5c/73135c408f1104a1a701a88bd8f043fe.jpg" class="cover-image" />
            </div>
            <img src="https://res.cloudinary.com/freecodez/image/upload/v1698112176/images/qmdfgphh69jhwkjjgbsm.webp" class="title" />
            <img src="https://www.godpng.com/uploads/png/shree-ram-photo-png.png" class="character" />
        </div>
    </div>
    <!-- Additional sections for your Jai Sri Ram proposal -->
</body>
</html>

//Scroll down for the complete code and Code Zip file.

Adding a Touch of Spirituality with CSS

CSS, the style guru of the web, will breathe life into your Jai Sri Ram proposal. Utilize spiritual colors, elegant fonts, and carefully chosen background images to create an atmosphere that mirrors the divinity:

/* Your CSS styles for the Jai Sri Ram proposal */
:root {
    --card-height: 300px;
    --card-width: 150px;
}

/* Additional styles for the body, card, and other elements */

//Scroll down for the complete code and Code Zip file.

Infusing JavaScript Magic for Interaction

JavaScript, the magician of interactivity, will add movement and responsiveness to your Jai Sri Ram proposal. Imagine interactive elements that respond to the touch, creating a spiritual journey through code:

// Your JavaScript code for interactive elements goes here
let vid = document.getElementById("myVideo"); 
let chang = document.getElementById("chang"); 
let chang1 = document.getElementById("chang1"); 

function playVid() { 
    chang.innerText = 'Pause';
    chang1.onclick = pauseVid
    vid.play(); 
} 

function pauseVid() { 
    chang.innerText = 'Play';
    chang1.onclick = playVid
    vid.pause(); 
} 

//Scroll down for the complete code and Code Zip file.

Embark on this spiritual journey as you blend technology and divinity, creating a Jai Sri Ram proposal that is both unique and unforgettable.

Complete Code

Jai Sri Ram Using Coding 2024

1.Html Complete Code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <!-- <link rel="stylesheet" href="style.css"> -->
    <title>Jai Shree Ram 🙏</title>
</head>

<body>
    <div class="area">Jai Shree Ram 🙏</div>

    <div class="div1">
        <video id="myVideo" height="320">
            <source src="path/to/rings.mp4" type="video/mp4">
        </video>
    </div>

    <div class="div1">
        <button id="chang1" class="custom-btn btn-12" onclick="playVid()"><span id="chang">Click!</span><span>Jai Shree
                Ram</span></button>
    </div>

    <div class="body">
        <div class="card">
            <div class="wrapper">
                <img src="path/to/rings.jpg"
                    class="cover-image" />
            </div>
            <img src="path/to/rings.jpg"
                class="title" />
            <img src="path/to/rings.jpg" class="character" />
        </div>
    </div>
</body>

</html>

<script>
    let vid = document.getElementById("myVideo");
    let chang = document.getElementById("chang");
    let chang1 = document.getElementById("chang1");

    function playVid() {
        chang.innerText = 'Pause';
        chang1.onclick = pauseVid
        vid.play();
    }
    function pauseVid() {
        chang.innerText = 'Play';
        chang1.onclick = playVid
        vid.pause();
    } 
</script>

//Scroll down for download Code Zip file.

2.CSS Complete Code:

:root {
	--card-height: 300px;
	--card-width: 150px;
}

* {
	box-sizing: border-box;
}

.body {
	width: 100vw;
	height: 100vh;
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	background: black;
}

.card {
	width: var(--card-width);
	height: var(--card-height);
	position: relative;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	padding: 0 36px;
	perspective: 2500px;
	margin: 0 50px;
	cursor: pointer;
}

.cover-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wrapper {
	transition: all 0.5s;
	position: absolute;
	width: 100%;
	z-index: -1;
}

.card:hover .wrapper {
	transform: perspective(900px) translateY(-5%) rotateX(25deg) translateZ(0);
	box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
	-webkit-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
	-moz-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
}

.wrapper::before,
.wrapper::after {
	content: "";
	opacity: 0;
	width: 100%;
	height: 80px;
	transition: all 0.5s;
	position: absolute;
	left: 0;
}

.wrapper::before {
	top: 0;
	height: 100%;
	background-image: linear-gradient(to top,
			transparent 46%,
			rgba(12, 13, 19, 0.5) 68%,
			rgba(12, 13, 19) 97%);
}

.wrapper::after {
	bottom: 0;
	opacity: 1;
	background-image: linear-gradient(to bottom,
			transparent 46%,
			rgba(12, 13, 19, 0.5) 68%,
			rgba(12, 13, 19) 97%);
}

.card:hover .wrapper::before,
.wrapper::after {
	opacity: 1;
}

.card:hover .wrapper::after {
	height: 120px;
}

.title {
	width: 100%;
	transition: transform 0.5s;
}

.card:hover .title {
	transform: translate3d(0%, -50px, 100px);
}

.character {
	width: 100%;
	opacity: 0;
	transition: all 0.5s;
	position: absolute;
	z-index: -1;
}

.card:hover .character {
	opacity: 1;
	transform: translate3d(0%, -30%, 100px);
}

body {
 background: black;
}

.area {
  text-align: center;
  font-size: 6.5em;
  color: #fff;
  letter-spacing: -7px;
  font-weight: 700;
  text-transform: uppercase;
  animation: blur .75s ease-out infinite;
  text-shadow: 0px 0px 5px #f47218, 0px 0px 7px #f47218;
}

@keyframes blur {
  from {
    text-shadow:0px 0px 10px #f47218,
      0px 0px 10px #f47218, 
      0px 0px 25px #f47218,
      0px 0px 25px #f47218,
      0px 0px 25px #f47218,
      0px 0px 25px #f47218,
      0px 0px 25px #f47218,
      0px 0px 25px #f47218,
      0px 0px 50px #f47218,
      0px 0px 50px #f47218,
      0px 0px 50px #f47218,
      0px 0px 150px #f47218,
      0px 10px 100px #f47218,
      0px 10px 100px #f47218,
      0px 10px 100px #f47218,
      0px 10px 100px #f47218,
      0px -10px 100px #f47218,
      0px -10px 100px #f47218;
  }
}
.div1{
    text-align: center;
    margin-top: 90px;
}

button {
    margin: 20px;
}
.custom-btn {
    color: #fff;
    width: 330px;
    height: 40px;
    padding: 10px 25px;
    font-family: 'Lato', sans-serif;
    font-weight: 900;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
  }


  /* 12 */
.btn-12{
    color: #f47218;
    position: relative;
    right: 20px;
    bottom: 20px;
    border:none;
    width: 330px;
    height: 40px;
    line-height: 40px;
    -webkit-perspective: 230px;
    perspective: 230px;
  }
  .btn-12 span {
    display: block;
    position: absolute;
    width: 330px;
    height: 40px;
    border: 1px solid #f47218;
    box-shadow: 0 0 5px #f47218, 0 0 5px #f47218 inset;
    margin:0;
    text-align: center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .3s;
    transition: all .3s;
  }
  .btn-12 span:nth-child(1) {
    box-shadow: 0 0 5px #f47218, 0 0 5px #f47218 inset;
    -webkit-transform: rotateX(90deg);
    -moz-transform: rotateX(90deg);
    transform: rotateX(90deg);
    -webkit-transform-origin: 50% 50% -20px;
    -moz-transform-origin: 50% 50% -20px;
    transform-origin: 50% 50% -20px;
  }
  .btn-12 span:nth-child(2) {
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    transform: rotateX(0deg);
    -webkit-transform-origin: 50% 50% -20px;
    -moz-transform-origin: 50% 50% -20px;
    transform-origin: 50% 50% -20px;
  }
  .btn-12:hover span:nth-child(1) {
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
  .btn-12:hover span:nth-child(2) {
    background: #000;
    color: #000;
    box-shadow: 0 0 5px #f47218, 0 0 5px #f47218 inset;
    -webkit-transform: rotateX(-90deg);
    -moz-transform: rotateX(-90deg);
    transform: rotateX(-90deg);
  }

3.JAVAScript Complete Code:

    let vid = document.getElementById("myVideo");
    let chang = document.getElementById("chang");
    let chang1 = document.getElementById("chang1");

    function playVid() {
        chang.innerText = 'Pause';
        chang1.onclick = pauseVid
        vid.play();
    }
    function pauseVid() {
        chang.innerText = 'Play';
        chang1.onclick = playVid
        vid.pause();
    } 

//Scroll down for download Code Zip file.

Source code download

JAI SHREE RAM Download

“Please connect with us.”

YouTube: The Mahi Show
Instagram: The_Mahii_Show

Improve Yourself:

We are happy to announce that we have a complete Java course covering all the important topics. Please visit the link below for more information and to enroll in the course. We offer the entire Java course. Visit the link for more details. please check out the Link: Java