TheAdversary/frontend
4
0
Fork 0
Code Issues Pull Requests Projects 1 Releases Wiki Activity

Improved Design

Browse Source
This commit is contained in:
David Maul
2021-12-15 13:44:34 +00:00
parent 1b53b0d8c8
commit 2ee28aecec
4 changed files with 227 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
index.css Normal file
View File

@@ -0,0 +1,74 @@
body {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
background-color: #03071e;
color: #EAE2B7;
}
a {
color: inherit;
font-size: 150%;
text-decoration: none;
}
h3 {
font-size: 250%;
}
p {
font-size: 175%;
}
.articles {
margin: auto;
width: 50%;
padding: 10px;
font-family: 'Roboto', sans-serif;
}
.article:hover {
color: white;
}
.header {
display: flex;
align-items: center;
justify-content: space-between;
font-family: 'Roboto', sans-serif
}
.navigation {
background-color: inherit;
color: inherit;
font-family: 'Roboto', sans-serif;
width: 100%;
height: 100px;
display: flex;
align-items: center;
justify-content: space-between;
}
.navigation a {
padding: 2%;
font-size: 250%;
font-weight: bolder;
}
.foot {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.foot a {
font-family: "Roboto", sans-serif;
font-weight: bolder;
padding-left: 20%;
padding-right: 20%;
}
/*# sourceMappingURL=index.css.map */

7
index.css.map Normal file
View File

@@ -0,0 +1,7 @@
{
"version": 3,
"mappings": "AAMA,IAAI;EACF,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;EACV,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;;AAExB,OAAO;EACL,gBAAgB,EAbC,OAAO;EAcxB,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,KAAK;EACb,OAAO,EAAE,IAAI;EACb,WAAW,EAAE,MAAM;EACnB,eAAe,EAAE,QAAQ;;AAE3B,EAAE;EACA,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,GAAG;EACnB,SAAS,EAAE,IAAI;EACf,UAAU,EAAE,IAAI;EAEhB,KAAE;IACA,aAAa,EAAE,IAAI;;AAEvB,EAAE;EACA,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;EACtB,UAAU,EAAE,QAAQ",
"sources": ["index.sass"],
"names": [],
"file": "index.css"
}

33
index.sass Normal file
View File

@@ -0,0 +1,33 @@
$background-color: #EAE2B7
$text-color: #003049
$secondary-text-color: #F77F00
$primary-color: #D62828
$secondary-color: #F77F00
body
margin: 0
padding: 0
display: flex
flex-direction: column
.header
background-color: $background-color
width: 100%
height: 100px
display: flex
align-items: center
justify-content: flex-end
ul
display: flex
flex-direction: row
font-size: 20px
list-style: none
li
padding-right: 30px
ol
display: flex
flex-direction: column
list-style: georgian

113
landingpage.html Normal file
View File

@@ -0,0 +1,113 @@
<!DOCTYPE html>
<html lang="de" dir="ltr">
<head>
<meta charset="utf-8">
<title>THE ADVERSARY</title>
<link rel="stylesheet" href="../sass/index.css">
</head>
<body>
<div class="navigation">
<a href="#">HOME</a>
<a href="#">LINUX</a>
<a href="#">OPEN SOURCE</a>
<a href="#">OPINION</a>
<a href="#">PROGRAMMING</a>
</div>
<div class="content">
<div class="articles">
<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>
</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>
</div>
</div>
</a>
</div>
</div>
</body>
<footer>
<div class="foot">
<a>IMPRESSUM</a>
<a>CONTACT</a>
</div>
</footer>
</html>