1.index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Webdesign</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<!-- link css -->
<link rel="stylesheet" href="styles.css">
</head>
<body style="color: wheat;">
<div class="container my-5 px-0 z-depth-1">
<!--Section: Content-->
<section class="p-5 my-md-5 text-center"
style="background-image: url(https://wallpapertag.com/wallpaper/full/1/e/4/411166-nature-hd-wallpapers-1080p-1920x1080-for-mac.jpg); background-size: cover; background-position: center center;" width="100%">
<form class="my-5 mx-md-5" action="">
<div class="row">
<div class="col-md-6 mx-auto">
<!-- Material form login -->
<div class="card">
<!--Card content-->
<div class="card-body">
<!-- Form -->
<form class="text-center" style="color: #757575;" action="#!">
<h3 class="font-weight-bold my-4 pb-2 text-center dark-grey-text">Log In</h3>
<!-- Name -->
<input type="email" id="defaultSubscriptionFormPassword" class="form-control mb-4" placeholder="Email" required>
<!-- Email -->
<input type="password" id="defaultSubscriptionFormEmail" class="form-control" placeholder="Password" required>
<small id="passwordHelpBlock" class="form-text text-right blue-text">
<a href="">Recover Password</a>
</small>
<div class="text-center">
<button type="submit" class="btn btn-outline-orange btn-rounded my-4 waves-effect">Login</button>
</div>
</form>
<!-- Form -->
</div>
</div>
<!-- Material form login -->
</div>
</div>
</form>
</section>
<!--Section: Content-->
</div>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Webdesign</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<!-- link css -->
<link rel="stylesheet" href="styles.css">
</head>
<body style="color: wheat;">
<div class="container my-5 px-0 z-depth-1">
<!--Section: Content-->
<section class="p-5 my-md-5 text-center"
style="background-image: url(https://wallpapertag.com/wallpaper/full/1/e/4/411166-nature-hd-wallpapers-1080p-1920x1080-for-mac.jpg); background-size: cover; background-position: center center;" width="100%">
<form class="my-5 mx-md-5" action="">
<div class="row">
<div class="col-md-6 mx-auto">
<!-- Material form login -->
<div class="card">
<!--Card content-->
<div class="card-body">
<!-- Form -->
<form class="text-center" style="color: #757575;" action="#!">
<h3 class="font-weight-bold my-4 pb-2 text-center dark-grey-text">Log In</h3>
<!-- Name -->
<input type="email" id="defaultSubscriptionFormPassword" class="form-control mb-4" placeholder="Email" required>
<!-- Email -->
<input type="password" id="defaultSubscriptionFormEmail" class="form-control" placeholder="Password" required>
<small id="passwordHelpBlock" class="form-text text-right blue-text">
<a href="">Recover Password</a>
</small>
<div class="text-center">
<button type="submit" class="btn btn-outline-orange btn-rounded my-4 waves-effect">Login</button>
</div>
</form>
<!-- Form -->
</div>
</div>
<!-- Material form login -->
</div>
</div>
</form>
</section>
<!--Section: Content-->
</div>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</body>
</html>
|
2.styles.css
.btn[class*="btn-outline-"] {
padding-top: .7rem;
padding-bottom: .7rem;
}
.btn-rounded {
border-radius: 10em;
}
.btn-outline-orange {
color: #f57c00 !important;
background-color: transparent !important;
border: 2px solid #f57c00 !important;
}
.btn {
margin: .375rem;
color: inherit;
text-transform: uppercase;
word-wrap: break-word;
white-space: normal;
cursor: pointer;
border: 0;
border-radius: 20px;
-webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
padding: .84rem 2.14rem;
font-size: .81rem;
}
.form-control {
border-radius: 1px !important;
}
input:focus,textarea:focus {
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
border: 1px solid #D500F9 !important;
outline-width: 0;
border-bottom: 2px solid red !important;
font-weight: 400
}
.btn[class*="btn-outline-"] {
padding-top: .7rem;
padding-bottom: .7rem;
}
.btn-rounded {
border-radius: 10em;
}
.btn-outline-orange {
color: #f57c00 !important;
background-color: transparent !important;
border: 2px solid #f57c00 !important;
}
.btn {
margin: .375rem;
color: inherit;
text-transform: uppercase;
word-wrap: break-word;
white-space: normal;
cursor: pointer;
border: 0;
border-radius: 20px;
-webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
padding: .84rem 2.14rem;
font-size: .81rem;
}
.form-control {
border-radius: 1px !important;
}
input:focus,textarea:focus {
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
border: 1px solid #D500F9 !important;
outline-width: 0;
border-bottom: 2px solid red !important;
font-weight: 400
}
|
0 Comments
CAN FEEDBACK
Emoji