SHARE
TWEET

Untitled

a guest Jul 21st, 2019 66 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. CSS (Name = style.css):
  2. *{
  3.     padding: 0px;
  4.     margin: 0px;
  5.     font-family: Arial, Verdana, sans-serif;
  6. }
  7.  
  8. header {
  9.     height: 100px;
  10.     background-color: #2500A5 ;
  11.     border-radius: 10px ;
  12. }
  13.  
  14. body {
  15.     width: 800px;
  16.     background-color: #58ACFA;
  17.     margin: 25px auto;
  18. }
  19.  
  20. header h1 {
  21.     font-family: Verdana;    
  22.     font-style: italic ;
  23.     padding-left: 50px;
  24.     padding-top: 25px;
  25.     color: #00FFBF ;
  26.     font-size: 30pt;
  27.     text-shadow: black 1px 1px 4px ;
  28. }
  29.  
  30. header h2 {
  31.     font-family: Verdana;
  32.     font-style: italic ;  
  33.     color: #00FFBF ;  
  34.     font-size: 16pt;  
  35.     padding-left: 650px;
  36.     text-shadow: black 1px 1px 4px ;
  37. }
  38.  
  39. nav ul {
  40.     list-style-type: none;
  41. }
  42.  
  43. nav li {
  44.     display: inline;
  45.     margin-right: 40px;
  46.     background-color: #2500A5;
  47.     padding-right: 35px;
  48.     padding-left: 35px;
  49.     padding-top: 3px;
  50.     padding-bottom: 3px;
  51.     border: #585858 3px outset;
  52.     border-radius: 5px;
  53.     font-weight: bold;
  54.     cursor: default;
  55. }
  56. nav {
  57.     margin-top: 20px;
  58.     text-align: center;
  59.     margin-bottom: 30px;  
  60.    
  61. }
  62.  
  63. nav a {
  64.     text-decoration: none;
  65.     color: #00FFBF;
  66.     text-shadow: black 0px 0px 4px;
  67. }
  68.  
  69. nav li:hover {
  70.     border: #585858 3px inset;  
  71. }
  72.  
  73. nav a:hover {
  74.     color: #DF0101;
  75. }
  76.                                    
  77. section {
  78.     width: 575px;  
  79.     float: left;  
  80. }              
  81.  
  82. article {
  83.     border: gray 4px outset;
  84.     padding: 20px;
  85.     text-align: left;
  86.     margin-bottom: 25px;
  87.     margin-right: 30px;    
  88. }              
  89.  
  90. article h2 {
  91.     font-size: 14pt;
  92.     color: #00FFBF;
  93.     padding-bottom: 10px;    
  94.     letter-spacing: 1px;
  95.     font-weight: bold;
  96. }
  97.  
  98. article p {
  99.     font-size: 18px;
  100.     padding-bottom: 20px;
  101.     color: #000;
  102. }
  103.  
  104. article blockquote {
  105.     font-weight: bold;
  106.     font-style: italic;
  107.     font-size: 10pt;
  108.     padding: 15px;
  109.     background-color: #2500A5;
  110.     border-radius: 10px;
  111.     color: #00FFBF;
  112. }
  113.  
  114. video {
  115.     width: 320px;
  116.     height: 180px;  
  117.     float: right;
  118.     border: gray 1px solid;
  119.     border-radius: 5px;
  120.     background-color: #00FFBF;
  121. }
  122.  
  123. aside {
  124.     text-align: center;
  125.     padding-right: 10px;
  126.     width: 155px;
  127.     float: left;
  128.     color: #2EFE9A;
  129.     padding: 30px;
  130.     background-color: #2500A5;
  131.     border-radius: 15px;
  132. }
  133.  
  134. aside h3 {
  135.     font-size: 16pt;
  136.     padding-bottom: 10px;
  137.     font-variant: small-caps;
  138.     padding-top: 25px;
  139. }
  140.  
  141. aside p {
  142.     font-size: 12pt;
  143.     font-style: italic;
  144.     font-weight: bold;
  145.     color: #2EFE9A;    
  146. }
  147.  
  148. .gross {
  149.     width: 100px;
  150.     height: 100px;
  151.     border-radius: 15px;
  152. }
  153.  
  154. .klein {
  155.     width: 50px;
  156.     height: 50px;
  157.     border-radius: 15px;
  158. }
  159.  
  160. footer {
  161.     clear: both;
  162.     text-align: center;
  163.     padding: 5px;
  164.     background-color: #2500A5;
  165.     color: #00FFBF;
  166.     border-radius: 10px;
  167. }
  168.  
  169. footer p {
  170.     font-size: 12pt;
  171.     font-weight: bold;
  172.     font-family: monospace;
  173.     text-shadow: gray 1px 1px 2px;
  174.    
  175. }
  176.  
  177. table {
  178.     text-align: center;
  179.     color: #00FFBF;
  180.     background-color: #2500A5;
  181.     border: #585858 1px inset;
  182.     float: left;
  183.     margin-right: 20px;  
  184. }
  185.  
  186. td {
  187.     border: #585858 1px inset;
  188.     padding-right: 5px;
  189.     padding-left: 5px;        
  190. }
  191.  
  192. thead {
  193.     font-weight: bold;    
  194. }
  195.  
  196. td: hover {
  197.     background-color: gray;
  198. }
  199.  
  200.  
  201. HTML (Name = index.html)
  202. <!DOCTYPE html>
  203. <html>
  204.  
  205. <head>
  206.     <title>Home - LPRGDevelopers</title>
  207.         <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
  208.     <link href="style.css" type="text/css" rel="stylesheet"/>
  209. </head>
  210.  
  211. <body style="background-image:url(bg.jpg)">
  212.  
  213.     <header>
  214.  
  215.         <h1> LPRGDevelopers </h1>
  216.         <h2> HOME </h2>
  217.  
  218.     </header>
  219.  
  220.     <aside>
  221.         <ul>
  222.             <a href="index.html"><li>HOME</li></a>
  223.             <a href="news.html"><li>NEWS</li></a>
  224.             <a href="partner.html"><li>PARTNER</li></a>
  225.             <a href="info.html"><li>&Uuml;BER UNS</li></a>
  226.         </ul>
  227.     </aside>
  228.  
  229.     <aside>
  230.         <ul>
  231.             <a href="impressum.html"><li>IMPRESSUM</li></a>
  232.             <a href="kontakt.html"><li>KONTAKT</li></a>
  233.             <a href="projekte.html"><li>PROJEKTE</li></a>
  234.             <a href="links.html"><li>LINKS</li></a>
  235.         </ul>
  236.     </aside>
  237.  
  238.  
  239.     <article>
  240.         <h1>Willkommen auf der Offiziellen Homepage von LPRGDevelopers</h1>
  241.         <p>Diese Homepage wurde allein von der Leitung von LPRGDeveloeprs "programmiert" mit HTML und CSS. <br> Wir hoffen das euch unsere Website gef&auml;llt und w&uuml;nschen einen angenehmen Tag</p>
  242.     </article>
  243.  
  244.     <footer>
  245.         <p>&copy; by LPRGDeveloeprs 2019</p>
  246.     </footer>
  247.  
  248.  
  249. </body>
  250. </html>
RAW Paste Data
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
 
Top