This is an example page. It’s different from a blog post because it will stay in one place and will show up in your site navigation (in most themes). Most people start with an About page that introduces them to potential site visitors. It might say something like this:
Hi there! I’m a bike messenger by day, aspiring actor by night, and this is my website. I live in Los Angeles, have a great dog named Jack, and I like piña coladas. (And gettin’ caught in the rain.)
…or something like this:
The XYZ Doohickey Company was founded in 1971, and has been providing quality doohickeys to the public ever since. Located in Gotham City, XYZ employs over 2,000 people and does all kinds of awesome things for the Gotham community.
As a new WordPress user, you should go to your dashboard to delete this page and create new pages for your content. Have fun!
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OLive Sign-In Page</title>
<style>
/* Import Google Font */
/* Import Google Font for a clean, modern look */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
/* Reset basic styles */
/* Basic reset for consistent rendering across browsers */
* {
box-sizing: border-box;
}
/* Set up the body style */
body {
/* Background image setup for a pleasant, thematic feel */
background-image: url(images/background1.png);
background-size: cover; /* This ensures the image covers the entire area */
background-position: center; /* This positions the image in the center */
background-size: cover; /* Ensures the background covers the whole page */
background-position: center; /* Keeps the image centered */
background-repeat: no-repeat; /* Prevents the image from repeating */
background-size: 100% 100%; /* Adjust width and height percentages */
font-family: 'Poppins', sans-serif;
color: #f5f5f5;
background-size: 100% 100%; /* Forces image to fit the full area */
font-family: 'Poppins', sans-serif; /* Clean, modern font */
color: #f5f5f5; /* Light text for contrast */
margin: 0;
padding: 0;
line-height: 1.6;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
line-height: 1.6; /* Improves text readability */
height: 100vh; /* Full viewport height */
display: flex; /* Flexbox centering for the form */
justify-content: center; /* Centers horizontally */
align-items: center; /* Centers vertically */
}
/* Styling for the container of the sign-in form */
.container {
background-color: #3b3b34;
background-color: #3b3b34; /* Dark background for contrast */
padding: 10px;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
border-radius: 10px; /* Softens the corners for a modern look */
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
text-align: center;
width: 90%;
max-width: 400px;
margin: 20px auto;
position: relative;
max-width: 400px; /* Limits the width to maintain readability */
margin: 20px auto; /* Adds a bit of vertical margin */
position: relative; /* Keeps its position for further styling */
}
/* Styling for the headings */
h2 {
margin: 10px 0;
margin: 10px 0; /* Consistent margin around headings */
}
/* Input fields for email, password, etc. */
input[type="email"], input[type="password"], input[type="text"] {
background-color: #FFFFFF;
width: calc(100% - 40px); /* Ensure space for the toggle icon */
background-color: #FFFFFF; /* Light background for text fields */
width: calc(100% - 40px); /* Takes into account the toggle icon size */
padding: 6px;
margin: 8px 0;
border: 1px solid #ccc;
border-radius: 10px;
font-size: 13px;
margin: 8px 0; /* Consistent spacing between fields */
border: 1px solid #ccc; /* Soft border for clarity */
border-radius: 10px; /* Matches the rounded corners of the form */
font-size: 13px; /* Ensures readability without being too large */
}
/* Label styling to improve form usability */
label {
display: block;
text-align: left;
margin-top: 10px;
display: block; /* Forces labels onto their own line */
text-align: left; /* Aligns labels to the left for a cleaner look */
margin-top: 10px; /* Adds space between labels and inputs */
font-size: 13px;
}
/* Submit button styling */
.submit-btn {
background-color: #8A9A5B ;
color: #fff;
background-color: #8A9A5B; /* Olive green color for branding */
color: #fff; /* White text for contrast */
padding: 8px;
width: 100%;
width: 100%; /* Full-width button for easy interaction */
border: none;
border-radius: 10px;
cursor: pointer;
cursor: pointer; /* Changes cursor to indicate clickability */
font-size: 14px;
margin-top: 15px;
margin-top: 15px; /* Adds space above the button */
}
/* Hover effect for the submit button */
.submit-btn:hover {
background-color: #A9BA9D;
background-color: #A9BA9D; /* Slightly lighter green on hover */
}
/* Footer styling */
.footer {
font-size: 12px;
color: #FFFFFF;
font-size: 12px; /* Smaller text for less important content */
color: #FFFFFF; /* Consistent color with the page text */
text-align: center;
margin-top: 20px;
margin-top: 20px; /* Space above the footer */
}
/* Footer link styling */
.footer a {
color: #8A9A5B ;
color: #8A9A5B; /* Matches the button color for consistency */
}
/* Password toggle container for aligning the toggle icon */
.password-toggle {
position: relative;
position: relative; /* Allows for the toggle icon positioning */
}
/* Toggle icon styling (for showing/hiding password) */
.toggle-icon {
position: absolute;
right: 27px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
color: #888;
right: 27px; /* Places the icon to the right of the input field */
top: 50%; /* Vertically centers the icon */
transform: translateY(-50%); /* Adjusts for vertical centering */
cursor: pointer; /* Indicates the icon is clickable */
color: #888; /* Subtle color to not draw too much attention */
}
/* Styling for the footer section at the bottom of the page */
.center-bottom {
position: fixed;
bottom: 0;
bottom: 0; /* Sticks to the bottom of the page */
left: 50%;
transform: translateX(-50%);
transform: translateX(-50%); /* Centers horizontally */
text-align: center;
width: 100%;
width: 100%; /* Full-width footer */
padding: 10px;
color: #FFFFFF;
color: #FFFFFF; /* Light color for readability */
font-size: 13px;
background-color: rgba(0, 0, 0, 0.7);
background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
}
</style>
</head>
<body>
<!-- Main container for the sign-in page -->
<div class="container">
<h2>Sign In</h2>
<!-- Sign-In Form -->
<form id="signin-form">
<label for="email">Email Address</label>
<!-- Input field for email -->
<input type="email" id="email" name="email" placeholder="e.g. user@olive.com" required>
<label for="password">Password</label>
<!-- Input field for password with toggle feature -->
<div class="password-toggle">
<input type="password" id="password-signin" name="password" placeholder="e.g. OLive12*" required>
<span class="toggle-icon" onclick="togglePassword('password-signin')">⬤</span>
</div>
<!-- Submit button -->
<button type="submit" class="submit-btn">Sign In</button>
</form>
<!-- Footer -->
<!-- Footer with sign-up link -->
<div class="footer">
<p>Don't have an account? <a href="signup_official.html">Sign Up</a></p>
</div>
</div>
<!-- Bottom footer section with copyright information -->
<div class="center-bottom">
Last updated October 04, 2024.
© 2024 OLive. All rights reserved.
</div>
Sign In
Last updated October 04, 2024.
© 2024 OLive. All rights reserved.