First commit

felipeacelino · Nov 12, 2016 · 8a91f4b · 8a91f4b
commit 8a91f4b
Show file tree

Hide file tree

Showing 3 changed files with 217 additions and 0 deletions.
diff --git a/love.html b/love.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
+
+	<title>Amor da minha vida!</title>
+
+	<link href="https://fonts.googleapis.com/css?family=Handlee" rel="stylesheet">
+	<link rel="stylesheet" type="text/css" href="style.css">	
+</head>
+
+<body>
+
+	<div class="container">
+
+		<div class="heart heart-container">
+			<div class="heart heart-square"></div>
+			<div class="heart heart-circle heart-top"></div>
+			<div class="heart heart-circle heart-left"></div>
+		</div>
+
+		<label for="nome">Quem é o amor da vida de Felipe?</label>
+		<input type="text" name="nome" id="nome" maxlength="20">
+
+	</div>
+
+	<script type="text/javascript" src="script.js"></script>
+
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,53 @@
+(function(){
+
+	var heart = document.querySelector('.heart-container');
+	var parts = document.querySelectorAll('.heart');
+	var campo = document.querySelector('#nome');
+	var nome = '';
+
+	var animar = function animar() {
+		nome = campo.value.toString().toLowerCase();
+		switch(nome){
+			case 'beatriz':
+				Array.prototype.forEach.call(parts, function (part) {			
+					part.style.WebkitTransition = 'background 0.5s';
+					part.style.MozTransition = 'background 0.5s';
+					part.style.background = '#FF3F3F';
+				});
+				heart.className = 'heart-container heart-animate-fast';
+				break;
+			case 'palmeiras':
+				Array.prototype.forEach.call(parts, function (part) {				
+					part.style.WebkitTransition = 'background 0.5s';
+					part.style.MozTransition = 'background 0.5s';
+					part.style.background = '#22F340';
+				});
+				heart.className = 'heart-container heart-animate-slow';
+				break;
+			case 'felipe':
+				Array.prototype.forEach.call(parts, function (part) {				
+					part.style.WebkitTransition = 'background 0.5s';
+					part.style.MozTransition = 'background 0.5s';
+					part.style.background = '#656DFF';
+				});
+				heart.className = 'heart-container heart-animate';
+				break;
+			default:
+				Array.prototype.forEach.call(parts, function (part) {				
+					part.style.WebkitTransition = 'background 0.5s';
+					part.style.MozTransition = 'background 0.5s';
+					part.style.background = '#CCC';
+				});
+				heart.className = 'heart-container';
+		}
+	} 
+
+	campo.addEventListener('keyup', animar);
+	campo.addEventListener('paste', animar);
+
+}());
+
+
+
+
+
diff --git a/style.css b/style.css
@@ -0,0 +1,132 @@
+body {
+	margin: 0;
+	padding: 0;
+	background-color: #263238;
+	font-family: 'Handlee', cursive;
+}
+
+.container {
+	border: 0px solid #000;
+	box-sizing: border-box;
+	width: 100%;
+	margin: 0 auto;
+	margin-top: 100px;
+	padding: 20px;
+	float: left;
+}
+
+.container label {
+	display: block;
+	width: 100%;
+	color: #FFF;
+	font-size: 1.2em;
+	text-align: center;
+	text-transform: uppercase;
+}
+
+.container input {
+	width: 100%;
+	box-sizing: border-box;
+	display: block;
+	max-width: 400px;
+	color: rgba(0,0,0,0.84);
+	text-align: center;
+	height: 50px;
+	margin: 20px auto;
+	outline: 0;
+	font-size: 1.5em;
+	padding: 5px 30px;
+	border-radius: 3px;
+	border: 0px solid rgba(0,0,0,1);
+	background-color: #FFF;
+	text-transform: uppercase;
+	transition: box-shadow 0.3s ease-in-out;
+	box-shadow: 0px 1px 10px rgba(0,0,0,1);
+	font-family: 'Handlee', cursive;
+}
+
+.container input:focus {
+	box-shadow: 0px 5px 10px rgba(0,0,0,1);
+}
+
+.heart-container {
+	width: 200px;
+	height: 200px;
+	position: relative;
+	transform: rotate(-135deg);
+	background: #CCC;
+	margin: 0 auto;
+	margin-bottom: 100px;
+	will-change: transform;
+}
+
+
+.heart-animate {
+	animation: pulse 0.5s infinite alternate; 
+}
+
+.heart-animate-slow {
+	animation: pulse 1s infinite alternate; 
+}
+
+.heart-animate-fast {
+	animation: pulse 0.3s infinite alternate; 
+}
+
+.heart-square {
+	width: 200px;
+	height: 200px;
+	position: absolute;
+	top: 0;
+	left: 0;
+	background: #CCC;
+}
+
+.heart-circle {
+	width: 200px;
+	height: 200px;
+	border-radius: 50%;
+	position: absolute;
+	background: #CCC; 
+}
+
+.heart-top {
+	top: 100px;
+}
+
+.heart-left {
+	left: 100px;
+}
+
+
+@keyframes pulse {
+	0%   { transform: scale(0.9) rotate(-135deg) }
+	100% { transform: scale(1.1) rotate(-135deg) }
+}
+
+@media screen and (max-width: 700px) {
+
+	.heart-container {
+		width: 100px;
+		height: 100px;
+		margin-bottom: 100px;
+	}
+
+	.heart-square {
+		width: 100px;
+		height: 100px;
+	}
+
+	.heart-circle {
+		width: 100px;
+		height: 100px;
+	}
+
+	.heart-top {
+		top: 50px;
+	}
+
+	.heart-left {
+		left: 50px;
+	}
+}