Submit Card
How do I make an submit card?
What is a submit card? How do you make a submit card? This script and codes were developed by Alexander Hadik on 16 September 2022, Friday.
Submit Card - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Submit Card</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="card"> <h3>Add Your Assay</h3> <p>Let us know what assay you would like to make available on demand and we’ll get in touch to make it happen.</p> <div class="input-row"> <input class="card__input" id="assay" type="text" placeholder="CYP450 inhibition" /> <label for="assay">Assay Type</label> </div> <div class="input-row"> <input class="card__input" id="email" type="text" placeholder="[email protected]"/> <label for="email">Email</label> </div> <button class="button button--action">Submit</button>
</div>
</body>
</html>
Submit Card - Script Codes CSS Codes
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,200i,300,300i,400,400i,600,600i,700,700i,900,900i");
html, body { height: 100%; width: 100%;
}
body, input { font-family: 'Source Sans Pro', sans-serif;
}
body { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 0;
}
h1 { text-transform: uppercase; font-weight: 900;
}
p { margin: 1em 0 !important;
}
.card { padding: 35px 67px; width: 510px; box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.3); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; box-sizing: border-box;
}
.card__input { height: 43px; margin-top: 1.5em; font-size: 0.937em; padding: 0 20px; box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.3); border: none;
}
.card__input:focus + label { top: 0;
}
.input-row { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; z-index: 10; margin-top: .5em;
}
.button { width: 127px; padding: 1em 0 !important; margin-top: 2em; -ms-flex-item-align: end; align-self: flex-end;
}
label { position: absolute; top: 3em; -webkit-transition: top 0.25s; transition: top 0.25s; z-index: -1;
}
h1, h2, h3, h4, h5, .button { font-weight: 900; text-transform: uppercase;
}
h1 { font-size: 4.375em; line-height: 0.97em; letter-spacing: 2px; margin: 0 0 .5em 0;
}
@media screen and (max-width: 1080px) { h1 { font-size: 3.645em; line-height: 1.039em; }
}
@media screen and (max-width: 768px) { h1 { font-size: 2.25em; line-height: 1.15em; }
}
h2 { font-size: 3em; line-height: 1.17em; letter-spacing: 1.55px; margin: 0 0 0.833em 0;
}
@media screen and (max-width: 1080px) { h2 { font-size: 2.5em; line-height: 1.125em; }
}
@media screen and (max-width: 768px) { h2 { font-size: 2em; line-height: 1.25em; }
}
h3 { font-size: 2.25em; line-height: 1.11em; letter-spacing: 1.55px; margin: 0 0 0.833em 0;
}
@media screen and (max-width: 1080px) { h3 { font-size: 2em; line-height: 1.25em; }
}
@media screen and (max-width: 768px) { h3 { font-size: 1.625em; line-height: 1.154em; }
}
h4 { font-size: 1.375em; line-height: 1.455em; margin: 0 0 0.45em 0;
}
@media screen and (max-width: 1080px) { h4 { font-size: 1.179em; line-height: 1.25em; }
}
@media screen and (max-width: 768px) { h4 { font-size: 1.08em; line-height: 1.32em; }
}
h5, .button { font-size: 0.9375em; letter-spacing: 1.55px; line-heigh: 1.31em;
}
h5 { margin: 0 0 0.67em 0;
}
p { font-size: 0.875em; font-weight: 300; line-height: 1.57; letter-spacing: 0.7px; margin: 0 0 3em 0;
}
@media screen and (max-width: 768px) { p { line-height: 1.375em; }
}
p.paragraph--large { font-size: 1.375em; letter-spacing: 0.4px; line-height: 1.63em; color: #525B68; font-weight: 400; margin: 0 0 1.36em 0;
}
p.paragraph--black { font-size: 0.9375em; color: #525B68; letter-spacing: 0.6px; line-height: 1.87em; font-weight: 400; margin: 0 0 1em 0;
}
p.paragraph--black:last-child { margin: 0 0 2.27em 0;
}
label { font-size: 0.9375em; color: #5d5d5d; font-weight: 700;
}
.button { border: none; border-radius: 3px; padding: 1.75em 2em; color: #fff;
}
.button--action { background-color: #FFC40C;
}
Developer | Alexander Hadik |
Username | ahadik |
Uploaded | September 16, 2022 |
Rating | 3 |
Size | 3,980 Kb |
Views | 18,216 |
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!
Name | Size |
IOPS Selector | 3,779 Kb |
SVG in a Button Tag | 2,884 Kb |
Pricing Cards V2 | 6,308 Kb |
HSL SVG Gradient | 1,809 Kb |
D3 Learnings | 1,618 Kb |
Pricing Cards V3 | 6,584 Kb |
Pricing View with Map | 3,869 Kb |
Loader | 2,296 Kb |
Table Action | 7,906 Kb |
Red Pill or Blue Pill But Only CSS | 3,455 Kb |
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!
Name | Username | Size |
Highbrow Basic HTML Lesson 8 | Kimlarocca | 2,094 Kb |
Fluid Layout with Float | Jxqr97 | 1,785 Kb |
Border image | JohnRiordan | 2,120 Kb |
Pomodoro Clock | Osycon | 3,705 Kb |
Progressively reveal dots on a Bezier curve | GreenSock | 2,489 Kb |
Search Box in Content Moves to Fixed Header | Chriscoyier | 2,768 Kb |
Shape Outside - Polygon | Stacy | 3,954 Kb |
Break Out | AzazelN28 | 12,431 Kb |
TinFoil Boats | Chandralil | 4,577 Kb |
Falling Down the Rabbit Hole | Rachelnabors | 4,578 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!