Skip to content

Commit 7f9da67

Browse files
zicozico77zicozico77
committed
Added submenu, template for account creation menu and pdf on all prototype screens needed
1 parent ea38fdd commit 7f9da67

File tree

7 files changed

+294
-1
lines changed

7 files changed

+294
-1
lines changed

‎Prototype Screens.pdf

453 KB
Binary file not shown.

‎speak2me/account.html

Lines changed: 170 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,170 @@
1+
<!doctype html>
2+
3+
<html lang="en">
4+
<head>
5+
<meta charset="utf-8">
6+
7+
<title>Speak2Me</title>
8+
<meta name="description" content="Speak2Me">
9+
<meta name="author" content="SitePoint">
10+
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
11+
<link rel="stylesheet" href="css/foundation.css">
12+
<link rel="stylesheet" href="css/app.css">
13+
14+
15+
<link rel="stylesheet" href="css/account.css">
16+
17+
18+
19+
20+
<link rel="stylesheet" href="css/css/font-awesome.css">
21+
22+
23+
<!--[if lt IE 9]>
24+
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
25+
<![endif]-->
26+
</head>
27+
28+
<body>
29+
30+
31+
32+
33+
34+
35+
<div class ="columns large-2 small-1 medium-3" id ="logo">
36+
37+
38+
<img src="images/logospeak2me2.png" " style="width:80px!important;">
39+
40+
</div>
41+
42+
43+
44+
<h1>Username</h1>
45+
46+
<h3>Select 5 to get started</h3>
47+
48+
<div class ="row">
49+
<h2>Popular Streamers</h2>
50+
51+
<div class="row small-up-4 medium-up-4 large-up-4">
52+
<div class="column">
53+
<img src="images/image_example.png" class="thumbnail" alt="">
54+
</div>
55+
<div class="column">
56+
<img src="images/image_example.png" class="thumbnail" alt="">
57+
</div>
58+
<div class="column">
59+
<img src="images/image_example.png" class="thumbnail" alt="">
60+
</div>
61+
<div class="column">
62+
<img src="images/image_example.png" class="thumbnail" alt="">
63+
</div>
64+
</div>
65+
<div class="row small-up-4 medium-up-4 large-up-4">
66+
<div class="column">
67+
<img src="images/image_example.png" class="thumbnail" alt="">
68+
</div>
69+
<div class="column">
70+
<img src="images/image_example.png" class="thumbnail" alt="">
71+
</div>
72+
<div class="column">
73+
<img src="images/image_example.png" class="thumbnail" alt="">
74+
</div>
75+
<div class="column">
76+
<img src="images/image_example.png" class="thumbnail" alt="">
77+
</div>
78+
</div>
79+
80+
81+
</div>
82+
83+
84+
85+
86+
<div class ="row">
87+
<h2>Topics</h2>
88+
89+
<div class="row small-up-4 medium-up-4 large-up-4 grid">
90+
<div class="column">
91+
<img src="images/image_example.png" class="thumbnail" alt="">
92+
</div>
93+
<div class="column">
94+
<img src="images/image_example.png" class="thumbnail" alt="">
95+
</div>
96+
<div class="column">
97+
<img src="images/image_example.png" class="thumbnail" alt="">
98+
</div>
99+
<div class="column">
100+
<img src="images/image_example.png" class="thumbnail" alt="">
101+
</div>
102+
</div>
103+
<div class="row small-up-4 medium-up-4 large-up-4 grid">
104+
<div class="column">
105+
<img src="images/image_example.png" class="thumbnail" alt="">
106+
</div>
107+
<div class="column">
108+
<img src="images/image_example.png" class="thumbnail" alt="">
109+
</div>
110+
<div class="column">
111+
<img src="images/image_example.png" class="thumbnail" alt="">
112+
</div>
113+
<div class="column">
114+
<img src="images/image_example.png" class="thumbnail" alt="">
115+
</div>
116+
</div>
117+
118+
</div>
119+
120+
121+
122+
123+
124+
125+
126+
127+
128+
129+
130+
131+
132+
</div>
133+
134+
135+
136+
137+
138+
139+
140+
141+
142+
143+
144+
145+
</div>
146+
147+
148+
149+
150+
151+
152+
153+
154+
155+
156+
157+
158+
159+
<script src="js/vendor/jquery.js"></script>
160+
<script src="js/general_js.js"></script>
161+
<script src="js/vendor/what-input.js"></script>
162+
<script src="js/vendor/foundation.js"></script>
163+
<script src="js/app.js"></script>
164+
<script src="js/webpage.js"></script>
165+
166+
167+
168+
169+
</body>
170+
</html>

‎speak2me/css/account.css

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
2+
body > .robo{
3+
font-family: 'Roboto', sans-serif !important;
4+
5+
}
6+
7+
body{
8+
font-family: 'Roboto', sans-serif !important;
9+
background-color: #14213d;
10+
padding-top: 10px;
11+
12+
}
13+
14+
h1{
15+
font-size: 3rem;
16+
color: #ffffff;
17+
position: relative;
18+
top: 150px;
19+
left:28%;
20+
}
21+
22+
h2{
23+
font-size: 2rem;
24+
color: #ffffff;
25+
26+
}
27+
28+
div .row, h2 {
29+
position: relative;
30+
top: 200px;
31+
32+
}
33+
34+
h3{
35+
font-size: 1.5rem;
36+
color: #fca311;
37+
position: relative;
38+
top: 200px;
39+
left:23.7%;
40+
41+
}
42+
43+
44+
45+

‎speak2me/css/styles.css

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,4 +92,41 @@ position: relative;
9292
text-align: center;
9393
}
9494

95+
.sidenav {
96+
height: 100%; /* 100% Full-height */
97+
width: 0; /* 0 width - change this with JavaScript */
98+
position: fixed; /* Stay in place */
99+
z-index: 1; /* Stay on top */
100+
top: 0;
101+
left: 0;
102+
background-color: #050b2d;
103+
overflow-x: hidden; /* Disable horizontal scroll */
104+
padding-top: 40px;
105+
transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
106+
}
107+
108+
/* The navigation menu links */
109+
.sidenav a {
110+
padding: 8px 8px 8px 0px;
111+
text-decoration: none;
112+
font-size: 25px;
113+
color: #ffffff;
114+
display: block;
115+
transition: 0.3s
116+
}
117+
118+
.sidenav a:hover {
119+
background-color: #fca311;
120+
}
121+
122+
.sidenav p {
123+
text-decoration: none;
124+
font-size: 25px;
125+
color: #ffffff;
126+
cursor: pointer;
127+
}
128+
.sidenav img {
129+
padding: 3px 3px 3px 3px;
130+
float:left;
131+
}
95132

‎speak2me/images/Username-image.PNG

88 KB
Loading

‎speak2me/index.html

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,21 @@
2828
<body>
2929

3030

31+
<div id="Sidenav" class="sidenav">
32+
<img src="images/Username-image.png" style ="width:60px">
33+
<p> Username </p>
34+
<input type="text" id="middle-label search_function_box" placeholder="Search">
35+
36+
<a href="#">Home</a>
37+
38+
<a href="#">Browse</a>
39+
40+
<a href="#">My Library</a>
3141

42+
<a href="#">Settings</a>
43+
44+
45+
</div>
3246

3347

3448
<div class ="row expanded" id="top-nav">
@@ -48,7 +62,7 @@
4862

4963

5064
<div class="top-nav-link">
51-
<a>Browse </a>
65+
<a>Home </a>
5266
</div>
5367

5468

@@ -199,6 +213,7 @@ <h2>News of the day</h2>
199213
<script src="js/vendor/what-input.js"></script>
200214
<script src="js/vendor/foundation.js"></script>
201215
<script src="js/app.js"></script>
216+
<script src="js/webpage.js"></script>
202217

203218

204219

‎speak2me/js/webpage.js

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
2+
var sideup = 0;
3+
4+
$("div .top-nav-link a").click(function(){
5+
if(sideup == 0){
6+
$("#Sidenav").css("transition", "0.5s");
7+
$("#Sidenav").css("width", "300px");
8+
$("body div").css("opacity","0.6");
9+
$("body #Sidenav").css("opacity", "1");
10+
sideup = 1;
11+
}
12+
else{
13+
$("#Sidenav").css("transition", "0.2s");
14+
$("#Sidenav").css("width", "0px");
15+
sideup = 0;
16+
$("body div").css("opacity","1");
17+
}
18+
})
19+
20+
21+
22+
23+
24+
25+
26+

0 commit comments

Comments
 (0)