Welcome to Lakeland Community College Student Services Online Lakeland Community
ID: 657276 • 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 Low 93-568 . Desktop User Experience (Width > 320 px) Must Follow mockup for Layout! Body: 520px Width Calibri 12 px regular Header : Cambria 16 px bold Left Aligned Paragraph Below header: Callibri 12 px 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 in tact, 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
css:
body {
width:520px;
font: regular 12px calibri, serif;
}
h1 {
font: bold 16px cambria, serif;
text-align: left;
}
p.p1
{
font: italic 16px cambria, serif;
text-align: left;
}
hr
{
color:blue;
}
.myButton {
background-color:#44c767;
-moz-border-radius:28px;
-webkit-border-radius:28px;
border-radius:28px;
border:1px solid #18ab29;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:17px;
padding:16px 31px;
text-decoration:none;
text-shadow:0px 1px 0px #2f6627;
}
.myButton:hover {
background-color:#5cbf2a;
}
.myButton:active {
position:relative;
top:1px;
}
<style type="text/css">
.form-style-9{
max-width: 450px;
background: #FAFAFA;
padding: 30px;
margin: 50px auto;
box-shadow: 1px 1px 25px rgba(0, 0, 0, 0.35);
border-radius: 10px;
border: 6px solid #305A72;
}
.form-style-9 ul{
padding:0;
margin:0;
list-style:none;
}
.form-style-9 ul li{
display: block;
margin-bottom: 10px;
min-height: 35px;
}
.form-style-9 ul li .field-style{
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
padding: 8px;
outline: none;
border: 1px solid #B0CFE0;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
}.form-style-9 ul li .field-style:focus{
list-style-type: none;
box-shadow: 0 0 5px #B0CFE0;
border:1px solid #B0CFE0;
}
.form-style-9 ul li .field-split{
width: 49%;
}
.form-style-9 ul li .field-full{
width: 100%;
}
.form-style-9 ul li input.align-left{
float:left;
}
.form-style-9 ul li input.align-right{
float:right;
}
.form-style-9 ul li textarea{
width: 100%;
height: 100px;
}
.form-style-9 ul li input[type="button"],
.form-style-9 ul li input[type="submit"] {
-moz-box-shadow: inset 0px 1px 0px 0px #3985B1;
-webkit-box-shadow: inset 0px 1px 0px 0px #3985B1;
box-shadow: inset 0px 1px 0px 0px #3985B1;
background-color: #216288;
border: 1px solid #17445E;
display: inline-block;
cursor: pointer;
color: #FFFFFF;
padding: 8px 18px;
text-decoration: none;
font: 12px Arial, Helvetica, sans-serif;
}
.form-style-9 ul li input[type="button"]:hover,
.form-style-9 ul li input[type="submit"]:hover {
background: linear-gradient(to bottom, #2D77A2 5%, #337DA8 100%);
background-color: #28739E;
}
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="mystyle.css">
<title>Lakeland Community College</title>
</head>
<body>
<h1>Welcome to Lakeland Community College Student Services Online</h1>
<p class="p1">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</p>
<form action="action_page.php" method="POST">
<label>Already hava an account with us?
Returning users may log in by entering
their site username and password.</label>
<form class="form-style-9">
<ul>
<li>
<br>Username:<br>
<input type="text" name="user_name">
<br>
Password:<br>
<input type="password" name="lastname">
<br><br>
<a href="#" class="myButton">Log In</a>
</li>
<li>
<hr>
New users, please create a new account by providing us with some basic information.
</li>
<li>
<br>Username:<br>
<input type="text" name="user_name">
<br>
Password:<br>
<input type="password" name="lastname">
<br><br>
E-mail address:
<input type="text" name="email">
<br><br>
Repeat E-mail address:
<input type="text" name="repeatemail">
<br>
<br>
<a href="#" class="myButton">Create account</a></li>
</ul>
</form>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.