Monkey-Login/style.css at master · naaficodes/Monkey-Login · GitHub

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
/*AUTHOR		:	ABDUL WAHID NAAFI
INSTAGRAM	:	@IAM_NAAFI
INSTAGRAM 	:	@NAAFICODES*/
body
{
	background:url('images/monkeybg.png') #1b8c1b66 ;
	background-size: 5%;
}
.maincontainer
{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100vw;
	height: 100vh;
}

.monkeylogin
{
	width: 350px;
	height: 500px;
	box-shadow: 0 10px 25px rgba(0, 0, 0, .2);
	display: flex;
	align-items: center;
	flex-direction: column;
	background-color: white;
	border-radius: 40px;
}
.animcon
{
	background-color: white;

	overflow: hidden;
	/*overflow hidden because to keep the hand image hidden below*/
	margin-top:20px;
	height: 170px;
	width: 170px;
	border-radius: 50%;
	background-image:url('images/monkey.gif');
	background-size: 90% 85%;
	background-repeat: no-repeat;
	background-position: center;
	box-shadow: 0 10px 25px rgba(0, 0, 0, .2);

	/*flex center to keep the hand image in the center*/
	display: flex;
	align-items: center;
	flex-direction: column;
}
.animcon img
{
	margin-top:110%;
	height: 170px;
	width: 170px;
	transition: 1s;
}

.formcon
{
	margin-top: 38px;
}
input
{
	height: 40px;
	width: 300px;
	/*background-color: #254E58;*/
	border-radius: 20px;
	border:none;
	color: #5a5449;
	text-indent: 15px;
	font-size: 100%;
	box-shadow: 0 10px 25px rgba(0, 0, 0, .2);
	outline: none;
}
input::placeholder
{
	color:#5a5449;
	font-size: 100%;
	font-weight: lighter;
	text-indent: 15px;
}
.sbutton
{
	text-indent: 0px;
	height: 40px;
	width: 300px;
	margin-top: 10px;
	background-color: #1b8c1b66;
	transition: "2s";
	border: none;
	color: white;
	font-weight: bolder;
	box-shadow: 0 10px 25px rgba(0, 0, 0, .2);
	outline: none;

}
.sbutton:hover
{
	color: #5a5449;
	cursor: pointer;
}

.foot
{
	color: #5a5449;
	font-weight: lighter;
	margin-top: 40px;
}