Login Interface from Sketch

Developer
Colt Borg
Size
2,605 Kb
Views
20,240
  1. Login Interface from Sketch Previews
  2. Login Interface from Sketch HTML Codes
  3. Login Interface from Sketch CSS Codes

How do I make an login interface from sketch?

Taking an interface design and coding it with bootstrap. Sketch tutorial from Tuts+ - Sketch for Beginners</a. What is a login interface from sketch? How do you make a login interface from sketch? This script and codes were developed by Colt Borg on 21 November 2022, Monday.

Login Interface from Sketch Previews
IQ Test

Login Interface from Sketch - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Login Interface from Sketch</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='row'> <div id='floating-box' class='col-xs-10 col-xs-offset-1 col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4 col-lg-4 col-lg-offset-4'> <img id='logo' class='center-block' src="http://coltborg.com/Codepen/Interface-Exports/Logo.svg" alt="My App Logo" /> <form action="#"> <div class='row'> <div class='input-box col-xs-12'> <label for="username">USERNAME</label> <input class='form-control input' type="text" name="username" id="username" placeholder="Armando" /> </div> </div> <div class='row'> <div class='input-box col-xs-12 password'> <label for="password">PASSWORD</label> <input class='form-control input' type="text" name="password" id="password" placeholder="********" /> </div> </div> <div class='row'> <button class='btn btn-block button' type='submit'>LOGIN</button> </div> <div class='row'> <div class='col-xs-12 check'> <input type="checkbox" id="rememberme" name="cc" /> <label for="rememberme"><span class='remember'>Remember me</span></label> </div> </div> </form> </div>
</div>
<div class='row'> <div class='col-xs-10 col-xs-offset-1 col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4 col-lg-4 col-lg-offset-4 text-center forgot-password'> <a href="#">Forgot your password</a> </div>
</div>
</body>
</html>

Login Interface from Sketch - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400|Montserrat:400,700);
body { background: url(http://coltborg.com/Codepen/Interface-Exports/Blended-Landscape-50%25.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; font-family: 'Montserrat', sans-serif;
}
#floating-box { margin-top: 64px; padding: 60px 40px 40px 40px; border-radius: 10px; background: white; box-shadow: 0px 20px 20px 0px rgba(38,30,10,0.50);
}
#logo { margin-bottom: 48px;
}
.input-box { background: #FFFFFF; border: 1px solid #EAEAEA; border-radius: 2px; padding: 12px 15px;
}
label{ font-size: 11px; color: #CCCCCC; letter-spacing: 1px; line-height: 14px; margin-bottom: 3px;
}
.input { padding: 0; font-size: 24px; color: #71572C; line-height: 29px; box-shadow: none; border: none;
}
input:focus { color: #EF572E; outline: 0 !important;
}
.password { margin-top: 10px;
}
.button { margin-top: 10px; padding-top: 15px; padding-bottom: 15px; background: #EF572E; border-radius: 2px; font-size: 14px; color: #FFFFFF; line-height: 18px;
}
.check { padding: 0; margin-top: 10px;
}
.remember { font-family: 'Open Sans', sans-serif; font-size: 14px; color: #ADADAD; line-height: 19px;
}
.forgot-password { margin-top: 27px; margin-bottom: 64px; font-family: 'Open Sans', sans-serif;
}
.forgot-password a { font-size: 14px; color: #FFFFFF; line-height: 19px; text-decoration: underline;
}
Login Interface from Sketch - Script Codes
Login Interface from Sketch - Script Codes
Home Page Home
Developer Colt Borg
Username legendofcolt
Uploaded November 21, 2022
Rating 3
Size 2,605 Kb
Views 20,240
Do you need developer help for Login Interface from Sketch?

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!

Colt Borg (legendofcolt) Script Codes
Name
Big Half Circle Seperator
Smarter Underline Link
Color Gradient Border
Text-fill-color
Halloween Greeting - CodePen Chicago
Triangle Image Gallery
Sliding Underline using CSS
A Pen by Colt Borg
Fixed Bottom Nav
Bootstrap Layout Help
Create amazing art & images 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!