daily pastebin goal
67%
SHARE
TWEET

galeria

a guest Apr 20th, 2018 64 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
Top