O mnie󰠣

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 🎥

Zdjecia z kolonii

@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; } .zdj-galeria{ margin-top: 10px; width: 400px; height: 300px; object-fit: cover; margin: 5px; } .zdj-galeria:hover{ cursor: pointer } .img-hover-zoom{ height: 300px; overflow: hidden; /*dodajemy tą właściwość aby ukrywać część zdjęcia który przy powiększaniu wychodzi poza obszar diva */ } /* dodajemy filtr na zdjęciu aby było lekko przyciemnione oraz określamy czas i sposób przejścia efektu */ .img-hover-zoom img { transition: transform 2s, filter 1.5s ease-in-out; transform-origin: center center; filter: brightness(70%); } /*po najechaniu kursorem myszki rozjaśniamy zdjęcie i powiększamy*/ .img-hover-zoom:hover img { filter: brightness(100%); transform: scale(2); } /*formularz kontaktowy*/ input { border-radius: 4px; border: 2px solid #141e30; padding: 20px; font-size: 15px } legend { font-size: 30px; color: #4a3f3e; margin-left: auto; margin-right: auto; margin-bottom: 10px; } fieldset{ margin-top: 100px; align-content: center; border: none; border-top: 3px solid #141e30 } label{ display: block; text-align: center; font-size: 20px } textarea{ font-size: 20px; resize: none; /*blokujemy możliwość zmiany wielkości przez użytkownika*/ margin-bottom: 20px; padding: 15px; border: 2px solid #141e30; border-radius: 10px; } input, label, textarea, #btnSubmit{ margin-bottom: 20px; width: 100%; } #btnSubmit { background-color: #65e67a; padding: 15px; border: none; border-radius: 8px; font-size: 20px; color: white; transition-duration: 0.5s; background: #141e30; } #btnSubmit:hover { opacity: 0.8; cursor: pointer; }