Book a Demo!
CoCalc Logo Icon
StoreFeaturesDocsShareSupportNewsAboutPoliciesSign UpSign In
Scarface-Tony-Montana
GitHub Repository: Scarface-Tony-Montana/Login-Signup-form
 Path: blob/master/login_style.css
132 views
1
@import url(https://fonts.googleapis.com/css?family=Roboto:300);

2


3
.body{

4
  background-image: url('https://ordinaryfaith.net/wp-content/uploads/2016/03/Gray-plain-website-background.jpg');

5
  background-repeat: no-repeat;

6
  background-size: cover;

7
}

8


9
.login-page {

10
  width: 360px;

11
  padding: 8% 0 0;

12
  margin: auto;

13
}

14
.form {

15
  position: relative;

16
  z-index: 1;

17
  background: #48c9b0;

18
  max-width: 360px;

19
  margin: 0 auto 100px;

20
  padding: 45px;

21
  text-align: center;

22
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);

23
  

24
}

25
.form input {

26
  font-family: FontAwesome, "Roboto", sans-serif;

27
  outline: 0;

28
  background: #f2f2f2;

29
  width: 100%;

30
  border: 0;

31
  margin: 0 0 15px;

32
  padding: 15px;

33
  box-sizing: border-box;

34
  font-size: 14px;

35
  

36
}

37
.form button {

38
  font-family: "Titillium Web", sans-serif;

39
  font-size: 14px;

40
  font-weight: bold;

41
  letter-spacing: .1em;

42
  outline: 0;

43
  background: #17a589;

44
  width: 100%;

45
  border: 0;

46
  margin: 0px 0px 8px;

47
  padding: 15px;

48
  color: #FFFFFF;

49
  -webkit-transition: all 0.3 ease;

50
  transition: all 0.3 ease;

51
  cursor: pointer;

52


53


54
}

55
.form button:hover,.form button:active,.form button:focus {

56
  background: #148f77;

57
}

58


59


60
.form .message {

61
  

62
  margin: 6px 6px;

63
  color: #808080;

64
  font-size: 11px;

65
  text-align: center;

66
  font-weight: bold;

67
  font-style: normal;

68


69
  

70


71
}

72
.form .message a {

73
  color: #FFFFFF;

74
  text-decoration: none;

75
  font-size: 13px;

76
}

77
.form .register-form {

78
  display: none;

79
}

80
.container {

81
  position: relative;

82
  z-index: 1;

83
  max-width: 300px;

84
  margin: 0 auto;

85
}

86
.container:before, .container:after {

87
  content: "";

88
  display: block;

89
  clear: both;

90
}

91
.container .info {

92
  margin: 50px auto;

93
  text-align: center;

94
}

95
.container .info h1 {

96
  margin: 0 0 15px;

97
  padding: 0;

98
  font-size: 36px;

99
  font-weight: 300;

100
  color: #1a1a1a;

101
}

102
.container .info span {

103
  color: #4d4d4d;

104
  font-size: 12px;

105
}

106
.container .info span a {

107
  color: #000000;

108
  text-decoration: none;

109
}

110
.container .info span .fa {

111
  color: #EF3B3A;

112
}

113
body {

114
  background: #76b852; /* fallback for old browsers */

115
  background: -webkit-linear-gradient(right, #76b852, #8DC26F);

116
  background: -moz-linear-gradient(right, #76b852, #8DC26F);

117
  background: -o-linear-gradient(right, #76b852, #8DC26F);

118
  background: linear-gradient(to left, #76b852, #8DC26F);

119
  font-family: "Roboto", sans-serif;

120
  -webkit-font-smoothing: antialiased;

121
  -moz-osx-font-smoothing: grayscale;      

122
}

123