CreativeBrains play

Developer
David Bellotti
Size
4,188 Kb
Views
10,120
  1. CreativeBrains play Previews
  2. CreativeBrains play HTML Codes
  3. CreativeBrains play CSS Codes
  4. CreativeBrains play JS Codes

How do I make an creativebrains play?

What is a creativebrains play? How do you make a creativebrains play? This script and codes were developed by David Bellotti on 30 October 2022, Sunday.

CreativeBrains play Previews
IQ Test

CreativeBrains play - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CreativeBrains play</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href="//fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,700,800" rel="stylesheet" type="text/css" />
<div class="background"> <center class="center--vertical"> <h1 class="brand"> <span class="brand--thin">Creative</span><span class="brand--thick">Brains</span> </h1> </center> <nav class="corner" role="navigation"> <a href="#contact" id="contact">contact</a> </nav> <center class="center--vertical"> <form class="contact hide"> <input name="name" placeholder="Name" required="required" type="text" /><input name="email" placeholder="Email" required="required" type="email" /><input name="budget" placeholder="Budget" required="required" type="text" /><textarea placeholder="How can we help?" required="required"></textarea><textarea placeholder="How did you hear about us?" required="required"></textarea><input type="submit" value="submit" /> </form> </center>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

CreativeBrains play - Script Codes CSS Codes

.background { background: -webkit-linear-gradient(right bottom, #ff99c2, #99ebff); background: linear-gradient(to left top, #ff99c2, #99ebff); width: 100vw; height: 100vh; box-shadow: 20px 20px 90px rgba(0, 0, 0, 0.1) inset, -20px -20px 90px rgba(0, 0, 0, 0.1) inset;
}
.background--error { background: -webkit-linear-gradient(right bottom, #ff99c2, #ffffcc); background: linear-gradient(to left top, #ff99c2, #ffffcc);
}
.center--vertical { position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%);
}
.brand { font-family: "Open Sans"; font-size: 4em; text-transform: uppercase; display: inline-block; letter-spacing: 0.1em; color: black;
}
.brand.brand--content { -webkit-transform: translateY(-250px); transform: translateY(-250px);
}
.brand--thin { font-weight: 300;
}
.brand--thick { font-weight: 700;
}
nav.corner { position: absolute; bottom: 0; right: 0;
}
nav.corner a { display: block; margin: 0.5em; color: black; font-size: 1em; letter-spacing: 0.1em; text-align: right; text-decoration: none; padding: 6px; border-radius: 4px;
}
nav.corner a:active { background-color: rgba(0, 0, 0, 0.1);
}
h1,
form { -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: all 1s ease-in-out; transition: all 1s ease-in-out; padding: 1em;
}
.hide { opacity: 0;
}
form.contact { width: 20em;
}
input,
textarea { display: block; height: 3em; width: 100%; border-radius: 4px; margin-bottom: 10px; padding: 6px 8px; background: rgba(0, 0, 0, 0.1); border: 1px solid transparent; letter-spacing: 0.05em; box-sizing: border-box; outline: none;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.3); font-weight: 400;
}
input::-moz-placeholder,
textarea::-moz-placeholder { color: rgba(0, 0, 0, 0.3); font-weight: 400;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder { color: rgba(0, 0, 0, 0.3); font-weight: 400;
}
input::placeholder,
textarea::placeholder { color: rgba(0, 0, 0, 0.3); font-weight: 400;
}
input:hover, input:focus,
textarea:hover,
textarea:focus { background: rgba(0, 0, 0, 0.2);
}
input:hover::-webkit-input-placeholder, input:focus::-webkit-input-placeholder,
textarea:hover::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.4);
}
input:hover::-moz-placeholder, input:focus::-moz-placeholder,
textarea:hover::-moz-placeholder,
textarea:focus::-moz-placeholder { color: rgba(0, 0, 0, 0.4);
}
input:hover:-ms-input-placeholder, input:focus:-ms-input-placeholder,
textarea:hover:-ms-input-placeholder,
textarea:focus:-ms-input-placeholder { color: rgba(0, 0, 0, 0.4);
}
input:hover::placeholder, input:focus::placeholder,
textarea:hover::placeholder,
textarea:focus::placeholder { color: rgba(0, 0, 0, 0.4);
}
input:focus,
textarea:focus { box-shadow: 0 0 5px #5858ff; border: 1px solid #5858ff;
}
input[type="submit"] { width: 50%; line-height: 1em; background: #5858ff; color: white; font-weight: 300; margin-top: 1em; cursor: pointer;
}
input[type="submit"]:hover { background: #3f3fff; box-shadow: 0 0 5px #5858ff;
}

CreativeBrains play - Script Codes JS Codes

$("#contact").on("click", function() { $("form.contact").toggleClass("hide"); $("h1.brand").toggleClass("brand--content");
});
CreativeBrains play - Script Codes
CreativeBrains play - Script Codes
Home Page Home
Developer David Bellotti
Username dbellotti
Uploaded October 30, 2022
Rating 3
Size 4,188 Kb
Views 10,120
Do you need developer help for CreativeBrains play?

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!

David Bellotti (dbellotti) Script Codes
Name
A Pen by David Bellotti
Pivotal Labs Animated Logo
Scroll Detection
Solar System - WIP
Combinator
Star Power
Multi range slider with gradient
Centered Box
Messier 74 - WIP
Material Design Lite components demo
Create amazing web content 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!