Weekly UI - Invisionapp Sign up

Developer
Fred Hawk
Size
4,382 Kb
Views
24,288
  1. Weekly UI - Invisionapp Sign up Previews
  2. Weekly UI - Invisionapp Sign up HTML Codes
  3. Weekly UI - Invisionapp Sign up CSS Codes
  4. Weekly UI - Invisionapp Sign up JS Codes

How do I make an weekly ui - invisionapp sign up?

What is a weekly ui - invisionapp sign up? How do you make a weekly ui - invisionapp sign up? This script and codes were developed by Fred Hawk on 14 November 2022, Monday.

Weekly UI - Invisionapp Sign up Previews
IQ Test

Weekly UI - Invisionapp Sign up - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Weekly UI - Invisionapp Sign up</title> <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> <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>
<section class="signup"> <div class="signup__wrapper"> <header class="signup__title"> <h2>Join over 2 million designers already using InVision. Get InVision <span>free</span> forever!</h2> </header> <article class="signup__form"> <form><span class="signup__form-item"> <label class="hide" for="name">Name</label> <input class="signup__form-item--input" type="text" id="name" name="name" placeholder="Your Name"/><i class="signup__icon icon-person"></i></span><span class="signup__form-item"> <label class="hide" for="email">Email</label> <input class="signup__form-item--input" type="email" id="email" name="email" placeholder="Email Address"/><i class="signup__icon icon-email"></i></span><span class="signup__form-item"> <label class="hide" for="password">Password</label> <input class="signup__form-item--input" type="password" id="password" name="password" placeholder="Create a Password"/><i class="signup__icon icon-password"></i></span><span class="signup__form-item"> <label class="hide" for="submit">Submit</label> <button class="signup__form-item--submit" type="submit" id="submit">Get started - Free forever</button></span></form> </article> <footer class="signup__terms"> <p>By clicking "Get Started - Free Forever!" I agree to InVision's <a href="#">Terms of Service</a></p> </footer> </div>
</section> <script src="js/index.js"></script>
</body>
</html>

Weekly UI - Invisionapp Sign up - Script Codes CSS Codes

a { color: #747c83;
}
a:hover { color: white;
}
.hide { display: none;
}
.signup { background: #323a45; color: white; font-family: "Open Sans", "open-sans", sans-serif; width: 100wv;
}
.signup__wrapper { margin: 0 auto; width: 90%; padding-top: 10rem;
}
.signup__title { padding-bottom: 4rem;
}
.signup__title h2 { font-style: normal; font-variant: normal; font-weight: 300; font-stretch: normal; font-size: 30px; text-align: center; margin: 0;
}
.signup__title h2 span { font-weight: bold;
}
.signup__form { text-align: center;
}
.signup__form-item { margin-left: 0.7rem; position: relative;
}
.signup__form-item input { height: 3.9rem; width: 14.25rem; border: 1px solid #d4d7da; border-radius: 3px; font-size: 1.1rem; color: #8a959e; margin-bottom: 1rem;
}
.signup__form-item input::-webkit-input-placeholder { padding-left: 2.5rem;
}
.signup__form-item input::-moz-placeholder { padding-left: 2.5rem;
}
.signup__form-item input:-ms-input-placeholder { padding-left: 2.5rem;
}
.signup__form-item input::placeholder { padding-left: 2.5rem;
}
.signup__icon { position: absolute; height: 24px; width: 24px; top: -2px; left: 14px;
}
.icon-person { background-image: url("https://www.invisionapp.com/assets/img/sprites/global-sa42ef3fae4.png"); background-position: 0 -474px; background-repeat: no-repeat;
}
.icon-email { background-image: url("https://www.invisionapp.com/assets/img/sprites/global-sa42ef3fae4.png"); background-position: 0 -386px; background-repeat: no-repeat;
}
.icon-password { background-image: url("https://www.invisionapp.com/assets/img/sprites/global-sa42ef3fae4.png"); background-position: 0 -430px; background-repeat: no-repeat;
}
.signup__form-item--submit { height: 4.1rem; width: 14.4rem; border: none; border-radius: 5px; font-size: 0.9rem; font-weight: 700; color: white; text-transform: uppercase; background: #ff3366;
}
.signup__terms { color: #747c83; font-size: 0.8rem; text-align: center; padding-bottom: 10rem; margin-top: 2rem;
}

Weekly UI - Invisionapp Sign up - Script Codes JS Codes

// https://www.invisionapp.com/
// Font submit font-family: "brandon-grotesque", sans-serif;
// iconsprite: https://www.invisionapp.com/assets/img/sprites/global-s116e8c6936.png
"use strict";
Weekly UI - Invisionapp Sign up - Script Codes
Weekly UI - Invisionapp Sign up - Script Codes
Home Page Home
Developer Fred Hawk
Username osycon
Uploaded November 14, 2022
Rating 3
Size 4,382 Kb
Views 24,288
Do you need developer help for Weekly UI - Invisionapp Sign 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!

Fred Hawk (osycon) Script Codes
Name
A Pen by Fred Hawk
Lilli
Pomodoro Clock
Collapsing Text Animation
Weekly UI - Make Reservations
Weekly UI - Stripe - Pricing section
Weekly UI - Airbnb Footer Component
Weekly UI - Paypal Navigation
Quotastic
Weekly UI - Mobile design sketches
Create amazing blog posts 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!