Scribd
Upload
9 views7 pages

Webpage Design Submission

Uploaded by

Akhilesh Chaudhary
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
9 views7 pages

Webpage Design Submission

Uploaded by

Akhilesh Chaudhary
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

Webpage Design Submission

<h3>HTML</h3>

<pre>

&lt;!DOCTYPE html&gt;

&lt;html lang="en"&gt;

&lt;head&gt;

&lt;meta charset="UTF-8"&gt;

&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;

&lt;title&gt;Login Page&lt;/title&gt;

&lt;link rel="stylesheet" href="styles.css"&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;div class="container"&gt;

&lt;div class="left-section"&gt;

&lt;img src="illustration.png" alt="Illustration"&gt;

&lt;/div&gt;

&lt;div class="right-section"&gt;

&lt;h2&gt;LOGIN&lt;/h2&gt;

&lt;form action="#" method="post"&gt;

&lt;label for="username"&gt;Username&lt;/label&gt;

&lt;input type="text" id="username" name="username" placeholder="Enter Username here"&gt;

&lt;label for="password"&gt;Password&lt;/label&gt;

&lt;input type="password" id="password" name="password" placeholder="Enter Password here"&gt;

&lt;div class="remember-me"&gt;

&lt;input type="checkbox" id="rememberMe" name="rememberMe"&gt;


&lt;label for="rememberMe"&gt;Remember Me&lt;/label&gt;

&lt;/div&gt;

&lt;button type="submit"&gt;Login&lt;/button&gt;

&lt;div class="signup"&gt;

&lt;p&gt;Not a member? &lt;a href="#"&gt;Signup Now&lt;/a&gt;&lt;/p&gt;

&lt;/div&gt;

&lt;div class="social-login"&gt;

&lt;p&gt;Logar com&lt;/p&gt;

&lt;div class="social-icons"&gt;

&lt;img

src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAIAAADTED8xAAABtElEQVR42u3RAQ0

AAAjDMO5fN4AAkFBIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA...
<h3>CSS</h3>

<pre>

body {

margin: 0;

font-family: Arial, sans-serif;

background: linear-gradient(to right, #dbeaf8, #dbeaf8);

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

.container {

display: flex;

background-color: white;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

border-radius: 10px;

overflow: hidden;

.left {

flex: 1;

.left img {
width: 100%;

height: 100%;

.right {

flex: 1;

padding: 40px;

display: flex;

flex-direction: column;

justify-content: center;

.right h2 {

text-align: center;

h2 {

margin: 0 0 20px;

.input-container {

margin-bottom: 15px;

label {

display: block;
margin-bottom: 5px;

font-weight: bold;

input[type="text"], input[type="password"] {

width: calc(100% - 20px);

padding: 10px;

margin-bottom: 10px;

border: 1px solid #ccc;

border-radius: 5px;

.remember-me {

display: flex;

align-items: center;

margin-bottom: 20px;

.remember-me input {

margin-right: 10px;

button {

padding: 10px 20px;

width: 100%;

background-color: #007bff;
color: white;

border: none;

border-radius: 5px;

cursor: pointer;

button:hover {

background-color: #0056b3;

.signup {

text-align: center;

margin-top: 20px;

.signup a {

color: #007bff;

text-decoration: none;

.signup a:hover {

text-decoration: underline;

.social-login {

margin-top: 20px;
text-align: center;

.social-login p {

margin: 0;

.social-icons {

display: flex;

justify-content: center;

gap: 15px;

margin-top: 10px;

.social-icons img {

width: 30px;

height: 30px;

cursor: pointer;

</pre>

You might also like