Skip to content

Commit 23fa27b

Browse files
zafar-saleemzafar-saleem
committed
First version of landing page for toolbox TP
1 parent 2649871 commit 23fa27b

13 files changed

+316
-2
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
.DS_Store

‎assets/adding-employees.png

160 KB
Loading

‎assets/adding-tools.png

40.8 KB
Loading

‎assets/banner.png

164 KB
Loading

‎assets/contact.png

1.83 KB
Loading

‎assets/facebook.png

2.04 KB
Loading

‎assets/logo.png

23.8 KB
Loading

‎assets/reddit.png

3.62 KB
Loading

‎assets/searching.png

43.2 KB
Loading

‎assets/tools.png

118 KB
Loading

‎assets/twitter.png

1.74 KB
Loading

‎index.html

Lines changed: 98 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,105 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4-
<title>Toolbox TP</title>
4+
<title>Indentity Access Management</title>
5+
<link href="https://fonts.googleapis.com/css?family=Manjari:100,400,700&display=swap&subset=malayalam" rel="stylesheet">
6+
<link rel="stylesheet" type="text/css" href="./styles.css">
57
</head>
68
<body>
7-
<h4>Toolbox TP Landing Page</h4>
9+
<header id="identity-access-management-toolbox-home">
10+
<a href="/" class="logo">
11+
<img src="./assets/logo.png" width="75">
12+
</a>
13+
<nav>
14+
<ul>
15+
<li><a href="#identity-access-management-toolbox-home" class="active">Home</a></li>
16+
<li><a href="#identity-access-management-toolbox-about">About Toolbox</a></li>
17+
<li><a href="#identity-access-management-toolbox-features">Features</a></li>
18+
<li><a href="#identity-access-management-toolbox-pricing">Pricing</a></li>
19+
<li><a href="#identity-access-management-toolbox-contact">Contact</a></li>
20+
</ul>
21+
</nav>
22+
<h4 class="title title-top"><span class="title-toolbox">Toolbox</span> is <span class="title-accessmgt">Indentity Access</span></h4>
23+
<h4 class="title-second"><span class="title-accessmgt">Management</span> SaaS product</h4>
24+
<h4 class="title-third">that allows easy <span class="title-access">access</span></h4>
25+
<h4 class="title-last">to different tools.</h4>
26+
<img src="./assets/banner.png" class="banner">
27+
</header>
28+
<div id="identity-access-management-toolbox-about" class="container about">
29+
<ul>
30+
<li>All Productivity Tools at one place</li>
31+
<li>Jira, Confluence, Trello, TimeOff TS, Basecamp etc</li>
32+
<li>No more hussle & search for browser's bookmarks</li>
33+
</ul>
34+
<p>
35+
Currently many organizations use many, if not countless, online services, tools, web apps etc to bring productivity to their employees daily work.
36+
</p>
37+
<p>
38+
For employees, if it brings productivity on one hand then on the other hand they need to manage all these tools so that they can access them conveniently.
39+
</p>
40+
<p>
41+
The current solution many employees use is the browsers default bookmarks. However, toolbox, bring all these tools at one place. All employees have to do is login to toolbox, where list of all the online services and tools can be viewed they need rather than going through inconvenient browser's default bookmark features they offer.
42+
</p>
43+
</div>
44+
<div id="identity-access-management-toolbox-features" class="container features">
45+
<nav>
46+
<ul>
47+
<li><a id="tools" href="#tools" onclick="toggle_visibility('tools');">Tools Just One Click Away</a></li>
48+
<li><a id="searching" href="#searching" onclick="toggle_visibility('searching');">Realtime Search</a></li>
49+
<li><a id="adding" href="#adding" onclick="toggle_visibility('adding');">Add More Tools as You Like</a></li>
50+
<li><a id="employees" href="#employees" onclick="toggle_visibility('employees');">New Employees? No Worries. Adding Employees Can't Get Easier</a></li>
51+
</ul>
52+
</nav>
53+
<div class="items">
54+
<img class="screen tools" src="./assets/tools.png">
55+
<img class="hide screen searching" src="./assets/searching.png">
56+
<img class="hide screen adding" src="./assets/adding-tools.png">
57+
<img class="hide screen employees" src="./assets/adding-employees.png">
58+
</div>
59+
</div>
60+
<div id="identity-access-management-toolbox-pricing" class="pricing">
61+
<p>
62+
$1 Per Employee <br>
63+
Per Month
64+
</p>
65+
</div>
66+
<footer id="identity-access-management-toolbox-contact">
67+
<ul>
68+
<li><a href="#identity-access-management-toolbox-home">Home</a></li>
69+
<li><a href="#identity-access-management-toolbox-about">About Toolbox</a></li>
70+
<li><a href="#identity-access-management-toolbox-features">Features</a></li>
71+
<li><a href="#identity-access-management-toolbox-pricing">Pricing</a></li>
72+
<li><a href="#identity-access-management-toolbox-contact">Contact</a></li>
73+
</ul>
74+
<ul class="socials">
75+
<li><a href=""><img width="50" src="./assets/twitter.png"></a></li>
76+
<li><a href=""><img width="50" src="./assets/facebook.png"></a></li>
77+
<li><a href=""><img width="50" src="./assets/reddit.png"></a></li>
78+
<li><a href=""><img width="50" src="./assets/contact.png"></a></li>
79+
</ul>
80+
</footer>
81+
<script type="text/javascript">
82+
<!--
83+
function toggle_visibility(el) {
84+
console.log(el);
85+
var e = document.querySelector(`.${el}`);
86+
let items = document.querySelectorAll('.screen');
87+
console.log(items);
88+
// item.classList.remove('show');
89+
// item.classList.add('hide');
90+
91+
items.forEach(item => {
92+
item.classList.remove('show');
93+
item.classList.add('hide');
94+
});
95+
96+
// console.log(e.classList.contains('hide'));
97+
if (e.classList.contains('hide')) {
98+
e.classList.remove('hide');
99+
e.classList.add('show');
100+
}
101+
}
102+
//-->
103+
</script>
8104
</body>
9105
</html>

‎styles.css

Lines changed: 217 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,217 @@
1+
body {
2+
font-family: 'Manjari', sans-serif;
3+
font-size: 18px;
4+
font-weight: 100;
5+
color: #3a3b3b;
6+
background-color: #ffffff;
7+
}
8+
9+
header {
10+
padding: 1em 5em;
11+
}
12+
13+
.logo {
14+
margin-left: 5em;
15+
text-decoration: none;
16+
}
17+
18+
img {
19+
display: inline-block;
20+
}
21+
22+
nav {
23+
position: absolute;
24+
right: 15em;
25+
width: 90%;
26+
display: inline-block;
27+
text-align: right;
28+
}
29+
30+
ul {
31+
text-decoration: none;
32+
list-style: none;
33+
padding: 0;
34+
margin: 0;
35+
}
36+
37+
ul li {
38+
display: inline-block;
39+
vertical-align: middle;
40+
margin-right: 1em;
41+
text-decoration: none;
42+
}
43+
44+
ul li a {
45+
text-decoration: none;
46+
font-weight: 100;
47+
color: #3a3b3b;
48+
}
49+
50+
ul li a:hover {
51+
color: #1875f0;
52+
}
53+
54+
ul li a.active {
55+
color: #1875f0;
56+
}
57+
58+
h4 {
59+
margin: 0;
60+
font-size: 40px;
61+
font-weight: 100;
62+
color: #9230d6;
63+
}
64+
65+
h4.title {
66+
margin-top: 5em;
67+
}
68+
69+
h4.title-top {
70+
padding-left: 2em;
71+
}
72+
73+
h4.title-second {
74+
padding-left: 1em;
75+
}
76+
77+
h4.title-third {
78+
padding-left: 4em;
79+
}
80+
81+
h4.title-last {
82+
padding-left: 3em;
83+
}
84+
85+
.title-toolbox {
86+
font-size: 60px;
87+
color: #e39ff1;
88+
}
89+
90+
.title-accessmgt {
91+
font-size: 60px;
92+
color: #f9d359;
93+
}
94+
95+
.title-access {
96+
font-size: 60px;
97+
color: #ff43b2;
98+
}
99+
100+
.banner {
101+
position: absolute;
102+
right: 14em;
103+
top: 10em;
104+
}
105+
106+
.container {
107+
margin-top: 15em;
108+
}
109+
110+
.about ul {
111+
padding-left: 20em;
112+
margin-bottom: 4em;
113+
}
114+
115+
.about ul li {
116+
display: inline-block;
117+
width: 13em;
118+
height: 10em;
119+
padding: 3em;
120+
text-align: center;
121+
padding-top: 7em;
122+
padding-bottom: 0em;
123+
cursor: pointer;
124+
box-shadow: 0 0 1em #ccc;
125+
}
126+
127+
.about ul li:hover {
128+
box-shadow: 0 0 0 #ccc;
129+
}
130+
131+
.about p {
132+
text-align: center;
133+
width: 60em;
134+
padding-left: 20em;
135+
}
136+
137+
.features {
138+
margin-top: 5em;
139+
}
140+
141+
.features nav {
142+
position: relative;
143+
text-align: left;
144+
right: 0;
145+
width: 100%;
146+
}
147+
148+
.features nav ul {
149+
padding-left: 10em;
150+
}
151+
152+
.features nav ul li {
153+
display: inline-block;
154+
border-radius: 5em;
155+
background: #e9f4ff;
156+
}
157+
158+
.features nav ul li a {
159+
padding: 1em 2em;
160+
display: block;
161+
}
162+
163+
.features .items {
164+
margin-top: 3em;
165+
padding-left: 10em;
166+
}
167+
168+
.features .items img {
169+
width: 80em;
170+
display: block;
171+
}
172+
173+
.features .items img.hide {
174+
display: none;
175+
}
176+
177+
.features .items img.show {
178+
display: block;
179+
}
180+
181+
.pricing p {
182+
padding: 3em 0em;
183+
text-align: center;
184+
font-size: 2em;
185+
font-weight: bolder;
186+
box-shadow: 0 0 0.3em #ccc;
187+
width: 72%;
188+
margin-left: 6em;
189+
}
190+
191+
footer {
192+
padding-left: 12em;
193+
padding-top: 5em;
194+
}
195+
196+
footer ul {
197+
width: 38em;
198+
display: inline-block;
199+
}
200+
201+
footer ul li {
202+
display: inline-block;
203+
margin-bottom: 1em;
204+
}
205+
206+
footer ul.socials {
207+
text-align: right;
208+
}
209+
210+
footer ul.socials li {
211+
/*position: absolute;*/
212+
display: inline-block;
213+
}
214+
215+
footer ul.socials li a img {
216+
display: block;
217+
}

0 commit comments

Comments
 (0)