OK. Podaję kod.
Plik apartment.php
<?php
include('head.php');
?>
</head>
<body>
<div class="container">
<?php
include('header.php');
?>
<div class="content">
<div class="gallery">
<?php
include('gallery.php');
?>
</div>
<div class="description" style="text-align: justify;">
<h3>Apartament Na Murach</h3>
Dwupoziomowy apartament o wysokim standardzie do wynajęcia. Jest on położony w średniowiecznej części miasta. Nowoczesna kamienica w którym ów lokal się znajduje bezpośrednio przylega do zabytkowych murów obronnych wybudowanych w XIII wieku, które dodają historycznego klimatu starodawnego miasta. Apartament jest bardzo jasny i przestronny, przez co wpływa pozytywnie na samopoczucie. Przyczynia się do tego także ergonomiczne rozmieszczenie pomieszczeń na które składają się:\
<ul>
<li>
<h3>Salon</h3>
Pomieszczenie o wysokości dwóch poziomów, wyposażone w aneks kuchenny, bar i jadalnię. Ta przestrzenna, reprezentacyjna izba idealnie wręcz nadaje się do wypoczynku lub przyjęcia gości, gdzie można w międzyczasie skorzystać z telewizora o wielkości 50 cali, lub też posłuchać muzyki z wysokiej klasy przenośnego sprzętu audio. Z salonu także prowadzi wejście na drugi poziom apartamentu, gdzie znajduje się pokój dziecięcy. Ponadto można także wyjść na wielki taras. Aneks kuchenny w salonie jest wyposażony w kuchnię indukcyjna, mikrofalową, piekarnik, lodówkę, zmywarkę oraz czajnik bezprzewodowy.
</li>
<li>
<h3>Taras</h3>
Położony wśród średniowiecznych murów oraz drzew. W słoneczne dni idealne miejsce do relaksu na świeżym powietrzu.
</li>
<li>
<h3>Sypialnia</h3>
Pokój położony w południowo-wschodnim narożniku kamienicy od poranka ogrzewany przez słońce, co pozytywnie wpływa na idealne rozpoczęcie nowego dnia tuż po pobudce. Sypialnia jest także wyposażona w telewizor LCD, który umili z kolei zasypianie. Z pomieszczenia jest bezpośredni dostęp do garderoby, która znajduje się koło wielkiego łoża, a także do łazienki położonej na przeciwko wejścia do sypialni.
</li>
<li>
<h3>Łazienka</h3>
Przestronne funkcjonalne pomieszczenie o doskonałym i łatwym w utrzymaniu czystości wystroju. Do wyposażenia łazienki należą: kabina prysznicowa z brodzikiem, pralka automatyczna, toaleta oraz umywalka.
</li>
<li>
<h3>Pokój dla dzieci</h3>
Izba położona na drugim poziomie apartamentu. Wejście do niej prowadzi przez stylowe kręte schody, co niewątpliwie dla dzieci będzie stanowić frajdę. Pokój także jest wyposażony w telewizor LCD oraz co ważne w upalne dni - klimatyzację. Ponadto jest bezpośredni dostęp do toalety umiejscowionej koło tego pomieszczenia.
</li>
</ul>
Standard całego apartamentu został uwieczniony na fotografiach galerii.<br><br>
</div>
</div>
<div class="clear"></div>
<?php
include('footer.php');
?>
</div>
</body>
</html>
Plik style.css
*
{
box-sizing: border-box; /* Dopasowanie rozmiarów wszystkich divów */
}
body
{
/* Background pattern from subtlepatterns.com */
background-image:url(../img/brickwall_2X.png);
font-size: 15px;
color: #767676;
font-family: 'Noto Serif', serif;
}
hr
{
border: 0;
height: 1px;
background: gray;
background-image: linear-gradient(to right, #ededed, gray, #ededed);
}
h1
{
font-size: 30px;
color: #000;
text-shadow: 0px 0px 10px rgba(255, 255, 255, 1);
}
a
{
text-decoration: none;
color: red;
}
ul
{
font-size: 15px !important;
}
table
{
border-collapse: collapse;
width: 100%;
}
th, td
{
}
tr:nth-child(even)
{
}
th
{
}
.textdecor
{
font-size: 25px;
color: #000;
text-shadow: 0px 0px 10px rgba(255, 255, 255, 1);
}
.container
{
width: 1000px;
margin-left: auto;
margin-right: auto;
}
.heading
{
background-image:url('../img/apnm_nag_1000.jpg');
text-align: left;
font-size: 25px;
color: #000;
font-family: 'Cormorant Unicase', serif;
}
.title
{
float: left;
margin: 10px;
font-size: 30px;
color: #000;
text-shadow: 0px 0px 10px rgba(255, 255, 255, 1);
}
.nav
{
width: 1000px;
background-color: #fff;
opacity: 0.5;
}
.nav-button
{
float: left;
width: 238px;
margin: 5px;
border: 1px solid #000;
color: #000;
font-size: 16px;
text-align: center;
transition: all .4s;
-webkit-transition: all .4s;
}
.nav-button:hover
{
background-color: #ddd;
}
.content
{
width: 1000px;
}
.footer
{
background-image:url('../img/apnm_nag_1000.jpg');
width: 1000px;
height: 20px;
color: #000;
text-align: center;
text-shadow: 0px 0px 5px rgba(238,183,101,1);
}
.clear
{
clear: both;
}
.description
{
float: left;
width: 660px;
background: none;
}
.gallery
{
width: 300px;
float: left;
}
/* Uruchomienie responsywności */
@media screen and (max-width: 1024px)
{
.container
{
width: 100%;
margin: auto;
}
.heading
{
background-image:url('../img/apnm_nag_mobile.jpg');
text-align: center;
}
.title
{
width: 100%;
margin: 10px;
font-size: 80px;
color: #000;
text-shadow: 0px 0px 10px rgba(255, 255, 255, 1);
}
.nav
{
width: 100%;
background-color: #fff;
opacity: none;
}
.nav-button
{
width: 100%;
border: 0px solid #000;
margin: 0 0 0 0;
padding: 15px 0 15px 0;
font-size: 16px;
text-align: center;
transition: all .4s;
-webkit-transition: all .4s;
}
.nav-button:hover
{
background-color: #ddd;
}
.content
{
width: 100%;
}
.footer
{
background-image:url('../img/apnm_nag_mobile.jpg');
width: 100%;
height: 20px;
color: #000;
text-align: center;
text-shadow: 0px 0px 5px rgba(238,183,101,1);
}
.description
{
width: 100%;
padding: 20px;
}
.gallery
{
width: 100%;
}
}
