O nas | Pomoc drogowa Kraków - Skawina tel: 795 971 370 Gruszka24h

O nas

<!DOCTYPE html>
<html>

<head>

<title>Tile adjusting test</title>

<link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>

<style>

.title_text{
font-size: 30px;
margin-bottom: 40px;
font-family: 'Poppins';
}

.container{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 70vh;
}

.tiles {
display: flex;
flex-wrap: wrap; /* Pozwala na przejście do nowego wiersza, gdy kafelki nie mieszczą się na szerokość ekranu */
justify-content: center;
}

.tile {

width: 230px;
height: 300px;
border: 1px solid #ccc;
margin: 20px;
padding: 10px;
text-align: center;
background-color: rgba(255, 255, 255, 0); /* Przezroczyste tło */
border-radius: 7px; /* Zaokrąglone ramki */
box-shadow: 1px 1px 5px rgba(164, 164, 164, 0.301);
border: 1px solid white;
display: flex;
flex-direction: column;
justify-content: space-between;
display: inline-block;
}

.choose__item{

font-family: 'Poppins';
font-size: 12px;

}

.change_colour{
fill:rgb(30, 108, 233);
}

.choose__item-title{
font-size: 18px;

margin-bottom: 30px;
}

.choose__item-image{
display: flex;
font-size: 50px;
max-height: 150px;
margin-bottom: 50px;
width: 100%;

justify-content: center;

}

</style>
</head>

<body>

<div class="container">

<h2 class="title_text">
Możesz na nas polegać w każdej sytuacji
</h2>

<div class="tiles">
<div class="tile">

<div class="choose__item">
<div class="choose__item-image">
<svg class="change_colour" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M352 320c88.4 0 160-71.6 160-160c0-15.3-2.2-30.1-6.2-44.2c-3.1-10.8-16.4-13.2-24.3-5.3l-76.8 76.8c-3 3-7.1 4.7-11.3 4.7H336c-8.8 0-16-7.2-16-16V118.6c0-4.2 1.7-8.3 4.7-11.3l76.8-76.8c7.9-7.9 5.4-21.2-5.3-24.3C382.1 2.2 367.3 0 352 0C263.6 0 192 71.6 192 160c0 19.1 3.4 37.5 9.5 54.5L19.9 396.1C7.2 408.8 0 426.1 0 444.1C0 481.6 30.4 512 67.9 512c18 0 35.3-7.2 48-19.9L297.5 310.5c17 6.2 35.4 9.5 54.5 9.5zM80 408a24 24 0 1 1 0 48 24 24 0 1 1 0-48z"/></svg>
</div>
<h3 class="choose__item-title">Naprawa auta w trasie</h3>
<p>Sprawnie i na miejscu usuwamy drobne awarie. W razie pojawienia się poważniejszych usterek zapewniamy holowanie do warsztatu lub pod wskazany adres przez klienta.</p>
</div>

</div>

<div class="tile">
<div class="choose__item">
<div class="choose__item-image">
<svg class="change_colour" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M32 64C32 28.7 60.7 0 96 0H256c35.3 0 64 28.7 64 64V256h8c48.6 0 88 39.4 88 88v32c0 13.3 10.7 24 24 24s24-10.7 24-24V222c-27.6-7.1-48-32.2-48-62V96L384 64c-8.8-8.8-8.8-23.2 0-32s23.2-8.8 32 0l77.3 77.3c12 12 18.7 28.3 18.7 45.3V168v24 32V376c0 39.8-32.2 72-72 72s-72-32.2-72-72V344c0-22.1-17.9-40-40-40h-8V448c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32V64zM96 80v96c0 8.8 7.2 16 16 16H240c8.8 0 16-7.2 16-16V80c0-8.8-7.2-16-16-16H112c-8.8 0-16 7.2-16 16z"/></svg>
</div>
<h3 class="choose__item-title">Dowóz paliwa</h3>
<p>Dostarczymy tak szybko, jak to możliwe brakujące paliwo zapewniając możliwość kontynuowania podróży bez dalszej zwłoki. Udzielamy natychmiastowej pomocy w przypadku zatankowania niewłaściwego paliwa.</p>
</div>
</div>

<div class="tile">
<div class="choose__item">
<div class="choose__item-image">
<svg class="change_colour" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512">

<path d="M80 96c0-17.7 14.3-32 32-32h64c17.7 0 32 14.3 32 32l96 0c0-17.7 14.3-32 32-32h64c17.7 0 32 14.3 32 32h16c35.3 0 64 28.7 64 64V384c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V160c0-35.3 28.7-64 64-64l16 0zm304 96c0-8.8-7.2-16-16-16s-16 7.2-16 16v32H320c-8.8 0-16 7.2-16 16s7.2 16 16 16h32v32c0 8.8 7.2 16 16 16s16-7.2 16-16V256h32c8.8 0 16-7.2 16-16s-7.2-16-16-16H384V192zM80 240c0 8.8 7.2 16 16 16h96c8.8 0 16-7.2 16-16s-7.2-16-16-16H96c-8.8 0-16 7.2-16 16z"/></svg>

</div>
<h3 class="choose__item-title">Uruchamianie pojazdów</h3>
<p>Szybko i bezpiecznie uruchamiamy wszystkie pojazdy z rozładowanymi bądź uszkodzonymi akumlatorami</p>
</div>
</div>

<div class="tile">

<div class="choose__item choose-green">
<div class="choose__item-image">
<svg class="change_colour" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M336 352c97.2 0 176-78.8 176-176S433.2 0 336 0S160 78.8 160 176c0 18.7 2.9 36.8 8.3 53.7L7 391c-4.5 4.5-7 10.6-7 17v80c0 13.3 10.7 24 24 24h80c13.3 0 24-10.7 24-24V448h40c13.3 0 24-10.7 24-24V384h40c6.4 0 12.5-2.5 17-7l33.3-33.3c16.9 5.4 35 8.3 53.7 8.3zM376 96a40 40 0 1 1 0 80 40 40 0 1 1 0-80z"/></svg>
</div>
<h3 class="choose__item-title">
Awaryjne otwieranie samochodów
</h3>
<p>
Wybawimy z opresji związanej z zatrzaśniętym kluczykiem w samochodzie. Profesjonalnie i bez uszkodzenia lakieru otworzymy każdy zamknięty pojazd.
</p>

</div>

</div>
</div>
</div>

</body>

</html>