Skip to content

Commit 977fdb5

Browse files
tkrupesh14tkrupesh14
committed
frontend->social network prototype
1 parent 330a64e commit 977fdb5

File tree

94 files changed

+13625
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

94 files changed

+13625
-0
lines changed

‎Fronted Projects/social network prototype/CSS/header.css‎

Lines changed: 572 additions & 0 deletions
Large diffs are not rendered by default.

‎Fronted Projects/social network prototype/CSS/home.css‎

Lines changed: 297 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,297 @@
1+
/*==================== MAIN SECTION ================*/
2+
3+
/*parent of main*/
4+
.mainnotfixed
5+
{
6+
float: left;
7+
width: 570px;
8+
/*height: 240px;*/
9+
}
10+
11+
/*to post an content section*/
12+
.main
13+
{
14+
/*width: 558px;*/
15+
/*height: 220px;*/
16+
background-color: #FFFFFF;
17+
border: 1px solid #B7B7B7;
18+
/*position: fixed;*/
19+
border-radius: 4px;
20+
padding: 15px;
21+
margin-bottom: 20px;
22+
box-shadow: 4px 1.5px 5px #999999;
23+
24+
}
25+
26+
/*horizontal line to seperate post and posted content*/
27+
28+
.mainnotfixed hr
29+
{
30+
border: 0.5px solid #B7B7B7;
31+
outline: 0px;
32+
width: 90%;
33+
box-shadow: 1px 1px 5px #999999;
34+
margin-bottom: 18px;
35+
}
36+
37+
/*same class naem of post and posted content*/
38+
.mainpost
39+
{
40+
41+
background-color: #FFFFFF;
42+
border: 1px solid #B7B7B7;
43+
/*position: fixed;*/
44+
border-radius: 4px;
45+
padding: 15px;
46+
box-shadow: 4px 1.5px 5px #999999;
47+
margin-bottom: 5px;
48+
}
49+
50+
/*user image size of the post and posted content*/
51+
.mainpost .userimg img
52+
{
53+
width: 45px;
54+
height: 45px;
55+
/*padding-bottom: 30px;*/
56+
float: left;
57+
}
58+
59+
/*user name design of post and posted content*/
60+
.mainpost .name
61+
{
62+
display: inline;
63+
padding-left: 8px;
64+
font-size: 16px;
65+
position: relative;
66+
top: 4px;
67+
font-weight: bold;
68+
/*float: left;*/
69+
}
70+
71+
/*time of post of design for post and posted content*/
72+
.mainpost .time
73+
{
74+
display: inline;
75+
padding-left: 8px;
76+
font-size: 12px;
77+
color: #999999;
78+
/*float: left;*/
79+
}
80+
81+
/*parent of content image of the post and posted content*/
82+
.mainpost .post
83+
{
84+
/*padding: 30px;*/
85+
/*margin-top: 10px;*/
86+
max-height: 250px;
87+
}
88+
89+
90+
/*content image of the post and posted content*/
91+
.mainpost .postimg
92+
{
93+
max-width: 100%;
94+
max-height: 250px;
95+
display: block;
96+
margin: 0 auto;
97+
}
98+
99+
/*paragraph of the posted content*/
100+
.mainpost .quotes
101+
{
102+
margin: 12px 4px 8px 4px;
103+
font-size: 14px;
104+
/*letter-spacing: 0.5px;*/
105+
font-family: sans-serif;
106+
text-align: justify;
107+
padding: 5px;
108+
}
109+
110+
/*post article of the input area*/
111+
.main .quotes textarea
112+
{
113+
margin-top: 8px;
114+
width: 100%;
115+
height: 70px;
116+
outline: 0px;
117+
padding: 5px;
118+
border: 1px solid #D1D1D1;
119+
font-size: 14px;
120+
font-family: sans-serif;
121+
text-align: justify;
122+
resize: none;
123+
box-sizing: border-box;
124+
}
125+
126+
/*post bar where post and image button available*/
127+
.main .postbar
128+
{
129+
130+
padding: 10px 10px 1px 10px;
131+
}
132+
133+
/*design button of post in postbar*/
134+
.main .postbar .imgbttn
135+
{
136+
display: inline;
137+
/*float: left;*/
138+
font-size: 15px;
139+
background-color: white;
140+
border: 3px solid #615D5E;
141+
border-radius: 4px;
142+
outline: 0px;
143+
/*position: absolute;
144+
left: 10px;*/
145+
box-shadow: 3px 3px 5px #999999;
146+
}
147+
148+
/*design button of post in postbar*/
149+
.main .postbar .postmypost
150+
{
151+
display: inline;
152+
float: right;
153+
font-size: 16px;
154+
padding: 6px 9px 4px 9px;
155+
background-color: #43d854;
156+
outline: 0px;
157+
border: 0px;
158+
border-radius: 4px;
159+
box-shadow: 3px 3px 5px #999999;
160+
}
161+
162+
/*post button hover effect*/
163+
.main .postbar .postmypost:hover
164+
{
165+
background-color: #009688;
166+
color: white;
167+
}
168+
169+
/*post button when click effect*/
170+
.main .postbar .postmypost:active
171+
{
172+
background-color: #4CAF50;
173+
box-shadow: 0 5px 4px #666;
174+
transform: translateY(5px);
175+
}
176+
177+
/*choose image which overwritten by imgbttn*/
178+
.main .postbar #chooseimg
179+
{
180+
width: 90px;
181+
/*float: left;*/
182+
height: 28px;
183+
font-size: 12px;
184+
position:absolute;
185+
opacity: 0;
186+
}
187+
188+
.main .postimg
189+
{
190+
max-height: 150px;
191+
}
192+
193+
/*like count in posted content*/
194+
.likedislike .like
195+
{
196+
font-size: 11px;
197+
font-family: Verdana;
198+
color: #999;
199+
}
200+
201+
/*like dislike button section in posted section*/
202+
.likedisbttn
203+
{
204+
margin: 0px;
205+
border: 1px solid #D1D1D1;
206+
padding: 5px;
207+
}
208+
209+
/*common class for like and dislike button*/
210+
.likedisbttn .fa
211+
{
212+
/*color: #009688;*/
213+
font-size: 18px;
214+
margin-right: 10px;
215+
}
216+
217+
/*like button of posted content*/
218+
.likedisbttn .fa-thumbs-up
219+
{
220+
margin-left: 8px;
221+
}
222+
223+
/*dislike button of posted content*/
224+
.likedisbttn .fa-thumbs-down
225+
{
226+
margin-left: 13px;
227+
}
228+
229+
/*mouse over effect in like and dislike button*/
230+
.likedisbttn .fa:hover
231+
{
232+
color: #2196F3;
233+
/*color: red;*/
234+
}
235+
236+
/*mouse click effect in like and dislike button*/
237+
.likedisbttn .fa:active
238+
{
239+
transform: translateY(2px);
240+
}
241+
242+
/*view more button in main content*/
243+
.viewmore
244+
{
245+
display: block;
246+
margin: 35px auto;
247+
padding: 1px;
248+
border: 2px solid #B7B7B7;
249+
outline: 0px;
250+
color: black;
251+
background-color: white;
252+
border-radius: 5px;
253+
box-shadow: 3px 3px 5px #999999;
254+
font-size: 16px;
255+
}
256+
257+
/*view more button when click change class name to loader*/
258+
259+
.loader {
260+
display: block;
261+
margin: 35px auto;
262+
padding: 1px;
263+
outline: 0px;
264+
border: 8px solid #f3f3f3;
265+
border-radius: 50%;
266+
border-top: 8px solid #00aeef;
267+
width: 40px;
268+
height: 40px;
269+
-webkit-animation: spin 1s linear infinite;
270+
animation: spin 1s linear infinite;
271+
}
272+
273+
274+
@-webkit-keyframes spin {
275+
0% { -webkit-transform: rotate(0deg); }
276+
100% { -webkit-transform: rotate(360deg); }
277+
}
278+
279+
@keyframes spin {
280+
0% { transform: rotate(0deg); }
281+
100% { transform: rotate(360deg); }
282+
}
283+
284+
.viewmore:hover
285+
{
286+
border: 2px solid #2196F3;
287+
background-color: #00aeef;
288+
color: white;
289+
}
290+
291+
.viewmore:active
292+
{
293+
background-color: #4F82C3;
294+
box-shadow: 0 5px 4px #666;
295+
transform: translateY(5px);
296+
}
297+

0 commit comments

Comments
 (0)