Pada tugas ini diminta untuk membuat halaman login dan contact us sebuah website dengan menggunakan bootstrap. Wording contact us akan ditampilkan pada bagian bawah halaman login, ketika diklik akan mengarahkan ke halaman contact us.
2. Contact Us
Dokumentasi source code :
Link Halaman Login dan Contact Us:
Dokumentasi tampilan halaman login dan contact us adalah sebagai berikut
1. Login
2. Contact Us
1.index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Login page</title> | |
| <link rel="stylesheet" type="text/css" href="./style.css" /> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> | |
| <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.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=Open+Sans&display=swap" rel="stylesheet"> | |
| <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> | |
| <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="omb_login" > | |
| <h3 class="omb_authTitle">Login </h3> | |
| <div class="row omb_row-sm-offset-3 omb_socialButtons"> | |
| <div class="col-xs-4 col-sm-2"> | |
| <a href="#" class="btn btn-lg btn-block omb_btn-facebook"> | |
| <i class="fa fa-facebook visible-xs"></i> | |
| <span class="hidden-xs">Facebook</span> | |
| </a> | |
| </div> | |
| <div class="col-xs-4 col-sm-2"> | |
| <a href="#" class="btn btn-lg btn-block omb_btn-twitter"> | |
| <i class="fa fa-twitter visible-xs"></i> | |
| <span class="hidden-xs">Twitter</span> | |
| </a> | |
| </div> | |
| <div class="col-xs-4 col-sm-2"> | |
| <a href="#" class="btn btn-lg btn-block omb_btn-google"> | |
| <i class="fa fa-google-plus visible-xs"></i> | |
| <span class="hidden-xs">Google+</span> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="row omb_row-sm-offset-3 omb_loginOr"> | |
| <div class="col-xs-12 col-sm-6" style="color : white"> | |
| <hr class="omb_hrOr"> | |
| <hr class="omb_hrOr2"> | |
| <span class="omb_spanOr" style="font-size: 18px;">or</span> | |
| </div> | |
| </div> | |
| <div class="row omb_row-sm-offset-3"> | |
| <div class="col-xs-12 col-sm-6"> | |
| <form class="omb_loginForm" action="" autocomplete="off" method="POST"> | |
| <div class="input-group"> | |
| <span class="input-group-addon"><i class="fa fa-user"></i></span> | |
| <input type="text" class="form-control" name="username" placeholder="Username"> | |
| </div> | |
| <span class="help-block"></span> | |
| <div class="input-group"> | |
| <span class="input-group-addon"><i class="fa fa-lock"></i></span> | |
| <input type="password" class="form-control" name="password" placeholder="Password"> | |
| </div> | |
| </form> | |
| <label class="checkbox" style="margin-top: 2.5rem; color: white;""> | |
| <input type="checkbox" value="remember-me" >Remember Me | |
| <a href="#" style="float: right;">Forgot password?</a> | |
| </label> | |
| <button class="btn btn-lg btn-primary btn-block" type="submit" style="margin-top: 5rem;">Login</button> | |
| <p style="text-align: center; margin-top: 3rem; color: white; "> Don't have an account? <a href="#">Sign up</a></p> | |
| <p style="text-align: center; margin-top: 3rem; color: white; "> <a href="contact.html">Contact us</a> for more information </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> | |
2.contact.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Contact Us</title> | |
| <link rel="stylesheet" type="text/css" href="./style.css" /> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> | |
| <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.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=Open+Sans&display=swap" rel="stylesheet"> | |
| <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> | |
| <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> | |
| </head> | |
| <body> | |
| <div class="container contact-form"> | |
| <form method="post"> | |
| <h2>Contact Us</h2> | |
| <h3>Drop Us a Message !</h3> | |
| <div class="row"> | |
| <div class="col-md-6"> | |
| <div class="form-group"> | |
| <input type="text" name="txtName" class="form-control" placeholder="Your Name *" value="" /> | |
| </div> | |
| <div class="form-group"> | |
| <input type="text" name="txtEmail" class="form-control" placeholder="Your Email *" value="" /> | |
| </div> | |
| <div class="form-group"> | |
| <input type="text" name="txtPhone" class="form-control" placeholder="Your Phone Number *" value="" /> | |
| </div> | |
| <div class="form-group"> | |
| <input type="submit" name="btnSubmit" class="btnContact" value="Send Message" /> | |
| </div> | |
| </div> | |
| <div class="col-md-6"> | |
| <div class="form-group"> | |
| <textarea name="txtMsg" class="form-control" placeholder="Your Message *" style="width: 100%; height: 150px;"></textarea> | |
| </div> | |
| </div> | |
| </div> | |
| </form> | |
| </div> | |
| </body> | |
| </html> | |
3.style.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .container{ | |
| font-family: 'Open Sans', sans-serif; | |
| padding-top: 8rem; | |
| padding-bottom: 8rem; | |
| width: 100%; | |
| /* padding-left: 10rem; */ | |
| /* background-image: "./bg.jpg"; */ | |
| background: -webkit-linear-gradient(left,black, rgb(72, 72, 179)); | |
| } | |
| @media (min-width: 768px) { | |
| .omb_row-sm-offset-3 div:first-child[class*="col-"] { | |
| margin-left: 25%; | |
| } | |
| } | |
| .omb_login .omb_authTitle { | |
| /* padding-top: 8rem; */ | |
| color: white; | |
| text-align: center; | |
| line-height: 100%; | |
| padding-bottom: 6rem; | |
| } | |
| .omb_login .omb_socialButtons a { | |
| color: white; | |
| opacity:0.9; | |
| } | |
| .omb_login .omb_socialButtons a:hover { | |
| color: white; | |
| opacity:1; | |
| } | |
| .omb_login .omb_socialButtons .omb_btn-facebook {background: #3b5998;} | |
| .omb_login .omb_socialButtons .omb_btn-twitter {background: #00aced;} | |
| .omb_login .omb_socialButtons .omb_btn-google {background: #c32f10;} | |
| .omb_login .omb_loginOr { | |
| position: relative; | |
| font-size: 1.5em; | |
| color: white; | |
| margin-top: 1em; | |
| margin-bottom: 1em; | |
| padding-top: 0.5em; | |
| padding-bottom: 0.5em; | |
| } | |
| .omb_login .omb_loginOr .omb_hrOr { | |
| margin-right: 32rem; | |
| background-color: black; | |
| height: 1px; | |
| margin-top: 0px !important; | |
| margin-bottom: 0px !important; | |
| } | |
| .omb_hrOr2 { | |
| margin-left: 32rem; | |
| background-color: black; | |
| height: 1px; | |
| margin-top: 0px !important; | |
| margin-bottom: 0px !important; | |
| } | |
| .omb_login .omb_loginOr .omb_spanOr { | |
| color: white; | |
| display: block; | |
| position: absolute; | |
| left: 50%; | |
| top: -0.6em; | |
| margin-left: -1.5em; | |
| /* opacity: 0.4; | |
| background-color: black; */ | |
| width: 3em; | |
| text-align: center; | |
| } | |
| .omb_login .omb_loginForm .input-group.i { | |
| width: 2em; | |
| } | |
| .omb_login .omb_loginForm .help-block { | |
| color: red; | |
| } | |
| @media (min-width: 768px) { | |
| .omb_login .omb_forgotPwd { | |
| text-align: right; | |
| margin-top:10px; | |
| } | |
| } | |
| body{ | |
| background: -webkit-linear-gradient(left,black, rgb(72, 72, 179)); | |
| } | |
| .contact-form{ | |
| background: #fff; | |
| margin-top: 10%; | |
| margin-bottom: 5%; | |
| width: 70%; | |
| } | |
| .contact-form .form-control{ | |
| border-radius:1rem; | |
| } | |
| .contact-image{ | |
| text-align: center; | |
| } | |
| .contact-image img{ | |
| border-radius: 6rem; | |
| width: 11%; | |
| margin-top: -3%; | |
| transform: rotate(29deg); | |
| } | |
| .contact-form form{ | |
| padding: 14%; | |
| } | |
| .contact-form form .row{ | |
| margin-bottom: -7%; | |
| } | |
| .contact-form h2{ | |
| margin-bottom: 12%; | |
| margin-top: -8%; | |
| text-align: center; | |
| color: #0062cc; | |
| } | |
| .contact-form h3{ | |
| font-size: 14px; | |
| margin-bottom: 8%; | |
| margin-top: -10%; | |
| text-align: center; | |
| color: black; | |
| } | |
| .contact-form .btnContact { | |
| width: 50%; | |
| border: none; | |
| border-radius: 1rem; | |
| padding: 1.5%; | |
| background: #0062cc; | |
| font-weight: 600; | |
| color: #fff; | |
| cursor: pointer; | |
| margin-top: 4rem; | |
| margin-left: 62rem; | |
| } | |
| .btnContactSubmit | |
| { | |
| align-items: center; | |
| width: 50%; | |
| border-radius: 1rem; | |
| padding: 1.5%; | |
| color: #fff; | |
| background-color: #0062cc; | |
| border: none; | |
| cursor: pointer; | |
| } |
Comments
Post a Comment