Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

--- gf_informatik:web:repetition:websites [2022-01-04 08:23] – angelegt hof
+++ gf_informatik:web:repetition:websites [2022-01-10 10:36] (aktuell) – gra
@@ Zeile 18: / Zeile 18: @@
   * Der rote Button soll heller werden (''coral''), seine Schrift dunkel (''darkred'')
   * Der blaue Button soll heller werden (''cornflowerblue''), seine Schrift dunkel (''darkblue'')
+<nodisp 1>
+++++Lösung|
+== HTML ==
+<code html index.html>
+<html>
+<head>
+    <title>TwoButtons</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <h1>Entscheide dich:</h1>
+    <br>
+    <center>
+        <a href="red.html" class="red">Rote Pille</a>
+        <a href="blue.html" class="blue">Blaue Pille</a>
+    </center>
+</body>
+</html>
+</code>
+== CSS ==
+<code css style.css>
+body{
+    background-color:lavender;
+    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+}
+h1{
+    text-align: center;
+}
+a{
+    font-size: 14pt;
+    text-align: center;
+    text-decoration: none;
+    padding: 10px 20px;
+    border-style: outset;
+}
+a.red{
+    background-color: red;
+    color:lightpink ;
+}
+a.red:hover{
+    background-color: coral;
+    color: darkred
+}
+a.blue{
+    background-color: blue;
+    color:cyan;
+}
+a.blue:hover{
+    background-color: cornflowerblue;
+    color: darkblue
+}
+</code>
+++++
+</nodisp>