Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
110 changes: 110 additions & 0 deletions styles.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
body {
background-image: url('20251214112137_939eaa292972f81dc750c6c39f8d425dc5609958.png');
background-size: cover;
font-family: Arial;
margin: 0;
padding: 0;
}

.container {
display: flex;
height: 100vh;
width: 100vw;
align-items: center;
}

.web_title {
width: 50vw;
flex-direction: column;
justify-content: center;
padding-left: 5vw;
}

.web_title h1 {
color: rgb(0, 65, 96);
font-size: 2.2rem;
}

.title-line {
width: 36.5vw;
height: 2px;
background-color: rgb(0, 65, 96);
}
Comment on lines +28 to +32

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you can use ::after or a border line to replace


.web_title h2 {
color: rgb(0, 65, 96);
font-size: 1.3rem;
font-weight: 300;
width: 36vw;

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

no need width for an block displayed element

}

.sign_form {
width: 50vw;
padding: 1.25rem;
}

form {
background: white;
width: 30vw;
border-radius: 12px;
box-shadow: 0 0 20px rgba(0,0,0,0.1);
padding: 2.5rem;
}

form h1 {
font-size: 2.2rem;
color: rgb(70, 70, 70);
text-align: center;
}

form h2 {
font-size: 1.2rem;
color: rgb(70, 70, 70);
font-weight: 300;
text-align: center;
margin-bottom: 2rem;
}

.form_group label {
display: block;
margin-bottom: 0.5rem;
color: rgb(70, 70, 70);
font-size: 1.2rem;
font-weight: 300;
width: 36vw;
}

.form_group input {
box-sizing: border-box;
padding: 0.7rem 0.9rem;
border-radius: 6px;
border: 1px solid rgb(209, 213, 219);
font-size: 1.2rem;
margin-bottom: 2rem;
width: 100%;
}

.sign_button {
width: 100%;
height: 6vh;
border-radius: 12px;
background-color: rgb(2, 119, 175);
color: rgb(255, 255, 255);
font-size: 1.2rem;
font-weight: 300;
border: none;
}

p {
text-align: center;
font-size: 1.2rem;
font-weight: 300;
color: rgb(70, 70, 70);
margin-top: 1.2rem;
}

p a {
color: rgb(2, 119, 175);
text-decoration: none;
}

53 changes: 53 additions & 0 deletions w1.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>week1</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
<div class="container">
<div class="web_title">
<h1>
Welcome to Plaint Quote System
</h1>
<div class="title-line"></div>
<h2>
Consequat adipising ea do labore irure adipiscing
occaecat cuidatat excepteur duis mo
</h2>
</div>

<div class="sign_form">
<form>
<h1>
Sign Up
</h1>
<h2>
Enter details to create your account
</h2>
<div class="form_group">
<label for="name">Your name</label>
<input type="text" id="name" name="name" placeholder="Enter your name">
</div>
<div class="form_group">
<label for="number">Phone number</label>
<input type="text" id="number" name="number" placeholder="Enter your phone number">
</div>
<div class="form_group">
<label for="account">Dulux account</label>
<input type="text" id="account" name="account" placeholder="Enter your Dulux account">
<div>
<button class="sign_button">
Sign up
</button>
</div>
<p>Already have an account? <a href="#">Sign in</a></p>
</div>
Comment on lines +39 to +48

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

opening tag and closing tag is not matched

</form>
</div>
</div>
</body>
</html>