index.html and styles.css with better structure, readability, and some adjustments for consistency:
Updated index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Design - Log In</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<!-- jQuery, Popper.js, and Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<!-- Font Awesome Icons -->
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<!-- Custom Stylesheet -->
<link rel="stylesheet" href="styles.css">
</head>
<body style="color: wheat;">
<div class="container my-5 px-0 z-depth-1">
<!-- Section: Content -->
<section class="p-5 my-md-5 text-center"
style="background-image: url(https://wallpapertag.com/wallpaper/full/1/e/4/411166-nature-hd-wallpapers-1080p-1920x1080-for-mac.jpg); background-size: cover; background-position: center center;" width="100%">
<div class="row">
<div class="col-md-6 mx-auto">
<!-- Material Form Login -->
<div class="card">
<!-- Card content -->
<div class="card-body">
<!-- Form -->
<form class="text-center" style="color: #757575;" action="#!">
<h3 class="font-weight-bold my-4 pb-2 text-center dark-grey-text">Log In</h3>
<!-- Email -->
<input type="email" id="email" class="form-control mb-4" placeholder="Email" required>
<!-- Password -->
<input type="password" id="password" class="form-control mb-4" placeholder="Password" required>
<!-- Password recovery link -->
<small id="passwordHelpBlock" class="form-text text-right blue-text">
<a href="#">Recover Password</a>
</small>
<!-- Submit Button -->
<div class="text-center">
<button type="submit" class="btn btn-outline-orange btn-rounded my-4 waves-effect">Login</button>
</div>
</form>
<!-- End of Form -->
</div>
</div>
<!-- End of Material Form Login -->
</div>
</div>
</section>
<!-- End of Section: Content -->
</div>
</body>
</html>
Updated styles.css:
/* Button styling */
.btn[class*="btn-outline-"] {
padding-top: .7rem;
padding-bottom: .7rem;
}
.btn-rounded {
border-radius: 10em;
}
/* Outline Orange Button */
.btn-outline-orange {
color: #f57c00 !important;
background-color: transparent !important;
border: 2px solid #f57c00 !important;
}
/* General Button Style */
.btn {
margin: .375rem;
color: inherit;
text-transform: uppercase;
word-wrap: break-word;
white-space: normal;
cursor: pointer;
border: 0;
border-radius: 20px;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
padding: .84rem 2.14rem;
font-size: .81rem;
}
/* Input field styling */
.form-control {
border-radius: 1px !important;
}
/* Focused input field border styling */
input:focus, textarea:focus {
box-shadow: none !important;
border: 1px solid #D500F9 !important;
outline-width: 0;
border-bottom: 2px solid red !important;
font-weight: 400;
}
/* Background styling for section */
section {
background-size: cover;
background-position: center center;
width: 100%;
}
/* Card Styles */
.card {
border: none;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.16), 0 2px 10px rgba(0, 0, 0, 0.12);
}
/* Section padding and margin adjustments */
.p-5, .my-md-5 {
padding: 3rem;
margin-top: 5rem;
margin-bottom: 5rem;
}
/* Font weight and color for text */
.font-weight-bold {
font-weight: 700;
}
.text-center {
text-align: center;
}
/* Small text color */
.small {
font-size: 0.875rem;
}
Key Changes:
-
HTML Structure:
-
Simplified and organized the HTML structure with clear comments and proper indentation for better readability.
-
Removed the redundant form tag.
-
-
CSS Refinement:
-
Refined the button styles to include consistent padding, font sizes, and border radius for rounded buttons.
-
Styled the input fields to include a focus effect with a different color, making the user interaction clearer.
-
Enhanced background image styling for the section with proper background size and positioning.
-
