diff --git a/03/index.html b/03/index.html new file mode 100644 index 0000000..4487b5d --- /dev/null +++ b/03/index.html @@ -0,0 +1,86 @@ + + + + + + Weblayout + + + + +
+

Záhlavý/hlavička

+

menší text pro doplnění

+
+
+ Kotva 1 + Kotva 2 + Kotva 3 + Kotva 4 +
+ +
+
+

Kotva 1

+
podnadpis karty pro vyzkouseni
+

Začátek:

+

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.

+ Na začátek stránky +
+
+

Kotva 2

+
podnadpis karty pro vyzkouseni
+

Začátek:

+

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!

+

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.

+

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!

+

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?

+

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.

+

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.

+

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.

+

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!

+

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!

+ Na začátek stránky +
+
+

Kotva 3

+
podnadpis karty pro vyzkouseni
+

Začátek:

+

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!

+

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.

+

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.

+

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.

+

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.

+

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.

+

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!

+

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?

+

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.

+ Na začátek stránky +
+
+ + + + \ No newline at end of file diff --git a/03/style.css b/03/style.css new file mode 100644 index 0000000..eb6d292 --- /dev/null +++ b/03/style.css @@ -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; +} \ No newline at end of file