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

added background and landing page

Browse Source
This commit is contained in:
Elias Müller
2021-12-15 13:42:41 +01:00
parent 9a61c45b7d
commit 0b58689f09
4 changed files with 119 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
html/landingpage.html
View File

@@ -14,6 +14,9 @@
<li><a href="#">Impressum</a></li>
</ul>
</div>
<div class="greeting">
<h1>Welcome to the Advertisement</h1>
</div>
<div class="content">
<div class="navigation">
<ol>
@@ -44,6 +47,66 @@
</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>

30
sass/index.css
View File

@@ -2,12 +2,32 @@ body {
margin: 0;
padding: 0;
display: flex;
flex-direction: column; }
flex-direction: column;
background-color: #EAE2B7; }
a {
color: #003049;
text-decoration: none;
font-weight: bold;
letter-spacing: 1px; }
.greeting {
color: #F77F00;
font-size: 30px;
font-weight: 900;
display: flex;
justify-content: center;
align-items: center;
height: 50vh;
background-image: url("https://i1.wp.com/sirus.be/sirus_afbeeldingen/2020/04/Smartcities.png?fit=2560%2C1594&ssl=1");
background-position: center center;
background-size: cover;
background-clip: border-box; }
.header {
background-color: #EAE2B7;
background-color: #F77F00;
width: 100%;
height: 100px;
height: 50px;
display: flex;
align-items: center;
justify-content: flex-end; }
@@ -25,4 +45,8 @@ ol {
flex-direction: column;
list-style: georgian; }
.content {
display: flex;
flex-direction: row; }
/*# sourceMappingURL=index.css.map */

2
sass/index.css.map
View File

@@ -1,6 +1,6 @@
{
"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",
"mappings": "AAMA,IAAI;EACF,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;EACV,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;EACtB,gBAAgB,EAXC,OAAO;;AAa1B,CAAC;EACG,KAAK,EAbI,OAAO;EAchB,eAAe,EAAE,IAAI;EACrB,WAAW,EAAE,IAAI;EACjB,cAAc,EAAE,GAAG;;AAEvB,SAAS;EACP,KAAK,EAlBgB,OAAO;EAmB5B,SAAS,EAAE,IAAI;EACf,WAAW,EAAE,GAAG;EAChB,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,MAAM;EACvB,WAAW,EAAE,MAAM;EACnB,MAAM,EAAE,IAAI;EACZ,gBAAgB,EAAE,kGAAkG;EACpH,mBAAmB,EAAE,aAAa;EAClC,eAAe,EAAE,KAAK;EACtB,eAAe,EAAE,UAAU;;AAE7B,OAAO;EACL,gBAAgB,EA7BA,OAAO;EA8BvB,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,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;;AAEtB,QAAQ;EACN,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,GAAG",
"sources": ["index.sass"],
"names": [],
"file": "index.css"

30
sass/index.sass
View File

@@ -9,11 +9,31 @@ body
padding: 0
display: flex
flex-direction: column
background-color: $background-color
a
color: $text-color
text-decoration: none
font-weight: bold
letter-spacing: 1px
.greeting
color: $secondary-text-color
font-size: 30px
font-weight: 900
display: flex
justify-content: center
align-items: center
height: 50vh
background-image: url("https://i1.wp.com/sirus.be/sirus_afbeeldingen/2020/04/Smartcities.png?fit=2560%2C1594&ssl=1")
background-position: center center
background-size: cover
background-clip: border-box
.header
background-color: $background-color
background-color: $secondary-color
width: 100%
height: 100px
height: 50px
display: flex
align-items: center
justify-content: flex-end
@@ -31,3 +51,9 @@ ol
display: flex
flex-direction: column
list-style: georgian
.content
display: flex
flex-direction: row
.navigation