358 lines
17 KiB
HTML
358 lines
17 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Ostal </title>
|
||
|
||
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
|
||
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
|
||
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="mx-auto">
|
||
<section id="main-nav" class="pb-2">
|
||
<nav class="flex items-center justify-between flex-wrap bg-teal-500 p-6 xl:container xl:mx-auto xl:pt-10">
|
||
<div class="flex items-center flex-shrink-0 text-white mr-6">
|
||
<a href="/"> <img class="max-w-180" src="/assets/images/logo.svg" alt="logo"></a>
|
||
</div>
|
||
<div class="block lg:hidden">
|
||
<button class="flex items-center px-3 py-2 border" id="navbar-btn">
|
||
<svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||
<title>Menu</title>
|
||
<path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
<div class="w-full block pt-14 flex-grow lg:flex lg:items-center lg:w-auto lg:pt-0" id="navbar">
|
||
<div class="text-xl lg:flex-grow text-center lg:text-left lg:ml-10">
|
||
<a href="/ogrody-zimowe.html"
|
||
class="block mt-4 lg:inline-block lg:mt-0 text-teal-100 hover:text-blue mr-4 text-lg">
|
||
Ogrody zimowe
|
||
</a>
|
||
<a href="/carporty.html"
|
||
class="block mt-4 lg:inline-block lg:mt-0 text-teal-100 hover:text-blue mr-4 text-lg">
|
||
Carporty
|
||
</a>
|
||
<a href="/nasze-realizacje.html"
|
||
class="block mt-4 lg:inline-block lg:mt-0 text-teal-100 hover:text-blue mr-4 text-lg">
|
||
Realizacje
|
||
</a>
|
||
<a href="/poradniki.html"
|
||
class="block mt-4 lg:inline-block lg:mt-0 text-teal-100 hover:text-blue mr-4 text-lg">
|
||
Poradniki
|
||
</a>
|
||
<a href="/onas.html" class="block mt-4 lg:inline-block lg:mt-0 text-teal-100 hover:text-blue mr-4 text-lg">
|
||
O nas
|
||
</a>
|
||
<a href="/kontakt.html"
|
||
class="block mt-4 lg:inline-block lg:mt-0 text-teal-100 hover:text-blue mr-4 text-lg">
|
||
Kontakt
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
</section>
|
||
|
||
<div class="lg:flex lg:flex-row-reverse lg:items-start xl:container xl:mx-auto">
|
||
|
||
<div
|
||
class="bg-hero-gardens bg-cover bg-no-repeat pb-72 sm:pb-96 lg:w-3/6 lg:relative lg:pb-96 xl:pb-99 xl:mt-16 2xl:pb-101">
|
||
</div>
|
||
|
||
<div class="lg:w-3/6 lg:mb-64 ">
|
||
|
||
<!-- ogrody zimowe -->
|
||
<div class="p-6">
|
||
<h1 class="text-3xl font-semibold pb-6">Ogrody zimowe</h1>
|
||
<h3 class="text-xl pb-6 lg:font-semibold xl:pr-20">Ogród zimowy we współczesnym budownictwie spełnia dwie
|
||
funkcje. Po pierwsze przeszklone, efektowne pawilony stanowią eleganckie dopełnienie bryły budynku. Mogą być
|
||
też wykorzystywane jako:
|
||
|
||
</h3>
|
||
<h4 class="text-xl pb-6 lg:pb-20 xl:pr-20">oranżerie do całoroczonej uprawy egzotycznych roślin, kolejne
|
||
pomieszczenie w domu, na przykład: jadalnia, salon czy nawet pokój z basenem.
|
||
</h4>
|
||
</div>
|
||
<!-- ogrody zimowe -->
|
||
|
||
<!-- co ważne -->
|
||
<div
|
||
class="pt-11 pb-11 pl-6 pr-6 bg-gray lg:absolute lg:w-2/4 lg:right-1/3 lg:-mt-14 lg:pt-14 lg:pl-7 lg:pr-7 xl:w-4/12">
|
||
<h3 class="text-3xl font-semibold pb-6">Co ważne</h3>
|
||
<p class="text-xl">ogrody zimowe obniżają bilans energetyczny budynku. Zimą stanowią termiczny bufor i chronią
|
||
dom przed ucieczką ciepła. Wpływa to na obniżenie kosztów eksploatacji budynku. Dodatkowo osłaniają przed
|
||
hałasem z zewnątrz.
|
||
</p>
|
||
</div>
|
||
<!-- co ważne -->
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<section class="p-6 mb-2 xl:mt-20 xl:pb-20">
|
||
|
||
<div class="w-11/12 mx-auto border-b-2 border-gray-200 pb-12 pt-12 xl:flex xl:flex-row xl:items-center xl:justify-around 2xl:max-w-6xl hover:border hover:border-dark hover:opacity-80 cursor-pointer">
|
||
<div class="min-w-150 w-150 mr-10">
|
||
<img class="w-full" src="/assets/images/dach-jednospadowy.jpg" alt="dach jednospadowy">
|
||
</div>
|
||
<div>
|
||
<h4 class="text-3xl font-semibold pb-6 xl:pr-60">Ogród zimowy z dachem jednospadowym</h4>
|
||
<p class="text-xl xl:pr-60">To konstrukcja o prostej bryle, która często jest budowana na tyłach domu. Pozwala cieszyć
|
||
się zielenią i spokojem przez cały rok.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="w-11/12 mx-auto border-b-2 border-gray-200 pb-12 pt-12 xl:flex xl:flex-row xl:items-center xl:justify-around 2xl:max-w-6xl hover:border hover:border-dark hover:opacity-80 cursor-pointer">
|
||
<div class="min-w-200 max-w-200 mr-10">
|
||
<img class="w-full" src="/assets/images/12.jpg" alt="dach jednospadowy">
|
||
</div>
|
||
<div>
|
||
<h4 class="text-3xl font-semibold pb-6 xl:pr-48">Ogród zimowy z dachem jednospadowym</h4>
|
||
<p class="text-xl xl:pr-60">To konstrukcja o prostej bryle, która często jest budowana na tyłach domu. Pozwala cieszyć
|
||
się zielenią i spokojem przez cały rok.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- <div class="w-11/12 mx-auto border-b-2 border-gray-200 pb-12 pt-12 xl:flex xl:flex-row xl:items-center xl:justify-around 2xl:max-w-6xl">
|
||
<div class="min-w-150 w-150 mr-10">
|
||
<img src="/assets/images/2-150x150.jpg" alt="">
|
||
</div>
|
||
<div>
|
||
<h4 class="text-3xl font-semibold pb-6 xl:pr-60">Ogród zimowy z dachem jednospadowym wokół naroża budynku
|
||
</h4>
|
||
<p class="text-xl xl:pr-60">Konstrukcja okalająca narożnik budynku sprawia, że ogród ma ekspozycję na 270 stopni. Dzięki temu przez większą część dnia promienie słoneczne mogą bezpośrednio wpadać do wnętrza pomieszczenia.
|
||
|
||
</p>
|
||
</div>
|
||
</div> -->
|
||
|
||
|
||
<!-- <div class="w-11/12 mx-auto border-b-2 border-gray-200 pb-12 pt-12 xl:flex xl:flex-row xl:items-center xl:justify-around 2xl:max-w-6xl">
|
||
<div class="min-w-150 w-150 mr-10">
|
||
<img src="/assets/images/3-150x150.jpg" alt="">
|
||
</div>
|
||
<div>
|
||
<h4 class="text-3xl font-semibold pb-6 xl:pr-60">Ogród zimowy z dachem typu mansardowego
|
||
</h4>
|
||
<p class="text-xl xl:pr-60">To ogród zimowy z dachem dwuspadowym. Dach mansardowy to rodzaj dachu łamanego, w którym każda z połaci składa się z dwóch części: górnej (o mniejszym kącie nachylenia) oraz dolnej (stromej).
|
||
|
||
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="w-11/12 mx-auto border-b-2 border-gray-200 pb-12 pt-12 xl:flex xl:flex-row xl:items-center xl:justify-around 2xl:max-w-6xl">
|
||
<div class="min-w-150 w-150 mr-10">
|
||
<img src="/assets/images/4-150x150.jpg" alt="">
|
||
</div>
|
||
<div>
|
||
<h4 class="text-3xl font-semibold pb-6 xl:pr-60">Ogród zimowy z dachem jednospadowym nachodzącym na połać dachu głównego
|
||
</h4>
|
||
<p class="text-xl xl:pr-60">W tym rodzaju ogrodu dach jest wpuszczony w połać dachu głównego, dzięki czemu pomieszczenia w głębi domu mogą być dobrze doświetlone.
|
||
|
||
|
||
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="w-11/12 mx-auto border-b-2 border-gray-200 pb-12 pt-12 xl:flex xl:flex-row xl:items-center xl:justify-around 2xl:max-w-6xl">
|
||
<div class="min-w-150 w-150 mr-10">
|
||
<img src="/assets/images/domek-4-150x150.jpg" alt="">
|
||
</div>
|
||
<div>
|
||
<h4 class="text-3xl font-semibold pb-6 xl:pr-60">Ogród zimowy z dachem jednospadowym o załamanych krawędziach bocznych
|
||
</h4>
|
||
<p class="text-xl xl:pr-60">Ogród posiada jednobryłową konstrukcję ze ściętymi narożnikami zewnętrznych ścian. Dach jest jednospadowy z załamanymi bocznymi częściami.
|
||
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="w-11/12 mx-auto border-b-2 border-gray-200 pb-12 pt-12 xl:flex xl:flex-row xl:items-center xl:justify-around 2xl:max-w-6xl">
|
||
<div class="min-w-150 w-150 mr-10">
|
||
<img src="/assets/images/51-150x150.jpg" alt="">
|
||
</div>
|
||
<div>
|
||
<h4 class="text-3xl font-semibold pb-6 xl:pr-60">Ogród zimowy z dachem jednospadowym zintegrowanym z balkonem
|
||
</h4>
|
||
<p class="text-xl xl:pr-60">Ten rodzaj ogrodu posiada dach, który jest zintegrowany z inną konstrukcją budowlaną np. balkonem. W rezultacie do wnętrza wpada mniej światła, dzięki czemu latem temperatura może być nieco niższa.
|
||
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="w-11/12 mx-auto border-b-2 border-gray-200 pb-12 pt-12 xl:flex xl:flex-row xl:items-center xl:justify-around 2xl:max-w-6xl">
|
||
<div class="min-w-150 w-150 mr-10">
|
||
<img src="/assets/images/6-150x150.jpg" alt="">
|
||
</div>
|
||
<div>
|
||
<h4 class="text-3xl font-semibold pb-6 xl:pr-60">Ogród zimowy z dachem jednospadowym z jednostronnym narożem
|
||
</h4>
|
||
<p class="text-xl xl:pr-60">Ogród zimowy tego typu wykończony jest dachem jednospadowym i jednym bokiem zaokrąglonym o stałym promieniu lub ćwierćkołem. Dzięki temu możemy dopasować konstrukcję ogrodu do bryły budynku tak, aby stworzyć spójną architektonicznie całość.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="w-11/12 mx-auto border-b-2 border-gray-200 pb-12 pt-12 xl:flex xl:flex-row xl:items-center xl:justify-around 2xl:max-w-6xl">
|
||
<div class="min-w-150 w-150 mr-10">
|
||
<img src="/assets/images/7-150x150.jpg" alt="">
|
||
</div>
|
||
<div>
|
||
<h4 class="text-3xl font-semibold pb-6 xl:pr-60">Ogród zimowy z dachem jednospadowym z obustronnym narożem
|
||
</h4>
|
||
<p class="text-xl xl:pr-60">Ogród zimowy tego typu wykończony jest dachem jednospadowym i dwoma bokami zaokrąglonymi o stałym promieniu lub ćwierćkołem. Dzięki temu możemy dopasować konstrukcję ogrodu do bryły budynku tak, aby stworzyć spójną architektonicznie całość.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="w-11/12 mx-auto border-b-2 border-gray-200 pb-12 pt-12 xl:flex xl:flex-row xl:items-center xl:justify-around 2xl:max-w-6xl">
|
||
<div class="min-w-150 w-150 mr-10">
|
||
<img src="/assets/images/8-150x150.jpg" alt="">
|
||
</div>
|
||
<div>
|
||
<h4 class="text-3xl font-semibold pb-6 xl:pr-60">Ogród zimowy z dachem jednospadowym w kształcie wielokąta wokół naroża budynku, typ 1
|
||
</h4>
|
||
<p class="text-xl xl:pr-60">Konstrukcja ogrodu z dachem jednospadowym oraz jedną stroną zaokrągloną wokół naroża budynku daje bardzo ciekawy architektonicznie efekt. Umożliwia też ekspozycję na promienie słoneczne przez większą część dnia, co jest szczególnie cenne w ogrodach umieszczonych po północnej stronie budynku.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="w-11/12 mx-auto border-b-2 border-gray-200 pb-12 pt-12 xl:flex xl:flex-row xl:items-center xl:justify-around 2xl:max-w-6xl">
|
||
<div class="min-w-150 w-150 mr-10">
|
||
<img src="/assets/images/9-150x150.jpg" alt="">
|
||
</div>
|
||
<div>
|
||
<h4 class="text-3xl font-semibold pb-6 xl:pr-60">Ogród zimowy z dachem jednospadowym w kształcie wielokąta wokół naroża budynku, typ 2
|
||
|
||
</h4>
|
||
<p class="text-xl xl:pr-60">Konstrukcja z dachem jednospadowym w kształcie wielokąta oraz zaokrągloną konstrukcją wokół naroża budynku pozwala na uzyskanie niezwykle eleganckiej bryły ogrodu zimowego. Dzięki temu zwiększamy ekspozycję na promienie słoneczne, a światło wpada do wnętrza ze wszystkich stron.
|
||
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="w-11/12 mx-auto border-b-2 border-gray-200 pb-12 pt-12 xl:flex xl:flex-row xl:items-center xl:justify-around 2xl:max-w-6xl">
|
||
<div class="min-w-150 w-150 mr-10">
|
||
<img src="/assets/images/domek-2-150x150.jpg" alt="">
|
||
</div>
|
||
<div>
|
||
<h4 class="text-3xl font-semibold pb-6 xl:pr-60">Ogród zimowy z dachem jednospadowym w narożu budynku
|
||
|
||
</h4>
|
||
<p class="text-xl xl:pr-60">Konstrukcja tego typu pozwala na stworzenie dodatkowej powierzchni mieszkalnej tańszym kosztem, ponieważ jedną boczną ścianę już mamy gotową. Ekspozycja na promienie słoneczne jest nieco mniejsza, dzięki temu latem ogród nie nagrzewa się bardzo.
|
||
|
||
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="w-11/12 mx-auto border-b-2 border-gray-200 pb-12 pt-12 xl:flex xl:flex-row xl:items-center xl:justify-around 2xl:max-w-6xl">
|
||
<div class="min-w-150 w-150 mr-10">
|
||
<img src="/assets/images/domek-3-150x150.jpg" alt="">
|
||
</div>
|
||
<div>
|
||
<h4 class="text-3xl font-semibold pb-6 xl:pr-60">Ogród zimowy z dachem dwuspadowym przelegająca do budynku
|
||
</h4>
|
||
<p class="text-xl xl:pr-60">Ten rodzaj ogrodu jest poddany mocnej ekspozycji na promienie słoneczne. Rekomendujemy ulokowanie tego typu konstrukcji pomiędzy drzewami lub innymi przeszkodami, w innym wypadku latem ogród może się mocno nagrzewać.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="w-11/12 mx-auto border-b-2 border-gray-200 pb-12 pt-12 xl:flex xl:flex-row xl:items-center xl:justify-around 2xl:max-w-6xl">
|
||
<div class="min-w-150 w-150 mr-10">
|
||
<img src="/assets/images/domek-5-150x150.jpg" alt="">
|
||
</div>
|
||
<div>
|
||
<h4 class="text-3xl font-semibold pb-6 xl:pr-60">Ogród zimowy z dachem o konstrukcji nietypowej
|
||
</h4>
|
||
<p class="text-xl xl:pr-60">Tego rodzaju ogrody o konstrukcji nietypowej, czyli z wieloma załamaniami i zaokrągleniami, tworzą bardzo ciekawy, architektoniczny efekt.
|
||
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="w-11/12 mx-auto border-b-2 border-gray-200 pb-12 pt-12 xl:flex xl:flex-row xl:items-center xl:justify-around 2xl:max-w-6xl">
|
||
<div class="min-w-150 w-150 mr-10">
|
||
<img src="/assets/images/121-150x150.jpg" alt="">
|
||
</div>
|
||
<div>
|
||
<h4 class="text-3xl font-semibold pb-6 xl:pr-60">Ogród zimowy wolnostojący, wiata lub szklarnia
|
||
</h4>
|
||
<p class="text-xl xl:pr-60">Konstrukcja wolnostojąca z dachem dwuspadowym na dwie strony może być wykonana jako wiata samochodowa, szklarnia lub tylko zadaszenie. Możliwe jest zastosowanie małej instalacji fotowoltaicznej do produkcji prądu.
|
||
</p>
|
||
</div>
|
||
</div> -->
|
||
|
||
|
||
|
||
</section>
|
||
|
||
<section class="mx-auto lg:container">
|
||
<div class="bg-blue text-white pt-20 pb-20 pl-6 pr-6 lg:pl-9 lg:pr-9 xl:w-11/12">
|
||
<h3 class="text-2xl xl:text-4xl mb-6 font-semibold">Nie wiesz, co wybrać ?</h3>
|
||
<p class="text-xl font-semibold xl:font-normal xl:max-w-md">Chętnie doradzimy i przygotujemy
|
||
Twój wyjątkowy projekt.
|
||
</p>
|
||
</div>
|
||
<div class="flex justify-center xl:justify-end sm:w-11/12 lg:w-full sm:mx-auto">
|
||
<a href="/kontakt.html" class="btn btn-blue w-11/12 sm:min-w-full xl:inline-block xl:min-w-min xl:max-w-xs xl:mr-28 2xl:mr-32 hover:bg-blue-100">
|
||
Skontaktuj się z nami.
|
||
</a>
|
||
</div>
|
||
</section>
|
||
|
||
<footer>
|
||
<div class="mx-auto p-6 lg:container">
|
||
<!-- row1 -->
|
||
<div class="flex flex-col lg:flex-row lg:items-center lg:justify-between">
|
||
<div class="lg:pt-6"> <img class="mb-8 lg:mb-0 max-w-220 mx-auto" src="/assets/images/logo.svg"
|
||
alt="logo ostal"></div>
|
||
|
||
<div>
|
||
<p class="text-center lg:pt-6 lg:text-left">OSTAL GROUP Sp. z o.o.<br>
|
||
ul. Boh II A.W.P. 14F<br>
|
||
59-900 Zgorzelec</p>
|
||
</div>
|
||
|
||
<div class="text-center pt-6 lg:text-left">
|
||
<p>Biuro czynne:<br>
|
||
Pn-Czw 10-17 <br>
|
||
Pt 8-15</p>
|
||
</div>
|
||
|
||
<div class="text-center pt-6 lg:text-left">
|
||
<a class="block" href="#">Tel.: +48 75 640 70 80</a>
|
||
<a class="block" href="#">Tel. kom.: +48 690 980 151</a>
|
||
<a class="block" href="#">E-mail: kontakt@ostal.pl</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- row2 -->
|
||
<div>
|
||
<div class="flex items-center justify-center mt-8 mb-8 lg:justify-end lg:mt-14">
|
||
<p class="text-xs mr-3"> © All right reserved 2021 || Realizacja: </p>
|
||
️ <img src="/assets/images/25wat-logo.svg" alt="">
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</footer>
|
||
|
||
</div>
|
||
|
||
|
||
<script type="module" src="/main.js"></script>
|
||
</body>
|
||
|
||
</html> |