create info page

.idea/indexLayout.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="UserContentModel">
+    <attachedFolders />
+    <explicitIncludes />
+    <explicitExcludes />
+  </component>
+</project>

.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>

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
+}

contact.html

@@ -19,6 +19,7 @@
     </header>
     <main>
         <h2>Kontakt</h2>
+        
         <p>Email: <a href="mailto:info@oscloud.example">info@oscloud.example</a></p>
         <p>Pro technickou podporu: <a href="mailto:podpora@oscloud.example">podpora@oscloud.example</a></p>
     </main>

index.html

@@ -3,9 +3,16 @@
 
 
 <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">
+    <meta name="description" content="Váš bezpečný cloud">
+    <meta name="keywords" content="Cloud, Open Source, NextCloud, OSCloud">
+    <meta name="author" content="Archos & Kankys">
+    <link href="img/avatar.png" rel="shortcut icon"/>
     <script
             crossorigin="anonymous"
             src="https://kit.fontawesome.com/0a43c6cd1f.js"
@@ -70,7 +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>
+                    
                 </div>
 
                 <ul class="icon-what-section">
@@ -186,6 +193,9 @@
             <div class="footer-wrapper">
                 <div class="footer-text">
                     <p class="footer-contact" >Contact</p>
+                    <p class="contact-text">E-mail: <i class="fas fa-envelope"></i> <a href="mailto:info@oscloud.example"> info@oscloud.example</a></p>
+                    <p class="contact-text">Pro technickou podporu: <i class="fas fa-envelope"></i> <a href="mailto:mailto:podpora@oscloud.example"> podpora@oscloud.example</a></p>
+
                     <div class="footer-text-div">
                         <p class="footer-text-p">
                             © 2024 - oScloud. All Rights Reserved.
@@ -205,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>
+
+
+</html>
+
+

oscloud.html

@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html lang="cs">
+
+
+<head>
+    <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">
+    <meta name="description" content="Váš bezpečný cloud">
+    <meta name="keywords" content="Cloud, Open Source, NextCloud, OSCloud">
+    <meta name="author" content="Archos & Kankys">
+    <link href="img/avatar.png" rel="shortcut icon"/>
+    <script
+            crossorigin="anonymous"
+            src="https://kit.fontawesome.com/0a43c6cd1f.js"
+    ></script> <!-- Icona zobrazení šipky nahoru -->
+    <title>OScloud</title>
+</head>
+
+<div>
+
+    <!-- Navigace -->
+    <nav>
+        <ul class="navigation" id="navigation">
+            <li><a href="index.html"><img class="awatar" src="../img/avatar.png" ></img></a> </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> -->
+        </ul>
+        <img class="icon" src="icons/PngItem_1608357.png" alt="#">
+
+    </nav>
+
+    <!-- Hero section -->
+    <header class="hero-section ">
+        <div class="hero-text-wrapper">
+            <h1 class="hero-text">
+                <!-- OSCloud <br> Váš bezpečný cloud -->
+            </h1>
+        </div>
+    </header>
+
+
+        <!-- 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>
+                    <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>
+                </div>
+
+                <ul class="icon-what-section">
+                    <li>
+                        <p class="icon-text">Bezpečnost</p>
+
+                    </li>
+                    
+                        <p class="icon-text">Rychlost</p>
+                    </li>
+                    <li>
+                        <p class="icon-text">Svoboda</p>
+                    </li>
+                    <li>
+                        <p class="icon-text">Stabilita</p>
+                    </li>
+                </ul>
+            </div>
+        </section>
+
+        <!-- Our Trips -->
+    <!-- <section class="trips-section">
+        <div class="trips-section-wrapper">
+            <div class="images-trips-1 images-item "></div>
+            <div class="images-trips-2 images-item "></div>
+            <div class="images-trips-3 images-item "></div>
+            <div class="images-trips-4 images-item "></div>
+            <div class="text-trips images-item" id="trips">Our Trips</div>
+            <div class="images-trips-5 images-item "></div>
+            <div class="images-trips-6 images-item "></div>
+            <div class="images-trips-7 images-item "></div>
+            <div class="images-trips-8 images-item "></div>
+        </div>
+    </section> -->
+
+       
+        <!-- Footer -->
+        <footer class="footer">
+            <div class="footer-wrapper">
+                <div class="footer-text">
+                    <p class="footer-contact" >Contact</p>
+                    <p class="contact-text">E-mail: <i class="fas fa-envelope"></i> <a href="mailto:info@oscloud.example"> info@oscloud.example</a></p>
+                    <p class="contact-text">Pro technickou podporu: <i class="fas fa-envelope"></i> <a href="mailto:mailto:podpora@oscloud.example"> podpora@oscloud.example</a></p>
+
+                    <div class="footer-text-div">
+                        <p class="footer-text-p">
+                            © 2024 - oScloud. All Rights Reserved.
+
+                        </p>
+
+
+                    </div>
+                </div>
+            </div>
+        </footer>
+    </div>
+
+</div>
+
+
+<button id="scrollToTopBtn" onclick="scrollToTop()" title="Go to top">
+    <i class="fas fa-arrow-up"></i>
+</button>
+<script src="./assets/js/script.js"></script>
+
+</body>
+
+
+
+</html>

style.css

@@ -50,6 +50,10 @@
     width: 30%;
   } 
   
+  .link {
+    color: white;
+  }
+  
   .icon {
     width: auto;
     height: 22px;
@@ -69,13 +73,17 @@
       margin: 0 auto;
     }
   
-    nav a {
+    .awatar {
       display: none;
     }
   
-    .icon {
-      display: block;
-    }
+    /*nav a {*/
+    /*  display: none;*/
+    /*}*/
+  
+    /*.icon {*/
+    /*  display: block;*/
+    /*}*/
   }
   
   /* Hero - section */