-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
120 lines (114 loc) · 5.81 KB
/
Copy pathindex.html
File metadata and controls
120 lines (114 loc) · 5.81 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900" />
<link rel="stylesheet" href="assets/styles/reset.css" />
<link rel="stylesheet" href="assets/styles/style.css" />
<link rel="stylesheet" href="assets/styles/responsive.css" />
<script type="text/javascript" src="assets/scripts/utils/sort.js"></script>
<script type="text/javascript" src="assets/scripts/loadProductList.js"></script>
<script type="text/javascript" src="data.js"></script>
<title>LIQID Investments - Homepage</title>
</head>
<body>
<header class="header">
<nav class="nav" id="main-menu">
<div class="logo">
<a href="#" class="logo__link">
<img src="assets/images/q_logo_icon.svg" alt="Liqid Icon" class="logo__link__icon logo__link__icon--white" />
<img src="assets/images/q_red_logo_icon.svg" alt="Liqid Icon" class="logo__link__icon logo__link__icon--red" />
<span class="logo__link__text">Hallo, LIQID!</span>
</a>
</div>
<div class="menu-button" onclick="handleToggleMenu()"></div>
<ul class="menu-items">
<li class="menu__list-item">
<a href="#" class="menu__list-item__link">
<figure class="menu__list-item__link__icon menu__list-item__link__icon--logout"></figure>
Logout
</a>
</li>
<li class="menu__list-item">
<a href="#" class="menu__list-item__link menu__list-item__link--active">
<figure class="menu__list-item__link__icon menu__list-item__link__icon--home"></figure>
Home
</a>
</li>
<li class="menu__list-item">
<a href="#" class="menu__list-item__link">
<figure class="menu__list-item__link__icon menu__list-item__link__icon--profile"></figure>
Profile
</a>
</li>
<li class="menu__list-item">
<a href="#" class="menu__list-item__link">
<figure class="menu__list-item__link__icon menu__list-item__link__icon--setting"></figure>
Settings
</a>
</li>
</ul>
</nav>
</header>
<section class="banner">
<div class="banner__text">
<h2 class="banner__text__header">Welcome to your personal area.</h2>
<p class="banner__text__content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris fermentum elit id auctor mollis. Aenean feugiat commodo quam, vulputate viverra lorem iaculis in. Curabitur varius commodo lacus eget vestibulum. Curabitur vitae risus nec justo faucibus vulputate. Nunc blandit nisi lobortis, gravida elit non, tincidunt dolor. Mauris ullamcorper suscipit risus, eget dictum dui consequat sed. Nam quis orci id dui consectetur elementum. Nulla et lacus massa.</p>
</div>
<div class="banner__news">
<div class="banner__news__item">
<h2 class="banner__news__item__header">
Investments
</h2>
<p class="banner__news__item__content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris fermentum elit id auctor mollis. Aenean feugiat commodo quam, vulputate viverra lorem iaculis in. Curabitur varius commodo lacus eget vestibulum. Curabitur vitae risus nec justo faucibus vulputate.
</p>
</div>
<div class="banner__news__item">
<h2 class="banner__news__item__header">
Stocks
</h2>
<p class="banner__news__item__content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris fermentum elit id auctor mollis.
</p>
<a href="#" class="banner__news__item__link">Explore</a>
</div>
</div>
</section>
<section class="product-wrapper">
<div class="products">
<h2 class="products__header">
Your products
</h2>
<div class="sort-wrapper">
<label class="sort-wrapper__label">Sort:</label>
<button onclick="handleClick('desc')" class="sort-wrapper__button">Highest values first</button>
<button onclick="handleClick('asc')" class="sort-wrapper__button sort-wrapper__button--down-arrow">Highest values last</button>
</div>
<ul class="product-list" id="product-list-wrapper">
</ul>
</div>
</section>
<footer class="footer">
<img src="assets/images/liqid_logo_icon.svg" alt="Liqid logo" class="footer__logo" />
</footer>
<script type="text/javascript">
loadProductList(productList, 'product-list-wrapper');
function handleClick(sortType) {
const sortedList = sortList(productList, 'amount', sortType);
loadProductList(sortedList, 'product-list-wrapper');
}
function handleToggleMenu() {
const menu = document.getElementById('main-menu');
const className = 'nav--mobile-view';
if (menu.classList.contains(className)) {
menu.classList.remove(className);
} else {
menu.classList.add(className);
document.getElementsByClassName('menu__list-item__link--active')[0].classList.remove('menu__list-item__link--active')
}
}
</script>
</body>
</html>