daily pastebin goal
71%
SHARE
TWEET

galeria

a guest Apr 20th, 2018 65 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <html lang ="pl>
  2. <head>
  3. <meta charset="utf-8"/>
  4. <meta name="desctription" content="przyklad strony html"/>
  5. <title>Szablon WWW</title>
  6. <link rel="stylesheet" href="./awesomecss/css/fontawesome-all.min.css/>
  7. <style>
  8. html, body
  9. {
  10.     margin: 0 !important;
  11.     padding: 0 !important;
  12. }
  13. header
  14. {
  15.     height: 200px;
  16.     background: red;
  17. }
  18. header h1
  19. {
  20.     height: 90px;
  21.     font-size: 90px;
  22.     line-height: 75px;
  23.     margin 0;
  24.  
  25. }
  26. .button
  27. {
  28. height: 50px;
  29. width: 25%;
  30. overflow: hidden;
  31. -webkit-user-select:none;
  32. -moz-user-select:none;
  33. -o-user-select:none;
  34. -ms-user-select:none;
  35. user-select: none;
  36. cursor: pointer;
  37. }
  38. .button:hover, .button:hover main p
  39. {
  40.     background: #00A   
  41. }
  42. .main p
  43. {
  44.     color:red
  45.     font-weight: 800;
  46.     font-size: 32px;
  47.     text-align: center;
  48.     margin-top: calc((50px - 32px) / 2);
  49.     line-height: 30px;
  50.  
  51. }
  52. div.main
  53. {
  54. float: left;   
  55. }
  56. nav::after
  57. {
  58.     content: '';
  59.     display: block;
  60.     clear: both;
  61. }
  62. main
  63. {
  64.     margin-left: 30px;
  65.     margin-right: 30px;
  66.     text-align: justify;
  67.     width: 80%;
  68.     float:left;
  69. }
  70.  
  71. aside
  72. {
  73.     width: calc(20% -35px);
  74.     float:right;
  75. }
  76.  
  77. footer::before
  78. {
  79.     content: '';
  80.     display: block;
  81.     clear: both;
  82. }
  83.  
  84. nav#slideMenu
  85. {
  86. position: fixed;
  87. width:400px;
  88. left: -380px;
  89. overflow: hidden;
  90. transition: left 2s;
  91. }
  92. nav#slideMenu:hover
  93. {
  94.     left: 0px;
  95.     background: #FFAACC;
  96. }
  97. .button,nav#slideMenu
  98. {
  99.     background: #007045;
  100. }
  101. nav#slideMenu ul
  102. {
  103.     padding 0;
  104.     list-style: none;
  105.     overflow: hidden;
  106.     float:left;
  107. }
  108. nav#slideMenu ul li
  109. {
  110.     padding-left: 20px;
  111.     margin-top: 5px;
  112.     overflow: hidden;
  113.     width: 350px;
  114. }
  115. nav#slideMenu ul li a
  116. {
  117.     padding-top: 15px;
  118.     display: block;
  119. }
  120. i.mybtn
  121. {
  122.     font-size: 25px;
  123.     margin-top: calc((200px -25px) /2);
  124.     color: white;
  125. }
  126. nav#slideMenu:hover i.mybtn
  127. {
  128.     transform; rotate(180deq);
  129. }
  130.  
  131. for input[type=text], form select
  132. {
  133.     display:block;
  134.     height: 30px;
  135.     font-size: 25px;
  136.     width: 95%
  137.     margin-bottom: 10px;
  138.     margin-left: auto;
  139.     margin-right: auto;
  140. }
  141. form select
  142. {
  143.     font-size: 20px;
  144.     text-align: center;
  145. }
  146.  
  147. form textarea
  148. {
  149.     width: 95%
  150.     margin-left: auto;
  151.     matgin-right: auto;
  152.     height: 200px;
  153. }
  154.  
  155. form input[type=submit]
  156. {
  157.     color:green
  158.     width: 95%
  159.     margin-left: auto;
  160.     margin-right: auto;
  161.     display: block;
  162.     font-size: 35px;
  163.    
  164. }
  165.  
  166. ::-webkit-placeholder
  167. {
  168.     text-align: center;
  169.     color: green;
  170. }
  171. ::-ms-webkit-placeholder
  172. {
  173.     text-align: center;
  174.     color: green;
  175. }
  176. ::-moz-placeholder
  177. {
  178.     text-align: center;
  179.     color: green;
  180. }
  181.  
  182. #gallery
  183. {
  184.     width: 100%;
  185.     overflow: hidden;
  186.     display: flex;
  187.     flex-wrap: wrap;
  188. }
  189. #gallery figure
  190. {
  191.     width: 22%
  192.     height: auto;
  193.     margin-right: 2%;
  194.     border: 1px solid black;
  195.     padding: 2%;
  196.     border-radius: 10px;
  197.     overflow: hidden;
  198.     position: relative;
  199. }
  200. #gallery figure img
  201. {
  202.     width: 100%;
  203.     height: auto;
  204.    
  205.    
  206. }
  207.  
  208. #gallery figure figcaption
  209. {
  210.     font-size: 14px;
  211.     position: absolute;
  212.     bottom: 0;
  213. }
  214. #gallery figure div
  215. {
  216.     margin-top: 10px;
  217.     width: 95%;
  218.     height: 200px;
  219. }
  220.  
  221. </style>
  222. </head>
  223. <body>
  224.     <header>
  225.     <h1> Strona Glowna </h1>
  226.     </header>
  227. <nav>
  228. <div class="button main"><p> Najwazniejsze informacje</p</div>
  229. <div class="button main"><p> Galeria</p</div>
  230. <div class="button main"><p> Kontakt</p</div>
  231. <div class="
  232. <nav id ="slideMenu">
  233.     <ul>
  234.     <li class ="button"><a href="#art1">Artykuł1</a></li>
  235.     </ul>
  236. <i class="mybtn far fa-arrow-alt-circle-right"></i>
  237.    
  238. </nav>
  239.  
  240. <main>
  241.     <div id="gallery">
  242.         <figure>
  243.         <div>
  244.             <img src="link" alt=""/>
  245.             <figcaption>Natura 1</figcaption>
  246.         </div>
  247.         </figure>
  248.         <figure>
  249.         <div>
  250.             <img src="link" alt=""/>
  251.             <figcaption>Natura 2</figcaption>
  252.         </div>
  253.         </figure>
  254.         <figure>
  255.         <div>
  256.             <img src="link" alt=""/>
  257.             <figcaption>Natura 3</figcaption>
  258.         </div>
  259.         </figure>
  260.         <figure>
  261.             <img src="link" alt=""/>
  262.             <figcaption>Natura 4</figcaption>
  263.         </figure>
  264.         <figure>
  265.             <img src="link" alt=""/>
  266.             <figcaption>Natura 5</figcaption>
  267.         </figure>
  268.         <figure>
  269.             <img src="link" alt=""/>
  270.             <figcaption>Natura 6</figcaption>
  271.         </figure>
  272.         <figure>
  273.             <img src="link" alt=""/>
  274.             <figcaption>Natura 7</figcaption>
  275.         </figure>
  276.         <figure>
  277.             <img src="link" alt=""/>
  278.             <figcaption>Natura 8</figcaption>
  279.         </figure>
  280.     </div>
  281. </main>
  282. <aside>
  283. <p> miejsce na reklame</p>
  284. </aside>
  285. <footer>
  286. </footer>
  287. </body>
  288.  
  289.  
  290. // fontawesome w folderze z index.html
  291. // folder css przekopiowac .css do folderu
  292. // zapisac galerie usunac formularz(main)
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