My Valentine

Developer
Angela Velasquez
Size
3,353 Kb
Views
20,240
  1. My Valentine Previews
  2. My Valentine HTML Codes
  3. My Valentine CSS Codes
  4. My Valentine JS Codes

How do I make an my valentine?

Another year, Another pen for valentines day. I'm using this awesome Css Gradient Pattern of Lea Verou's Gallery:. What is a my valentine? How do you make a my valentine? This script and codes were developed by Angela Velasquez on 07 September 2022, Wednesday.

My Valentine Previews
IQ Test

My Valentine - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>My Valentine </title> <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="centered"> <h4>Will you be My Valentine?</h4> <input class="no" type="checkbox" name="answer" id="No"/> <label class="no" for="No">Nope</label> <input class="yes" type="checkbox" name="answer" id="Yes"/> <label class="yes" for="Yes">Yup</label> <div class="answer--yes"></div> <div class="answer--no"></div>
</div>
<div class="signature"> <p>Made with <i class="much-heart"></i> by <a href="https://codepen.io/AngelaVelasquez">Angela Velasquez</a></p>
</div> <script src="js/index.js"></script>
</body>
</html>

My Valentine - Script Codes CSS Codes

/*
Awesome Lea Verou's Heart Pattern Background
---- */
body {	background:
radial-gradient(circle closest-side at 60% 43%, #323232 26%, rgba(187,0,51,0) 27%),
radial-gradient(circle closest-side at 40% 43%, #323232 26%, rgba(187,0,51,0) 27%),
radial-gradient(circle closest-side at 40% 22%, #373737 45%, rgba(221,51,85,0) 46%),
radial-gradient(circle closest-side at 60% 22%, #373737 45%, rgba(221,51,85,0) 46%),
radial-gradient(circle closest-side at 50% 35%, #373737 30%, rgba(221,51,85,0) 31%),
radial-gradient(circle closest-side at 60% 43%, #323232 26%, rgba(187,0,51,0) 27%) 50px 50px,
radial-gradient(circle closest-side at 40% 43%, #323232 26%, rgba(187,0,51,0) 27%) 50px 50px,
radial-gradient(circle closest-side at 40% 22%, #3c3c3c 45%, rgba(221,51,85,0) 46%) 50px 50px,
radial-gradient(circle closest-side at 60% 22%, #3c3c3c 45%, rgba(221,51,85,0) 46%) 50px 50px,
radial-gradient(circle closest-side at 50% 35%, #3c3c3c 30%, rgba(221,51,85,0) 31%) 50px 50px;	background-color:#323232;	background-size:100px 100px;	font-family: 'Lato', sans-serif;
}
/*
Valentine's Pen
---- */
.centered {	width: 100%;	margin: 30vh auto;	text-align: center;
}
.centered h4 {	color: #FFFFFF;	font-size: 3em;	font-weight: bold;
} input[type=checkbox]{ display:none; }
label {	height: 40px;	width: auto;	padding: 10px 40px;	display: inline-block;	cursor: pointer;	margin: 0 20px;	border-radius: 5px;	color: #FFFFFF;	font-size: 1.5em;	line-height: 1.5em;	text-transform: uppercase;	transition: all .25s ease-in-out;
}
label:hover {	transform:	scale(1.1,1.1);
}
.no {	background-color: #D8124B;
}
.yes {	background-color: #12D890;
}
.answer--yes, .answer--no {	position: fixed;	height: 100%;	width: 100%;	top: 0;	left: 0;	z-index: 9;	visibility: hidden;	opacity: 0;	transition: opacity .5s ease-in-out;
}
.answer--yes {	background-image: url('https://media.giphy.com/media/a3IWyhkEC0p32/giphy.gif');	background-repeat:no-repeat;	background-size: cover;
}
.answer--no {	background-image: url('https://media.giphy.com/media/QBEhpJHrv7poQ/giphy.gif');	background-repeat:no-repeat;	background-size: cover;
}
input.yes[type=checkbox]:checked ~ .answer--yes { visibility: visible;	opacity: 100;
}
input.no[type=checkbox]:checked ~ .answer--no { visibility: visible;	opacity: 100;
}
/*
Signature
---- */
.signature {	position: absolute;	margin: auto;	bottom: 0;	top: auto;	width: 95%;
}
.signature p{	text-align: center;	font-family: Helvetica, Arial, Sans-Serif;	font-size: 0.85em;	color: #FFFFFF;
}
.signature .much-heart{	display: inline-block;	position: relative;	margin: 0 4px;	height: 10px;	width: 10px;	background: #D8124B;	border-radius: 4px;	-ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg);
}
.signature .much-heart::before,
.signature .much-heart::after { display: block; content: ''; position: absolute; margin: auto; height: 10px; width: 10px; border-radius: 5px; background: #D8124B; top: -4px;
}
.signature .much-heart::after {	bottom: 0;	top: auto;	left: -4px;
}
.signature a {	color: #D8124B;	text-decoration: none;	font-weight: bold;
}
.signature a:hover {	color: coral;	text-decoration: none;	font-weight: bold;
}

My Valentine - Script Codes JS Codes

//I'm using this awesome Css Gradient Pattern from Lea Verou's Gallery: http://lea.verou.me/css3patterns/#hearts
//Also Here is my previous Valentine's pen: https://codepen.io/AngelaVelasquez/details/KqCDz/
My Valentine - Script Codes
My Valentine - Script Codes
Home Page Home
Developer Angela Velasquez
Username AngelaVelasquez
Uploaded September 07, 2022
Rating 4.5
Size 3,353 Kb
Views 20,240
Do you need developer help for My Valentine?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Angela Velasquez (AngelaVelasquez) Script Codes
Name
Dancing Pug
CSS - Cat with balloon
SVG Line Drawing
CSS Switch Day and Night - Cat
CSS Switch Day and Night - Fox
CSS Fruit Background - Bananas
Searchbox
CSS radio buttons
CSS - Cat on ride
Form with SVG radio buttons
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!