API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Dec 13th, 2019
122
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.56 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=device-width, initial-scale=1">
  5. <title>Fitness</title>
  6. <style>
  7. a:hover {
  8. display: none;
  9. }
  10. @media only screen and (max-width: 1080px) {
  11. body {
  12. background-color: blue;
  13. }
  14. }
  15.  
  16.  
  17. @media only screen and (max-width: 600px) {
  18. body {
  19. background-color: olive;
  20. }
  21. }
  22. @media screen and (max-width: 600px) {
  23. div.example {
  24. display: none;
  25. }
  26. }
  27.  
  28.  
  29.  
  30. html,body {
  31. margin:0;
  32. padding:0;
  33. }
  34. .topnav {
  35. overflow: hidden;
  36. background-color: #ffffff;
  37. padding-left: 200px;
  38. }
  39.  
  40. .topnav a {
  41. float: left;
  42. display: block;
  43. color: black;
  44. text-align: left;
  45. padding: 14px 16px;
  46. text-decoration: none;
  47. font-size: 10px;
  48. font-family: Verdana, Geneva, Tahoma, sans-serif;
  49. }
  50. span{
  51. font-size: 17px;
  52. font-weight: bold;
  53. }
  54.  
  55. .active {
  56. background-color: rgba(0,0,0,0.2);
  57. color: white;
  58. }
  59.  
  60. .topnav .icon {
  61. display: none;
  62. }
  63.  
  64. .dropdown {
  65. float: left;
  66. overflow: hidden;
  67. }
  68.  
  69. .dropdown .dropbtn {
  70. font-size: 17px;
  71. border: none;
  72. outline: none;
  73. color: white;
  74. padding: 14px 16px;
  75. background-color: inherit;
  76. font-family: inherit;
  77. margin: 0;
  78. }
  79.  
  80. .dropdown-content {
  81. display: none;
  82. position: absolute;
  83. background-color: #f9f9f9;
  84. min-width: 160px;
  85. box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  86. z-index: 1;
  87. }
  88.  
  89. .dropdown-content a {
  90. float: none;
  91. color: black;
  92. padding: 12px 16px;
  93. text-decoration: none;
  94. display: block;
  95. text-align: left;
  96. }
  97.  
  98. .topnav a:hover, .dropdown:hover .dropbtn {
  99. background-color: #47555E;
  100. color: white;
  101. }
  102.  
  103. .dropdown-content a:hover {
  104. background-color: #ddd;
  105. color: black;
  106. }
  107.  
  108. .dropdown:hover .dropdown-content {
  109. display: block;
  110. }
  111.  
  112. @media screen and (max-width: 600px) {
  113.  
  114. }
  115.  
  116. @media screen and (max-width: 600px) {
  117. .topnav.responsive {position: relative;}
  118. .topnav.responsive .icon {
  119. position: absolute;
  120. right: 0;
  121. top: 0;
  122. }
  123. .topnav.responsive a {
  124. float: none;
  125. display: block;
  126. text-align: left;
  127. }
  128.  
  129. }
  130. #lokacije{
  131. margin: 0;
  132. font-size: 14px;
  133. text-align: right;
  134. }
  135. #fitnes{
  136. text-align: center;
  137. color: white;
  138. margin-bottom: 50px;
  139. }
  140. #spa{
  141. text-align: center;
  142. color: rgb(40, 221, 152);
  143. margin-bottom: 50px;
  144. }
  145. #swim{
  146. text-align: center;
  147. color: cyan;
  148. margin-bottom: 50px;
  149. }
  150. #dance{
  151. text-align: center;
  152. color: rgb(247, 227, 115);
  153. margin-bottom: 50px;
  154. }
  155. .oneline {
  156. float:left;
  157. height: 720px;
  158. width: 275px;
  159. border: solid 1px #ccc;
  160. /*display: inline-block;*/
  161. background-color: #47555E;
  162. margin-top: 10px;
  163.  
  164. }
  165. .frame {
  166. height: 200px;
  167. line-height: 25px;
  168. text-align: center;
  169. margin: auto;
  170. /* position: relative;*/
  171. }
  172. img {
  173. background: #47555E;
  174. vertical-align: middle;
  175. height: 200px;
  176. width: 260px;
  177. padding: 2px;
  178. }
  179. .brojevi{
  180. font-size: 27px;
  181. color: white;
  182. font-family: Verdana, Geneva, Tahoma, sans-serif;
  183. }
  184. p{
  185. font-size: 21px;
  186. color: white;
  187. font-family: Verdana, Geneva, Tahoma, sans-serif;
  188. }
  189. .content{
  190. margin-left: 60px;
  191. }
  192. footer{
  193. max-width: 100%;
  194. margin-top: 20px;
  195. background-color: #47555E;
  196. }
  197. .main-footer{
  198. margin-top: 20px;
  199. padding: 20px;
  200. float: left;
  201. width: 100%;
  202. }
  203. .main-footer ul li{
  204. font-family: Verdana, Geneva, Tahoma, sans-serif;
  205. display: inline;
  206. margin: 0px 40px 0px 0px;
  207. text-decoration: none;
  208. }
  209. .main-footer ul li a{
  210. text-decoration: none;
  211. }
  212. </style>
  213. </head>
  214. <body>
  215.  
  216. <div class="topnav" id="myTopnav">
  217. <a href="#home" > <span>FITNES</span> <br> centri</a>
  218. <a href="#onama"> <span>O NAMA</span> <br>ko smo mi</a>
  219. <a href="#lokacije"><span>LOKACIJE</span><br>gde se nalazimo</a>
  220. <a href="#usluge"><span>USLUGE</span><br>šta nudimo</a>
  221. <a href="#blog"><span>BLOG</span><br>tekstovi</a>
  222.  
  223. <a href="#kontakt"><span>KONTAKT</span><br>mapa</a>
  224. <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
  225. </div>
  226. <div class="content">
  227.  
  228. <div class="oneline">
  229. <div class="frame"><a href="index.html"><img src="logo.png" alt="logo"></a></div>
  230. <div class="frame">
  231. <p style="margin: 0; text-align: left;"> <span class="brojevi">4</span> programa</p>
  232. <p style="margin: 0; text-align: left;"><span class="brojevi">3</span> lokacije</p>
  233. <p style="margin: 0; text-align: left;"><span class="brojevi">2</span> reči</p>
  234. <p style="margin: 0; text-align: left;"> <span class="brojevi">1</span> ime</p>
  235. </div>
  236.  
  237. <div class="frame" style="margin-right: 5px;">
  238. <p style="margin: 0; text-align: right;" > <span class="brojevi">NOVI BEOGRAD</span></p>
  239. <p id="lokacije"> Izmisljena adresa, br.1</p>
  240. <p id="lokacije">Izmisljena adresa, br.2</p>
  241. <p id="lokacije"> Izmisljena adresa, br.3</p>
  242. </div>
  243. <div class="frame" style="margin-right: 5px;">
  244. <p id="lokacije"> "Every day is another chance to get <span style="font-weight: bold;">stronger</span>, to eat
  245. <span style="color:rgb(40, 221, 152);">better</span>, to live <span style="color:cyan">healthier</span>
  246. and to be the best version of <span style="color: rgb(247, 227, 115);">you</span>."</p>
  247.  
  248. </div>
  249. </div>
  250.  
  251. <div class="oneline">
  252.  
  253. <p id="fitnes">fitnes</p>
  254. <div class="frame"><img src="fitnes1.jpg" alt="fitnes1"></div>
  255. <div class="frame"><img src="fitnes2.jpg" alt="fitnes2"></div>
  256. <div class="frame"><img src="fitnes3.jpg" alt="fitnes3"></div>
  257.  
  258. </div>
  259.  
  260. <div class="oneline">
  261. <p id="spa">spa</p>
  262. <div class="frame"><img src="spa1.jpg" alt="spa1"></div>
  263. <div class="frame"><img src="spa2.jpg" alt="spa2"></div>
  264. <div class="frame"><img src="spa3.jpg" alt="spa3"></div>
  265. </div>
  266.  
  267. <div class="oneline">
  268. <p id="swim">swim</p>
  269. <div class="frame"><img src="swim1.jpg" alt="swim1"></div>
  270. <div class="frame"><img src="swim2.jpg" alt="swim2"></div>
  271. <div class="frame"><img src="swim3.jpg" alt="swim3"></div>
  272. </div>
  273.  
  274. <div class="example">
  275. <div class="oneline">
  276.  
  277. <p id="dance">dance</p>
  278. <div class="frame"><img src="dance1.jpg" alt="dance1"></div>
  279. <div class="frame"><img src="dance2.jpg" alt="dance2"></div>
  280. <div class="frame"><img src="dance3.jpg" alt="dance3"></div>
  281. </div>
  282. </div>
  283.  
  284.  
  285.  
  286. </div>
  287.  
  288.  
  289. <footer class="main-footer">
  290. <center>
  291. <img src="logo.png" alt="logo">
  292. <ul>
  293. <li><a href="#" style="color: white;">fitnes</a></li>
  294. <li><a href="#" style="color: rgb(40, 221, 152);">spa</a></li>
  295. <li><a href="#" style="color: cyan;">swim</a></li>
  296. <li><a href="#" style="color:rgb(247, 227, 115);">dance</a></li>
  297. </ul>
  298. </center>
  299. </footer>
  300. <script>
  301.  
  302.  
  303. function myFunction() {
  304. var x = document.getElementById("myTopnav");
  305. if (x.className === "topnav") {
  306. x.className += " responsive";
  307. } else {
  308. x.className = "topnav";
  309. }
  310. }
  311.  
  312. </script>
  313.  
  314. </body>
  315. </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!