Scribd
Upload
22 views3 pages

4U

The document contains an HTML structure for an advertising login page, including a form for username and password input. It also includes CSS styles for layout and design, featuring a responsive and visually appealing interface. The page is designed with a gradient background and utilizes external font and icon libraries.

Uploaded by

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

4U

The document contains an HTML structure for an advertising login page, including a form for username and password input. It also includes CSS styles for layout and design, featuring a responsive and visually appealing interface. The page is designed with a gradient background and utilizes external font and icon libraries.

Uploaded by

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

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="adslogin.css">
<link rel="stylesheet"
href="https://unpkg.com/boxicons@latest/css/boxicons.min.css">

<link
href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css"
rel="stylesheet"/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?
family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,10
0;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
</head>
<body>
<section>
<div class="wrapper">
<div class="left">
<div class="logo">
<img src="https://i.ibb.co/q3kR944/logo.png" alt="logo">
</div>
<h1>Advertising Login</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

<div class="right">
<h1>Advertising Login</h1>
<form action="">
<div class="input-field">
<input type="text" placeholder="Username">
<i class="bx bx-user"></i>
</div>
<div class="input-field">
<input type="password" placeholder="Password">
<i class="bx bx-lock"></i>
</div>
<div class="input-button">
<button class="btn">Sign In</button>
</div>
</form>
<p class="forgot-password">Forgot Password?</p>
</div>
</div>

</section>
</body>
</html>

CSSS

*{
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
font-family: "Poppins", serif;
}
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(to right, #1abc9c, #3498db);
color: #fff;
}
section{
width: 100%;
max-width: 600px;
padding: 20px;
background: #fff;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
transition: all 0.3s ease;
display: flex;
justify-content: center;
align-items: center;

}
.wrapper{
/* padding: 20px; */
background: #f2f2f2;
margin-bottom: 40px;
border-radius: 10px;
/* box-shadow: 0 2px 10px rgba(0,0,0,0.1); */
transition: all 0.3s ease;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
max-width: 960px;
margin: 0 auto;
}

section h1{
font-size: 2rem;
margin-bottom: 20px;
}

section p{
font-size: 1.2rem;
margin-bottom: 20px;
}

.left{
flex: 1;
padding: 20px;
background-image:url(images/bankpic.jpg) ;
background-position: center;
background-size: cover;
border-radius: 5px;
height: 60vh;
}

.right{
width: 100%;
height: 60vh;
flex: 1;
background: #292424;
border-radius: 5px;
text-align: center;
}

You might also like