<!DOCTYPE html>
This is the declaration of the document type, which specifies that this is an HTML5 document.
<html lang="en">
This is the opening tag for the HTML document and sets the default language of the document to English.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign Up</title>
<style>
...
</style>
</head>
These lines define the head section of the HTML document and include meta tags for character encoding and responsive design, as well as the title of the page. The head section also includes CSS code for styling the HTML document.
* {
box-sizing: border-box;
}
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}The * selector sets the box-sizing property of all elements to border-box. This makes sure that the specified width and height of an element includes the padding and border.
The body selector sets the background color of the page to a light grey (#f2f2f2), uses the Arial font (or a sans-serif fallback), and sets the margin and padding to 0.
.container {
width: 100%;
background-color: white;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
margin: 20px auto;
max-width: 850px;
text-align: center;
display: flex;
flex-direction: row;
flex-wrap: wrap-reverse
}The .container class applies styles to the container element that holds the form. It sets the background color to white, gives it rounded corners with a radius of 10px, adds a box-shadow to give it depth, and sets a margin of 20px on the top and bottom and auto on the left and right to center it horizontally. The max-width property sets the maximum width of the container to 850px. The display property is set to flex to enable flexbox layout.
flex-direction is set to row to arrange the child elements horizontally.
flex-wrap is set to wrap-reverse to wrap the child elements to a new line, starting from the bottom to the top.
.singup-and-image{
width:50%;
padding:10px
}The .singup-and-image class sets the width of the element to 50% of its parent container and adds padding of 10px on all sides.
@media (max-width: 800px) {
.singup-and-image{
width:100%
}
}This media query applies when the screen size is smaller than 800px. The .singup-and-image class is modified to take up 100% of the parent container to fit on smaller screens.
h1 {
color: #282a35;
font-size: 2rem;
font-weight: bold;
margin-bottom: 20px;
}The h1 selector sets the color to a dark grey (#282a35), sets the font size to 2rem, sets the font weight to bold, and adds a bottom margin of 20px.
form {
display: flex;
flex-direction: column;
text-align: left;
}The form selector sets the display property to flex and the flex-direction to column, which stacks the form elements vertically. The text-align is set to left to align the labels and inputs to the left side.
label {
color: #121010d4;
font-size: 0.9rem;
margin-bottom: 5px;
}The label selector sets the color to a dark grey (#121010d4), sets the font size to 0.9rem, and adds margin to bottom to 5px.
input[type="text"],
input[type="email"],
input[type="password"] {
background-color: #f9f9f9;
border: none;
border-radius: 5px;
box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.1);
color: #333;
font-size: 1.1rem;
margin-bottom: 20px;
padding: 10px;
width: 100%;
}This block of code styles the input fields for the form. It selects all input fields of type “text,” “email,” and “password” and applies the following CSS properties:
background-color: sets the background color of the input field to #f9f9f9
border: removes the border of the input field
border-radius: rounds the corners of the input field with a radius of 5 pixels
box-shadow: adds a shadow effect to the input field
color: sets the text color of the input field to #333
font-size: sets the font size of the input field to 1.1 rem
margin-bottom: sets the bottom margin of the input field to 20 pixels
padding: adds padding to the input field
width: sets the width of the input field to 100%
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus {
box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.2);
outline: none;
}This block of code styles the input fields when they are in focus. It selects all input fields of type “text,” “email,” and “password” that are currently in focus and applies the following CSS properties:
box-shadow: adds a stronger shadow effect to the input field when it is in focus, outline: removes the default outline that appears around the input field when it is in focus
button {
background-color: #d90073c4;
border: none;
border-radius: 5px;
color: white;
cursor: pointer;
font-size: 1.1rem;
font-weight: bold;
margin-top: 20px;
padding: 10px;
transition: all 0.3s;
width: 100%;
}This block of code styles the button element. It applies the following CSS properties:
background-color: sets the background color of the button to #d90073c4
border: removes the border of the button
border-radius: rounds the corners of the button with a radius of 5 pixels
color: sets the text color of the button to white
cursor: changes the cursor to a pointer when the button is hovered over
font-size: sets the font size of the button to 1.1rem
font-weight: sets the font weight of the button to bold
margin-top: sets the top margin of the button to 20 pixels
padding: adds padding to the button
transition: adds a transition effect to all CSS properties with a duration of 0.3 seconds
width: sets the width of the button to 100%
button:hover {
background-color: #d90073;
}This block of code styles the button element when it is hovered over. It changes the background color of the button
.or-divider {
justify-content: center;
color: #666;
display: flex;
font-size: 1.1rem;
font-weight: bold;
margin: 20px 0;
position: relative;
}This block sets styles for the div with class “or-divider”. It centers the contents of the div, sets the font color to #666 (dark gray), sets the font size to 1.1rem, sets the font weight to bold, adds a margin of 20px on the top and bottom, sets the position to relative.
.or-divider::before,
.or-divider::after {
background-color: #666;
content: "";
height: 1px;
position: absolute;
top: 50%;
width: calc(50% - 10px);
}This block sets styles for the pseudo-elements before and after of the div with class “or-divider”. It sets the background color to #666, creates an empty content attribute, sets the height to 1 pixel, sets the position to absolute, sets the top position to 50%, and sets the width to 50% minus 10 pixels.
.or-divider::before {
right: 0;
}
This block positions the pseudo-element before the div with class “or-divider” to the right of the div.
.or-divider::after {
left: 0;
}
This block positions the pseudo-element after the div with class “or-divider” to the left of the div.
.social-buttons {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 100%;
margin-top: 20
}
This block sets styles for the div with class “social-buttons”. It sets the display to flex, sets the flex direction to row, aligns items to the center, justifies content to the center, sets the width to 100%, and adds a margin of 20 on the top.
.social-buttons button {
background-color: white;
border: 1px solid #ccc;
border-radius: 5px;
color: #333;
cursor: pointer;
font-size: 1.1rem;
font-weight: bold;
margin: 0 10px;
padding: 10px;
transition: all 0.3s;
width: 100px;
}
This block sets styles for the buttons within the div with class “social-buttons”. It sets the background color to white, sets the border to 1 pixel solid with color #ccc, adds a border radius of 5 pixels, sets the font color to #333, sets the cursor to pointer, sets the font size to 1.1rem, sets the font weight to bold, adds a margin of 0 pixels on the left and right and 10 pixels on the top and bottom, adds padding of 10 pixels, sets a transition for all properties with a duration of 0.3 seconds, and sets the width to 100 pixels.
.social-buttons button:hover {
background-color: #eee;
border-color: #bbb;
color: #111;
}This block sets styles for the buttons within the div with class “social-buttons” when the user hovers over them. It sets the background color to #eee, sets the border color to #bbb, and sets the font color to #111.
.footer a {
color: #007bff;
text-decoration: none;
}
.footer a: This block selects all anchor tags a that are descendants of elements with the class “footer” (). It sets the color of the anchor text to #007bff (a shade of blue) and removes the underline from the text by setting text-decoration to none.
@media screen and (max-width: 600px) {
.container {
padding: 30px;
}
h1 {
font-size: 1.5rem;
}
button {
font-size: 1rem;
}
}
media screen and (max-width: 600px): This is a media query that targets screens with a maximum width of 600 pixels. The styles within this block will be applied only when the screen size is equal to or smaller than 600px. .container: This block selects the container element () and sets its padding to 30 pixels. This will add some space between the content and the edges of the container when viewed on a small screen.
h1: This block selects all tags and reduces their font size to 1.5rem (15px). This will make the heading text smaller and more readable on smaller screens.
button: This block selects all tags and reduces their font size to 1rem (10px). This will make the buttons smaller and easier to tap on a small screen.
<body>
<div class="container">
<div class="singup-and-image">
<h1>Sign Up</h1>
<form>
<label for="name">Name</label>
<input type="text" id="name" name="name" required>
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
<label for="password">Password</label>
<input type="password" id="password" name="password" required>
<button type="submit">Sign Up</button>
<div class="or-divider">or</div>
<div class="social-buttons">
<button type="button">Facebook</button>
<button type="button">Google</button>
</div>
</form>
<div class="footer">
Already have an account? <a href="#">Log In</a>
</div>
</div>
<div class="singup-and-image" style="background-color:#d90073c4">
<img src="" alt="Girl in a jacket" width="100%" height="100%">
</div>
</div>
</body>
The body element contains the main content of the web page, which is wrapped in a div element with class “container”. Inside the container, there are two div elements with class “signup-and-image”. The first div contains the sign-up form, and the second div contains an image. The style attribute is used to set the background color of the second div to a pinkish color.
The sign-up form contains several elements: an h1 element with the text “Sign Up”, a form element, three label elements with the text “Name”, “Email”, and “Password”, respectively, and three input elements of type “text”, “email”, and “password”, respectively, with corresponding id and name attributes. The required attribute is used to make these fields mandatory.
A button element with the text “Sign Up” is also included in the form, which is of type “submit”. This means that when the user clicks the button, the form data will be submitted to the server for processing.
A div element with class “or-divider” is used to separate the form from the social buttons. This element contains the text “or” and is styled using the CSS code we discussed earlier.
The social buttons are contained within a div element with class “social-buttons”. This element contains two button elements with the text “Facebook” and “Google”, respectively. These buttons are styled using the CSS code we discussed earlier.
Finally, there is a div element with class “footer”, which contains a message for users who already have an account, with a link to the log-in page. The link is styled using the CSS code we discussed earlier.
Complete Code is here :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign Up</title>
<style>
* {
box-sizing: border-box;
}
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
width:100%;
background-color: white;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
margin: 20px auto;
max-width: 850px;
text-align: center;
display:flex;
flex-direction:row;
flex-wrap:wrap-reverse
}
.singup-and-image{
width:50%;
padding:10px
}
@media (max-width: 800px) {
.singup-and-image{
width:100%
}
}
h1 {
color: #282a35;
font-size: 2rem;
font-weight: bold;
margin-bottom: 20px;
}
form {
display: flex;
flex-direction: column;
text-align: left;
}
label {
color: #121010d4;
font-size: 0.9rem;
margin-bottom: 5px;
}
input[type="text"],
input[type="email"],
input[type="password"] {
background-color: #f9f9f9;
border: none;
border-radius: 5px;
box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.1);
color: #333;
font-size: 1.1rem;
margin-bottom: 20px;
padding: 10px;
width: 100%;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus {
box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.2);
outline: none;
}
button {
background-color: #d90073c4;
border: none;
border-radius: 5px;
color: white;
cursor: pointer;
font-size: 1.1rem;
font-weight: bold;
margin-top: 20px;
padding: 10px;
transition: all 0.3s;
width: 100%;
}
button:hover {
background-color: #d90073;
}
.or-divider {
justify-content: center;
color: #666;
display: flex;
font-size: 1.1rem;
font-weight: bold;
margin: 20px 0;
position: relative;
}
.or-divider::before,
.or-divider::after {
background-color: #666;
content: "";
height: 1px;
position: absolute;
top: 50%;
width: calc(50% - 10px);
}
.or-divider::before {
right: 0;
}
.or-divider::after {
left: 0;
}
.social-buttons {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 100%;
margin-top: 20
}
.social-buttons button {
background-color: white;
border: 1px solid #ccc;
border-radius: 5px;
color: #333;
cursor: pointer;
font-size: 1.1rem;
font-weight: bold;
margin: 0 10px;
padding: 10px;
transition: all 0.3s;
width: 100px;
}
.social-buttons button:hover {
background-color: #eee;
border-color: #bbb;
color: #111;
}
.footer {
color: #666;
font-size: 0.9rem;
margin-top: 20px;
}
.footer a {
color: #007bff;
text-decoration: none;
}
@media screen and (max-width: 600px) {
.container {
padding: 30px;
}
h1 {
font-size: 1.5rem;
}
button {
font-size: 1rem;
}
}
</style>
</head>
<body>
<div class="container">
<div class="singup-and-image">
<h1>Sign Up</h1>
<form>
<label for="name">Name</label>
<input type="text" id="name" name="name" required>
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
<label for="password">Password</label>
<input type="password" id="password" name="password" required>
<button type="submit">Sign Up</button>
<div class="or-divider">or</div>
<div class="social-buttons">
<button type="button">Facebook</button>
<button type="button">Google</button>
</div>
</form>
<div class="footer">
Already have an account? <a href="#">Log In</a>
</div>
</div>
<div class="singup-and-image" style="background-color:#d90073c4">
<img src="https://picsum.photos/seed/picsum/200/300
" alt="Girl in a jacket" width="100%" height="100%">
</div>
</div>
</body>
</html>