<!DOCTYPE html> <html> <head> <title>WEBSIDE</title> <meta charset="utf-8"> <meta content="IE=edge" http-equiv="X-UA-Compatible"><!--określanie treści nagłówka odpowiedzi HTTP dla dokumentu HTML--> <meta content="width=device-width, initial-scale=1.0" name="viewport"><!--informacje o zawartości strony internetowej--> </head> <body> <!--panel nawigacyjny--> <div class="nawigacja fixed-top"> <div class="container"> <nav class="navbar navbar-expand-lg navbar-light pl-0 pr-0 ml-auto"> <a class="navbar-brand ht-logo col-6 pl-0" href="#">
<img alt="logo" class="ht-logo-icon" src="website.png"></a>
<button aria-controls="navbarSupportedContent2" aria-expanded="false" aria-label="Toggle navigation"
class="navbar-toggler ml-auto" data-target="#navbarSupportedContent2" data-toggle="collapse" type="button"><span class="navbar-toggler-icon"></span></button> <div class="collapse navbar-collapse" id="navbarSupportedContent2"> <ul class="navbar-nav pr-0"> <li class="nav-item active"> <a class="nav-link text-white pr-4" href="#">STRONA GŁÓWNA</a> </li> <li style="list-style: none"><span class="sr-only">(current)</span></li> <li class="nav-item dropdown"> <a aria-expanded="false" aria-haspopup=" true" class="nav-link dropdown-toggle
text-white pr-4" data-toggle="dropdown" href="#" id="navbarDropdown2" role="button">JĘZYKI</a> <div aria-labelledby="navbarDropdown2" class="dropdown-menu"> <a class="dropdown-item" href="#">HTML</a> <a class="dropdown-item" href="#">JavaScript</a> <a class="dropdown-item" href="#">CSS</a> </div> </li> <li class="nav-item"> <a class="nav-link text-white pr-4" href="#">ZAWÓD</a> </li> <li class="nav-item"> <a class="nav-link text-white pr-4" href="#">WYKONANIE</a> </li> </ul>v </div> </nav> </div> </div> <!--główny kontener--> <div class="container mt-5"> <div class="row"> <!--wskazuje rząd elementów--> <!-- prezentacja obrazkowa --> <div class="col-12 col-lg-7"> <!--wskazuje układ siatki na stronie (CSS)--> <div class="row"> <div class="col-12" id="ik-img-gl"> </div> <div class="col-12" id="ik-img-podgl"></div> </div> </div> <div class="col-12 col-lg-5 text-center pr-4 pl-4"> <div class="col-12 info-www p-4"> <font color="#D81A60" size="10px"></font> <h1 class="pt-4"><font color="#D81A60" size="10px"><b>STRONA WWW</b></font></h1> <p class="mt-4">20 grudnia 1990 roku - powstała pierwsza w historii strona internetowa.
Jej twórcą jest brytyjski fizyk Tim Berners-Lee,</p><img alt="Tim Berners-Lee" class="img-fluid rounded" src="Tim%20Berners-Lee.jpg" width="50%"> <p class="mb-4">który chciał ułatwić przekazywanie dokumentów i treści w ramach CERN - Europejskiej Organizacji Badań Jądrowych.</p> <p>W efekcie zainaugurował znaną nam dziś sieć.</p> <p>Pierwsza strona internetowa została uruchomiona 6 sierpnia 1991 roku. Poświęcona była informacjom o projekcie World Wide Web.
Działała na komputerze NeXT w Europejskiej Organizacji Badań Jądrowych CERN.</p><a href="http://info.cern.ch/hypertext/WWW/TheProject.html">PIERWSZA STRONA INTERNETOWA</a> </div> </div> </div><!--rodzaje jezykow--> <div class="col-12"> <div class="row"> <div class="col-12 col-lg-4 mt-5" id="ik-img-html"></div> <div class="col-12 col-lg-4 mt-5" id="ik-img-js"></div> <div class="col-12 col-lg-4 mt-5" id="ik-img-css"></div> </div> </div> </div><!--footer--> <footer></footer> <p> </p> <script src="js/jquery-3.4.1.min.js"> </script> <!--podpięcie arkusza JS--> <script src="js/popper.min.js"> </script> <!--podpięcie arkusza JS--> <script src="js/bootstrap-4.4.1.js"> </script> <!--podpięcie arkusza JS--> </body> </html>
body {
background: hsla(226, 47%, 35%, 1);
background: linear-gradient(135deg, hsla(226, 47%, 35%, 1) 0%, hsla(226, 49%, 41%, 1) 12%, hsla(226, 42%, 50%, 1) 29%, hsla(236, 34%, 61%, 1) 59%, hsla(236, 35%, 64%, 1) 73%, hsla(236, 37%, 68%, 1) 86%, hsla(235, 34%, 73%, 1) 100%);
background: -moz-linear-gradient(135deg, hsla(226, 47%, 35%, 1) 0%, hsla(226, 49%, 41%, 1) 12%, hsla(226, 42%, 50%, 1) 29%, hsla(236, 34%, 61%, 1) 59%, hsla(236, 35%, 64%, 1) 73%, hsla(236, 37%, 68%, 1) 86%, hsla(235, 34%, 73%, 1) 100%);
background: -webkit-linear-gradient(135deg, hsla(226, 47%, 35%, 1) 0%, hsla(226, 49%, 41%, 1) 12%, hsla(226, 42%, 50%, 1) 29%, hsla(236, 34%, 61%, 1) 59%, hsla(236, 35%, 64%, 1) 73%, hsla(236, 37%, 68%, 1) 86%, hsla(235, 34%, 73%, 1) 100%);
}
#ik-img-gl {
background-image: url("../photogl.jpg");
background-repeat: no-repeat;
background-size: cover;
height: 520px;
margin-left: 0px;
border-radius: 18px;
background-position: 58% 0;
}
#ik-img-one {
background-image: url("../podgl.png");
background-repeat: no-repeat;
background-size: cover;
margin-top: 16px;
height: 130px;
border-radius: 9px;
background-position: 50% 50%;
}
#ik-img-html {
background-image: url("../5.png");
background-repeat: no-repeat;
margin-top: 13px;
height: 525px;
border-radius: 9px;
margin-left: -14px;
background-position: 50% 0%;
}
#ik-img-js {
background-image: url("../6.PNG");
background-repeat: no-repeat;
margin-top: 16px;
height: 525px;
border-radius: 9px;
background-position: 50% 0%;
}
#ik-img-css {
background-image: url("../7.PNG");
background-repeat: no-repeat;
margin-top: 16px;
height: 525px;
border-radius: 9px;
width: auto;
background-position: 50% 0%;
}
.info-www {
background-color: #F8F8F8;
-webkit-box-shadow: 4px 0px 4px rgba(0, 0, 0, 0.30);
box-shadow: 4px 0px 4px rgba(0, 0, 0, 0.30);
border-radius: 8px;
color: rgba(67, 67, 67, 1.00);
}
#logo {
background-image: url("../logo.png");
}
#ik-img-podgl {
background-image: url("../podgl.png");
background-size: cover;
border-radius: 18px;
margin-top: 5px;
height: 100px;
}
.nawigacja {
background-color: #46C4DC;
background-position: 50% 50%;
-webkit-box-shadow: 1px 0px 10px rgba(67, 67, 67, 0.20);
box-shadow: 1px 0px 10px rgba(67, 67, 67, 0.20);
}
.img-fluid {
margin-top: -5px;
padding-bottom: 11px;
padding-top: 4px;
}
.tresc {
margin-top: 166px;
}
.ht-nawigacja-link {
color: rgba(255, 255, 255, 1.00);
}
.ht-nawigacja-link:hover {
color: rgba(255, 255, 255, 0.50);
transition: 0.4s;
}
.navbar {
background-color: #46C4DC;
}
.ht-logo-icon {
max-width: 160px;
}
.ht-menu-item {
color: #FFFFFF;
margin-bottom: 127px;
}
.ht-glowna {
margin-top: 70px;
}
footer {
height: 50px;
clear: both;
text-align: center;
background-color: #46C4DC;
margin-top: 50px;
padding-top: 10px;
}