#dailyui 001: Sign Up

Developer
Jeanine
Size
5,366 Kb
Views
34,408
  1. #dailyui 001: Sign Up Previews
  2. #dailyui 001: Sign Up HTML Codes
  3. #dailyui 001: Sign Up CSS Codes

How do I make an #dailyui 001: sign up?

What is a #dailyui 001: sign up? How do you make a #dailyui 001: sign up? This script and codes were developed by Jeanine on 16 September 2022, Friday.

#dailyui 001: Sign Up Previews
IQ Test

#dailyui 001: Sign Up - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>#dailyui 001: Sign Up</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <header> <h1>Distant Life <small>Community Language Exchange</small></h1> </header> <main class="wrapper"> <div class="row"> <div class="col-md-2 col-sm-4"> <section class="testimonials"> <h2 class="sr-only">Testimonials</h2> <ul class="list-unstyled"> <li> <img src="http://lorempixel.com/400/400/people/2/"> <blockquote>I've made many friends from all around the world. <small><a href="#"><span class="zmdi zmdi-account zmdi-hc-fw"><span class="sr-only">user</span></span>illusionary</a>, Austria</small></blockquote> </li> <li> <img src="http://lorempixel.com/400/400/people/4/"> <blockquote>It's been an incredible journey. <small><a href="#"><span class="zmdi zmdi-account zmdi-hc-fw"><span class="sr-only">user</span></span>walkingwonder32</a>, Italy</small></blockquote> </li> </ul> </section> </div> <div class="col-md-6 col-sm-8 "> <h2>Sign Up</h2> <p>Ever want to experience other cultures from your own living room? Distant Life creates connections among language students all over the world. Join today&mdash;<strong>it's free!</strong></p> <!-- form --> <form class="form-horizontal" method="post" action="#">	<div class="form-group">	<label for="name" class="cols-sm-2 control-label">Your Name</label>	<div class="cols-sm-10">	<div class="input-group">	<span class="input-group-addon"><span class="zmdi zmdi-account-o zmdi-hc-fw"><span class="sr-only">new account</span></span></span>	<input type="text" class="form-control" name="name" id="name" placeholder="Enter your Name"/>	</div>	</div>	</div>	<div class="form-group">	<label for="email" class="cols-sm-2 control-label">Your Email</label>	<div class="cols-sm-10">	<div class="input-group">	<span class="input-group-addon"><span class="zmdi zmdi-email zmdi-hc-fw"><span class="sr-only">email</span></span></span>	<input type="text" class="form-control" name="email" id="email" placeholder="Enter your Email"/>	</div>	</div>	</div>	<div class="form-group">	<label for="username" class="cols-sm-2 control-label">Username</label>	<div class="cols-sm-10">	<div class="input-group">	<span class="input-group-addon"><span class="zmdi zmdi-comments zmdi-hc-fw"><span class="sr-only">comment bubble</span></span></span>	<input type="text" class="form-control" name="username" id="username" placeholder="Enter your Username"/>	</div>	</div>	</div>	<div class="form-group">	<label for="password" class="cols-sm-2 control-label">Password</label>	<div class="cols-sm-10">	<div class="input-group">	<span class="input-group-addon"><span class="zmdi zmdi-lock-outline zmdi-hc-fw"><span class="sr-only">password</span></span></span>	<input type="password" class="form-control" name="password" id="password" placeholder="Enter your Password"/>	</div>	</div>	</div>	<div class="form-group">	<label for="confirm" class="cols-sm-2 control-label">Confirm Password</label>	<div class="cols-sm-10">	<div class="input-group">	<span class="input-group-addon"><span class="zmdi zmdi-lock-outline zmdi-hc-fw"><span class="sr-only">password</span></span></span>	<input type="password" class="form-control" name="confirm" id="confirm" placeholder="Confirm your Password"/>	</div>	</div>	</div>	<div class="form-group text-center ">	<button type="button" class="btn btn-primary btn-lg login-button">Sign up</button>	</div>	</form> <!-- end form --> </div> <div class="col-md-4 col-sm-12 "> <section class="stats"> <h2 class="sr-only">Why join?</h2> <ul class="list-unstyled"> <li> <span class="zmdi zmdi-comment-video zmdi-hc-fw"><span class="sr-only">video comment</span></span> <h3><strong>72%</strong> of users have face-timed another user</h3> </li> <li> <span class="zmdi zmdi-comments zmdi-hc-fw"><span class="sr-only">comments</span></span> <h3>Over <strong>seven</strong> <a href="#">fully-supported languages</a></h3> </li> <li> <span class="zmdi-hc-stack zmdi zmdi-hc-lg">
<i class="zmdi zmdi-money zmdi-hc-stack-1x"></i>
<i class="zmdi zmdi-block zmdi-hc-stack-2x mdc-text-red"></i>
</span> <h3> <strong>no credit card</strong> required</h3> </li> </ul> </section> </div> </div> </main> <footer> <p><a href="http://satinflame.com" target="_blank">&copy; satinflame design</a></p> </footer>
</div>
</body>
</html>

#dailyui 001: Sign Up - Script Codes CSS Codes

::selection { color: #fff; background: #fc7ed9;
}
html { height: 100%; margin: 0; padding: 0;
}
body { height: 100%; margin: 0; padding: 16px 0; background-repeat: no-repeat; background-attachment: fixed; background-color: #fcecfc; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FFFCECFC', endColorstr='#FFFF7CD8'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjEuMCIgeDI9IjEuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZjZWNmYyIvPjxzdG9wIG9mZnNldD0iNTElIiBzdG9wLWNvbG9yPSIjYTdiZGY5Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmY3Y2Q4Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -webkit-gradient(linear, 0% 100%, 100% 0%, color-stop(0%, #fcecfc), color-stop(51%, #a7bdf9), color-stop(100%, #ff7cd8)); background-image: -moz-linear-gradient(left bottom, #fcecfc 0%, #a7bdf9 51%, #ff7cd8 100%); background-image: -webkit-linear-gradient(left bottom, #fcecfc 0%, #a7bdf9 51%, #ff7cd8 100%); background-image: linear-gradient(to right top, #fcecfc 0%, #a7bdf9 51%, #ff7cd8 100%);
}
header, footer { border: 2px solid #fff; display: block; background: rgba(0, 255, 255, 0.19); margin: 0; padding: 24px 0; font-weight: 700; text-align: center; text-transform: uppercase; font-size: 1rem; color: #fff; letter-spacing: .2rem;
}
header a, footer a { color: inherit;
}
header small { clear: both; display: block; text-transform: lowercase; font-size: 1rem;
}
header small:before, header small:after { content: '\00a7'; display: inline-block; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); padding-left: 8px; padding-top: 2px;
}
main { background: #fff; margin: 0; padding: 8px 16px;
}
img { max-width: 100%; width: inherit;
}
.stats { color: #958bc1;
}
.stats li > .zmdi { font-size: 4rem; text-align: center; display: block; width: 100%;
}
.stats li > .zmdi:before { color: inherit;
}
.stats li > .zmdi-hc-stack { font-size: 2rem;
}
h2 { padding-top: 10px; border-bottom: #958bc1; color: #958bc1;
}
.stats h3 { padding: 10px; text-align: center; font-size: 1.5rem; margin: 0; padding-top: 0;
}
.stats h3 strong { font-size: 1.7rem; -moz-transition: color .2s ease-in; -o-transition: color .2s ease-in; -webkit-transition: color .2s ease-in; transition: color .2s ease-in;
}
.stats h3 a { color: inherit; text-decoration: underline;
}
.stats ul.list-unstyled li { border-bottom: 1px dashed #958bc1; margin: 10px 10px 0px 10px; padding: 20px;
}
.stats ul.list-unstyled li:last-child { border-bottom: 0;
}
.stats ul.list-unstyled li:hover strong { color: #776aaf;
}
label { color: #958bc1; font-size: .8rem; text-transform: uppercase; margin-bottom: 0; padding-bottom: 0;
}
form { border: 1px dashed #c4a7ee; padding: 10px 20px; margin: 10px 0; background-color: rgba(188, 173, 240, 0.1);
}
.btn.btn-primary { background-color: #958bc1; border-color: #9288bf; cursor: pointer;
}
.btn.btn-primary:hover { background-color: #776aaf; border-color: #7466ad;
}
.testimonials { color: #958bc1; padding: 30px 5px;
}
.testimonials blockquote { font-family: 'Times New Roman', serif; font-style: italic; padding: 10px;
}
.testimonials small { font-size: .7rem; font-style: normal; font-family: 'Open Sans', 'Helvetica', sans-serif; display: block; clear: both; color: #585858; padding: 3px 0;
}
.testimonials a { text-decoration: underline; color: #776aaf;
}
.testimonials img { opacity: 0.5; filter: alpha(opacity=50); border: 1px solid #ddd; padding: 3px;
}
#dailyui 001: Sign Up - Script Codes
#dailyui 001: Sign Up - Script Codes
Home Page Home
Developer Jeanine
Username virtual
Uploaded September 16, 2022
Rating 3
Size 5,366 Kb
Views 34,408
Do you need developer help for #dailyui 001: 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!

Jeanine (virtual) Script Codes
Name
Expanding Info Boxes
Simple Event Box
3 Piece Slider with featured center
3 Piece Slider
Table Sorter Data
Bootstrap 4
Font-Awesome Icon Card with heading
Parallax Cats
Flexbox
Simple React Template
Create amazing love letters 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!