create info page

assets/css/style.css

@@ -0,0 +1,598 @@
+:root {
+    --word-black: #000;
+    --word-white: #fff;
+    --link-one: #efa69d;
+    --link-two: #e9877b;
+    --background-one: #1c0663;
+    --background-two: #1c0663;
+    --background-three: #1c0663;
+    --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-top: 10px;
+  }
+  h2 {
+    text-decoration: none;
+    color: var(--word-white);
+  }
+  p {
+    text-decoration: none;
+    color: var(--word-white);
+  }
+  
+  nav ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    flex-grow: 1;
+  }
+  
+  .navigation {
+    width: 65%;
+    margin: 0 auto;
+  }
+
+  .awatar {
+    width: 30%;
+  } 
+  
+  .link {
+    color: white;
+  }
+  
+  .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;
+    }
+  
+    .awatar {
+      display: none;
+    }
+  
+    /*nav a {*/
+    /*  display: none;*/
+    /*}*/
+  
+    /*.icon {*/
+    /*  display: block;*/
+    /*}*/
+  }
+  
+  /* Hero - section */
+  .hero-section {
+    height: 60vh;
+    background-image: url(../../img/esf-cloud-storage-pricing.webp);
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    margin-top: 10px;
+  }
+  
+  .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;
+    }
+  }
+  
+  /* 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;
+    }
+  }
+  
+  /* What We Do */
+  
+  .what-section {
+    background-color: var(--background-one);
+    color: var(--word-white);
+    margin-top: 10px;
+  }
+  
+  .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;
+  }
+  
+  @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(images/simon-english-48nerZQCHgo-unsplash.jpg);
+    background-size: cover;
+    background-position: center;
+  }
+  
+  .images-trips-2 {
+    background-image: url(images/james-wheeler-ZOA-cqKuJAA-unsplash.jpg);
+    background-size: cover;
+    background-position: center;
+  }
+  
+  .images-trips-3 {
+    background-image: url(images/daniel-tseng-73lmMKhi2U8-unsplash.jpg);
+    background-size: cover;
+    background-position: center;
+  }
+  
+  .images-trips-4 {
+    background-image: url(images/holly-mandarich-UVyOfX3v0Ls-unsplash.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(images/patrick-szylar-45bM3XGqnDE-unsplash.jpg);
+    background-size: cover;
+    background-position: center;
+  }
+  
+  .images-trips-6 {
+    background-image: url(images/chung-yee-tsang-wqxCKM0R6R8-unsplash.jpg);
+    background-size: cover;
+    background-position: center;
+  }
+  
+  .images-trips-7 {
+    background-image: url(images/julian-bialowas-ilkTnuMunP8-unsplash.jpg);
+    background-size: cover;
+    background-position: center;
+  }
+  
+  .images-trips-8 {
+    background-image: url(images/matej-drha-rbDzMcJsBkY-unsplash.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;
+  }
+  
+  .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: left;
+  }
+  
+  .where-text-div {
+    flex: 1;
+    width: 572;
+    height: 201;
+    text-align: left;
+  }
+  
+  .contact-text {
+    margin-top: 20px;
+  }
+  
+  .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-wrapper {
+    background-color: var(--background-three);
+    padding: 45px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+  }
+  
+  .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;
+}
+
+/* pro OScloud */
+.nav-link {
+    color: var(--word-white);
+    text-decoration: none;
+    
+}

assets/js/script.js

@@ -0,0 +1,17 @@
+window.onscroll = function () {
+    scrollFunction();
+};
+
+function scrollFunction() {
+    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+        document.getElementById("scrollToTopBtn").style.display = "block";
+    } else {
+        document.getElementById("scrollToTopBtn").style.display = "none";
+    }
+}
+
+// Posunout nahoru, když uživatel klikne na tlačítko
+function scrollToTop() {
+    document.body.scrollTop = 0; // Pro Safari
+    document.documentElement.scrollTop = 0; // Pro ostatní prohlížeče
+}

index.html

@@ -3,7 +3,7 @@
 
 
 <head>
-    <link rel="stylesheet" type="text/css" href="style.css">   
+    <link rel="stylesheet" type="text/css" href="assets/css/style.css">   
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> <!-- Icona kontakty -->
 
 
@@ -77,8 +77,7 @@
                 <div class="what-text">
                     <h2 class="h2-what-we">O nás</h2>
                     <p class="what-text-p">Oscloud je váš bezpečný cloud. Naším cílem je ukázat lidem výhody bezpečného internetu a Open Source technologií.</p>
-                    <p class="what-text-p">Hostujeme a spravujeme různé Open Source aplikace, které poskytují bezpečné a soukromé alternativy ke komerčním službám.</p>
+                    
-                    <p class="what-text-p">Pro více informácí o oScloud <a class="link"href="oscloud.html">klikni zde</a>.</p>
                 </div>
 
                 <ul class="icon-what-section">
@@ -216,10 +215,14 @@
 <button id="scrollToTopBtn" onclick="scrollToTop()" title="Go to top">
     <i class="fas fa-arrow-up"></i>
 </button>
-<script src="script.js"></script>
+<script src="./assets/js/script.js"></script>
 
 </body>
 
 
 
+
+
 </html>
+
+

oscloud.html

@@ -3,7 +3,7 @@
 
 
 <head>
-    <link rel="stylesheet" type="text/css" href="style.css">   
+    <link rel="stylesheet" type="text/css" href="./assets/css/style.css">   
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> <!-- Icona kontakty -->
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -23,8 +23,8 @@
     <!-- Navigace -->
     <nav>
         <ul class="navigation" id="navigation">
-            <li><img class="awatar" src="../img/avatar.png"></img></li>
+            <li><a href="index.html"><img class="awatar" src="../img/avatar.png" ></img></a> </li>
-            <li><h2>Váš bezpečný cloud</h2><p>Oscloud je váš bezpečný cloud. Naším cílem je ukázat lidem výhody bezpečného internetu a Open Source technologií.</p></li>
+            <li><h2><a href="./index.html" class="nav-link">Váš bezpečný cloud</a></h2><p><a href="./index.html" class="nav-link">Oscloud je váš bezpečný cloud. Naším cílem je ukázat lidem výhody bezpečného internetu a Open Source technologií.</a></p></li>
             <!-- <li><a href="#trips">Our Trips</a></li>
             <li><a href="#where">Where To Go</a></li>
             <li><a href="#reviews">Reviews</a></li> -->
@@ -42,41 +42,15 @@
         </div>
     </header>
 
-    <!-- About Us -->
-    <!-- <div class="content">
-        <section class="about-section" id="about">
-            <div class="about-section-wrapper">
-                <div class="about-text">
-                    <h2 class="h2-about">About Us</h2>
-                    <p class="about-text-p">Leigh McAdam is a Calgary-based writer, photographer and social media
-                        enthusiast with over
-                        48,000
-                        followers. Her blog: HikeBikeTravel is frequently cited as one of the top travel and outdoor
-                        adventure blogs in Canada, and consistently receives over 135,000 monthly page views. She
-                        shares
-                        her enthusiasm for the outdoors as a brand ambassador for Sporting Life, and has worked on
-                        campaigns for Travel Alberta, Expedia and Flight Hub. Leigh is the author of Discover
-                        Canada:
-                        100 Inspiring Outdoor Adventures. Currently, she is co-authoring: 125 Nature Hot Spots in
-                        Alberta (spring 2018). A true adventurer, Leigh will try anything once, except perhaps
-                        bungee
-                        jumping.
-                    </p>
-                </div>
-                <div class="about-img"><img class="about-img content-container"
-                        src="images/anneliese-phillips-uv4-vl3liKM-unsplash.jpg" alt="#">
-                </div>
-            </div>
-        </section> -->
 
         <!-- What We Do -->
         <section class="what-section" id="what-we-do">
             <div class="what-section-wrapper">
                 <div class="what-text">
-                    <h2 class="h2-what-we">O oScloud</h2>
+                    <h2 class="h2-what-we">O Oscloud</h2>
                     <p class="what-text-p">OsCloud využívá technologii NextCloud pro Vaše data a další aplikace pro Vás. MAM TO TU NEJAK VIC ROZVEST?</p>
                     <p class="what-text-p"></p>
-                    <p class="what-text-p">Pro více informácí o oScloud <a class="link"href="oscloud.html">klikni zde</a>.</p>
+                    <p class="what-text-p">Pro více informácí o Oscloud <a class="link"href="oscloud.html">klikni zde</a>.</p>
                 </div>
 
                 <ul class="icon-what-section">
@@ -112,80 +86,6 @@
         </div>
     </section> -->
 
-        <!-- Where togo -->
-        <!-- <section class="where-section" id="where">
-            <div class="where-section-wrapper">
-                <div class="where-text">
-
-                    <div class="h2-where">
-                        <h2 class="desktop">Where do you <br> want to go?</h2>
-                        <h2 class="mobile">Where do you want to go?</h2>
-                    </div>
-                    <div class="where-text-div">
-                        <p>
-                            You’ll find 21 detailed adventure guides, over a hundred practical travel tips, book reviews
-                            on
-                            anything outdoors related, packing lists on a range of outdoor activities including
-                            kayaking,
-                            backpacking and camping as well as honest hotel and B&B reviews.
-                        </p>
-                        <p class="contact-text">Contact us and we will help you!</p>
-                        <div class="contact-button">
-                            <a href="#" class="contact-button-text">CONTACT US</a>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </section> -->
-
-        <!-- Reviews section -->
-        <!-- <section class="reviews-section" id="reviews">
-            <h2 class="h2-reviews">Reviews</h2>
-            <div class="reviews-text">
-                <p>Our amazing clients are the reason we exist, and their reactions to our
-                    customized travel experiences
-                    and personalized service keep us smiling all day long. Here is just a sampling of what they’ve said:
-                </p>
-            </div>
-            <div class="reviews-card-wrapper">
-                <div class="reviews-card">
-                    <img src="images/kalen-emsley-kGSapVfg8Kw-unsplash.jpg" alt="#">
-                    <div class="reviews-card-text">
-                        She has booked two major European trips for us in the past year and every aspect has met, and
-                        in
-                        most cases exceeded, our expectations. Best prices, best hotels, best itineraries, and best
-                        cruises, she does it all. But the most important thing is she remembers the little things
-                        that
-                        we would do if we were making the plans ourselves.
-                        <div class="reviews-name">
-                            Bertie Norton
-                        </div>
-                    </div>
-                </div>
-                <div class="reviews-card-1">
-                    <img src="images/jeffrey-keenan-pUhxoSapPFA-unsplash.jpg" alt="#">
-                    <div class="reviews-card-text">
-                        Leigh McAdam has been making my travel arrangements for about 20 years and there is no one
-                        else I would trust to arrange my trips and tours. I've also had great fun on a few of the
-                        group trips she has arranged - Peru & Machu Picchu and a 10-day cruise out of Venice and
-                        diving. It's always an eclectic group of well traveled, interesting people.
-                        <div class="reviews-name">
-                            Frank Kinney
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </section> -->
-
-        <!-- Photo galery -->
-        <!-- <section class="photo-gallery">
-            <div class="photo-gallery-wrapper">
-                <img class="picture-img" src="images/alexey-fedenkov-BaCZYH9RLmQ-unsplash.jpg" alt="picture-1">
-                <img class="picture-img" src="images/omer-salom-LoijtQXXNhs-unsplash.jpg" alt="picture-2">
-                <img class="picture-img" src="images/vincentiu-solomon-7MH4ped6_Mo-unsplash.jpg" alt="picture-3">
-                <img class="picture-img" src="images/daniel-tseng-73lmMKhi2U8-unsplash.jpg" alt="picture-4">
-            </div>
-        </section> -->
        
         <!-- Footer -->
         <footer class="footer">
@@ -214,7 +114,7 @@
 <button id="scrollToTopBtn" onclick="scrollToTop()" title="Go to top">
     <i class="fas fa-arrow-up"></i>
 </button>
-<script src="script.js"></script>
+<script src="./assets/js/script.js"></script>
 
 </body>