Initial commit

696f8f31 · Vanessa Stehr · 696f8f31 · 696f8f31 · 696f8f31 · 696f8f31
Commit 696f8f31 authored 1 year ago by Vanessa Stehr
--- a/img/AG_1_73.jpg
+++ b/img/AG_1_73.jpg
--- a/img/dccDisplayer.png
+++ b/img/dccDisplayer.png
--- a/img/link.png
+++ b/img/link.png
--- a/img/tableTool.png
+++ b/img/tableTool.png
--- a/index.html
+++ b/index.html
+<!DOCTYPE html>
+<html lang="de-DE">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="description" content="Startseite von Nessie">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>IT-Produkte der Arbeitsgruppe 1.73</title>
+  <link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css">
+  <link rel="stylesheet" href="styles/style.css"/>
+</head>
+
+<body>
+  <header>
+    <img src="img/AG_1_73.jpg" alt="Icon der Arbeitsgruppe" class="headerimg">
+    <h1>IT-Produkte der Arbeitsgruppe 1.73</h1>
+  </header>
+
+  <main>
+    <article> 
+      <h3>
+        <a href="">Table Tool</a>
+        <a href="" class="link-button"><img src="img/link.png" alt="Link"></a>
+      </h3>
+      <a href="" class="article-image">
+          <img src="img/tableTool.png" alt="table tool icon. Es zeigt eine Datei, die einen Graphen enthält, und dass sie in einen DCC übersetzt wird.">
+      </a>
+      <p>Das Table Tool ist toll, benutzt mehr Table Tool!</p>
+      <div class="example-files">
+          <a href="">Beispieldatei 1</a>
+          <a href="">Beispieldatei 2</a>
+      </div>
+    </article>
+    <article>
+      <h3>
+        <a href="">DCC Displayer</a>
+        <a href="" class="link-button"><img src="img/link.png" alt="Link"></a>
+      </h3>
+      <a href="" class="article-image">
+        <img src="img/dccDisplayer.png" alt="DCC displayer icon. Es zeigt einen Graphen, in dem &quot;DCC&quot; steht">
+      </a>
+      <p>Der DCC Displayer zeigt die Tabellen aus einem hochgeladenen DCC als Graph und als Tabelle an. Die Daten können dann als csv- oder Excel-Dateien heruntergeladen werden.</p>
+      <div class="example-files">
+        <a href="">Beispieldatei 1</a>
+        <a href="">Beispieldatei 2</a>
+      </div>
+    </article>
+  </main>
+</body>
+
+</html>
\ No newline at end of file
--- a/styles/style.css
+++ b/styles/style.css
+img {
+    width: 8em;
+}
+
+h3 a, h3 a:visited {
+    color: var(--text);
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+article {
+    display: grid;
+    grid-template-columns: 1fr 2fr;
+}
+
+article h3 {
+    grid-column: 2;
+    grid-row: 1;
+}
+
+article p {
+    grid-column: 2;
+    grid-row: 2;
+}
+
+.example-files {
+    grid-column: 2;
+    grid-row:3;
+
+}
+
+.article-image {
+    grid-column: 1;
+    grid-row: 1 / 4;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.link-button {
+    display: inline-block;
+    padding: 8px 10px;
+    text-decoration: none;
+    background-color: var(--accent-bg);
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    line-height: 1;
+}
+
+.link-button img {
+    width: 1.5rem;
+    height: 1.5rem;
+    line-height: 1;
+}
+
+.link-button:hover {
+    background-color: #d0d2da;
+}
+
+@media (max-width: 600px) {
+    article { 
+        grid-template-columns: 1fr; 
+    }
+    
+    article h3 {
+        grid-column: 1;
+        grid-row: 2;
+    }
+    
+    article p {
+        grid-column: 1;
+        grid-row: 3;
+    }
+    
+    .example-files {
+        grid-column: 1;
+        grid-row: 4;
+    
+    }
+    
+    .article-image {
+        grid-column: 1;
+        grid-row: 1;
+    }
+}
+