Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <title>Belajar CSS Bagian Pertama</title>
- <style type="text/css">
- body {
- margin: 0;
- padding: 0;
- overflow-y: hidden;
- }
- .wrapper {
- width: 80%;
- margin: 0 auto;
- }
- header {
- margin-top: 50px;
- border-bottom: 3px solid #555753FF;
- }
- nav {
- line-height: 50px;
- padding: 10px;
- }
- a {
- text-decoration: none;
- }
- .link {
- float: right;
- margin-left: 50px;
- font-family: 'Arial';
- color: #222;
- }
- h4 {
- display: inline;
- font-family: 'Helvetica';
- color: #222;
- font-size: 35px;
- }
- section {
- margin-top: 20px;
- width: 100%;
- height: 300px;
- }
- .container {
- background-color: #F3F3F3FF;
- padding: 10px;
- height: 100%;
- }
- h3 {
- font-family: 'Helvetica';
- color: #2E3436FF;
- font-size: 25px;
- text-align: center;
- }
- input {
- background-color: #3465A4FF;
- color: #FFF;
- font-family: 'Arial';
- text-align: center;
- border:none;
- border-radius: 2px;
- padding: 10px 20px;
- margin: 0 auto;
- display: block;
- }
- p {
- font-family: 'Arial';
- text-align: center;
- padding-top: 10px;
- }
- footer {
- margin-top: 50px;
- background-color: #F3F3F3FF;
- height: 20vh;
- padding: 10px;
- font-family: 'Helvetica';
- line-height: 20vh;
- text-align: center;
- }
- </style>
- </head>
- <body>
- <div class="wrapper">
- <header>
- <nav>
- <a href="">
- <h4>LOGO</h4>
- </a>
- <a href="" class="link">
- HOME
- </a>
- <a href="" class="link">
- ABOUT
- </a>
- <a href="" class="link">
- CONTACT
- </a>
- </nav>
- </header>
- <section>
- <div class="container">
- <h3>Selamat Datang Di Website Saya</h3>
- <input type="submit" name="submit" value="BUTTON">
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus quasi atque, nihil blanditiis <br/><br/>eveniet laboriosam tenetur odio maiores, quam tempore ex veritatis exercitationem optio officiis rem <br/><br/>possimus adipisci minus recusandae impedit eligendi amet. Quam at dolores voluptas ipsam, quia voluptate <br/><br/>officia, perspiciatis consectetur dolore perferendis reiciendis dignissimos, expedita, rerum laudantium.<br/><br/></p>
- </div>
- </section>
- <br/>
- <footer>
- Copyright © 2019 - @YourCompany.com, All right reserved.
- </footer>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement