Big Design Update #2
@@ -1,113 +1,102 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de" dir="ltr">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>The Advertisement</title>
|
||||
<title>THE ADVERSARY</title>
|
||||
<link rel="stylesheet" href="../sass/index.css">
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="header">
|
||||
<ul>
|
||||
<li><a href="#">Home</a></li>
|
||||
<li><a href="#">Suche</a></li>
|
||||
<li><a href="#">Kontakt</a></li>
|
||||
<li><a href="#">Impressum</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="greeting">
|
||||
<h1>Welcome to the Advertisement</h1>
|
||||
|
||||
<div class="navigation">
|
||||
<img id="logo" src="../img/logodark.svg">
|
||||
<a href="#">LINUX</a>
|
||||
<a href="#">OPEN SOURCE</a>
|
||||
<a href="#">OPINION</a>
|
||||
<a href="#">PROGRAMMING</a>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<div class="navigation">
|
||||
<ol>
|
||||
<li><a href="#">Category1</a></li>
|
||||
<li><a href="#">Category2</a></li>
|
||||
<li><a href="#">Category3</a></li>
|
||||
<li><a href="#">Category4</a></li>
|
||||
</ol>
|
||||
</div>
|
||||
<div class="articles">
|
||||
|
||||
<a href="#">
|
||||
<div class="article">
|
||||
<div class="article-header">
|
||||
<h3>The World is Burning</h3>
|
||||
<h3>Java is trash, and here is the proof.</h3>
|
||||
</div>
|
||||
<div class="article-description">
|
||||
<p>OPINION DAVID 15.12.2021</p>
|
||||
</div>
|
||||
<div class="article-body">
|
||||
<p>SomeText</p>
|
||||
<p>After a recent vulnerability voices get louder that demand to retire the language.</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<a href="#">
|
||||
<div class="article">
|
||||
<div class="article-header">
|
||||
<h3>The World is Burning</h3>
|
||||
<h3>Render fractals on canvas with WASM.</h3>
|
||||
</div>
|
||||
<div class="article-description">
|
||||
<p>PROGRAMMING DAVID 15.12.2021</p>
|
||||
</div>
|
||||
<div class="article-body">
|
||||
<p>SomeText</p>
|
||||
<p>Learn how to render mandelbrot fractals with web assembly.</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<a href="#">
|
||||
<div class="article">
|
||||
<div class="article-header">
|
||||
<h3>The World is Burning</h3>
|
||||
<h3>Write directly to the framebuffer with Rust.</h3>
|
||||
</div>
|
||||
<div class="article-description">
|
||||
<p>LINUX DAVID 15.12.2021</p>
|
||||
</div>
|
||||
<div class="article-body">
|
||||
<p>SomeText</p>
|
||||
<p>Learn how to access the framebuffer with Rust.</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<a href="#">
|
||||
<div class="article">
|
||||
<div class="article-header">
|
||||
<h3>The World is Burning</h3>
|
||||
<h3>Kobalt a simple webserver for testing.</h3>
|
||||
</div>
|
||||
<div class="article-description">
|
||||
<p>OPEN SOURCE DAVID 15.12.2021</p>
|
||||
</div>
|
||||
<div class="article-body">
|
||||
<p>SomeText</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#">
|
||||
<div class="article">
|
||||
<div class="article-header">
|
||||
<h3>The World is Burning</h3>
|
||||
</div>
|
||||
<div class="article-body">
|
||||
<p>SomeText</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#">
|
||||
<div class="article">
|
||||
<div class="article-header">
|
||||
<h3>The World is Burning</h3>
|
||||
</div>
|
||||
<div class="article-body">
|
||||
<p>SomeText</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#">
|
||||
<div class="article">
|
||||
<div class="article-header">
|
||||
<h3>The World is Burning</h3>
|
||||
</div>
|
||||
<div class="article-body">
|
||||
<p>SomeText</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#">
|
||||
<div class="article">
|
||||
<div class="article-header">
|
||||
<h3>The World is Burning</h3>
|
||||
</div>
|
||||
<div class="article-body">
|
||||
<p>SomeText</p>
|
||||
<p>Meet kobalt, the new fast and simple production ready webserver.</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<footer>
|
||||
<div class="foot">
|
||||
<a>ABOUT</a>
|
||||
<a>IMPRESSUM</a>
|
||||
<a>CONTACT</a>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</html>
|
||||
|
||||
98
img/logodark.svg
Normal file
98
img/logodark.svg
Normal file
@@ -0,0 +1,98 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
sodipodi:docname="LOGO-FINAL-DARK.svg"
|
||||
inkscape:version="1.0 (4035a4fb49, 2020-05-01)"
|
||||
id="svg8"
|
||||
version="1.1"
|
||||
viewBox="0 0 17.197914 15.875005"
|
||||
height="15.875005mm"
|
||||
width="17.197914mm">
|
||||
<defs
|
||||
id="defs2">
|
||||
<inkscape:perspective
|
||||
id="perspective1549"
|
||||
inkscape:persp3d-origin="105 : -182.125 : 1"
|
||||
inkscape:vp_z="210 : -132.625 : 1"
|
||||
inkscape:vp_y="0 : 999.99997 : 0"
|
||||
inkscape:vp_x="0 : -132.625 : 1"
|
||||
sodipodi:type="inkscape:persp3d" />
|
||||
</defs>
|
||||
<sodipodi:namedview
|
||||
fit-margin-bottom="0"
|
||||
fit-margin-right="0"
|
||||
fit-margin-left="0"
|
||||
fit-margin-top="0"
|
||||
showguides="true"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:window-y="-8"
|
||||
inkscape:window-x="-8"
|
||||
inkscape:window-height="1017"
|
||||
inkscape:window-width="1920"
|
||||
showgrid="true"
|
||||
inkscape:document-rotation="0"
|
||||
inkscape:current-layer="layer1"
|
||||
inkscape:document-units="mm"
|
||||
inkscape:cy="36.490448"
|
||||
inkscape:cx="22.175528"
|
||||
inkscape:zoom="22.627417"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
borderopacity="1.0"
|
||||
bordercolor="#666666"
|
||||
pagecolor="#ffffff"
|
||||
id="base">
|
||||
<inkscape:grid
|
||||
originy="-120.38541"
|
||||
originx="-88.635412"
|
||||
id="grid833"
|
||||
type="xygrid" />
|
||||
</sodipodi:namedview>
|
||||
<metadata
|
||||
id="metadata5">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
transform="translate(-88.635416,-120.38542)"
|
||||
inkscape:label="Background"
|
||||
id="layer2"
|
||||
inkscape:groupmode="layer">
|
||||
<path
|
||||
id="path1541"
|
||||
d="m 91.28125,136.26042 h 1.322917 l 5.291666,-10.58333 h -1.322915 z"
|
||||
style="fill:#003049;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
|
||||
<path
|
||||
id="path1682"
|
||||
d="m 96.572915,128.32292 h 0.529167 l 1.852083,1.05833 h -0.529166 z"
|
||||
style="fill:#003049;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
|
||||
</g>
|
||||
<g
|
||||
transform="translate(-88.635416,-120.38542)"
|
||||
id="layer1"
|
||||
inkscape:groupmode="layer"
|
||||
inkscape:label="Ebene 1">
|
||||
<path
|
||||
transform="scale(0.26458333)"
|
||||
d="m 365,455 -30,60 h 10 l 10,-20 10,-5 10,5 10,20 h 10 z m 0,20 7,14 -7,-4 -7,4 z"
|
||||
style="fill:#d62828;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.944882;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="path1468" />
|
||||
<path
|
||||
id="path1678"
|
||||
d="m 96.572915,120.38542 h 1.322917 l 7.937498,15.87499 h -1.32291 z"
|
||||
style="fill:#003049;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.4 KiB |
98
img/logolight.svg
Normal file
98
img/logolight.svg
Normal file
@@ -0,0 +1,98 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
sodipodi:docname="LOGO-FINAL-LIGHT.svg"
|
||||
inkscape:version="1.0 (4035a4fb49, 2020-05-01)"
|
||||
id="svg8"
|
||||
version="1.1"
|
||||
viewBox="0 0 17.197914 15.875005"
|
||||
height="15.875005mm"
|
||||
width="17.197914mm">
|
||||
<defs
|
||||
id="defs2">
|
||||
<inkscape:perspective
|
||||
id="perspective1549"
|
||||
inkscape:persp3d-origin="105 : -182.125 : 1"
|
||||
inkscape:vp_z="210 : -132.625 : 1"
|
||||
inkscape:vp_y="0 : 999.99997 : 0"
|
||||
inkscape:vp_x="0 : -132.625 : 1"
|
||||
sodipodi:type="inkscape:persp3d" />
|
||||
</defs>
|
||||
<sodipodi:namedview
|
||||
fit-margin-bottom="0"
|
||||
fit-margin-right="0"
|
||||
fit-margin-left="0"
|
||||
fit-margin-top="0"
|
||||
showguides="true"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:window-y="-8"
|
||||
inkscape:window-x="-8"
|
||||
inkscape:window-height="1017"
|
||||
inkscape:window-width="1920"
|
||||
showgrid="true"
|
||||
inkscape:document-rotation="0"
|
||||
inkscape:current-layer="layer2"
|
||||
inkscape:document-units="mm"
|
||||
inkscape:cy="35.054888"
|
||||
inkscape:cx="18.899507"
|
||||
inkscape:zoom="8"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
borderopacity="1.0"
|
||||
bordercolor="#666666"
|
||||
pagecolor="#ffffff"
|
||||
id="base">
|
||||
<inkscape:grid
|
||||
originy="-120.38541"
|
||||
originx="-88.635412"
|
||||
id="grid833"
|
||||
type="xygrid" />
|
||||
</sodipodi:namedview>
|
||||
<metadata
|
||||
id="metadata5">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
transform="translate(-88.635416,-120.38542)"
|
||||
inkscape:label="Background"
|
||||
id="layer2"
|
||||
inkscape:groupmode="layer">
|
||||
<path
|
||||
id="path1541"
|
||||
d="m 91.28125,136.26042 h 1.322917 l 5.291666,-10.58333 h -1.322915 z"
|
||||
style="fill:#d62828;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
|
||||
<path
|
||||
id="path1682"
|
||||
d="m 96.572915,128.32292 h 0.529167 l 1.852083,1.05833 h -0.529166 z"
|
||||
style="fill:#d62828;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
|
||||
</g>
|
||||
<g
|
||||
transform="translate(-88.635416,-120.38542)"
|
||||
id="layer1"
|
||||
inkscape:groupmode="layer"
|
||||
inkscape:label="Ebene 1">
|
||||
<path
|
||||
transform="scale(0.26458333)"
|
||||
d="m 365,455 -30,60 h 10 l 10,-20 10,-5 10,5 10,20 h 10 z m 0,20 7,14 -7,-4 -7,4 z"
|
||||
style="fill:#003049;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.944882;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="path1468" />
|
||||
<path
|
||||
id="path1678"
|
||||
d="m 96.572915,120.38542 h 1.322917 l 7.937498,15.87499 h -1.32291 z"
|
||||
style="fill:#d62828;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.4 KiB |
@@ -4,54 +4,111 @@ body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #03071e;
|
||||
color: #EAE2B7;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #EAE2B7;
|
||||
color: inherit;
|
||||
font-size: 150%;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 250%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
font-size: 175%;
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 3px;
|
||||
background-color: #ad080f;
|
||||
}
|
||||
|
||||
.articles {
|
||||
margin: auto;
|
||||
width: 50%;
|
||||
padding: 10px;
|
||||
width: 80%;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
}
|
||||
|
||||
.navigation {
|
||||
font-family: 'Roboto', sans-serif
|
||||
.article {
|
||||
padding: 2%;
|
||||
}
|
||||
|
||||
.article:hover {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.article-body {
|
||||
width: 60%;
|
||||
font-size: 80%;
|
||||
font-weight: normal;
|
||||
margin-top: 1%;
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
}
|
||||
|
||||
.article-description {
|
||||
font-weight: 500;
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
color: #D00000;
|
||||
font-size: 75%;
|
||||
margin-top: 0.5%;
|
||||
}
|
||||
|
||||
.article-description p {
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: 3%;
|
||||
padding-left: 2.5%;
|
||||
}
|
||||
|
||||
.header {
|
||||
background-color: #03071e;
|
||||
color: #EAE2B7;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end; }
|
||||
justify-content: space-between;
|
||||
font-family: 'Roboto', sans-serif
|
||||
}
|
||||
|
||||
ul {
|
||||
.navigation {
|
||||
background-color: black;
|
||||
color: inherit;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
width: 100%;
|
||||
padding-top: 1%;
|
||||
padding-bottom: 1%;
|
||||
height: 5%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
font-size: 20px;
|
||||
list-style: none; }
|
||||
ul li {
|
||||
padding-right: 30px; }
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.navigation a {
|
||||
padding-left: 2%;
|
||||
padding-right: 2%;
|
||||
font-size: 250%;
|
||||
font-weight: bolder;
|
||||
|
||||
}
|
||||
|
||||
ol {
|
||||
.foot {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
list-style: georgian; }
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
margin-top: 2.5%;
|
||||
margin-bottom: 2.5%;
|
||||
}
|
||||
|
||||
.foot a {
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
font-weight: normal;
|
||||
padding-left: 10%;
|
||||
padding-right: 10%;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=index.css.map */
|
||||
|
||||
Reference in New Issue
Block a user