Merge branch 'main' of https://github.com/uclab-potsdam/interinfo

uclab-potsdam · Oct 23, 2024 · 579392d · 579392d
2 parents 41914ce + 7328203
commit 579392d
Show file tree

Hide file tree

Showing 21 changed files with 6,154 additions and 115 deletions.
diff --git a/experiments/3melie/1_basics.html b/experiments/3melie/1_basics.html
@@ -7,18 +7,88 @@
 
 <style>
 
-    body{
-        background-color: rgb(67, 102, 126);
+body {
+    background-color: rgb(80, 70, 55);
+    transition: background-color 0.5s ease;
+    color: rgb(80, 70, 55);
+    width: auto; 
+    height: auto;
+    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+body:hover {
+    background-color: rgb(255, 213, 77);
+    color: rgb(80, 70, 55);
+}
+
+section{
+    opacity: 1;
+    padding: 20px;
+    transition: all 1s ease;
+    width: 70%;
+    margin: auto;
+    border-radius: 10%;
+}
+
+section:hover {
+    opacity: 1;
+    background-color: rgb(247, 247, 212);
+    transform: scale(1.05);
+    color: rgb(80, 70, 55);
+    border-radius: 0%;
+    border-style:double;
+    border-width: thick;
+    transition-duration: 0.5s;
+}
+
+h1{
+        font-variant: small-caps;
+        color: rgb(255, 213, 77);
+        text-align: center;
+    }
+
+    h2{
+        font-variant: small-caps;
     }
 
+
+    img{
+        max-width: 100%;
+        height: auto;
+        opacity: .5;
+    }
+
+    img:hover{
+        opacity: 1;
+    }
+
+    a:link{
+        color: rgb(80, 70, 55);
+    }
+
+    a:visited{
+        color: rgb(80, 70, 55);
+    }
+
+    a:link:hover{
+        opacity: 1;
+        color: rgb(225, 172, 0);
+    }
+
+    a:visited:hover{
+        opacity: 0;
+        color:rgb(247, 247, 212)
+    }
 </style>
 
 </head>
 <body>
 <main id="content" class="main-content  ">
     <article class="main-page-content" lang="en-US">
+        <h1><u>The box model</u></h1>
+        <section>
         <header>
-            <h1>The box model</h1>
+            <h2><u>The box model</u></h2>
         </header>
         <div class="section-content">          
             <p>
@@ -65,6 +135,7 @@ <h1>The box model</h1>
                 </table>
             </figure>
         </div>
+        </section>
         <section aria-labelledby="block_and_inline_boxes">
             <h2 id="block_and_inline_boxes">
                 <a href="#block_and_inline_boxes">Block and inline boxes</a>

diff --git a/experiments/Benedikt/1_basics.html b/experiments/Benedikt/1_basics.html
@@ -26,14 +26,42 @@
     padding-left: 20px;
     border: 1px solid rgb(203, 203, 203);
     border-radius: 10px;
-    margin: 20px;
+    margin: auto;
     opacity: .5;
     transition: all .5s ease;
+    width: 600px;
+    margin-top: 20px;
+    margin-bottom: 20px
 }
 
 section:hover{
     opacity: 1;
     transform: scale(1.01);
+    background-color: #eeeeee;
+    border: 1px solid #f2f2f2;
+    box-shadow: 3px 3px 15px #f2f2f2;
+}
+
+:link {
+    color: black;
+}
+
+:visited{
+    color: #777777;
+}
+
+p {
+    font-size: 1em;
+}
+
+img {
+    max-width: 100%;
+    height: auto;
+    transition: all .5s ease;
+}
+
+img:hover {
+    transform: scale(1.01);
 }
 
 </style>

diff --git a/experiments/Leon/1_basics.html b/experiments/Leon/1_basics.html
@@ -6,13 +6,39 @@
 <!-- Source: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model -->
 
 <style>
+section{
+    padding: 20px;
+    margin: 10px;
+    border-radius: 10px;
+    box-shadow: 2px 2px 10px;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
 
-/* add your magic here */
+section:hover, section:focus {
+    transform: scale(1.1);
+    box-shadow: 5px 5px 20px rgb(47, 12, 188);
+}
 
-</style>
+section{
+    background-color: rgb(214, 145, 75);
+    box-shadow: 5px 5px 15px rgb(188, 12, 12);
+}
+
+section{
+opacity: 5;
+padding: 20;
+transition: all 1s ease;
+}
+h1, h2 {
+    text-align: center;
+    color: rgb(255, 0, 0);
+    transition: 0.3s;
+}
 
+</style>
 </head>
 <body>
+
 <main id="content" class="main-content  ">
     <article class="main-page-content" lang="en-US">
         <header>

diff --git a/experiments/Levi/1_basics.html b/experiments/Levi/1_basics.html
@@ -10,17 +10,41 @@
 body {
     font-family: sans-serif;
     font-size: 15px;
-    background-color: rgb(224, 228, 255);
+    background-color: hsl(0, 0%, 95%);
 }
 
+section {
+    opacity: .5;
+    padding: 20px;
+    transition: all 1s ease;
+    width: 650px;
+    margin: auto;
+}
+
+section:hover {
+    opacity: 1;
+    background-color: white;
+    transform: scale(1.1);
+}
+
+
+h1 {
+    font size: 90px;
+}
+
+h2 {
+    font-size: 30px;
+}
+
+
 </style>
 
 </head>
 <body>
 <main id="content" class="main-content  ">
     <article class="main-page-content" lang="en-US">
         <header>
-            <h1>The box model</h1>
+            <h1 style="color:green;">The box model</h1>
         </header>
         <div class="section-content">          
             <p>