:root { --word-black: #000; --word-white: #fff; --link-one: #efa69d; --link-two: #e9877b; --background-one: #6a5cd4; --background-two: #5b5ac5; --background-three: #439ed6; --background-four: #f2f2f2; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: "Roboto", sans-serif; } /* Navigace (horní menu) */ nav { padding: 10px; background-color: var(--background-one); font-size: 20px; margin: 10px; border-radius: 7px; } a { text-decoration: none; color: var(--word-white); } .dot { list-style: none; } nav ul { list-style: none; display: flex; justify-content: space-between; flex-grow: 1; } .navigation { width: 65%; margin: 0 auto; } .icon { width: auto; height: 22px; display: none; margin-left: auto; margin-right: 12px; } .icon img { width: 100%; height: 100%; } @media (max-width: 768px) { .navigation { width: 90%; margin: 0 auto; } nav ul { flex-direction: column; } nav a { /*display: none;*/ } /*.icon {*/ /* display: block;*/ /*}*/ } /* Hero - section */ .hero-section { height: 80vh; background-image: url(../../img/400789-Linux-GNU-GNU_-_Linux-minimalism.jpg); background-size: 70%; background-position: center; background-repeat: no-repeat; } .hero-text-wrapper { position: relative; width: 65%; margin: 0 auto; height: 100%; } .hero-text { color: var(--word-white); position: absolute; right: 0; bottom: 50px; font-size: 80px; text-align: right; } .h2-about { font-weight: 700; } @media (max-width: 768px) { .hero-text-wrapper { width: 90%; margin: 0 auto; } .hero-text { font-size: 35px; height: 80px; margin-bottom: 5px; color: black; } } /* About sekce */ .about-section { margin: 45px 0; } .about-section-wrapper { width: 65%; margin: 0 auto; display: flex; gap: 20px; } .about-text { flex: 1; } .about-img { flex: 1; } img { width: 100%; height: 100%; object-fit: cover; } @media (max-width: 768px) { .about-section-wrapper { flex-direction: column; width: 90%; margin: 0 auto; } .about-text { text-align: left; } .about-img { text-align: center; } .about-text-p { padding-top: 15px; } } /* We Do */ .what-section { background-color: var(--background-one); color: var(--word-white); margin: 10px; border-radius: 7px; } .what-section-wrapper { width: 65%; margin: 0 auto; } .what-text { text-align: center; } .h2-what-we { font-size: 38px; text-align: center; padding-top: 45px; padding-bottom: 35px; } .where-text { text-align: center; } .icon-what-section { margin-top: 45px; padding: 45px; list-style: none; display: flex; justify-content: space-between; flex-grow: 1; } .img-icons { width: 100px; height: 100px; align-items: center; } .icon-text { text-align: center; padding-top: 15px; font-size: 25px; } .dotkontakt { padding-bottom: 40px; } @media (max-width: 768px) { .what-section-wrapper { width: 90%; margin: 0 auto; } .icon-what-section { flex-direction: column; align-items: center; text-align: center; } .img-icons { width: 80px; height: 80px; margin-top: 20px; align-items: center; } .icon-text { padding-top: 0px; } } /* Our Trips */ .trips-section { margin-top: 45px; margin-bottom: 45px; } .trips-section-wrapper { display: flex; flex-wrap: wrap; width: 65%; margin: auto; gap: 10px; } .images-item { height: 222px; width: 32%; flex-shrink: 1; border-radius: 4px; } .images-trips-1 { background-image: url(../../img/linux-penguin-and-rainbow-background-imsv6hxt0e8zcl7m-3730406657.jpg); background-size: cover; background-position: center; } .images-trips-2 { background-image: url(../../img/1-4204059220.png); background-size: cover; background-position: center; } .images-trips-3 { background-image: url(../../img/fedora-feat-5b9fe676c9e77c0050ce388c-2333270958.jpg); background-size: cover; background-position: center; } .images-trips-4 { background-image: url(../../img/ubuntu-linux-minimal-4k-on-3840x2160-2398598343.jpg); background-size: cover; background-position: center; } .text-trips { background-color: var(--background-four); color: var(--word-black); display: flex; justify-content: center; align-items: center; font-size: 32px; font-weight: 700; } .images-trips-5 { background-image: url(../../img/Kali-linux-872298623.jpg); background-size: cover; background-position: center; } .images-trips-6 { background-image: url(../../img/wp8843183-1041051902.jpg); background-size: cover; background-position: center; } .images-trips-7 { background-image: url(../../img/91488-2048748032.jpg); background-size: cover; background-position: center; } .images-trips-8 { background-image: url(../../img/endeavourOS-astronaught-3246654328.jpg); background-size: cover; background-position: center; } @media (max-width: 768px) { .trips-section-wrapper { width: 90%; margin: 0 auto; } .images-item { width: 333px; height: 222px; } .text-trips { height: 80px; } } /* Where togo */ .where-section { background-color: var(--background-two); color: var(--word-white); display: flex; margin: 10px; border-radius: 7px; } .where-section-wrapper { width: 65%; margin: 0 auto; padding-top: 45px; padding-bottom: 45px; display: flex; } .where-text { display: flex; } .h2-where { flex: 1; font-size: 25px; width: 272px; height: 114px; text-align: center; } .where-text-div { flex: 1; width: 572; height: 201; } .contact-text { margin-top: 20px; text-align: center; } .contact-button { margin-top: 35px; background-color: var(--background-four); width: 133px; height: 43px; border-radius: 4px; text-align: center; line-height: 43px; } .contact-button-text { font-size: 14px; font-weight: 700; font-family: Inter; color: var(--word-black); display: block; } .mobile { display: none; } @media (max-width: 768px) { .where-section-wrapper { width: 90%; margin: 0 auto; } .where-text { flex-direction: column; } .desktop { display: none; } .mobile { display: block; font-size: 25px; margin-bottom: 25px; } } /* Reviews section */ .reviews-section { width: 65%; margin: 0 auto; margin-top: 45px; margin-bottom: 45px; } .h2-reviews { text-align: center; padding-bottom: 20px; } .reviews-text { width: 332px; height: 159px; text-align: center; margin: auto; } .reviews-card-wrapper { display: flex; align-items: center; justify-content: space-evenly; gap: 300px; } .reviews-card { width: 378.49px; height: 346px; text-align: center; } .reviews-card-1 { width: 378.49px; height: 346px; text-align: center; } .reviews-card img { width: 122.13px; height: 111px; border-radius: 50%; } .reviews-card-1 img { width: 122.13px; height: 111px; border-radius: 50%; } .reviews-card-text { margin-top: 20px; } .reviews-name { font-weight: 700; padding-top: 50px; height: 19px; align-items: center; } @media (max-width: 768px) { .reviews-section { width: 90%; margin: 0 auto; } .reviews-card-wrapper { flex-direction: column; width: 90%; margin: 0 auto; gap: 95px; } .reviews-card { width: 324px; } .reviews-card-1 { width: 324px; } .reviews-text { width: 263px; } .h2-reviews { padding-top: 40px; } .reviews-name { padding-bottom: 40px; } } /* Photo gallery */ .photo-gallery { /* display: flex; */ /* flex-wrap: wrap; */ } .photo-gallery-wrapper { display: flex; flex-wrap: wrap; } .picture-img { width: 100%; height: auto; display: block; object-fit: cover; max-width: 50%; } @media (max-width: 768px) { .photo-gallery-wrapper { flex-direction: column; margin-top: 100px; } .picture-img { max-width: 100%; height: 260px; } } /* Footer */ .footer { margin: 10px; border-radius: 7px; } .footer-wrapper { background-color: var(--background-three); padding: 45px; } .footer-text { text-align: center; } .footer-contact { color: var(--link-two); text-decoration: underline; font-weight: 700; } .footer-text-p { padding-top: 20px; text-align: center; color: var(--word-white); font-weight: 700; } @media (max-width: 768px) { .footer-contact { font-size: 12px; } .footer-text-p { font-size: 10px; } } /* Rolovací tlačítko */ #scrollToTopBtn { display: none; position: fixed; bottom: 20px; right: 20px; /*butoon přes obsah*/ z-index: 99; outline: none; cursor: pointer; padding: 15px; border-radius: 50%; background-color: transparent; } /* Styly pro PHP */ .date { color: #f2f2f2; text-align: center; } .linkservices { color: royalblue; }