diff --git a/img/Git.png b/img/Git.png new file mode 100644 index 0000000000000000000000000000000000000000..6feaa3b71480b5f4245dbaab0a2bb1ee3d39fef1 Binary files /dev/null and b/img/Git.png differ diff --git a/img/dccJsonServer.png b/img/dccJsonServer.png new file mode 100644 index 0000000000000000000000000000000000000000..2b6b6c604b7ff847d41b560ffbc0e1921bb41f90 Binary files /dev/null and b/img/dccJsonServer.png differ diff --git a/img/download.png b/img/download.png new file mode 100644 index 0000000000000000000000000000000000000000..bdf759ea675e6ec5c8d51fef3c4e33ad36963740 Binary files /dev/null and b/img/download.png differ diff --git a/index.html b/index.html index bc682a6480a642c185b359e3919dff581b3cc506..04c5ede333566196ef648c534f21e673d6fe0c89 100644 --- a/index.html +++ b/index.html @@ -23,13 +23,16 @@ <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."> + <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> + <a href="" class="download-link"><img src="img/download.png" alt="Download icon"> Beispieldatei 1</a> + <a href="" class="download-link"><img src="img/download.png" alt="Download icon"> Beispieldatei 2</a> </div> + <a href="https://gitlab1.ptb.de/Seeger/pydccanddbtools" class="git-link"> + <img src="img/Git.png" alt="Git icon"> Dieses Projekt auf Gitlab + </a> </article> <article> <h3> @@ -41,9 +44,29 @@ </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> + <a href="" class="download-link"><img src="img/download.png" alt="Download icon"> Beispieldatei 1</a> + <a href="" class="download-link"><img src="img/download.png" alt="Download icon"> Beispieldatei 2</a> + </div> + <a href="https://gitlab1.ptb.de/digitaldynamicmeasurement/pydccdisplayer" class="git-link"> + <img src="img/Git.png" alt="Git icon"> Dieses Projekt auf Gitlab + </a> + </article> + <article> + <h3> + <a href="">DCC JSON Server</a> + <a href="" class="link-button"><img src="img/link.png" alt="Link"></a> + </h3> + <a href="" class="article-image"> + <img src="img/dccJsonServer.png" alt="DCC json server icon. Es zeigt zwei Dateien, eine DCC und eine JSON, die ineinander übersetzt werden."> + </a> + <p>Hier könnte Ihr Blorb stehen!</p> + <div class="example-files"> + <a href="" class="download-link"><img src="img/download.png" alt="Download icon"> Beispieldatei 1</a> + <a href="" class="download-link"><img src="img/download.png" alt="Download icon"> Beispieldatei 2</a> </div> + <a href="https://gitlab1.ptb.de/TBruns/dcc_rest_server" class="git-link"> + <img src="img/Git.png" alt="Git icon"> Dieses Projekt auf Gitlab + </a> </article> </main> </body> diff --git a/styles/style.css b/styles/style.css index 6bbdab4bf5ca8ccd92fc64e60c2d3b1a5a954e4c..ca4ad24da45c37ffb09f049488f1c7016f5b7e27 100644 --- a/styles/style.css +++ b/styles/style.css @@ -34,7 +34,7 @@ article p { .article-image { grid-column: 1; - grid-row: 1 / 4; + grid-row: 1 / 5; display: flex; justify-content: center; align-items: center; @@ -60,12 +60,31 @@ article p { background-color: #d0d2da; } +.git-link { + grid-column: 2; + grid-row: 4; +} + +.git-link, .download-link { + display: flex; + align-items: center; + line-height: 1.8; +} + +.git-link img, .download-link img { + width: 1.15rem; + height: 1.15rem; + margin: 0.1rem; + margin-right: 0.5em; +} + @media (max-width: 600px) { article { grid-template-columns: 1fr; } article h3 { + justify-self: center; grid-column: 1; grid-row: 2; } @@ -85,5 +104,10 @@ article p { grid-column: 1; grid-row: 1; } + + .git-link { + grid-column: 1; + grid-row: 5; + } }