Compare commits

..

8 Commits

Author SHA1 Message Date
0687d93bf0 create info page 2024-09-04 22:41:52 +02:00
a49815c9bc oscloud.html edit 2024-09-02 23:34:49 +02:00
c2d85b2c74 úprava Head 2024-09-01 20:42:48 +02:00
046a12ad67 create oScloud.html (informativní stránka) + link z index.html 2024-08-30 08:32:33 +02:00
cdfe3cd979 Přidány kontakty 2024-08-30 08:21:36 +02:00
1c584ba15e úprava responzivity na mobilní zarovnání 2024-08-29 21:22:16 +02:00
bea4e02e38 Změna struktury 2024-08-29 20:42:34 +02:00
18a6adb21e návrh new web, přidán js tlacitko zpet 2024-08-29 20:36:42 +02:00
13 changed files with 1590 additions and 19 deletions

13
.idea/.gitignore vendored Normal file
View File

@ -0,0 +1,13 @@
# Default ignored files
/shelf/
/workspace.xml
# Rider ignored files
/contentModel.xml
/modules.xml
/projectSettingsUpdater.xml
/.idea.oscloud-web.iml
# Editor-based HTTP Client requests
/httpRequests/
# Datasource local storage ignored files
/dataSources/
/dataSources.local.xml

8
.idea/indexLayout.xml Normal file
View File

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

6
.idea/vcs.xml Normal file
View File

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

598
assets/css/style.css Normal file
View File

@ -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;
}

17
assets/js/script.js Normal file
View File

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

View File

@ -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>

Binary file not shown.

After

Width:  |  Height:  |  Size: 117 KiB

BIN
img/avatar.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 78 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 703 KiB

View File

@ -1,29 +1,228 @@
<!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">
<title>Oscloud</title>
<link rel="stylesheet" href="css/styles.css">
<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>
<body>
<header>
<h1>Vítejte na Oscloud</h1>
<div>
<!-- Navigace -->
<nav>
<ul>
<li><a href="index.html">Domů</a></li>
<li><a href="about.html">O nás</a></li>
<li><a href="contact.html">Kontakt</a></li>
<ul class="navigation" id="navigation">
<li><img class="awatar" src="../img/avatar.png"></img></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><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>
<main>
<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>
</main>
<footer>
<p>&copy; 2024 Oscloud</p>
<!-- 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 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>
</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> -->
<!-- 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>
Youll 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 theyve 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">
<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>

123
oscloud.html Normal file
View File

@ -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>

17
script.js Normal file
View File

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

589
style.css Normal file
View File

@ -0,0 +1,589 @@
: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;
}
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;
}
.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;
}