skrabanek
/
3J_WTL_2024
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

add 03

master
Jakub Škrabánek 8 months ago
parent
38b34b8e80
commit
ec5ac009c9
2 changed files with 168 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 86
      03/index.html
  2. 82
      03/style.css

86
03/index.html
View File

@ -0,0 +1,86 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weblayout</title>
<link rel="stylesheet" href="style.css">
</head>
<body id="home">
<!-- hlavička/header -->
<div class="header">
<h1 class="secret">Záhlavý/hlavička</h1>
<p class="secret">menší text pro doplnění</p>
</div>
<div class="topnav">
<a href="#kotva1">Kotva 1</a>
<a href="#kotva2">Kotva 2</a>
<a href="#kotva3">Kotva 3</a>
<a href="#kotva4" style="float: right;">Kotva 4</a>
</div>
<!-- obsah/content -> třída:container -->
<div class="container">
<div class="card" id="kotva1">
<h2>Kotva 1</h2>
<h5>podnadpis karty pro vyzkouseni</h5>
<p>Začátek:</p>
<p class="secret">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Assumenda placeat reiciendis explicabo dicta nostrum magnam odit fugiat, at autem omnis voluptate quia totam fuga sed perferendis ex beatae error repudiandae.
Accusamus dolore fugit aspernatur esse quidem repudiandae doloribus veniam nesciunt mollitia voluptatum, nemo delectus incidunt dolorum quia nisi. Dolor placeat obcaecati doloribus perspiciatis atque culpa, dignissimos facilis fuga nihil cupiditate!
Facere optio aspernatur voluptatum quidem quas sed magnam hic, consequuntur architecto quisquam nemo eveniet rerum vero dicta et veritatis commodi porro, illo, tempore asperiores vel! Ut, optio veniam. Deserunt, fugit.
Maiores iste velit atque, sint blanditiis excepturi culpa quisquam facilis doloribus debitis dolores illo officia ratione, maxime vitae cumque saepe quos labore sunt hic, enim impedit magnam! Fugit, incidunt nam.
Quaerat dolor modi praesentium, velit inventore illum temporibus! Tempora facilis quo amet animi sit tempore in, cumque voluptas optio dolore aliquid molestias distinctio perferendis. Officiis facilis dolores fugiat rem repellendus!
Vel quia illo quae cum dicta ratione fugit? Praesentium ipsum repellendus, aperiam quas illo eos odio doloribus animi ut! Odit inventore deleniti sit totam quisquam a quo fuga, sint culpa?
Qui odio fuga quisquam veniam minus quaerat dolore quod, excepturi ullam, recusandae iusto! Vitae optio deserunt enim totam mollitia illum error aut iusto sunt necessitatibus amet, dolor, fugit architecto explicabo?
Maxime, minus itaque. Perferendis, repudiandae. Praesentium modi earum vero aut maiores temporibus molestias saepe doloribus, harum voluptatibus veritatis numquam sint expedita voluptatum ipsam ratione porro cumque rem quaerat. Sapiente, doloribus.
Facere eligendi deleniti esse totam ducimus magni, recusandae modi quaerat suscipit molestiae minima ipsam! Dignissimos ipsum porro commodi, quam laborum dolore sed nesciunt veniam sint maxime rerum qui enim recusandae?
Sit voluptas ratione unde. Nisi magni, temporibus qui quae sint amet ab dolores eaque ipsum tempore itaque quas distinctio explicabo sit soluta corporis. Maiores esse praesentium id reiciendis, doloremque rem?
Mollitia aspernatur voluptatem commodi perferendis ex consectetur enim neque, eum, blanditiis inventore eius rerum eaque voluptas cumque quos similique nulla aliquam? Fugit alias deserunt earum beatae placeat cumque laudantium laborum!
Amet ipsa soluta ducimus tempora nobis quis aperiam ut, iste vero cupiditate molestiae magnam. Porro, velit iure, earum unde adipisci, eos alias nihil in sunt ratione obcaecati rem magni deserunt!
Rem minus nam obcaecati in dolorum similique officia ex facilis molestiae reiciendis, beatae laborum, vitae voluptatibus quod, laudantium hic natus aliquam! Accusantium, dolorum architecto cumque consectetur suscipit odit reiciendis alias.
Aliquam illum quod molestias id quidem consectetur iure iusto vero, nam ea! Voluptatibus repudiandae veritatis culpa doloremque architecto qui saepe, inventore similique et recusandae magni fuga? Omnis, quaerat! Quam, nostrum.
Illo perspiciatis, aliquam, ut impedit quasi quisquam ipsum mollitia beatae neque possimus eveniet odio architecto et odit omnis hic tenetur, iusto soluta? Sit aperiam, facere possimus ullam odit atque ea.
Aspernatur autem illum earum eaque iure nam quasi incidunt nemo quidem architecto, magni reiciendis asperiores recusandae adipisci veniam soluta ratione blanditiis omnis ut nulla iusto sequi. Quia beatae exercitationem ut?
Illum quas assumenda perspiciatis quaerat doloremque voluptates repellat tenetur animi consequuntur at totam cupiditate exercitationem dolorum tempore accusantium, neque vero quis similique. Quibusdam aperiam quo sed eos, dolores doloremque sunt.
Ab, impedit sed ullam nulla sequi ea! Quae laboriosam aliquam quod sequi id nostrum consequuntur veniam quibusdam. Adipisci dolor voluptates eveniet eaque quae sed repellat soluta tempora aliquid harum. Praesentium.
Quas hic quidem fuga soluta laboriosam architecto nam dolores fugit quam accusamus nisi recusandae eaque reiciendis quis vel ut nesciunt, nulla, excepturi vero a, iste expedita explicabo beatae neque? Ipsa?
Fuga praesentium consequatur dicta deserunt delectus fugit qui odit sint facere quidem dolorum corporis ea, repudiandae odio atque quam earum consequuntur. Dolores necessitatibus doloribus similique nemo eum eligendi consequatur adipisci.</p>
<a href="#home">Na začátek stránky</a>
</div>
<div class="card" id="kotva2">
<h2>Kotva 2</h2>
<h5>podnadpis karty pro vyzkouseni</h5>
<p>Začátek:</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure tenetur hic at dolorum quia autem cum quaerat, obcaecati labore iste animi repellat voluptatem enim dolores, vel quod voluptas libero tempora!</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quisquam deserunt nam nihil quod, reprehenderit repellat accusamus praesentium optio quo, laborum voluptatum facere molestias, quasi dolorem esse? Nihil ullam accusantium neque.</p>
<p>Incidunt dolores dicta praesentium saepe fuga velit impedit modi animi maxime veniam distinctio error corrupti, totam, aliquid culpa cum aliquam quisquam. Odit perferendis reprehenderit corrupti, soluta aliquid sequi ipsam dolorem!</p>
<p>Omnis soluta dignissimos tenetur provident, quia placeat, assumenda consectetur deleniti consequatur facere laboriosam doloribus et earum distinctio iusto totam quam at voluptatem impedit enim? Necessitatibus voluptatum aliquid deleniti hic a?</p>
<p>Quo voluptatum culpa fuga quod? Aperiam, libero. Ullam corrupti architecto illo maiores voluptatibus quasi fugit culpa consequatur, eveniet cumque deserunt eligendi? Incidunt minus, itaque quisquam voluptates autem numquam odit accusantium.</p>
<p>Vel totam blanditiis hic rerum, excepturi saepe laudantium unde officiis iusto, nisi debitis harum veniam! Nobis aut vitae hic sequi explicabo eius porro saepe blanditiis praesentium eos? Necessitatibus, adipisci placeat.</p>
<p>Quidem magni earum mollitia et hic vero, nisi doloremque voluptatem blanditiis! Veritatis perspiciatis quia autem, dolores dolorem deleniti culpa fugit nulla! Earum, obcaecati natus! Placeat ducimus atque odit quidem ea.</p>
<p>Ipsam rerum non voluptatum recusandae ex debitis ratione maxime optio consectetur quod, molestiae quisquam deserunt, provident enim labore quidem autem odit error! Neque praesentium earum quas asperiores dolore similique. Dolores!</p>
<p>Quas perferendis quos corporis eaque, reiciendis suscipit beatae. Reiciendis vero id eum blanditiis, possimus qui quod iusto quidem asperiores, eos nesciunt repudiandae corporis debitis magni quasi soluta vitae, consequatur eius!</p>
<a href="#home">Na začátek stránky</a>
</div>
<div class="card" id="kotva3">
<h2>Kotva 3</h2>
<h5>podnadpis karty pro vyzkouseni</h5>
<p>Začátek:</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure tenetur hic at dolorum quia autem cum quaerat, obcaecati labore iste animi repellat voluptatem enim dolores, vel quod voluptas libero tempora!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet eligendi asperiores ipsa explicabo, quos mollitia et magnam debitis cumque modi qui! Quam commodi ea dolorum nemo, esse pariatur ratione quaerat.</p>
<p>Nihil illum necessitatibus maxime, dolorem iste dolor sed assumenda accusamus nemo fuga, quam magni? Animi minus deserunt amet, vitae corrupti consectetur ratione sed autem eos inventore illum repudiandae sapiente ea.</p>
<p>Consectetur omnis rem saepe vitae sunt quos, cupiditate a nemo exercitationem quas recusandae porro ad veniam, odit quidem, laborum eligendi minus iste! Repellat odit dolorum inventore nostrum! Dolor, consectetur doloremque.</p>
<p>Illum consectetur totam facilis. Incidunt, mollitia possimus! Fugiat delectus obcaecati nemo itaque dolor consectetur architecto excepturi, sunt aliquam tempora est asperiores non a laudantium temporibus? Repellat ut voluptas veniam ea.</p>
<p>Maxime sed omnis porro earum amet ducimus, pariatur quas adipisci perspiciatis? Quasi tempora accusantium cupiditate, excepturi facilis, facere perferendis voluptates quia reiciendis quod sit fugit, architecto fugiat. Rerum, dolorem placeat.</p>
<p>Quis rem, vel animi nihil eveniet aliquid incidunt beatae dolore assumenda ducimus repellat laborum doloremque, ipsa quidem perspiciatis, soluta fugit. Fugit nobis laudantium rem, repellat impedit voluptate minima quod dignissimos!</p>
<p>Accusamus quibusdam debitis harum eaque alias voluptatum deleniti beatae voluptates aspernatur, maiores error aliquam labore in! Facere dicta, unde doloremque qui autem aut possimus hic itaque, rem nesciunt, cum ducimus?</p>
<p>Aut laudantium, aspernatur enim a at ea velit voluptates sint et officiis dolores ipsum quam ullam, sapiente praesentium iure fuga dolorum repellat sit ipsam quos est! Tempora eos pariatur nobis.</p>
<a href="#home">Na začátek stránky</a>
</div>
</div>
<!-- zápatí/footer -->
<div class="footer" id="kotva4">
<h2>zápatí</h2>
<a href="#home">HOME</a>
</div>
</body>
</html>

82
03/style.css
View File

@ -0,0 +1,82 @@
/* Google fonts ->
najdu si ROBOTO
-> GET FONT
-> GET EMBED CODE
@import */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
body {
font-family: "Roboto", sans-serif;
font-weight: 300;
padding: 10px;
background-color: rgb(214, 214, 214);
}
.header {
text-align: center;
padding: 5px 0px;
background-image: linear-gradient(45deg,#d4d4d4,#4279a3);
margin-bottom: 10px;
border-radius: 20px;
transition: 0.5s;
}
.header:hover{
opacity: 0.8;
box-shadow: 5px 5px 10px black;
}
.topnav {
overflow:hidden;
background-image: linear-gradient(30deg, #232526,#43474a);
border-radius: 10px;
transition: 0.4s;
}
.topnav:hover{
box-shadow: 5px 5px 10px black;
opacity: 0.8;
}
.topnav a{
color: whitesmoke;
text-decoration: none;
float: left;
display:block;
padding: 5px 10px;
transition: 0.5s;
}
.topnav a:hover{
background-color: #ddd;
color:black;
}
.container:after{
clear:both;
display: table;
}
.card {
padding: 20px;
margin-top: 20px;
background-color: white;
}
.footer {
background-color: #ddd;
text-align: center;
padding: 20px;
margin-top: 20px;
}
/* animace @keyframe uděla animaci a poté v třídě musíme nastavit spouštěče */
@keyframes example {
0% {color: #FF0000}
35% {color: #0000ff}
65% {color: #00ff00}
1000% {color: #7b00ff}
}
.secret {
color: black;
animation-name: example;;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
Write Preview
Loading…
Cancel
Save