Book a Demo!
CoCalc Logo Icon
StoreFeaturesDocsShareSupportNewsAboutPoliciesSign UpSign In
Scarface-Tony-Montana
GitHub Repository: Scarface-Tony-Montana/Login-Signup-form
 Path: blob/master/signup_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


10
.login-page {

11
  width: 360px;

12
  padding: 8% 0 0;

13
  margin: auto;

14
}

15
.form {

16
  position: relative;

17
  z-index: 1;

18
  background: #48c9b0;

19
  max-width: 360px;

20
  margin: 0 auto 100px;

21
  padding: 45px;

22
  text-align: center;

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

24
  

25
}

26
.form input {

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

28
  outline: 0;

29
  background: #f2f2f2;

30
  width: 100%;

31
  border: 0;

32
  margin: 0 0 15px;

33
  padding: 15px;

34
  box-sizing: border-box;

35
  font-size: 14px;

36
  

37
}

38
.form button {

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

40
  font-size: 14px;

41
  font-weight: bold;

42
  letter-spacing: .1em;

43
  outline: 0;

44
  background: #17a589;

45
  width: 100%;

46
  border: 0;

47
  margin: 0px 0px 8px;

48
  padding: 15px;

49
  color: #FFFFFF;

50
  -webkit-transition: all 0.3 ease;

51
  transition: all 0.3 ease;

52
  cursor: pointer;

53


54


55
}

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

57
  background: #148f77;

58
}

59


60


61
.form .message {

62
  

63
  margin: 6px 6px;

64
  color: #808080;

65
  font-size: 11px;

66
  text-align: center;

67
  font-weight: bold;

68
  font-style: normal;

69


70
  

71


72
}

73
.form .message a {

74
  color: #FFFFFF;

75
  text-decoration: none;

76
  font-size: 13px;

77
}

78
.form .register-form {

79
  display: none;

80
}

81
.container {

82
  position: relative;

83
  z-index: 1;

84
  max-width: 300px;

85
  margin: 0 auto;

86
}

87
.container:before, .container:after {

88
  content: "";

89
  display: block;

90
  clear: both;

91
}

92
.container .info {

93
  margin: 50px auto;

94
  text-align: center;

95
}

96
.container .info h1 {

97
  margin: 0 0 15px;

98
  padding: 0;

99
  font-size: 36px;

100
  font-weight: 300;

101
  color: #1a1a1a;

102
}

103
.container .info span {

104
  color: #4d4d4d;

105
  font-size: 12px;

106
}

107
.container .info span a {

108
  color: #000000;

109
  text-decoration: none;

110
}

111
.container .info span .fa {

112
  color: #EF3B3A;

113
}

114
body {

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

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

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

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

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

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

121
  -webkit-font-smoothing: antialiased;

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

123
}

124