code
<!DOCTYPE html>
<html>
<head>
<style>
@import url('https://fonts.googleapis.com/css?family=Dancing+Script|Lato');
:root{
--primaryred:#ff424f;
--secondaryred:#f84735;
--lightblack:#222b31;
--darkblack:#191c1f;
--mainfont:'Dancing Script', cursive;
--secondfont: 'Lato', sans-serif;
}
body{
margin: 0;
padding: 0;
font-size: 16px;
line-height: 1.5;
font-family:var(--secondfont);
}
*,*:before,*:after{
box-sizing: border-box;
}
img{
max-width: 100%;
height: auto;
}
.fullcontent{
width:100%;
min-height: 100vh;
height: auto;
padding:6% 10% 5% 10%;
background-image: url(img/b.jpg);
background:linear-gradient(rgba(0, 0, 0, 0.70), rgba(0, 0, 0, 0.70)),url(https://raw.githubusercontent.com/Poojavpatel/BookStoreApp/master/img/b.jpg);
background-size: cover;
background-position: 50% 50%;
display: flex;
flex-direction: row;
}
.headings{
/* background:red; */
flex-basis: 65%;
margin-right: 5%;
}
.headings h1{
font-size: 4rem;
font-family:var(--mainfont);
color:white;
margin:3% 0% 3% 0%;
}
.headings h2{
font-size:1.2rem;
font-weight: 300;
color: rgba(255, 255, 255, 0.5);
}
.formbox{
background:rgb(34,43,49,0.7);
color:white;
flex-basis: 35%;
border-top: 10px solid var(--secondaryred);
padding:2% 3%;
}
.formbox *{
margin: 0;
}
.formbox h3{
font-family: var(--mainfont);
font-size: 1.5rem;
margin-bottom: 1rem;
}
.formbox form label{
color: rgba(255, 255, 255, 0.8);
display: inline-block;
max-width: 100%;
margin-bottom: 0.3rem;
}
.formbox form .asd{
border: 2px solid rgba(255, 255, 255, 0.2);
box-shadow: none;
background: transparent;
height: 2.8rem;
display: block;
width: 100%;
border-radius: 4px;
margin-bottom: 1rem;
}
form .mainbox{
color: white;
box-shadow: none;
background: var(--secondaryred);
height: 2.8rem;
display: block;
width: 100%;
border-radius: 4px;
margin-bottom: 10px;
text-align: center;
text-decoration: none;
border: none;
}
a .mainbox{
margin: 0;
padding: 2%;
}
</style>
</head>
<body>
<div class="fullcontent">
<div class="headings">
<h1>My Book Store</h1>
<h2>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem minima libero, quisquam voluptates reprehenderit quia! Sit vel vero officiis doloribus?Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat ea nisi facere earum optio eos dolorum ipsam, quae nemo incidunt!</h2>
</div>
<div class="formbox">
<h3>Log In</h3>
<form id="form" action="" method="post">
<label for="">Username</label>
<input type="text" name="username" class="asd"/>
<label for="">Password</label>
<input type="password" id="" name="password" class="asd"/>
<input id="btn" type="submit" name="submit" value="Log In" class="mainbox">
<label for="">New customer?</label>
<a href="register.html" class="mainbox">Register Now</a>
</form>
</div>
</div>
</body>
</html>
website
https://themewagon.github.io/furnish/