Witam.
Potrzebuję pomocy. Mam szkielet w HTML (index.html) i chciałbym go sformatować tak by wyglądał jak na załączonym zdjęciu. Z początku praca szła mi sprawnie, ale jakiego kodu w CSS użyć, aby sformatować zdjęcia, by były z lewej strony obok tekstu? I jak zrobić te funkcje Menu, by były granatowe, ale nie w całości, tylko każda osobno?
Bardzo prosiłbym o pomoc.
Pozdrawiam.
Szkielet HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Projekt w CSS3</title>
</head>
<body>
<div id="wrapper">
<header>
<img src="images/logo.png">
<h2>Infolinia: 888-111-111</h2>
</header>
<hr/>
<div>
<nav>
<ul>
<li><a href="#">Start</a></li>
<li><a href="#">Nowości</a></li>
<li><a href="#">Kategorie</a></li>
<li><a href="#">Pomoc</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav>
<aside>
<p>Auto Salon Bartek to lider rynku motoryzacyjnego zajmujący się skupem oraz sprzedażą samochodów używanych w całej Polsce. Swoje początki datuje na rok 1991, w którym rozpoczęła działalność na terenie województwa opolskiego. W 1994 roku działa pod nazwą Auto Bazar Bartek.
Nasz salon znajduje się w Opolu, w bezpośrednim sąsiedztwie giełdy samochodowej przy drodze krajowej z bliskim dojazdem do obwodnicy miasta i dojazdem do autostrady A4.</p>
</aside>
<article>
<ul>
<li><a href="#">Audi</a></li>
<li><a href="#">Opel</a></li>
<li><a href="#">Volkswagen</a></li>
<li><a href="#">BMW</a></li>
<li><a href="#">Mercedes</a></li>
<li><a href="#">Skoda</a></li>
</ul>
</article>
</div>
<div>
<section>
<h2>Nowości</h2>
<article>
<h3>Audi Q7 3.0T Premium quattro 4D Sport Utility</h3>
<img src="images/Q7.png" alt="Audi Q7">
<p>Duży luksusowy crossover SUV (segment I, grupa premium) produkowany od 2005 roku. Pierwszy samochód terenowy z prawdziwego zdarzenia niemieckiej marki, po uterenowionym jedynie modelu Allroad, a do tego największy w ofercie Audi w tym segmencie. Nazwa Q7 stała się przyczyną sporu Audi z marką Infiniti, która wcześniej stworzyła modele Q45 i QX4. W wyniku porozumienia, SUV-y Q7, Q5 i Q3 będą jedynymi autami Audi nazwanymi w ten sposób (Q + liczba). Od 2015 roku oferowana jest druga generacja modelu. </p>
</article>
<article>
<h3>Opel Corsa GSi (2019) Specs & Price</h3>
<img src="images/opel.jpg" alt="Opel corsa">
<p>Corsa to drugi, po Insignii, model GSi w ofercie. Nowość wyróżnia się zawieszeniem OPC zapewniającym wzorowe prowadzenie i krótką drogę hamowania. Corsa GSi jest napędzana dynamicznym turbodoładowanym silnikiem o pojemności 1.4, generującym moc 150 KM i 220 Nm momentu obrotowego (zużycie paliwa w l/100 km]: 8,0–7,7 w cyklu miejskim; 5,5–5,1 poza miastem; 6,4–6,1 w cyklu mieszanym; emisja CO2: 147–139 g/km w cyklu mieszanym). Czterocylindrowa jednostka napędowa współpracująca z sześciobiegową skrzynią o krótkich przełożeniach, a maksymalny moment obrotowy jest dostępny w szerokim zakresie od 3000 do 4500 obr./min.
„Kieszonkowa rakieta” z Rüsselsheim jest świetnym sprinterem (przyspieszenie od 0 do 100 km/h trwa zaledwie 8,9 sekundy), ale także imponuje elastycznością: przyspiesza od 80 do 120 km/h na piątym biegu w zaledwie 9,9 sekundy. Corsa GSi osiąga prędkość maksymalną 207 km/h. </p>
</article>
<article>
<h3>Zobacz nasze auta</h3>
<p>Staramy się, aby każdy nasz Klient znalazł idealny samochód dla siebie. Dbamy o różnorodność oferty, oferując auta najczęściej wybieranych i dobrych jakościowo marek, m.in. Audi, BMW, Renault, Skoda, Fiat lub Mercedes.
Zapoznaj się z naszą bogatą ofertą i odszukaj wymarzony samochód!</p>
</article>
</section>
</div>
<footer>
<p>Copyright by własne imie i nazwisko</p>
</footer>
</div>
</body>
</html>
Jak powinno wyglądać: https://krakenfiles.com/view/37316e2241/file.html
