Skip to content
Snippets Groups Projects
Commit 696f8f31 authored by Vanessa Stehr's avatar Vanessa Stehr
Browse files

Initial commit

parents
No related branches found
No related tags found
No related merge requests found
img/AG_1_73.jpg

35.3 KiB

img/dccDisplayer.png

23.2 KiB

img/link.png

18.1 KiB

img/tableTool.png

22.8 KiB

<!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
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;
}
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment