Divider Signup UI Card | #codevember

Developer
Mike Mangialardi
Size
4,010 Kb
Views
40,480
  1. Divider Signup UI Card | #codevember Previews
  2. Divider Signup UI Card | #codevember HTML Codes
  3. Divider Signup UI Card | #codevember CSS Codes

How do I make an divider signup ui card | #codevember?

Divider Signup UI Card | #codevemberhttps://www.behance.net/gallery/45395587/Divider-Sign-Up-UI-Card. What is a divider signup ui card | #codevember? How do you make a divider signup ui card | #codevember? This script and codes were developed by Mike Mangialardi on 08 August 2022, Monday.

Divider Signup UI Card | #codevember Previews
IQ Test

Divider Signup UI Card | #codevember - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Divider Signup UI Card | #codevember</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body> <div class="animated slideInLeft" id="square"> <div class="animated bounceInUp" id="leftSquare"> <div class="animated bounceInUp" id="circle"> <img class="brand img-responsive" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/branding.png" /> </div>
<h2 id="title">Welcome to Divider</h2> <h3 id="subtitle">You are moments away from your first adventure.</h3> </div> <div class="animated bounceInDown" id="rightSquare"> <div id="container"> <h1 class="signup">Sign Up </h1> <form className="animated slideInLeft"> <input class="optin" type="text" placeholder="name" /> <input class="optin" type="text" placeholder="email" /> <input class="optin" type="password" placeholder="password" /> </form> <button class="animated infinite pulse button btn btn-info"> <span><i class="fa fa-twitter" aria-hidden="true"></i></span><span id="twitter">Sign in with Twitter</span> </button> <h3 id="footer">By continuing you agree to our <span id="terms">terms & conditions.</span></h3> </div> </div> </div>
</body>
</body>
</html>

Divider Signup UI Card | #codevember - Script Codes CSS Codes

body { padding-top: 50px; padding-bottom: 150px; background: linear-gradient(rgba(251, 139, 166, 0.7), rgba(224, 140, 194, 0.8), rgba(194, 139, 228, 0.9)); background-size: cover;
}
#square { position: relative; width: 800px; height: 450px; display: block; margin: auto; background: #F3F6F8; z-index: 3;
}
#leftSquare { width: 40%; display: block; margin: auto; height: 100%; position: absolute; top: 0%; left: 0%; background: linear-gradient(rgba(251, 139, 166, 0.7), rgba(224, 140, 194, 0.8), rgba(194, 139, 228, 0.9)), url("https://images.pexels.com/photos/1852/dawn-landscape-mountains-nature.jpg?h=350&auto=compress"); background-size: cover; border-radius: 0%; z-index: 1;
}
#rightSquare { width: 60%; display: block; margin: auto; height: 100%; position: absolute; top: 0%; right: 0%; background: none; background-size: cover; border-radius: 0%; z-index: 1;
}
#circle { border-radius: 50%; width: 60%; height: 40%; display: block; margin: auto; position: absolute; top: 8%; right: 20%;
}
.brand { position: absolute; display: block; top: 38%; left: 25%; margin: auto; width: 50%; height: 60%; z-index: 1;
}
#title { position: absolute; left: 21%; bottom: 37%; color: white; font-family: "lato"; font-size: 20px; font-weight: 800; text-align: center; z-index: 3;
}
#subtitle { position: absolute; left: 7%; bottom: 32%; color: white; font-family: "lato"; font-size: 13px; font-weight: 400; text-align: center; z-index: 3;
}
#container { margin-top: 15%;
}
.signup { color: #e4a2d0; font-family: "lato"; font-size: 2em; font-weight: 800; text-align: center; text-transform: uppercase; z-index: 3;
}
.button { display: block; margin: auto; margin-bottom: 20px; z-index: 3; background: #2BA0EE;
}
#twitter { padding-left: 10px;
}
#footer { display: block; margin: auto; color: #333333; font-family: "lato"; font-size: 10px; font-weight: 400; text-align: center; z-index: 3;
}
#terms { cursor: pointer; color: #FBADC1;
}
form { padding: 20px 0; position: relative;
}
.optin { -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: 0; border: 1px solid rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.8); width: 75%; margin: auto; display: block; margin-bottom: 10px; border-radius: 3px; padding: 10px 15px; text-align: left; font-size: 18px; color: #333333; -webkit-transition-duration: 0.25s; transition-duration: 0.25s; font-weight: 300;
}
.optin:hover { background-color: rgba(255, 255, 255, 0.4);
}
.optin:focus { background-color: white; width: 90%; color: #CD98E3;
}
Divider Signup UI Card | #codevember - Script Codes
Divider Signup UI Card | #codevember - Script Codes
Home Page Home
Developer Mike Mangialardi
Username mikemang
Uploaded August 08, 2022
Rating 4.5
Size 4,010 Kb
Views 40,480
Do you need developer help for Divider Signup UI Card | #codevember?

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!

Mike Mangialardi (mikemang) Script Codes
Name
Vue.js Pizza Maker
Daily CSS Images
VueConf Animation
Modern Landing Page
SVG Polygon Portrait
Interactive Resume
Freelancing Landing Page Concept
Create amazing captions 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!