- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <link href='http://fonts.googleapis.com/css?family=Chakra+Petch&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
- <link href='http://fonts.googleapis.com/css?family=Chelsea+Market&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
- <link href='http://fonts.googleapis.com/css?family=Combo&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
- <title>Adrian Żebrowski</title>
- <link href="style.css" rel="stylesheet" type="text/css">
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
- <script src="http://malsup.github.com/jquery.cycle2.js"></script>
- <script type="text/javascript">
- function MM_preloadImages() { //v3.0
- var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
- var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
- if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
- }
- function MM_swapImgRestore() { //v3.0
- var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
- }
- function MM_findObj(n, d) { //v4.01
- var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
- d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
- if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
- for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
- if(!x && d.getElementById) x=d.getElementById(n); return x;
- }
- function MM_swapImage() { //v3.0
- var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
- if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
- }
- </script>
- </head>
- <body onLoad="MM_preloadImages('jpg/logo.png')">
- <article>
- <img src ="jpg2/everlast-logo.png" id = "Logo">
- <div class="topnav" id="myTopnav">
- <nav>
- <a href="#Produkty" class="active">Produkty</a>
- <a href="#Informacje">Informacje</a>
- <a href="#Galeria">Galeria</a>
- <a href="#Media">Media</a>
- <a href="#Kontakt">Kontakt</a>
- <a href="javascript:void(0);" class="icon" onclick="myFunction()">
- <i class="fa fa-bars"></i>
- </a>
- </nav>
- </div>
- <header>
- <div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
- <div class="carousel-inner">
- <div class="carousel-item active">
- <img src="jpg2/boxing-gloves.png" class="d-block w-50" alt="boxing-gloves">
- </div>
- <div class="carousel-item">
- <img src="jpg2/mouthguard.png" class="d-block w-50" alt="mouthguard">
- </div>
- <div class="carousel-item">
- <img src="jpg2/hand-wrap.png" class="d-block w-50" alt="hand-wrap">
- </div>
- </div>
- <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
- <span class="carousel-control-prev-icon" aria-hidden="true"></span>
- <span class="sr-only">Previous</span>
- </a>
- <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
- <span class="carousel-control-next-icon" aria-hidden="true"></span>
- <span class="sr-only">Next</span>
- </a>
- </div>
- </header>
- <section id = "Produkty"><h2><a href="#Logo">Produkty</a></h2>
- <div class="container">
- <div class="row">
- <div class="col-sm-4">
- <h3>Ochraniacz szczęki Everlast</h3>
- <img src="jpg2/mouthguard.png" alt="mouthguard2">
- <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
- </p>
- </div>
- <div class="col-sm-4">
- <h3>Kask bokserski<br>Everlast<br></h3>
- <img src="jpg2/helmet.png">
- <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>
- </div>
- <div class="col-sm-4">
- <h3>Rękawice bokserskie Everlast</h3>
- <img src="jpg2/gloves.png">
- <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>
- </div>
- </div>
- </div>
- </section>
- <section id = "Informacje"><h2><a href="#Logo">Informacje</a></h2>
- <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>
- </section>
- <section id = "Galeria"><h2><a href="#Logo">Galeria</a></h2>
- <img src = "jpg2/everlast-logo.png" id = "zdjecia">
- <img src = "jpg2/mike-tyson.jpg" onClick ="MM_swapImage('zdjecia','','jpg2/mike-tyson.jpg',1)">
- <img src = "jpg2/mcgregor.jpg" onClick ="MM_swapImage('zdjecia','','jpg2/mcgregor.jpg',1)">
- <img src = "jpg2/golota.jpg" onClick ="MM_swapImage('zdjecia','','jpg2/golota.jpg',1)" >
- </section>
- <section id = "Media">
- <h2><a href="#Logo">Media</a></h2>
- <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>
- </section>
- <section id = "Kontakt">
- <h2><a href="#Logo">Kontakt</a></h2>
- <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>
- </section>
- <footer><span class="nazwa">Adrian Żebrowski</span>
- <span class="rok"> 2020 </span> </footer>
- </article>
- <script>
- function myFunction() {
- var x = document.getElementById("myTopnav");
- if (x.className === "topnav") {
- x.className += " responsive";
- } else {
- x.className = "topnav";
- }
- }
- </script>
- </body>
- </html>
- @charset "utf-8";
- /* CSS Document */
- header{
- margin-left: auto;
- margin-right: auto;
- }
- body {
- font-family: Catamaran, "monospace";
- font-size: 1em;
- background-image: url("jpg2/boxing-training-gym.jpg");
- background-repeat: no-repeat;
- background-attachment: fixed;
- background-size: cover;
- }
- a
- {
- text-decoration: none;
- color: rgba(255,255,255,1);
- }
- nav a:hover{
- color: rgba(255,0,0,.5)
- }
- nav{text-align: center;}
- Article {
- background-color: rgba(0,0,0,0.1);
- width: 50%;
- margin-left: auto;
- margin-right: auto;
- }
- P {
- font-size: 2.8vw;
- color: rgba(255,255,255,1);
- }
- img {
- width:50%;
- margin-left: auto;
- margin-right: auto;
- display:block ;
- }
- #Logo {
- display: block;
- width: 40%;
- margin:auto;
- }
- nav {
- text-align: center;
- }
- nav li {
- display: inline;
- padding: 20px;
- color: rgba(255,255,255,1.00);
- text-decoration: none;
- }
- #Produkty img{
- width: 66%;
- display: block;
- margin: auto;
- }
- #Produkty p {
- text-align: center;
- padding-left: 3px;
- padding-right: 3px;
- font-size: 1.4vw;
- height: 480px;
- overflow: auto;
- font-family: 'Times New Roman', sans-serif;
- }
- #Produkty div {
- width: 100%;
- text-align: center;
- float: left;
- background-color: rgba(128,128,128,1.00);
- }
- #Informacje p{
- clear: left;
- font-size:1.2vw;
- text-align: justify;
- font-family: 'Chakra', sans-serif;
- }
- #Galeria {
- text-align: center;
- }
- #Galeria img {
- width: 20%;
- height: 200px;
- border-radius: 300px;
- display: inline;
- }
- #Galeria #zdjecia {
- width: 70%;
- display: block;
- height: 70%;
- border-radius: 100px;
- }
- #Media iframe {
- margin:auto;
- text-align: center;
- display:block;
- border-radius:50px;
- }
- #Kontakt iframe {
- margin: auto;
- border: solid 1px black;
- border-radius: 50px;
- display:block;
- }
- h1, h2 {
- background-color: rgba(105,105,105,1.00);
- text-align: center;
- color: rgb(77,255,7);
- font-size: 5.9vw;
- }
- h1 a {
- text-decoration: none;
- color: rgba(255,255,255,1.00);
- }
- h2 a {
- text-decoration: none;
- color: rgba(0,0,0,1.00);
- }
- h1:hover, h2:hover, h1:hover a, h2:hover a h3:hover a{
- color: rgba(119,114,114,1.00);
- }
- footer {
- background-color: rgba(0,0,0,1.00);
- color: rgba(255,255,255,1.00);
- position: fixed;
- bottom: 0px;
- overflow: hidden;
- font-size:1.5vw;
- }
- .nazwa {
- float: left;
- font-size:2.0vw;
- }
- .rok {
- float: right;
- font-size:2.0vw;
- }
- .cycle-slideshow{
- margin: 0;
- }
- .topnav {
- overflow: hidden;
- background-color: rgba(105,105,105,1.00);
- }
- .topnav a {
- float: left;
- display: block;
- color: #ffff00;
- text-align: center;
- padding: 6px 16px;
- text-decoration: none;
- font-size: 1.5vw;
- font-family: 'Combo', sans-serif;
- }
- .topnav a:hover {
- background-color: #ddd;
- color: black;
- }
- .topnav a.active {
- background-color: #000000;
- color: yellow;
- }
- .topnav .icon {
- display: none;
- }
- @media screen and (max-width: 400px) {
- .topnav a{font-size:6.4vw;}
- .topnav a:not(:first-child) {display: none;}
- .topnav a.icon {
- float: right;
- display: block;
- }
- }
- @media screen and (max-width: 400px) {
- article {
- width:100%;
- }
- #Media iframe{
- width:90%;
- }
- #Kontakt iframe{
- width:85%;
- }
- #Produkty p {
- height:auto; font-size:4.4vw;
- }
- #Informacje p{
- font-size:4.7vw;
- }
- .nazwa{font-size:0px;}
- .rok {font-size:0px;}
- .topnav.responsive {position: relative;}
- .topnav.responsive .icon {
- position: absolute;
- right: 0;
- top: 0;
- }
- .topnav.responsive a {
- float: none;
- display: block;
- text-align: left;
- }
- }
- .lw {
- float: left;
- padding-left: 20px;
- }
- .pr {
- float: right;
- padding-right:20px;
- }
- .carousel-inner img {
- width: 100%;
- height: 100%;