Facebook

Re: index.html safest cryptocurrency exchange

From Little Earthworm, 3 Years ago, written in HTML5.
This paste is a reply to index.html from Mateusz - view diff
URL https://pastebin.pl/view/f936935f
Embed
Download Paste or View Raw
Hits: 155
  1. <!DOCTYPE HTML>
  2. <html lang="pl">
  4.         <meta charset="utf-8">
  5.         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6.         <link href="https://fonts.googleapis.com/css?family=Noto+Sans:400,700&subset=latin-ext&display=swap" rel="stylesheet">
  7.        
  8.         <title>Motoryzacja</title>
  9.  
  10.         <script>
  11.                 function random()
  12.         {
  13.                 var tekst = [
  14.                 "Za konstruktora pierwszego samochodu uznaje się Carla Benza, który w 1885 roku zbudował samochód trójkołowy z jednocylindrowym czterosuwowym silnikiem benzynowym Gottlieba Daimlera.",
  15.                 "Rolls-Royce Motor Cars to brytyjski producent samochodów luksusowych, sportowych i SUV-ów z siedzibą w Goodwood działający od 1906 roku.",
  16.                 ];
  17.                
  18.                 var losowy = tekst[Math.floor(Math.random()*tekst.length)]
  19.  
  20.                 document.getElementById("randomtext").innerHTML = losowy;
  21.  
  22.                  setTimeout("random()",5000);
  23.         };
  24.         </script>
  25.  
  26.  
  27.         <style>
  28.                 body {
  29.         margin: 0;
  30.         padding: 0;
  31.         font-family: 'Noto Sans';
  32. }
  33.  
  34. .navbar {
  35.         position: fixed;
  36.         display: flex;
  37.         justify-content: center;
  38.         align-items: center;
  39.         flex-direction: row;
  40.         flex-wrap: wrap;
  41.         background-color: #fff;
  42.         width: 100%;
  43.         height: 80px;
  44.         z-index: 1;
  45. }
  46.  
  47. .nav {
  48.         display: flex;
  49.         justify-content: right;
  50.         list-style: none;
  51.         margin-right: 10%;
  52. }
  53.  
  54. .logo {
  55.         flex: 1 1 auto;
  56.         margin-left: 10%;
  57.         text-transform: uppercase;
  58.         letter-spacing: 1px;
  59.         font-weight: bold;
  60.         font-size: 30px;
  61. }
  62.  
  63. a {
  64.         margin: 15px;
  65.         color: rgba(0,0,0,0.6);
  66.         text-decoration: none;
  67.         text-transform: uppercase;
  68.         transition: color 0.2s;
  69. }
  70.  
  71. ul a:hover {
  72.         color: rgba(0,0,0,1);
  73. }
  74.  
  75. #slider {
  76.         position: relative;
  77.         background-image: url(black.jpg);
  78.         width: 100%;
  79.         height: 70vh;
  80.         background-repeat: no-repeat;
  81.         -webkit-background-size: cover;
  82.         background-size: cover;
  83. }
  84.  
  85. #slider2 {
  86.         position: relative;
  87.         background-image: url(black.jpg);
  88.         width: 100%;
  89.         height: 30vh;
  90.         background-repeat: no-repeat;
  91.         -webkit-background-size: cover;
  92.         background-size: cover;
  93. }
  94.  
  95. .container {
  96.         position: relative;
  97.         text-align: center;
  98.         color: white;
  99.         font-size: 24px;
  100. }
  101.  
  102. .text-over-image {
  103.         width: 100%;
  104.         position: absolute;
  105.         top: 50%;
  106.         left: 50%;
  107.         transform: translate(-50%, -50%);
  108.         text-transform: uppercase;
  109.  
  110. }
  111.  
  112. .text-over-image2 {
  113.         width: 100%;
  114.         position: absolute;
  115.         top: 60%;
  116.         left: 50%;
  117.         transform: translate(-50%, -50%);
  118.         text-transform: uppercase;
  119.  
  120. }
  121.  
  122. .container h1 {
  123.         margin-bottom: 10px;
  124.         color: white;
  125. }
  126.  
  127. .container a {
  128.         color: white;
  129.         background-color: #E50000;
  130.         padding: 20px 40px;
  131.         transition: color 0.4s, background-color 0.4s;
  132.         font-size: 18px;
  133. }
  134.  
  135. .container a:hover {
  136.         color: black;
  137.         background-color: white;
  138. }
  139.  
  140. .ciekawostka {
  141.         margin-left: auto;
  142.         margin-right: auto;
  143.         text-align: center;
  144.         background-color: white;
  145.         font-size: 24px;
  146.         padding: 60px 0;
  147.         color: black;
  148.         width: 95%;
  149. }
  150.  
  151. .ciekawostka h1 {
  152.         font-size: 28px;
  153.         margin: 0 0 20px 0;
  154.         padding: 0;
  155. }
  156.  
  157. #randomtext {
  158.  
  159. }
  160.  
  161. .about-area, .portfolio-area{
  162.         position: relative;
  163.         display: flex;
  164.         justify-content: space-around;
  165.         align-items: center;
  166.         flex-wrap: wrap;
  167.         flex-direction: row;
  168.         width: 100%;
  169. }
  170.  
  171. .text-part {
  172.         width: 65%;
  173.         padding: 50px 0;
  174.  
  175. }
  176.  
  177. h1 {
  178.         font-size: 50px;
  179.         text-align: center;
  180.         color: #000;
  181.         text-transform: uppercase;
  182. }
  183.  
  184. p {
  185.         font-size: 24px;
  186.         line-height: 40px;
  187. }
  188.  
  189. .about-area, .footer{
  190.         background-color: black;
  191.         color: white;
  192. }
  193.  
  194. .about-area h1 {
  195.         color: white;
  196. }
  197.  
  198. .services-area h1 {
  199.         color: white;
  200. }
  201.  
  202. html {
  203.         scroll-behavior: smooth;
  204. }
  205.  
  206. .group {
  207.         width: 1000px;
  208.         margin-bottom: 50px;
  209. }
  210.  
  211. .leftside {
  212.         width: 300px;
  213.         float: left;
  214.         margin-right: 50px;
  215.         opacity: 0.8;
  216.         transition: opacity 0.2s;
  217. }
  218.  
  219. .leftside:hover {
  220.         opacity: 1;
  221. }
  222.  
  223. .middleside {
  224.         width: 300px;
  225.         float: left;
  226.         margin-right: 50px;
  227.         opacity: 0.8;
  228.         transition: opacity 0.2s;
  229. }
  230.  
  231. .middleside:hover {
  232.         opacity: 1;
  233. }
  234.  
  235.  
  236. .rightside {
  237.         width: 300px;
  238.         float: left;
  239.         opacity: 0.8;
  240.         transition: opacity 0.2s;
  241. }
  242.  
  243. .rightside:hover {
  244.         opacity: 1;
  245. }
  246.  
  247. .group img {
  248.         width: 100%;
  249. }
  250.  
  251. .ciekawostka2 {
  252.         width: 100%;
  253.         padding: 40px 0;
  254.         background-color: white;
  255.         margin-bottom: 40px;
  256. }
  257.  
  258. .ciekawostka-last {
  259.         width: 100%;
  260.         padding: 40px 0;
  261.         background-color: white;
  262.         margin: 0;
  263. }
  264.  
  265. .area {
  266.         margin: 0 auto;
  267.         width: 1000px;
  268. }
  269.  
  270. .image {
  271.         width: 400px;
  272.         float: left;
  273. }
  274.  
  275. .image img {
  276.         width: 100%;
  277. }
  278.  
  279. .text {
  280.         width: 560px;
  281.         height: 400px;
  282.         float: left;
  283.         margin-left: 40px;
  284.  
  285. }
  286.  
  287. .title {
  288.  
  289. }
  290.  
  291. .title h1 {
  292.         margin: 0;
  293.         padding: 0;
  294.         text-transform: uppercase;
  295.         font-size: 40px;
  296.         text-align: left;
  297. }
  298.  
  299. .content {
  300.         font-size: 20px;
  301. }
  302.  
  303. .ciekawostka2 p {
  304.         font-size: 24px;
  305.         line-height: 36px;
  306. }
  307.  
  308. .ciekawostka-last p {
  309.         font-size: 24px;
  310.         line-height: 36px;
  311. }
  312.  
  313.  
  314. .footer {
  315.         text-align: center;
  316.         padding: 30px 0;
  317. }
  318.         </style>
  319.  
  320. </head>
  321. <body onload="random();">
  322.  
  323.         <div class="navbar">
  324.                 <a href="index.html" class="logo">Motoryzacja</a>
  325.                 <ul class="nav">
  326.                         <li><a href="index.html">Strona Główna</a></li>
  327.                         <li><a href="ciekawostki.html">Ciekawostki</a></li>
  328.                 </ul>
  329.         </div>
  330.        
  331.         <div class="container">
  332.                 <div id="slider"></div>
  333.                 <div class="text-over-image">
  334.                         <h1>Motoryzacja moją pasją</h1>
  335.                         Ciekawostki i nie tylko <br><br><br><br>
  336.                         <a href="#">Czytaj więcej</a>
  337.                 </div>
  338.         </div>
  339.  
  340.         <div class="ciekawostka">
  341.                 <h1>Czy wiesz, że...</h1>
  342.                 <div id="randomtext"></div>
  343.         </div>
  344.  
  345.         <div class="about-area">
  346.                 <h1>Wyróżnione kolekcje</h1>
  347.                 <div class="group">
  348.                         <div class="leftside">
  349.                                 <a href="#"><img src="car1.png"></a>
  350.                         </div>
  351.                         <div class="middleside">
  352.                                 <a href="#"><img src="car1.png"></a>
  353.                         </div>
  354.                         <div class="rightside">
  355.                                 <a href="#"><img src="car1.png"></a>
  356.                         </div>
  357.                         <div style="clear:both;"></div>
  358.                 </div>
  359.                 <div class="group">
  360.                         <div class="leftside">
  361.                                 <a href="#"><img src="car1.png"></a>
  362.                         </div>
  363.                         <div class="middleside">
  364.                                 <a href="#"><img src="car1.png"></a>
  365.                         </div>
  366.                         <div class="rightside">
  367.                                 <a href="#"><img src="car1.png"></a>
  368.                         </div>
  369.                         <div style="clear:both;"></div>
  370.                 </div>
  371.         </div>
  372.         <div class="portfolio-area">
  373.                 <div class="text-part">
  374.                         <h1>Krótko i zwięźle...</h1>
  375.                         <p>
  376.                                 Jeśli interesujesz się samochodami, motocyklami, ciągnikami itp. to ta strona jest właśnie dla Ciebie. Na tej stronie znajdziesz <span style="font-weight: bold;">wiele ciekawych informacji</span> o motoryzacji, zobaczysz odpowiedzi na najczęściej zadawane pytania i odkryjesz <span style="font-weight: bold;">nowe ciekawostki</span>. Zastanawiałeś się kiedyś czym jeździ prezydent Polski? A może chciałbyś się dowiedzieć skąd wzięły się nazwy najpopularniejszych marek samochodów. To i wiele więcej znajdziesz na tej stronie.
  377.                         </p>
  378.                 </div>
  379.         </div>
  380.         <div class="footer">
  381.                 Wszelkie prawa zastrzeżone &copy; 2020
  382.         </div>
  383. </body>
  384. </html>

Reply to "Re: index.html"