Starting a web-server project recently, my expertise lies in back-end code. I am still learning CSS and HTML, and struggling to position the bank logo and label closer together - "Maze Bank of Los-Santos." Despite researching extensively, I find it challenging to understand how properties like position, width, display, margin, top, right, or left work consistently.
Here is a snapshot of my current website: https://i.sstatic.net/7Hokb.jpg
Snippet from my index code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="/static/style2.css">
<title>Maze bank - Log In</title>
<link rel="icon" href="https://i.ibb.co/hm8Fz83/bank.png">
<link href="https://fonts.googleapis.com/css?family=Teko&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Anton&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Calistoga&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Teko&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Anton&display=swap" rel="stylesheet">
</head>
<body>
<br>
<img src="https://i.ibb.co/hm8Fz83/bank.png"></img>
<p><span style="color:white">Maze Bank Of </span>Los-Santos</p>
<form action="http://127.0.0.1:8080/api/test?category=computers" method="POST" target="_blank">
<div class="login-box">
<div class="textbox">
<i class="fa fa-credit-card" aria-hidden="true"></i>
<input type="password" placeholder="Bill Number" name="bill" value="" maxlength="15" minlength="15" >
</div>
<div class="textbox">
<i class="fa fa-key" aria-hidden="true"></i>
<input type="password" placeholder="Pincode" name="pin" value="" maxlength="4" minlength="4">
</div>
<button class="link">Forgot password ?</button>
<input class="btn" type="submit" name="" value="Log in">
</form>
</div>
<div class="copyright">
<h4>©™ 2019 Copyright All Rights Reserved</h4>
</div>
</body>
</html>**strong text**
My CSS Code:
@import "https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";
p{
display:block;
color: #2ECC71;
font-family: 'Teko', sans-serif;
font-size: 50px;
text-align: center;
font-weight: bold;
border-block: 2px solid black;
text-shadow: 2px 2px #1a1111;
}
p:first-letter{
display:block;
/*adjust the letter position for best appearance*/
margin:4px 4px 0 5px!important;
/*set font family color and size*/
color:#2ECC71;
font-size:1.5em;
font-family: 'Teko', sans-serif;
}
img{
display: block;
margin-left: auto;
margin-right: auto;
width: 150px;
}
html, body{
margin: auto;
background: white;
background: url(https://external-preview.redd.it/ar2z7yTm97BFzRtPJXWA_twAbm-DlDKUt3mS0R8aJtY.png?auto=webp&s=c965a508182b77fbdec96dd82d6ed224a3b17543) no-repeat fixed center;
}
.logo{
font-family: fantasy;
}
.login-box{
width: 280px;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
.textbox{
width: 100%;
overflow: hidden;
font-size: 20px;
padding: 8px 0;
margin: 8px 0;
border-bottom: 1px solid #e16a74;
}
.textbox i {
width: 26px;
float: left;
text-align: center;
}
.textbox input{
border: none;
outline: none;
background: none;
color: white;
font-size: 18px;
float: left;
width: 80%;
margin: 0 10px;
}
.btn{
width: 100%;
background: #e16a74;
border: 2px solid #e16a74;
margin: 12px 0 ;
cursor: pointer;
font-size: 18px;
padding: 5px;
color: white;
}
.btn {border-radius: 12px;}
.copyright {
position: absolute;
width: 100%;
color: #fff;
line-height: 40px;
bottom:0;
}
.copyright h4{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 10;
text-align: center;
}
.login-box button.link
{
background:none;
border:none;
color: wheat;
font-family: 'Teko', sans-serif;
font-weight: normal;
font-size: 20px;
position:relative;
bottom:1000%;
left:55%;
}