Facebook
From ja, 4 Years ago, written in Plain Text.
Embed
Download Paste or View Raw
Hits: 195
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6.         <link href='http://fonts.googleapis.com/css?family=Chakra+Petch&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
  7.         <link href='http://fonts.googleapis.com/css?family=Chelsea+Market&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
  8.         <link href='http://fonts.googleapis.com/css?family=Combo&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
  9.  
  10.        
  11.        
  12. <title>Adrian Żebrowski</title>
  13.  
  14. <link href="style.css" rel="stylesheet" type="text/css">
  15. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  16. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  17.   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  18.   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  19.   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  20.   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  21.   <script src="http://malsup.github.com/jquery.cycle2.js"></script>
  22.        
  23.         <script type="text/javascript">
  24.        
  25.        
  26.                
  27.        
  28.                
  29. function MM_preloadImages() { //v3.0
  30.   var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
  31.     var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
  32.     if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
  33. }
  34.  
  35. function MM_swapImgRestore() { //v3.0
  36.   var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
  37. }
  38.  
  39. function MM_findObj(n, d) { //v4.01
  40.   var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
  41.     d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  42.   if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  43.   for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  44.   if(!x && d.getElementById) x=d.getElementById(n); return x;
  45. }
  46.  
  47. function MM_swapImage() { //v3.0
  48.   var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
  49.    if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
  50. }
  51.     </script>
  52. </head>
  53.        
  54. <body onLoad="MM_preloadImages('jpg/logo.png')">
  55.         <article>
  56.                 <img src ="jpg2/everlast-logo.png" id = "Logo">
  57.                
  58.                
  59.                 <div class="topnav" id="myTopnav">
  60.                 <nav>
  61.   <a href="#Produkty" class="active">Produkty</a>
  62.   <a href="#Informacje">Informacje</a>
  63.   <a href="#Galeria">Galeria</a>
  64.   <a href="#Media">Media</a>
  65.   <a href="#Kontakt">Kontakt</a>
  66.   <a href="javascript:void(0);" class="icon" onclick="myFunction()">
  67.     <i class="fa fa-bars"></i>
  68.   </a>
  69.   </nav>
  70. </div>
  71.                
  72.  
  73.                 <header>
  74.                        
  75.                         <div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
  76.   <div class="carousel-inner">
  77.     <div class="carousel-item active">
  78.       <img src="jpg2/boxing-gloves.png" class="d-block w-50" alt="boxing-gloves">
  79.     </div>
  80.     <div class="carousel-item">
  81.       <img src="jpg2/mouthguard.png" class="d-block w-50" alt="mouthguard">
  82.     </div>
  83.     <div class="carousel-item">
  84.       <img src="jpg2/hand-wrap.png" class="d-block w-50" alt="hand-wrap">
  85.     </div>
  86.   </div>
  87.   <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
  88.     <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  89.     <span class="sr-only">Previous</span>
  90.   </a>
  91.   <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
  92.     <span class="carousel-control-next-icon" aria-hidden="true"></span>
  93.     <span class="sr-only">Next</span>
  94.   </a>
  95. </div>
  96.  
  97.  
  98.                        
  99.           </header>
  100.                         <section id = "Produkty"><h2><a href="#Logo">Produkty</a></h2>
  101.                                 <div class="container">
  102.                                         <div class="row">
  103.                                                 <div class="col-sm-4">
  104.                                         <h3>Ochraniacz szczęki Everlast</h3>
  105.                                         <img src="jpg2/mouthguard.png" alt="mouthguard2">
  106.                                         <p>Unikalna konstrukcja wewnętrznego kanału zawiera opatentowane "stabilizatory" - cienkie struktury przypominające żebra - wykonane ze specjalnego żelopodobnego materiału, który mięknie i staje się plastyczny po umieszczeniu w gorącej wodzie. Po wgryzieniu się bardzo łatwo i ciasno się formuje wokół zębów, aby utworzyć trwałe dopasowanie
  107.                                         </p>
  108.                                 </div>
  109.                                 <div class="col-sm-4">
  110.                                         <h3>Kask bokserski<br>Everlast<br></h3>
  111.                                         <img src="jpg2/helmet.png">
  112.                                         <p>Wzmocniona pianka z zabudową także na policzkach gwarantuje maksymalne bezpieczeństwo. System EverDri powoduje szybkie wchłanianie potu i lepsze przepuszczanie powietrza, co daj idealny komfort treningowy.</p>                       
  113.                                 </div>
  114.                                 <div class="col-sm-4">
  115.                                         <h3>Rękawice bokserskie Everlast</h3>
  116.                                         <img src="jpg2/gloves.png">
  117.                                         <p>Everlast Pro Style Elite elitarne rękawice treningowe, przeznaczone dla osób początkujących i średnio-zaawansowanych. Wykonane są z wytrzymałej skóry syntetycznej. Posiadają gęstą, dwuwarstwową piankę, zapewniając maksymalną ochronę dłoni.</p>
  118.                                 </div>
  119.                                
  120.                                 </div>
  121.                                 </div>
  122.                                
  123.                 </section>
  124.                
  125.                 <section id = "Informacje"><h2><a href="#Logo">Informacje</a></h2>
  126.                         <p>Everlast – amerykański producent odzieży bokserskiej, obuwia oraz akcesoriów sportowych. Firma została założona w 1910 roku przez Jacoba Golomba w Nowym Jorku. Jedna z najpopularniejszych marek bokserskich XX wieku</p>
  127.                 </section>
  128.                
  129.                 <section id = "Galeria"><h2><a href="#Logo">Galeria</a></h2>
  130.                        
  131.                         <img src = "jpg2/everlast-logo.png" id = "zdjecia">
  132.                         <img src = "jpg2/mike-tyson.jpg" onClick ="MM_swapImage('zdjecia','','jpg2/mike-tyson.jpg',1)">
  133.                         <img src = "jpg2/mcgregor.jpg" onClick ="MM_swapImage('zdjecia','','jpg2/mcgregor.jpg',1)">
  134.                         <img src = "jpg2/golota.jpg" onClick ="MM_swapImage('zdjecia','','jpg2/golota.jpg',1)" >
  135.                        
  136.                        
  137.                 </section>
  138.                
  139.                 <section id = "Media">
  140.                         <h2><a href="#Logo">Media</a></h2>
  141.                                 <iframe width="560" height="315" src="https://www.youtube.com/embed/kab772PXbYI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  142.                 </section>
  143.                
  144.                 <section id = "Kontakt">
  145.                         <h2><a href="#Logo">Kontakt</a></h2>
  146.                         <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d96794.9605360727!2d-74.0662449!3d40.6994659!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNowy%20Jork%2C%20Stany%20Zjednoczone!5e0!3m2!1spl!2spl!4v1577986174386!5m2!1spl!2spl" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
  147.                 </section>
  148.                 <footer><span class="nazwa">Adrian Żebrowski</span>
  149.                 <span class="rok"> 2020 </span> </footer>
  150.         </article>
  151. <script>
  152. function myFunction() {
  153.   var x = document.getElementById("myTopnav");
  154.   if (x.className === "topnav") {
  155.     x.className += " responsive";
  156.   } else {
  157.     x.className = "topnav";
  158.   }
  159. }
  160. </script>
  161. </body>
  162. </html>
  163.  
  164.  
  165.  
  166.  
  167.  
  168.  
  169. @charset "utf-8";
  170. /* CSS Document */
  171.  
  172.  
  173. header{
  174.         margin-left: auto;
  175.         margin-right: auto;
  176. }
  177.        
  178. body {
  179.  
  180.         font-family: Catamaran, "monospace";
  181.         font-size: 1em;
  182.        
  183.         background-image: url("jpg2/boxing-training-gym.jpg");
  184.         background-repeat: no-repeat;
  185.         background-attachment: fixed;
  186.         background-size: cover;
  187.        
  188.        
  189. }
  190. a
  191. {
  192.         text-decoration: none;
  193.         color: rgba(255,255,255,1);
  194. }
  195. nav a:hover{
  196.         color: rgba(255,0,0,.5)
  197. }
  198.  
  199. nav{text-align: center;}
  200. Article {
  201.         background-color: rgba(0,0,0,0.1);
  202.         width: 50%;
  203.         margin-left: auto;
  204.         margin-right: auto;
  205. }
  206.  
  207. P {
  208.         font-size: 2.8vw;
  209.         color: rgba(255,255,255,1);
  210. }
  211.  
  212. img {
  213.         width:50%;
  214.         margin-left: auto;
  215.         margin-right: auto;
  216.         display:block ;
  217.        
  218. }
  219.  
  220. #Logo {
  221.         display: block;
  222.         width: 40%;    
  223.         margin:auto;
  224.        
  225. }
  226. nav {
  227.         text-align: center;
  228.        
  229.        
  230. }
  231.  
  232. nav li {
  233.         display: inline;
  234.         padding: 20px;
  235.         color: rgba(255,255,255,1.00);
  236.         text-decoration: none;
  237.        
  238. }
  239. #Produkty img{
  240.         width: 66%;
  241.         display: block;
  242.         margin: auto;
  243.  
  244. }
  245. #Produkty p {
  246.         text-align: center;
  247.         padding-left: 3px;
  248.         padding-right: 3px;
  249.         font-size: 1.4vw;
  250.         height: 480px;
  251.         overflow: auto;
  252.         font-family: 'Times New Roman', sans-serif;
  253.        
  254.        
  255. }
  256.  
  257.  
  258. #Produkty div {
  259.         width: 100%;
  260.         text-align: center;
  261.         float: left;
  262.         background-color: rgba(128,128,128,1.00);
  263. }
  264. #Informacje p{
  265.         clear: left;
  266.         font-size:1.2vw;
  267.         text-align: justify;
  268.         font-family: 'Chakra', sans-serif;
  269.  
  270.        
  271. }
  272.  
  273. #Galeria {
  274.         text-align: center;
  275.        
  276. }
  277.  
  278. #Galeria img {
  279.         width: 20%;
  280.         height: 200px;
  281.         border-radius: 300px;
  282.         display: inline;
  283.        
  284. }
  285.  
  286. #Galeria #zdjecia {
  287.        
  288.         width: 70%;
  289.         display: block;
  290.         height: 70%;   
  291.         border-radius: 100px;
  292.        
  293. }
  294.  
  295. #Media iframe {
  296.        
  297.  
  298.         margin:auto;
  299.         text-align: center;
  300.         display:block;
  301.         border-radius:50px;
  302.  
  303. }
  304.  
  305. #Kontakt iframe {
  306.        
  307.          
  308.          
  309.        
  310.         margin: auto;
  311.         border: solid 1px black;               
  312.         border-radius: 50px;
  313.         display:block;
  314.        
  315. }
  316.  
  317.  
  318. h1, h2 {
  319.         background-color: rgba(105,105,105,1.00);
  320.         text-align: center;
  321.         color: rgb(77,255,7);
  322.         font-size: 5.9vw;      
  323.        
  324. }
  325.  
  326.  
  327. h1 a {
  328.         text-decoration: none;
  329.         color: rgba(255,255,255,1.00);
  330. }
  331.  
  332. h2 a {
  333.         text-decoration: none;
  334.         color: rgba(0,0,0,1.00);
  335. }
  336. h1:hover, h2:hover, h1:hover a, h2:hover a h3:hover a{
  337.         color: rgba(119,114,114,1.00);
  338. }
  339.  
  340. footer {
  341.         background-color: rgba(0,0,0,1.00);
  342.         color: rgba(255,255,255,1.00);
  343.         position: fixed;
  344.         bottom: 0px;
  345.         overflow: hidden;
  346.         font-size:1.5vw;
  347. }
  348.  
  349. .nazwa {
  350.         float: left;
  351.         font-size:2.0vw;
  352. }
  353.  
  354. .rok {
  355.         float: right;
  356.         font-size:2.0vw;
  357. }
  358. .cycle-slideshow{
  359. margin: 0;
  360. }
  361.  
  362.        
  363.  
  364. .topnav {
  365.   overflow: hidden;
  366.   background-color: rgba(105,105,105,1.00);
  367.  
  368.  
  369. }
  370.  
  371. .topnav a {
  372.   float: left;
  373.   display: block;
  374.   color: #ffff00;
  375.   text-align: center;
  376.   padding: 6px 16px;
  377.   text-decoration: none;
  378.   font-size: 1.5vw;
  379.   font-family: 'Combo', sans-serif;
  380. }
  381.  
  382. .topnav a:hover {
  383.   background-color: #ddd;
  384.   color: black;
  385. }
  386.  
  387. .topnav a.active {
  388.   background-color: #000000;
  389.   color: yellow;
  390. }
  391.  
  392. .topnav .icon {
  393.   display: none;
  394. }
  395.  
  396. @media screen and (max-width: 400px) {
  397.   .topnav a{font-size:6.4vw;}
  398.   .topnav a:not(:first-child) {display: none;}
  399.   .topnav a.icon  {
  400.     float: right;
  401.     display: block;
  402.        
  403.        
  404.   }
  405. }
  406.  
  407. @media screen and (max-width: 400px) {
  408.         article {
  409.         width:100%;
  410.         }
  411.         #Media iframe{
  412.         width:90%;
  413.         }
  414.         #Kontakt iframe{
  415.         width:85%;
  416.         }
  417.         #Produkty p {
  418.         height:auto; font-size:4.4vw;
  419.         }
  420.         #Informacje p{
  421.         font-size:4.7vw;
  422.         }
  423.         .nazwa{font-size:0px;}
  424.         .rok {font-size:0px;}
  425.   .topnav.responsive {position: relative;}
  426.   .topnav.responsive .icon {
  427.     position: absolute;
  428.     right: 0;
  429.     top: 0;
  430.        
  431.   }
  432.   .topnav.responsive a {
  433.     float: none;
  434.     display: block;
  435.     text-align: left;
  436.   }
  437. }
  438. .lw {
  439.         float: left;
  440.         padding-left: 20px;
  441. }
  442.  
  443. .pr {
  444.         float: right;
  445.         padding-right:20px;
  446. }
  447.  .carousel-inner img {
  448.       width: 100%;
  449.       height: 100%;
  450.  
  451.