Form Start Up

Developer
Ashlee Phillips
Size
5,046 Kb
Views
24,288
  1. Form Start Up Previews
  2. Form Start Up HTML Codes
  3. Form Start Up CSS Codes

How do I make an form start up?

Based on Dribbble by Prakhar Neel Sharma https://dribbble.com/shots/2792365-Form-start-up-Choosing-form-creation-from-scratch. What is a form start up? How do you make a form start up? This script and codes were developed by Ashlee Phillips on 15 September 2022, Thursday.

Form Start Up Previews
IQ Test

Form Start Up - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Form Start Up</title> <link href="https://fonts.googleapis.com/css?family=Lato:400,700,900" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ * { box-sizing: border-box;
}
body { background: #F69A73; font-family: "Lato", Helvetica;
}
h1 { margin: 40px 0 16px 0; padding: 0; font-weight: 900; font-size: 24px;
}
p { padding: 0; margin: 0; color: #707981; font-size: 14px; line-height: 20px; margin-bottom: 50px; width: 95%;
}
.card { background: white; width: 684px; border-radius: 15px; padding: 20px; margin: 100px auto; position: relative; box-shadow: 0 10px 55px -18px #261209;
}
.top-nav { margin: 0 auto; margin-top: 20px;
}
ul { list-style-type: none; padding: 0; margin: 0; text-align: center;
}
ul .feature-bubble { background: #B8C3CE; border-radius: 50%; width: 40px; height: 40px; border-bottom: 3px solid #707981; display: inline-block; text-align: center; color: white; transition: background 300ms ease;
}
ul li { display: inline-block; width: 80px; position: relative;
}
ul li.first:after { content: "...."; position: absolute; top: 6px; right: -13px; color: #F69A73; letter-spacing: 2px;
}
ul li.second:after { content: "...."; position: absolute; top: 6px; right: -13px; color: #B8C3CE; letter-spacing: 2px;
}
ul li.second:hover:after { color: #F69A73;
}
ul li a { color: white; line-height: 40px;
}
ul li a .nav-words { color: #B8C3CE; font-size: 10px; font-weight: 600; transition: color 300ms ease;
}
ul li.active .nav-words, ul li:hover .nav-words { color: #F69A73;
}
ul li.active .feature-bubble, ul li:hover .feature-bubble { background: #F69A73; border-bottom: 3px solid #D87D56;
}
.image-container { position: relative; float: left; width: 48%; margin-top: 50px;
}
.image-container img { display: block; max-width: 100%;
}
.main-content { float: left; width: 48%; margin: 2%;
}
.button-container { text-align: center;
}
.cta { background: none; border: none; font-size: 10px; font-weight: 600; padding: 10px 0; color: #B8C3CE; width: 40%; margin-bottom: 40px; cursor: pointer; transition: background 300ms ease; display: inline-block;
}
.left { background: #F69A73; border-radius: 25px; color: white; border-bottom: 3px solid #D87D56;
}
.left:hover { background: #D87D56;
}
.right:hover { color: #F69A73; transition: color 300ms ease;
}
.squiggle { width: 100px; height: 18px; border-radius: 18px; position: absolute;
}
.squiggle-white { background: white;
}
.squiggle-orange { background: #F69A73;
}
.squiggle-1 { bottom: 60px; left: -30px;
}
.squiggle-1:before { content: ""; width: 18px; height: 18px; border-radius: 50%; position: absolute; background: white; left: -25px;
}
.squiggle-2 { bottom: 42px; left: -70px;
}
.squiggle-3 { bottom: 24px; left: -15px;
}
.squiggle-4 { top: 24px; right: -30px;
}
.squiggle-5 { top: 42px; right: -70px;
}
.squiggle-6 { top: 60px; right: -15px;
}
.clearfix { clear: both;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="card"> <div class="squiggle squiggle-white squiggle-1"></div> <div class="squiggle squiggle-orange squiggle-2"></div> <div class="squiggle squiggle-white squiggle-3"></div> <div class="squiggle squiggle-white squiggle-4"></div> <div class="squiggle squiggle-orange squiggle-5"></div> <div class="squiggle squiggle-white squiggle-6"></div> <div class="top-nav"> <nav> <ul> <li class="active first"> <a href="#"> <div class="feature-bubble"> <i class="fa fa-wrench" aria-hidden="true"></i> </div> <div class="nav-words">BUILD</div> </a> </li> <li class="second"> <a href="#" class="active"> <div class="feature-bubble"> <i class="fa fa-paint-brush" aria-hidden="true"></i> </div> <div class="nav-words">DESIGN</div> </a> </li> <li> <a href="#"> <div class="feature-bubble"> <i class="fa fa-cog" aria-hidden="true"></i> </div> <div class="nav-words">CONFIGURE</div> </a> </li> </ul> </nav> </div> <div class="image-container"> <img src="http://www.ashleephillips.com/wp-content/uploads/2017/01/screen_shot_2017-01-17_at_1.12.22_pm.png" alt="Clipboard-image" /> </div> <section class="main-content"> <h1>START FROM SCRATCH</h1> <p>One of the simplest ways to create forms is to start from the beginning. It is very easy to use, and you can make creations of your own choice. No complicated tools or too much learning. Just create your own masterpiece.</p> <div class="button-container"> <button class="cta left">LET ME TRY</button> <button class="cta right">MAYBE LATER</button> </div> </section> <div class="clearfix"></div>
</div> <script src='https://use.fontawesome.com/27ca801b4d.js'></script>
</body>
</html>

Form Start Up - Script Codes CSS Codes

* { box-sizing: border-box;
}
body { background: #F69A73; font-family: "Lato", Helvetica;
}
h1 { margin: 40px 0 16px 0; padding: 0; font-weight: 900; font-size: 24px;
}
p { padding: 0; margin: 0; color: #707981; font-size: 14px; line-height: 20px; margin-bottom: 50px; width: 95%;
}
.card { background: white; width: 684px; border-radius: 15px; padding: 20px; margin: 100px auto; position: relative; box-shadow: 0 10px 55px -18px #261209;
}
.top-nav { margin: 0 auto; margin-top: 20px;
}
ul { list-style-type: none; padding: 0; margin: 0; text-align: center;
}
ul .feature-bubble { background: #B8C3CE; border-radius: 50%; width: 40px; height: 40px; border-bottom: 3px solid #707981; display: inline-block; text-align: center; color: white; transition: background 300ms ease;
}
ul li { display: inline-block; width: 80px; position: relative;
}
ul li.first:after { content: "...."; position: absolute; top: 6px; right: -13px; color: #F69A73; letter-spacing: 2px;
}
ul li.second:after { content: "...."; position: absolute; top: 6px; right: -13px; color: #B8C3CE; letter-spacing: 2px;
}
ul li.second:hover:after { color: #F69A73;
}
ul li a { color: white; line-height: 40px;
}
ul li a .nav-words { color: #B8C3CE; font-size: 10px; font-weight: 600; transition: color 300ms ease;
}
ul li.active .nav-words, ul li:hover .nav-words { color: #F69A73;
}
ul li.active .feature-bubble, ul li:hover .feature-bubble { background: #F69A73; border-bottom: 3px solid #D87D56;
}
.image-container { position: relative; float: left; width: 48%; margin-top: 50px;
}
.image-container img { display: block; max-width: 100%;
}
.main-content { float: left; width: 48%; margin: 2%;
}
.button-container { text-align: center;
}
.cta { background: none; border: none; font-size: 10px; font-weight: 600; padding: 10px 0; color: #B8C3CE; width: 40%; margin-bottom: 40px; cursor: pointer; transition: background 300ms ease; display: inline-block;
}
.left { background: #F69A73; border-radius: 25px; color: white; border-bottom: 3px solid #D87D56;
}
.left:hover { background: #D87D56;
}
.right:hover { color: #F69A73; transition: color 300ms ease;
}
.squiggle { width: 100px; height: 18px; border-radius: 18px; position: absolute;
}
.squiggle-white { background: white;
}
.squiggle-orange { background: #F69A73;
}
.squiggle-1 { bottom: 60px; left: -30px;
}
.squiggle-1:before { content: ""; width: 18px; height: 18px; border-radius: 50%; position: absolute; background: white; left: -25px;
}
.squiggle-2 { bottom: 42px; left: -70px;
}
.squiggle-3 { bottom: 24px; left: -15px;
}
.squiggle-4 { top: 24px; right: -30px;
}
.squiggle-5 { top: 42px; right: -70px;
}
.squiggle-6 { top: 60px; right: -15px;
}
.clearfix { clear: both;
}
Form Start Up - Script Codes
Form Start Up - Script Codes
Home Page Home
Developer Ashlee Phillips
Username smashlee
Uploaded September 15, 2022
Rating 3
Size 5,046 Kb
Views 24,288
Do you need developer help for Form Start Up?

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!

Ashlee Phillips (smashlee) Script Codes
Name
99 Pledges Login
Project Euler 01
Google login form
Project Euler 02
Simple Login
CSS Granny
Scooped Border
Work in Progress
Scream for Ice Cream
Javascript practice
Create amazing video scripts 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!