Welcome to Lakeland Community College Student Services Online Lakeland Community
ID: 656609 • Letter: W
Question
Welcome to Lakeland Community College Student Services Online Lakeland Community College recognizes students' rights to access personal and academic records in accordance with the Family Educational Rights and Privacy Act of 1974 (FERPA) as amended by Public Law 93-568 Already have an account with us? Returning users may log in by entering their site username and password. New users, please create a new account by providing us with some basic information. Desktop User Experience (Width > 320 px) Must Follow Mockup For Layout! Body: 520px Width Calibri 12px regular Header: Cambria 16px bold Left Aligned Paragraph Below Header: Calibri 12px italic Left Aligned *Main Content Outline - The black line outlining the main content and the light blue horizontal line separating the two sections are meant to help the developer visualize the content. Please feel free to redesign the background or container style for the entire section. As long as you keep the grid content intact, it is highly encouraged to add some better styles for the container. *Buttons - These buttons are crude mockups, you are encouraged to add better looking buttons with mouseover effects and pointer cursors. *Upon successful account creation or login, the Account Information view should animate/slide in from the right as the current content slides out to the left. The header and footer, since they are common, should remain on the screen even as the content in the middle animates.Explanation / Answer
LOGINE PAGE
HTML PAGE
<head>
<title>Login Form</title>
</head>
<body>
<section class="container">
<div class="login">
<h1>Login to Web App</h1>
<form method="post" action="index.html">
<p><input type="text" name="login" value="" placeholder="Username or Email"></p>
<p><input type="passwd" name="passwd" value="" placeholder="Password"></p>
<p class="remember_me">
<label>
<input type="checkbox" name="remember_me" id="remember_me">
</label>
</p>
<p class="creat"><input type="creat" name="commit" value="Login"></p>
</form>
</div>
</section>
<
</p>
</section>
</body>
</html>
#sumsk {
position: absolute;
width: 100%;
height: 282px;
z-index: 9999;
display: none;
color: rgba(0, 0, 0, 0.66);
text-align: center;
line-height: 279px;
box-shadow: inset 0px 0px 50px rgba(0, 0, 0, 0.5);
text-shadow: 0px 0px rgba(255, 255, 255, 0.57);
}
#nameal, #passal {
margin: 0 37px;
color: rgba(68, 68, 68, 0.78);
display: none;
}
#nameal {
margin-top: 13px;
margin-bottom: 1px;
}
#signup,#name,#pass,#signupb {
transition: all 0.3s ease 0s;
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
}
#logint:hover {
text-decoration: underline;
}
#logint {
color: rgba(66, 134, 237, 0.78);
cursor: pointer;
text-decoration: none;
width: 100%;
margin: -4px 37px;
font-size: 14px;
}
#name {
-moz-appearance: none;
-webkit-appearance: none;
padding: 0 8px;
margin: 44px auto;
background: #fff;
border: 1px solid #d9d9d9;
border-top: 1px solid silver;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
border-radius: 1px;
color: #838383;
width: 409px;
display: block;
margin-bottom: 10px;
z-index: 1;
position: relative;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
direction: ltr;
height: 44px;
font-size: 16px;
text-align: left;
}
#pass {
-moz-appearance: none;
-webkit-appearance: none;
padding: 0 8px;
margin: 16px auto;
background: #fff;
border: 1px solid #d9d9d9;
border-top: 1px solid silver;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
border-radius: 1px;
color: #838383;
width: 409px;
display: block;
margin-bottom: 10px;
z-index: 1;
position: relative;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
direction: ltr;
height: 44px;
font-size: 16px;
text-align: left;
}
#name:hover,#pass:hover {
border: 1px solid #b9b9b9;
border-top: 1px solid #a0a0a0;
-moz-box-shadow: inset 0 1px rgba(0,0,0,.2);
-webkit-box-shadow: inset 0 1px rgba(0,0,0,.2);
box-shadow: inset 0 1px rgba(0,0,0,.2);
}
#signup {
margin: 0px;
padding: 3px 0px 9px;
color: rgb(255, 255, 255);
font-size: 32px;
width: 100%;
text-align: center;
font-weight: normal;
background: #76ABDB;
font-size: 22px;
}
#signupb {
background: #f8f8f8;
border: 1px solid #c6c6c6;
display: inline-block;
line-height: 23px;
padding: 5px 18px;
-webkit-border-radius: 2px;
border-radius: 2px;
background: #f37676;
border-color: #E78282;
font-weight: normal;
margin: 10px 0 0 0;
color: #fff;
position: absolute;
right: 9px;
bottom: 9px;
font-size: 17px;
width: 103px;
height: 35px;
outline: none;
cursor: pointer;
}
#userbox {
position: absolute;
width: 480px;
height: 324px;
background: white;
top: 50%;
margin-top: -174px;
left: 50%;
margin-left: -240px;
box-shadow: 0px 1px 16px rgba(0, 0, 0, 0.45);
}
#close {
position: absolute;
right: 21px;
top: -2px;
color: white;
font-weight: bold;
font-size: 38px;
-webkit-transition: all 0.2s ease 0s;
cursor: pointer;
}
#close:hover {
color: rgba(255, 255, 255, 0.85);
}
#logmsk {
position: absolute;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.32);
box-shadow: inset 0 0 376px rgba(0, 0, 0, 0.22);
z-index: 9999;
display: none;
}
body {
width: 100%;
height: 100%;
min-width: 300px;
min-height: 500px;
overflow: hidden;
margin: 0;
padding: 0;
position: absolute;
background: #fff;
color: #333;
}
#huser {
line-height: 60px;
position: absolute;
right: 20px;
margin-right: 42px;
font-size: 14px;
color: #AFAFAF;
float: left;
cursor: pointer;
}
body,input,select,td,textarea {
font-family: "Open Sans",sans-serif;
}
#header {
font: 13px/27px;
position: relative;
height: 60px;
width: 100%;
background: #f1f1f1;
white-space: nowrap;
display: -webkit-flex;
display: flex;
margin-left: 0!important;
margin-right: 0!important;
}
#header::before {
background: #e5e5e5;
bottom: 0;
content: '';
display: block;
height: 1px;
left: 0;
position: absolute;
right: 0;
}
#logo {
max-width: 202px;
min-width: 202px;
overflow: hidden;
position: relative;
z-index: 987;
display: inline-block;
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
margin-left: 0!important;
margin-right: 0!important;
height: 60px;
line-height: 58px;
vertical-align: middle;
text-indent: 10px;
font-family: Fascinate,cursive;
color: #868686;
font-size: 21px;
cursor: default;
}
#search {
position: relative;
width: 650px;
z-index: 986;
display: inline-block;
margin-left: 0!important;
margin-right: 0!important;
min-width: 200px;
-webkit-flex: 0 2 auto;
flex: 0 2 auto;
height: 60px;
line-height: 58px;
vertical-align: middle;
padding: 0 30px;
}
#logoin {
position: relative;
padding: 0 30px;
line-height: 60px;
font-size: 20px;
font-weight: 400;
text-align: center;
font-family: Fascinate,cursive;
color: #757575;
float: left;
}
#swrapi {
padding-top: 14px;
}
#wraps1 {
float: left;
width: 560px;
vertical-align: top;
background: #fff;
background-clip: padding-box;
height: 30px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid #b9b9b9;
border-right-width: 0;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
border-color: #a9a9a9;
border-color: rgba(0,0,0,.3);
position: relative;
}
#login {
color: #fff;
margin-top: 9px;
display: block;
height: 40px;
width: 40px;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
-ms-border-radius: 40px;
-o-border-radius: 40px;
border-radius: 40px;
-webkit-transition: all .05s;
-moz-transition: all .05s;
-o-transition: all .05s;
transition: all .05s;
background-color: #FFF;
position: absolute;
right: 12px;
cursor: pointer;
}
#login:hover {
background: 0 0;
}
#login span {
display: block;
text-indent: -999em;
position: relative;
margin: 0 auto;
text-align: center;
top: 14px;
height: 12px;
width: 12px;
background-position: 0 -273px;
background-repeat: no-repeat;
}
#dialog {
display: none;
}
#close {
display: none;
}
sIGN UP PAGE
<html>
<body>
<form tag="Create Logon">
<div align="center">
Username *: <input type="username" name="username" />
Passwd *: <input type="passwd" name="pwd" />
Email *: <input type="email" name="email" />
RE-ENTER Email*: <input type="email" name="email" />
<input type="creat account" value="creat account" />
</div>
</form>
css code
<!doctype html>
<html>
<head>
<style type="text/css">
#container {width:300px; margin:0 auto;}
form label {display:inline-block; width:140px;}
form input[type="text"],
form input[type="passwd"],
form input[type="email"] {width:160px;}
form .line.creat{text-align:right;}
</style>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.