From 1f8935a38b639a63e82caaf4f4df6dbd732fa807 Mon Sep 17 00:00:00 2001 From: KubMakCZ Date: Tue, 23 Sep 2025 09:36:32 +0200 Subject: [PATCH] layout & animation --- 04_layout/index.html | 49 +++++++++++++++++++++++++++ 04_layout/layout.css | 80 ++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 129 insertions(+) create mode 100644 04_layout/index.html create mode 100644 04_layout/layout.css diff --git a/04_layout/index.html b/04_layout/index.html new file mode 100644 index 0000000..91df783 --- /dev/null +++ b/04_layout/index.html @@ -0,0 +1,49 @@ + + + + + + Document + + + +
+

Záhlaví/hlavička

+

malý text na doplnění nebo rozšíření textu pod h1

+
+
+ kotva 1 + kotva 2 + kotva 3 + kotva 4 +
+
+
+

Kotva 1

+
podnadpis karty, který by mohl být delší
+

Begin:

+

lorem + tab = Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae, voluptate totam. Quos corporis ea accusantium officiis? Quasi commodi temporibus ab nostrum ea, consequuntur exercitationem aliquid veniam tempora delectus deleniti saepe.

+ Nahoru domů +
+
+

Kotva 2

+
podnadpis karty, který by mohl být delší
+

Begin:

+

lorem + tab = Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae, voluptate totam. Quos corporis ea accusantium officiis? Quasi commodi temporibus ab nostrum ea, consequuntur exercitationem aliquid veniam tempora delectus deleniti saepe.

+ Nahoru domů +
+
+

Kotva 3

+
podnadpis karty, který by mohl být delší
+

Begin:

+

lorem + tab = Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae, voluptate totam. Quos corporis ea accusantium officiis? Quasi commodi temporibus ab nostrum ea, consequuntur exercitationem aliquid veniam tempora delectus deleniti saepe.

+ Nahoru domů +
+
+ + + \ No newline at end of file diff --git a/04_layout/layout.css b/04_layout/layout.css new file mode 100644 index 0000000..daf4641 --- /dev/null +++ b/04_layout/layout.css @@ -0,0 +1,80 @@ +body { + font-family: Arial, Helvetica, sans-serif; + padding: 10px; + background-color: rgb(220, 220, 220); +} + +.header { + text-align: center ; + /* border: 2px solid darkblue; */ + padding: 5px 0px; + border-radius: 20px; + margin-bottom: 20px; + background-image: linear-gradient(45deg,#19264c,#9ebeca); + color: whitesmoke; + transition: 2s; +} +.header:hover { + opacity: 0.8; + box-shadow: 5px 5px 10px black; + transition: 0.5s; +} + +.topnav { + background-image: linear-gradient(30deg,#03202e,#073d66); + overflow: hidden; + border-radius: 10px; +} + +.topnav a{ + color: whitesmoke; + text-decoration: none; + float: left; + display: block; + padding: 5px 15px; +} + +.topnav a:hover { + background-color: #ddd; + color: black; +} + +.container::after { + clear:both; + display: table; +} + +.card { + padding: 20px; + margin-top: 20px; + background-color: white; + border-radius: 10px; +} + +.footer { + background-image: radial-gradient(circle,#000,#555); + color: whitesmoke; + text-align: center; + padding: 10px; + margin-top: 20px; + border-radius: 10px; +} +.footer a { + text-decoration: underline; + color: white +} + +@keyframes example { + 0% {color:#FF0000} + 35% {color:#FF0000} + 65% {color:#0000FF} + 100% {color:#00FF00} +} + +.secret { + /* color:black; */ + animation-name: example; + animation-duration: 2s; + animation-iteration-count: infinite; + animation-direction: alternate; +} \ No newline at end of file