http://artur236.cba.pl/ph/start.html
html-strona glowna
Kod: Zaznacz cały
<!DOCTYPE HTML>
<html lang="pl-PL">
<head>
<meta name="description" content="Philippines-I love it!"/>
<meta name="keywords" content="Ph, foods, traditional, island, dream, culture, palms "/>
<title>♥Philippines ♥</title>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" href="wyglad.css" type="text/css"/><!-- dolaczenie css do html-->
<link rel="stylesheet" href="menulista.css" type="text/css"/><!-- dolaczenie css do html-->
<link href='https://fonts.googleapis.com/css?family=Dancing+Script' rel='stylesheet' type='text/css'>
<script async src="js/jquery-1.6.4.js"></script><!-- ładowane asynchorniczne-przyespiesz twieranie strony-->
</head>
<body>
<div class="tile1"><a href="facts.html" class="tilelink"></a></div>
<div id="container">
<div class="logo"> <img height="250" width="100%" id="obrazek" src="0.jpg" alt="tapeta" /> </div>
<div class="logo2"><img class="logophoto" src="0.jpg" alt="zdjecie"></div>
<div class="pojemnik1">
<ol id="menu">
<li><a href="start.html">Start</a></li>
<li><a href="#">Info</a>
<ul>
<li><a href="country.html">About country</a></li>
<li><a href="culture.html">Amazing culture</a></li>
<li><a href="foods.html">Strange foods</a></li>
<li><a href="reasons.html" >50 Reasons</a></li>
</ul></li>
<li><a href="#">Gallery</a><ul>
<li><a href="philipines.html">Philippines</a></li>
<li><a href="city.html">Iligan</a></li>
<li><a href="vampire.html">My Vampire</a></li>
</ul></li>
<li><a href="#">FAQ</a><ul>
<li><a href="me.html">About me</a></li>
<li><a href="ph.html"> About Ph</a></li>
<li><a href="would.html">Iwould...</a></li>
</ul></li>
</ol>
</div>
<div id="zobacz"><br/><center><b>Also look at:</b></center>
<ul type="I">
<li ><a href="http://www.poland.ph/en/" target="_blank">Consulate republic of Poland in the Philippines<br/></a></li>
<li><a href="http://www.justonewayticket.com/2014/12/25/travel-the-philippines-2015-20-photos-that-will-make-you-pack-your-bags-and-go/" target="_blank">20 amazing photos<br/></a></li>
<li><a href="http://www.philippines.hvu.nl/" target="_blank">Ph-all in one<br/></a></li>
</ul>
</div>
<div id="tekstglowny" >
<p>Are you looking for information of the Philippines?</p>
<p>Are you thinking about traveling to this country?</p> Not?
<p>So maybe are u looking for curiosities about this country?</p>
<p>If your answer on the one of above question sound "YES",then you come at the right place</p></br></div>
<div id="reklama"></div>
<div id="komentarz"></div>
<div id="footer" > Artur Dróżdż ©2016 Warszawa,Polska</div>
</div>
<script src="jquery-1.11.3.min.js"></script>
</body>
</html>
Kod: Zaznacz cały
body{ background-color:white;
color:black;
font-size: 20px;
font-family:cursive,sans-serif;}
#container{background-color:white;
width:100%;
margin: auto;
position: relative;}
h4, h1{
text-align: center;
}
.logo{ text-align: center;
vertical-align: middle;
padding: 0px;
vertical-align: bottom;
background-color: white;}
.logo2{
float:none;}
.start, galeria, omnie,faq{color:black;
text-align: center;
padding-top:20px;
margin-top: 15px;
margin-left:27px;
margin-right: 20px;
background-color: #FFFF00;
height: 80px;
min-width:25%;
float:left;}
.start:hover,.omnie:hover,.galeria:hover,.faq:hover{
background-color: #DDDD00;
cursor:pointer;
min-width:25%;}
#zobacz{color:black;
clear:both;
float:left;
margin-top: 8%;
margin-right:1%;
padding-left:1%;
padding-bottom:2%;
width: 15%;
height:auto;
background-color: #9999CC;
text-align:left;
border-radius: 50px;
/*obramowanie / grubosc obramowania */
border-style:double;
border-width: 0px;
font-size: 20px;
}
#tekst{
float:left;
margin-top: 3%;
margin-left: 0%;
margin-right: 0%;
padding:2%;
width: 62%;
height:auto;
background-color: white;
background-position: bottom;
font-size: 25px;}
#tekstglowny{text-align: center;
float:left;
margin-top: 3%;
margin-left: 0%;
margin-right: 0%;
padding:2%;
width: 62%;
height:auto;
background-color: white;
background-position: bottom;
font-size: 25px;}
#reklama{
float:right;
margin-top:3%;
width: 15%;
background-image: url("0.png");
background-repeat: no-repeat;
background-position:center;
height:450px;
background-color:white;
margin-left:2%;
}
#komentarz{
padding-top: 20px;
font-family: serif;
clear:both;}
#footer{display: block;
margin: 0 auto;
font-family: serif;
font-size: 70%;
/*margin-top:10px;*/
border-top-style: dotted;
border-width: 2px;
text-align: center;
padding-top:1%;
position:absolute;bottom:0;
width: 100%;
;
}
/*.gallery{
float:left;
width:65%;
text-align: center;
height:auto;}*/
.foodtable{display: block;
border-spacing: 1px 60px;
width:100%;
margin: 0 auto;
text-align: center;}
.foodphotos{height:120%;
width:100%;
}
.foto2{
float:left;
padding-top:3%;
padding-left:3%;
width: 30%;
height:180px;
}
.foto0{ display: block;
width: 99%;
height:300px;
margin: 0 auto;}
.foto{ width:30%;
height:180px;
text-align: center;
padding:5px;}
.thx{margin:0 auto;
display: block;
height: 400px;
background-position: bottom;
text-align: center;}
#tekstgallery{
margin-top: 3%;
float:left;
width:65%;
text-align: center;
height:auto;}
/*powieksza obrazek po najchaniu*/
.foto:hover {
transform: scale(2);}
.foto2:hover {
transform: scale(2);}
.pojemnik1{
text-align: center;
color:black;
font-size: 200%;
margin-top: 5px;
margin-left:auto;
margin-right: auto;
background-color:#EAEAAE;
height: 80px;
width:100%; }
.sticky{
width: 100%;
position:fixed;
margin:auto;
top: 5px;
z-index: 100%;
}
#about{
font-size: 100%;}
ol{padding:0;
margin: 0;
list-style-type:none;
font-size: :100%;
width:100%;
height:80px;
line-height:200%;
display:inline-block;
}
/*ustalamy wyglad linkow w menu rozwijanym*/
ol a{
color:black;
text-decoration: none;
display: block;
overflow:hidden;
}
ol>li{
float:left;
width:20%;
height: 80px;
margin-left:4%;
}
ol>li:nth-child(1){
background-color:#A68064;
border-radius: 10px;}
ol>li:nth-child(2){
background-color:#A68064;
border-radius: 10px;}
ol>li:nth-child(3){
background-color:#A68064;
border-radius: 10px;}
ol>li:nth-child(4) {
background-color:#A68064;
border-radius: 10px;}
/*zmienia sie kolor tla po najechaniu*/
ol > li:hover{background-color: #B68e6D;}
/*zmienia kolor czcionki po najechaniu*/
ol > li:hover > a
{color: white;}
/*stylizujemy wewnetrzną*/
ol > li > ul
{
list-style-type: none;
padding: 0;
margin: 0;
height: 40px;
display: none;
}
ol > li:hover > ul
{display: block;}
ol > li > ul > li
{
background-color:#EAEAAE;
position: relative;
z-index: 100;
border-top: 1px dashed #751b1b;
border-radius: 10px;
border:groove;
border-color: #B68e6D;
font-size: 30px;
}
ol > li > ul > li:hover
{background-color: #B68e6D;}
ol > li > ul > li:hover > a
{color: white;}
/*usuwa podkreslenie i zmienia kolor odnośnika(linku) w całym pliku! */
a:link, a:visited, a:focus { text-decoration: none; color:black;}
a:hover{color:blueviolet;}
