From fa2cfe1e865e70cae083ad2c432fb7d06d94cf5c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20=C5=A0krab=C3=A1nek?= Date: Wed, 9 Nov 2022 11:31:56 +0000 Subject: [PATCH] CSS - animations --- 06/index.html | 49 +++++++++++++++++++++++++++ 06/style.css | 94 +++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 143 insertions(+) create mode 100644 06/index.html create mode 100644 06/style.css diff --git a/06/index.html b/06/index.html new file mode 100644 index 0000000..f5043a0 --- /dev/null +++ b/06/index.html @@ -0,0 +1,49 @@ + + + + + + + Document + + + +
+

Záhlaví/hlavička

+

Mnohem menší text pro doplnění

+
+
+ Kotva 1 + Kotva 2 + Kotva 3 + zapatí +
+
+
+

Kotva 1

+
Podnadpis karty ktery muze byt delsi
+

Begin

+

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quas facere suscipit doloribus obcaecati placeat. Quae labore incidunt hic repellat eius error doloremque, perferendis nostrum similique deleniti temporibus illo dicta. Cupiditate?

+ NAHORU DOMU +
+
+

Kotva 2

+
Podnadpis karty ktery muze byt delsi
+

Begin

+

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quas facere suscipit doloribus obcaecati placeat. Quae labore incidunt hic repellat eius error doloremque, perferendis nostrum similique deleniti temporibus illo dicta. Cupiditate?

+ NAHORU DOMU +
+
+

Kotva 3

+
Podnadpis karty ktery muze byt delsi
+

Begin

+

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quas facere suscipit doloribus obcaecati placeat. Quae labore incidunt hic repellat eius error doloremque, perferendis nostrum similique deleniti temporibus illo dicta. Cupiditate?

+ NAHORU DOMU +
+
+ + + \ No newline at end of file diff --git a/06/style.css b/06/style.css new file mode 100644 index 0000000..c7efd80 --- /dev/null +++ b/06/style.css @@ -0,0 +1,94 @@ +@import url('https://fonts.googleapis.com/css2?family=Island+Moments&family=Roboto:wght@100;300;400;900&display=swap'); + +body{ + font-family: 'Roboto', sans-serif; + padding: 10px; + background-color: rgb(218, 218, 218); +} + +.header { + text-align: center; + /* border: 0px solid darkblue; */ + padding: 5px 0px; + margin-bottom: 10px; + border-radius: 20px; + color: white; + background-image: linear-gradient(45deg,#283048,#859398); + transition: 0.5s; +} + + +.header:hover { + opacity: 0.8; + box-shadow: 5px 5px 10px black; + padding: 8px 0px; +} + +.topnav{ + /* background-color: rgb(51, 51, 51); */ + background-image: linear-gradient(30deg, #232526,#43474a); + overflow: hidden; + border-radius: 10px; + transition: 0.5s; +} + +.topnav:hover { + box-shadow: 5px 5px 10px black; + opacity: 0.8; +} + +.topnav a{ + color: whitesmoke; /* barva textu*/ + text-decoration: none; /*odstrani podržítko*/ + float: left; /* nastaví elementy do leva*/ + display: block; /*blokové zobrazení*/ + padding: 5px 15px; /* mezery pro odkazy*/ + transition: 0.4s; + border-radius: 10px; +} + +.topnav a:hover { + background-color: #d0d0d0; + color: black; +} + +.container:after{ + clear:both; + display: table; +} + +.card{ + padding: 20px; + margin-top: 20px; + background-color: white; + border-radius: 20px; +} + +.footer{ + background-image: radial-gradient(circle,#000, #434343); + text-align: center; + padding: 20px; + margin-top: 20px; + color:white; + border-radius: 20px; + +} +.footer a { + text-decoration: underline; + color: white; +} + +@keyframes example { + 0% {color: #FF0000} + 35%{color: #FF0000} + 65% {color: #0000FF} + 100% {color: #0000FF} +} + +.secret { + color: black; + animation-name: example; + animation-duration: 2s; + animation-iteration-count: infinite; + animation-direction: alternate; +} \ No newline at end of file