O mnie󰠣

Zakopane - góry

Hej Hej!
Mam na imię Adam , i na co dzień mieszkam w Krakowie. Przyjechałem na kolonie do Zakopanego bo bardzo chciałem nauczyć się programować, poznać nowych kolegów, koleżanki a przede wszystkim świetnie spędzić wakacyjny czas.
Zobacz na mojej stronie co ciekawego działaliśmy podczas wyjazdu!

Kolonijne Shorts 🎥

@import url("https://fonts.googleapis.com/css2?family=Kanit&family=Lato&display=swap"); * { margin: 0px; /* domyślnie przeglądarka ma ustawione marginesy, zerujemy wszystkie aby belka nawigacyjna ładnie przylegała do krawędzi*/ box-sizing: border-box; /*dodajemy właściwość, która pozwoli wliczać padding, oraz border do faktycznej szerokości lub wysokości danego elementu - łatwiej będzie nam uzyskać żądany efekt*/ } body { font-family: "Lato", sans-serif; } nav { /* gradient z uigradients */ background: #141e30; /* fallback for old browsers */ background: -webkit-linear-gradient( bottom, #243b55, #141e30 ); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient( to bottom, #243b55, #141e30 ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome */ position: sticky; /*Przyklejamy górną belkę nawigacyjną*/ top: 0px; /*odstęp belki nawigacyjnej od górnej krawędzi w momencie przyklejenia*/ z-index: 5; /*kolejność wyświetlania elementów chcemy aby nawigacja zawsze zakrywała inne elementy na stronie*/ } nav a { padding: 30px; font-family: "Kanit", sans-serif; font-size: 25px; text-decoration: none; /*wyłączenie domyślnego podkreślenia*/ color: #d9dadd; /*kolor tekstu*/ letter-spacing: 0.3px; } nav a:hover { background-color: #cddae3; transition-duration: 0.5s; } /*ten selektor wybierze tylko element będący w elemencie na który najechaliśmy myszką*/ nav a:hover span { color: #1d3b4f; transition-duration: 0.5s; top: 0px; /*odstęp belki nawigacyjnej od górnej krawędzi w momencie przyklejenia*/ z-index: 5; /*kolejność wyświetlania elementów chcemy aby nawigacja zawsze zakrywała inne elementy na stronie*/ display: flex;/*ustawiamy aby belka stała się teraz responsywnym kontenerem*/ justify-content: flex-end;/*wyrównanie elementów nawigacji do prawej krawędzi flex-kontenera*/ } /*dla małych urządzeń wyświetlamy pozycję w menu pionowo i zmniejszamy padding, te style zostaną wczytane tylko dla ekranów o max szerokości 600px */ @media screen and (max-width: 600px) { nav { flex-direction:column; text-align:center; } nav a{ padding:5px; } } h1 { font-family: "Kanit", sans-serif; margin: 100px 0px; font-size: 35px; text-align: center; width: 100%; } .kontener { display: flex; flex-wrap: wrap; justify-content: center; padding: 5px; } p { text-align: center; font-size: 20px; width: 500px; } #powitanie { font-family: "Kanit", sans-serif; font-size: 25px; } #shorts .kontener { justify-content: space-around; } .shorts { width: 350px; height: 350px; border-radius: 200px; object-fit: cover; margin-bottom: 10px; }