Skip to content
Snippets Groups Projects
Commit 4dbc9511 authored by Jonny Ngo Luong's avatar Jonny Ngo Luong
Browse files

feat: add css design on app homepage (#26)

parent 3dc3322a
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
client/src/app/app.component.html
+ 50
− 0
View file @ 4dbc9511
......@@ -9,7 +9,57 @@
<a href="/profile">/profile</a>
</nav>
</div>
<div class="splash">
<div class="title"><h1>SELLPOINT</h1></div>
<div class="wave">
<div class="waveImg"></div>
<div class="categoryWrapper">
<p>Søk etter kategorier...</p>
<p>Kategorier...</p>
<div class="whiteBox"></div>
</div>
<div class="cta">
<h2>Lorem Ipsum</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div class="buttons">
<a href="/register" class="btn">Register deg!</a>
<a href="javascript:void(0)" class="btn pink">Les mer</a>
</div>
</div>
</div>
</div>
<div class="wrapper">
<router-outlet></router-outlet>
</div>
<div class="footer">
<div class="logo"><h1>SELLPOINT LOGO</h1></div>
<div class="info">
<div class="bedrift">
<h3>Lorem ipsum</h3>
<ul>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ul>
</div>
<div class="omoss">
<h3>Lorem ipsum</h3>
<ul>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ul>
</div>
<div class="personvern">
<h3>Lorem ipsum</h3>
<ul>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ul>
</div>
</div>
</div>
\ No newline at end of file
client/src/app/app.component.scss
+ 125
− 1
View file @ 4dbc9511
......@@ -19,7 +19,131 @@ div.navbar {
}
}
}
div.splash {
position: relative;
width: 100%;
height: 55vh;
background-color: springgreen;
background-image: url("../assets/img/backgroundImage.png");
background-size: cover;
display: flex;
justify-content: space-between;
overflow: hidden;
color: #ffffff;
font-family: 'Inter', sans-serif;
a {
color: #ffffff;
text-decoration: none;
}
a:visited {
color: #ffffff;
}
div {
position: relative;
}
div.title {
position: absolute;
top: 50px;
left: 50%;
transform: translateX(-50%);
font-family: 'Inter', sans-serif;
font-size: 2em;
text-shadow: -2px 2px 3px #000000;
h1 {
letter-spacing: 10px;
}
}
div.categoryWrapper {
padding: 10px;
margin-left: 5%;
background: linear-gradient(90deg, #14A35A 0%, #24e072 100%);
width: 40%;
height: 300px;
p {
margin-bottom: 10px;
}
div.whiteBox {
width: 100%;
height: 56%;
background-color: #ffffff;
}
}
div.cta {
color: #030303;
text-align: right;
margin-right: 5%;
margin-top: 60px;
width: 400px;
z-index: 2;
div.buttons {
display: flex;
text-align: center;
justify-content: flex-end;
}
a.btn {
background: #13D05E;
width: 200px;
margin: 10px 0 10px 10px;
padding: 20px;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 4px rgba(0, 0, 0, 0.25);
font-family: 'Josefin Sans', sans-serif;
font-size: 20px;
}
a.pink {
background: #FFA1A1;
}
}
img {
position: absolute;
height: 100%;
bottom: -10%;
object-fit: cover;
}
div.wave {
position: absolute;
left: 0;
bottom: 0;
height: 50%;
width: 100%;
display: flex;
justify-content: space-between;
div.waveImg {
position: absolute;
bottom: 0;
width: 100%;
height: 110%;
background-image: url(../assets/img/wave2.svg);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 0% 0%;
background-size: 100vw auto;
}
}
}
div.wrapper {
padding: 10px;
padding: 5%;
}
div.footer {
color: #ffffff;
background-color: rgb(80, 80, 80);
display: flex;
justify-content: space-between;
align-items: center;
height: 200px;
div.info {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-right: 5%;
width: 400px;
ul {
padding-left: 20px;
}
}
div.logo {
margin-left: 5%;
}
}
client/src/assets/img/backgroundImage.png 0 → 100644
+ 0
− 0
View file @ 4dbc9511
client/src/assets/img/backgroundImage.png

3.74 MiB

client/src/assets/img/footerWave.svg 0 → 100644
+ 3
− 0
View file @ 4dbc9511
<svg width="1440" height="312" viewBox="0 0 1440 312" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="1440" height="312" fill="#505050"/>
</svg>
\ No newline at end of file
client/src/assets/img/wave.svg 0 → 100644
+ 3
− 0
View file @ 4dbc9511
<svg width="1440" height="297" viewBox="0 0 1440 297" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 80.1662L40 73.1662C80 66.1662 160 51.1662 240 30.1662C320 8.16623 400 -20.8338 480 22.1662C560 66.1662 640 181.166 720 188.166C800 195.166 880 94.1662 960 51.1662C1040 8.16623 1120 22.1662 1200 30.1662C1280 37.1662 1360 37.1662 1400 37.1662H1440V296.166H1400C1360 296.166 1280 296.166 1200 296.166C1120 296.166 1040 296.166 960 296.166C880 296.166 800 296.166 720 296.166C640 296.166 560 296.166 480 296.166C400 296.166 320 296.166 240 296.166C160 296.166 80 296.166 40 296.166H0V80.1662Z" fill="white"/>
</svg>
\ No newline at end of file
client/src/assets/img/wave2.svg 0 → 100644
+ 3
− 0
View file @ 4dbc9511
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="0 0 1440 600" width="1440" height="600"><defs><path d="M40 73.17C80 66.17 160 51.17 240 30.17C320 8.17 400 -20.83 480 22.17C560 66.17 640 181.17 720 188.17C800 195.17 880 94.17 960 51.17C1040 8.17 1120 22.17 1200 30.17C1280 37.17 1360 37.17 1400 37.17C1402.67 37.17 1416 37.17 1440 37.17L1440 296.17C1416 296.17 1402.67 296.17 1400 296.17C1360 296.17 1280 296.17 1200 296.17C1120 296.17 1040 296.17 960 296.17C880 296.17 800 296.17 720 296.17C640 296.17 560 296.17 480 296.17C400 296.17 320 296.17 240 296.17C160 296.17 80 296.17 40 296.17C37.33 296.17 24 296.17 0 296.17L0 80.17C24 75.97 37.33 73.63 40 73.17Z" id="lehERzeLg"></path><path d="M0 287.31L1440 287.31L1440 600L0 600L0 287.31Z" id="fI0ZgiJzV"></path></defs><g><g><g><use xlink:href="#lehERzeLg" opacity="1" fill="#ffffff" fill-opacity="1"></use><g><use xlink:href="#lehERzeLg" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-opacity="0"></use></g></g><g><use xlink:href="#fI0ZgiJzV" opacity="1" fill="#ffffff" fill-opacity="1"></use></g></g></g></svg>
\ No newline at end of file
client/src/index.html
+ 3
− 0
View file @ 4dbc9511
......@@ -6,6 +6,9 @@
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap" rel="stylesheet">
</head>
<body>
<app-root></app-root>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment