first layout
This commit is contained in:
50
html/landingpage.html
Normal file
50
html/landingpage.html
Normal file
@@ -0,0 +1,50 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de" dir="ltr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>The Advertisement</title>
|
||||
<link rel="stylesheet" href="../sass/index.css">
|
||||
</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="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>
|
||||
</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>
|
||||
</html>
|
||||
28
sass/index.css
Normal file
28
sass/index.css
Normal file
@@ -0,0 +1,28 @@
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column; }
|
||||
|
||||
.header {
|
||||
background-color: #EAE2B7;
|
||||
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; }
|
||||
ul li {
|
||||
padding-right: 30px; }
|
||||
|
||||
ol {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
list-style: georgian; }
|
||||
|
||||
/*# sourceMappingURL=index.css.map */
|
||||
7
sass/index.css.map
Normal file
7
sass/index.css.map
Normal 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
sass/index.sass
Normal file
33
sass/index.sass
Normal 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
|
||||
Reference in New Issue
Block a user