UI/css/user-signup-in.css
body {
font-family: 'Open Sans', sans-serif;
font-weight: 300;
letter-spacing: 0.05em;
margin: 0 !important;
}
#wrapper {
display: flex;
background: #fff;
min-height: 100vh;
flex-direction: column;
width: 100%;
}
.header-main,
.footer-main {
height: 60px;
width: 100%;
background: #8a1162;
}
.header-main .nav-main {
display: flex;
flex-wrap: wrap;
padding: 0;
}
.nav li {
float: right;
}
.nav #logo {
float: left;
margin: 0 auto;
}
.nav a {
text-decoration: none;
color: #fff;
font-size: 90%;
}
.nav a:hover {
background-color: rgb(14, 2, 2);
}
li {
list-style: none;
text-transform: capitalize;
font-size: 1.7em;
margin-right: 10px;
}
main {
flex: 1;
background: url('../images/black-car-car-fancy-104401.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
width: 100%;
height: 80vh;
position: relative;
}
#signup {
color: #231313;
margin: 0;
padding: 0;
text-align: center;
font-size: 1.5em
}
.signup-container {
display: flex;
flex-direction: column;
background: rgb(245, 224, 236);
width: 80%;
margin: 0 auto;
margin-top: 2em;
padding: 0em 1em 1em 1em;
border-radius: 10px;
}
.signup-container p {
margin: 0 auto;
padding: 0.3em 0 0.3em 0;
font-size: 1em;
}
.signup-container p a {
margin: 0 auto;
font-size: 1.3em;
font-weight: bold;
text-decoration: none;
color: black;
border: 2px;
background: #f07ec4;
padding: 0 0.5em;
border-radius: 5px;
}
.signup-container span {
margin: 1em;
}
.signin-container {
display: flex;
flex-direction: column;
background: rgb(245, 224, 236);
width: 80%;
margin: 0 auto;
margin-top: 5em;
padding: 0em 1em 1em 1em;
border-radius: 10px;
}
#signin {
color: #231313;
margin: 0;
padding-top: 0.5em;
text-align: center;
}
.signin-container p {
margin: 0 auto;
padding-bottom: 0.5em;
}
.signin-container p a {
margin: 0 auto;
font-size: 1.3em;
font-weight: bold;
text-decoration: none;
color: black;
border: 2px;
background: #f07ec4;
padding: 0 0.5em;
border-radius: 5px;
}
.signin-container span {
margin: 0.5em;
}
input[type=text],
input[type=email],
input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
label {
font-weight: bold;
}
/* Style the submit button */
input[type=submit] {
width: 100%;
background-color: rgb(121, 25, 89);
color: #fff;
padding: 0.5em;
margin: 0 auto;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 1.5em;
text-align: center;
}
/* Add a background color to the submit button on mouse-over */
input[type=submit]:hover {
background-color: #f07ec4;
}
.footer-main {
margin: 0;
display: flex;
}
.footer-main p {
margin: 0 auto;
color: white;
padding: 1em;
font-size: 1em;
}
@media screen and (min-width: 500px) {
.signup-container {
display: flex;
flex-direction: column;
background: rgb(245, 224, 236);
width: 60vh;
height: 70vh;
margin: 0 auto;
margin-top: 2em;
padding: 1em 1em 1em 1em;
border-radius: 10px;
}
.signin-container {
display: flex;
flex-direction: column;
background: rgb(245, 224, 236);
width: 60vh;
height: 50vh;
margin: 0 auto;
margin-top: 6em;
padding: 1em 1em 1em 1em;
border-radius: 10px;
}
nav a {
margin-right: 2em;
}
}