Witam!
Jesli ktos moglbym pomoc mi w napisanie css do tego zadania to bylbym bardzo wdzięczny.Html sam ogarnalem i narazie chyba jest dobrze,ale nie potrafie poradzic sobie z css.
KOD HTML:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>Miniaturka</title>
<link href="tlo.png">
</head>
<body>
<div class="element">
<div class="grafika">
<div class="czas">3:15</div>
<div class="ikona"></div>
</div>
<div class="odnosnik"></div>
</body>
</html>TRESC ZADANIE:
Miniaturka wideo
Zadanie polega na przygotowaniu szablony dla miniaturki filmu jak pokazano na obrazku poniżej ( szary kolor to tło strony ). Do zadania dołączony jest plik z logotypem CSS3 w formacie PNG. Całe tematy lub poszczególne punkty zakończone czerwoną gwiazdką ( * ) są trudniejsze do wykonania i wymagając trochę gimnastyki i podłubania w materiałach jakie już macie lub internecie jeśli ich nie macie, nie są wymagane do zrobienia ale jak ktoś się czuje na siłach to niech się z nimi zmierzy oczywiście takie zadania będą lepiej oceniane.
Przygotowanie grafiki do miniaturki
- W plik CSS3.png przeskalować z zachowaniem proporcji aby jego wysokość wynosiła 70 pikseli.
- Stwórz nowy plik graficzny o wymiarach 200 pikseli szerokości na 100 pikseli wysokości z tłem koloru #222222.
- Umieść na środku grafiki przeskalowanie logo CSS3.
- Plik zapisz w formacie PNG.
Strona
- Zastosuj na stronie kodowanie znaków UTF-8.
- Tło strony powinno mieć mieć szary kolor.
- Czcionka jakiej należy użyć na stronie to: sans-serif.
Element główny miniaturki
- Cały element miniaturki powinien posiadać 200 pikseli szerokości, wysokość powinna się dostosować do zawartości elementu.
- Miniaturka powinna zostać wyświetlona na środku strony.
- Po najechaniu na element miniatury na części z grafiką powinna się pokazać ikona odtwarzania*.
Element z grafiką miniaturki
- Element ten powinien posiadać rozmiar 200 pikseli szerokości oraz 100 pikseli wysokości.
- Tłem elementu jest wcześniej przygotowana grafika z logotypem CSS3.
- W elemencie z grafiką powinien znajdować się element pokazujący czas trwania nagrania oraz element przedstawiający ikonę odtwarzania.
Element pokazujący czas trwania nagrania
- Element ten powinien znajdować się w pozycji 5 pikseli odstępu od dolnej oraz prawej krawędzi elementu rodzica / nadrzędnego.
- Czcionka powinna mieć biały kolor oraz 12 pikseli rozmiaru.
- Kolor tła elementu powinien być czarny z przeźroczystością 80%.
- Element powinien posiadać marginesy wewnętrzne aby tekst nie przylegał do jego krawędzi: 2 piksele z góry i z dołu oraz 5 pikseli z lewej i prawej strony.
Ikona odtwarzania*
- Ikona ta jest zbudowana w czystym CSSie. Nie jest pobierana z pliku z grafiką.
- Ikona ta powinna znajdować się dokładnie na środku elementu rodzica.
- Ikona to okrąg o wymiarach 70 pikseli wysokości i szerokości.
- Kolor tła to biały z 40% przeźroczystością.
- Do stworzenia trójkąta należy użyć pseudo-elementu before lub after
- Trójkątny kształt jest stworzony przy pomocy marginesów.
- Wymiary trójkąta to 40 pikseli wysokości i szerokości
- Kolor trójkąta to czarny z 50% przeźroczystości
- Położenie trójkąta to 15 pikseli odstępu z góry i 20 pikseli odstępu z lewej wewnątrz elementu rodzica.
Element informacyjny pod elementem miniatury
- Element powinien posiadać margines wewnętrzny 10 pikseli z każdej strony aby tekst nie był przybity do krawędzi elementu.
- Tło elementu powinno być białe.
- Element posiada wewnątrz 3 widoczne elementy:
- odnośnik z tytułem miniaturki wideo,
- licznik wyświetleń wideo,
- informację kiedy dodano wideo.
Odnośnik z tytułem miniaturki wideo
- Element jest odnośnikiem do strony wideo można przekierowywać do dowolnego filmu na YouTube.
- Należy wyłączyć domyślne formatowanie odnośnika aby możliwe było odpowiednie jego sformatowanie chodzi o takie właściwości jak:
- wyświetlanie,
- dekoracja tekstu.
- Kolor etykiety odnośnika należy zmienić na #0088FF.
- Po najechaniu na odnośnik kursorem myszy kolor etykiety odnośnika powinien zmienić się na #0000FF.
- Zastosowanie płynnej zmiany kolorów etykiety odnośnika*.
Elementy licznik wyświetleń oraz kiedy dodano
Oba elementy wyświetlone są w jednej linii odsunięte od siebie maksymalnie.
OCZEKIWANY WYNIK: