API tools faq
paste
Advertisement
ppabcd

Template

ppabcd
Jan 23rd, 2017
280
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
PHP 3.97 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title></title>
  5.     <link rel="stylesheet" type="text/css" href="./style.css">
  6.     <style type="text/css">
  7.         *{
  8.         margin : 0;
  9.         padding : 0;
  10.     }
  11.     body {
  12.         font-family: helvetica, sans-serif;
  13.     }
  14.     a {
  15.         text-decoration: none;
  16.     }
  17.     .header {
  18.         padding : 20px;
  19.         background-color: rgba(90,194,225,0.8);
  20.         position: fixed;
  21.         width: 100%;
  22.         z-index : 10000;
  23.     }
  24.     .menu a,.header >a{
  25.         color : #fff;
  26.     }
  27.     .title{
  28.         font-weight: bold;
  29.         float : left;
  30.     }
  31.     .menu {
  32.         float : right;
  33.         text-align: center;
  34.     }
  35.     .menus {
  36.         padding-left : 20px;
  37.     }
  38.     .wrapper{
  39.         position: relative;
  40.         background-image: url("http://musiccitiessummit.com/wp-content/uploads/chicago-1.jpg");
  41.         height : 500px;
  42.     }
  43.     .background{
  44.         position: absolute;
  45.         background-color: rgba(0,0,0,0.9);
  46.         left:0;
  47.         right:0;
  48.         top:0;
  49.         bottom:0;
  50.         z-index:1;
  51.     }
  52.     .message {
  53.         color : #fff;
  54.         font-weight: bolder;
  55.         text-align: center;
  56.         font-size: 3em;
  57.         padding-top:200px;
  58.         position:relative;
  59.         z-index: 1000;
  60.     }
  61.     .about {
  62.         background-color: #f5f1f1;
  63.         padding: 20px 40px;
  64.     }
  65.     .featured {
  66.         padding : 20px 40px;
  67.         background-color: #f5f1f1;
  68.     }
  69.     .msg {
  70.         text-align: center;
  71.         padding : 40px;
  72.     }
  73.     .box {
  74.         display: inline-block;
  75.         background-color: #4694ad;
  76.         width : 300px;
  77.         height : 300px;
  78.         color : #fff;
  79.         text-align: center;
  80.         margin-left: 10px;
  81.         margin-bottom: 10px;
  82.     }
  83.     .box >h1 {
  84.         margin-top:140px;
  85.     }
  86.     #box1{
  87.         background-image: url("https://newevolutiondesigns.com/images/freebies/city-wallpaper-47.jpg");
  88.     }
  89.     #box2{
  90.         background-image: url("https://dailypost.files.wordpress.com/2016/06/city.jpeg?w=1200");
  91.     }
  92.     #box3{
  93.         background-image: url("http://musiccitiessummit.com/wp-content/uploads/chicago-1.jpg");
  94.     }
  95.     #box4{
  96.         background-image: url("http://wdc2016.taipei/en/file/g111.jpg");
  97.     }
  98.     .fitur {
  99.         display: inline-block;
  100.         background-color : #4694ad;
  101.         width: 300px;
  102.         height: 300px;
  103.         color : #fff;
  104.         text-align: center;
  105.         margin-left: 10px;
  106.         margin-bottom: 10px;
  107.     }
  108.     .container{
  109.         width:90%;
  110.         margin:0 auto;
  111.     }
  112.     </style>
  113. </head>
  114. <body>
  115.     <div class="header">
  116.         <div class="container">
  117.             <a href="" class="item title">Reza Juliandri</a>
  118.             <div class="menu">
  119.                 <a href="" class="item menus">Home</a>
  120.                 <a href="" class="item menus">About Me</a>
  121.             </div>
  122.         </div>
  123.     </div>
  124.     <div class="wrapper">
  125.         <div class="background"></div>
  126.         <div class="message">
  127.             Selamat Datang di Website Ini.
  128.         </div>
  129.     </div>
  130.     <div class="msg">
  131.         <h1>ABOUT ME</h1>
  132.         <p>
  133.             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  134.             tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  135.             quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  136.             consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  137.             cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  138.             proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  139.         </p>
  140.     </div>
  141.     <div class="about">
  142.         <div class="box" id="box1">
  143.             <h1>Image 1</h1>
  144.             <p>
  145.                 Make your image :)
  146.             </p>
  147.         </div>
  148.         <div class="box" id="box2">
  149.             <h1>Image 1</h1>
  150.             <p>
  151.                 Make your image :)
  152.             </p>
  153.         </div>
  154.         <div class="box" id="box3">
  155.             <h1>Image 1</h1>
  156.             <p>
  157.                 Make your image :)
  158.             </p>
  159.         </div>
  160.         <div class="box" id="box4">
  161.             <h1>Image 1</h1>
  162.             <p>
  163.                 Make your image :)
  164.             </p>
  165.         </div>
  166.     </div>
  167.     <div class="featured">
  168.         <div class="fitur">
  169.             <div class="content">
  170.                 <h1>Fitur 1</h1>
  171.                 <p>
  172.                     Lorem Ipsum
  173.                 </p>
  174.             </div>
  175.         </div>
  176.         <div class="fitur">
  177.             <div class="content">
  178.                 <h1>Fitur 2</h1>
  179.                 <p>
  180.                     Lorem Ipsum
  181.                 </p>
  182.             </div>
  183.         </div>
  184.         <div class="fitur">
  185.             <div class="content">
  186.                 <h1>Fitur 3</h1>
  187.                 <p>
  188.                     Lorem ipsum
  189.                 </p>
  190.             </div>
  191.         </div>
  192.         <div class="fitur">
  193.             <div class="content">
  194.                 <h1>Fitur 4</h1>
  195.                 <p>
  196.                     Lorem Ipsum
  197.                 </p>
  198.             </div>
  199.         </div>
  200.     </div>
  201. </body>
  202. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!