API tools faq
paste
Snoop

Weeb (FREE WEBSITE TEMPLATE)

Snoop
May 29th, 2014
508
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 4.28 KB | None | 0 0
raw download clone embed print report
  1. <!--  
  2. This website is free software: you can redistribute it and/or modify
  3. it under the terms of the GNU General Public License as published by
  4. the Free Software Foundation, either version 3 of the License, or
  5. (at your option) any later version.
  6.  
  7. This website is distributed in the hope that it will be useful,
  8. but WITHOUT ANY WARRANTY; without even the implied warranty of
  9. MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  10. GNU General Public License for more details.
  11.  
  12. You should have received a copy of the GNU General Public License
  13. along with this website. If not, see <http://www.gnu.org/licenses/>.  
  14. -->
  15.  
  16. <!DOCTYPE html>
  17. <html>
  18.   <head>
  19.     <title>Title</title>
  20.     <link rel="icon" type="image/jpg" href="http://i.imgur.com/ne9A21u.jpg"><!-- Favicon. This should be the same link as the avatar. Or whatever you fancy. -->
  21.     <style type="text/css">
  22.     body{
  23.       background-image:url('http://i.imgur.com/D9Ev3R1.png'); /* BACKGROUND IMAGE! Change the background image link here. */
  24.       margin: 0;
  25.       padding: 0;
  26.     }
  27.  
  28.     #container{
  29.       position: absolute;
  30.       margin: 0 auto;
  31.       left: 0;
  32.       right: 0;
  33.       height: 100vh;
  34.       width: 400px;
  35.       background-color: black;
  36.       opacity: 0.7;
  37.     }
  38.  
  39.     #overlay{
  40.       position: absolute;
  41.       left: 0;
  42.       right: 0;
  43.       margin: 0px auto;
  44.       height: 100vh;
  45.       width: 400px;
  46.     }
  47.  
  48.     #avatar{
  49.       position: absolute;
  50.       margin: 0 auto;
  51.       left: 0;
  52.       right: 0;
  53.       display: block;
  54.       margin-left: auto;
  55.       margin-right: auto;
  56.       border-radius: 350px;
  57.       height: 130px;
  58.       width: 130px;
  59.       bottom: 500px;
  60.       border: 5px solid white;
  61.     }
  62.  
  63.     #header{
  64.       position: absolute;
  65.       text-align: center;
  66.       font-weight: bold;
  67.       font-family: Helvetica;
  68.       bottom: 400px;
  69.       font-size: 30px;
  70.       color: white;
  71.       left: 0;
  72.       right: 0;
  73.     }
  74.  
  75.     #text{
  76.       position: absolute;
  77.       text-align: center;
  78.       font-weight: bold;
  79.       font-family: Helvetica;
  80.       bottom: 300px;
  81.       font-size: 19px;
  82.       color: white;
  83.       left: 0;
  84.       right: 0;
  85.       margin-left: 15px;
  86.       margin-right: 15px;
  87.     }
  88.  
  89.     #button1{
  90.       position: absolute;
  91.       right: 35px;
  92.       bottom: 200px;
  93.       border: 2px solid white;
  94.       width: 150px;
  95.       height: 45px;
  96.       color: white;
  97.       font-size: 15px;
  98.       font-family: Helvetica;
  99.       text-align: center;
  100.       font-weight:bold;
  101.       -webkit-transition: background-color 0.5s;
  102.       transition: background-color 0.5s;
  103.     }
  104.      
  105.     #button2{
  106.       position: absolute;
  107.       left: 35px;
  108.       bottom: 200px;
  109.       border: 2px solid white;
  110.       width: 150px;
  111.       height: 45px;
  112.       color: white;
  113.       font-size: 15px;
  114.       font-family: Helvetica;
  115.       text-align: center;
  116.       font-weight:bold;
  117.       -webkit-transition: background-color 0.5s;
  118.       transition: background-color 0.5s;
  119.     }
  120.  
  121.     #button3{
  122.       position: absolute;
  123.       left: 0;
  124.       right: 0;
  125.       margin: 0 auto;
  126.       bottom: 135px;
  127.       border: 2px solid white;
  128.       width: 250px;
  129.       height: 45px;
  130.       color: white;
  131.       font-size: 15px;
  132.       font-family: Helvetica;
  133.       text-align: center;
  134.       font-weight:bold;
  135.       -webkit-transition: background-color 0.5s;
  136.       transition: background-color 0.5s;
  137.     }
  138.  
  139.     #button1:hover, #button2:hover, #button3:hover{
  140.     background-color: white;
  141.     color: grey;
  142.     }
  143.   </style>
  144.   </head>
  145.   <body>
  146.     <div id="container">
  147.     </div>
  148.     <div id="overlay">
  149.       <img src="http://i.imgur.com/ne9A21u.jpg" id="avatar" /> <!-- Put your avatar image link here -->
  150.       <p id="header">Lorem</p>
  151.       <!-- If the description is too long, it will clip with the header. So please keep it short,
  152.     or edit the CSS to match the description. -->
  153.       <p id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
  154.       Donec dictum risus at leo ornare pretium.</p>
  155.       <a href="http://website.com"><div id="button1"><p>Lorem ipsum</p></div></a>
  156.       <a href="http://website.com"><div id="button2"><p>Lorem ipsum</p></div></a>
  157.       <a href="http://website.com"><div id="button3"><p>Lorem ipsum dolor</p></div></a>
  158.     </div>
  159.   </body>
  160. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
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!