page index

css/box_demo.css

@@ -0,0 +1,79 @@
+body,h1,h2,h3,p,td,quote,small,form,input,ul,li,ol,label{
+	margin:0px;
+	padding:0px;
+	font-family:Arial, Helvetica, sans-serif;
+}
+
+body{
+	margin-top:20px;
+	color:white;
+	font-size:13px;
+	background-color:#222222;
+}
+
+.clear{
+	clear:both;
+}
+
+a, a:visited {
+	color:#221F1F;
+	text-decoration:none;
+	outline:none;
+}
+
+a:hover{
+	/*text-decoration:underline;*/
+}
+
+#container{
+	width:890px;
+	margin:20px auto;
+}
+
+#heading,#footer{
+	background-color:#2A2A2A;
+	border:1px solid #444444;
+	height:20px;
+	padding:6px 0 25px 15px;
+	margin-bottom:30px;
+	overflow:hidden;
+}
+
+#footer{
+	height:10px;
+	margin:20px 0 20px 0;
+	padding:6px 0 11px 15px;
+}
+
+div.nomargin{
+	margin-right:0px;
+}
+
+.pic{
+	float:right;
+	margin:17px 0 2px 14px;
+	border:5px solid white;
+	width:300px;
+	height:300px;
+	border: 2px solid rgb(236, 236, 236);
+}
+
+.pic a{
+	width:200px;
+	height:250px;
+	text-indent:-99999px;
+	display:block;
+}
+
+h1{
+	font-size:28px;
+	font-weight:bold;
+	font-family:"Trebuchet MS",Arial, Helvetica, sans-serif;
+}
+
+h2{
+	font-weight:normal;
+	font-size:14px;
+
+	color:white;
+}

css/style.css

@@ -0,0 +1,3 @@
+body{
+  background-color: #efeff4;
+}

css_login/login_style.css

@@ -0,0 +1,261 @@
+@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300);
+@charset "utf-8";
+
+/** {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  font-weight: 300;
+}*/
+body {
+  font-family: 'Source Sans Pro', sans-serif;
+  color: white;
+  font-weight: 300;
+}
+body ::-webkit-input-placeholder {
+  /* WebKit browsers */
+  font-family: 'Source Sans Pro', sans-serif;
+  color: white;
+  font-weight: 300;
+}
+body :-moz-placeholder {
+  /* Mozilla Firefox 4 to 18 */
+  font-family: 'Source Sans Pro', sans-serif;
+  color: white;
+  opacity: 1;
+  font-weight: 300;
+}
+body ::-moz-placeholder {
+  /* Mozilla Firefox 19+ */
+  font-family: 'Source Sans Pro', sans-serif;
+  color: white;
+  opacity: 1;
+  font-weight: 300;
+}
+body :-ms-input-placeholder {
+  /* Internet Explorer 10+ */
+  font-family: 'Source Sans Pro', sans-serif;
+  color: white;
+  font-weight: 300;
+}
+.wrapper {
+  background: #50a3a2;
+  background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
+  background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
+  position: absolute;
+  top: 50%;
+  left: 0;
+  width: 100%;
+  height: 400px;
+  margin-top: -200px;
+  overflow: hidden;
+}
+.wrapper.form-success .container h1 {
+  -webkit-transform: translateY(85px);
+          transform: translateY(85px);
+}
+.container {
+  max-width: 600px;
+  margin: 0 auto;
+  padding: 80px 0;
+  height: 400px;
+  text-align: center;
+}
+.container h1 {
+  font-size: 40px;
+  -webkit-transition-duration: 1s;
+          transition-duration: 1s;
+  -webkit-transition-timing-function: ease-in-put;
+          transition-timing-function: ease-in-put;
+  font-weight: 200;
+}
+form {
+  padding: 20px 0;
+  position: relative;
+  z-index: 2;
+}
+form input {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  outline: 0;
+  border: 1px solid rgba(255, 255, 255, 0.4);
+  background-color: rgba(255, 255, 255, 0.2);
+  width: 250px;
+  border-radius: 3px;
+  padding: 10px 15px;
+  margin: 0 auto 10px auto;
+  display: block;
+  text-align: center;
+  font-size: 18px;
+  color: white;
+  -webkit-transition-duration: 0.25s;
+          transition-duration: 0.25s;
+  font-weight: 300;
+}
+form input:hover {
+  background-color: rgba(255, 255, 255, 0.4);
+}
+form input:focus {
+  background-color: white;
+  width: 300px;
+  color: #53e3a6;
+}
+form a:
+{
+  outline-width: 0px;
+  outline-style: none;
+  background-color: white;
+  border-top-width: 0px;
+  border-right-width: 0px;
+  border-bottom-width: 0px;
+  border-left-width: 0px;
+  border-top-style: none;
+  border-right-style: none;
+  border-bottom-style: none;
+  border-left-style: none;
+  border-image-source: none;
+  border-image-slice: 100% 100% 100% 100%;
+  border-image-width: 1 1 1 1;
+  border-image-outset: 0 0 0 0;
+  border-image-repeat: stretch stretch;
+  padding-top: 10px;
+  padding-right: 15px;
+  padding-bottom: 10px;
+  padding-left: 15px;
+  color: #53e3a6;
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+  width: 250px;
+  cursor: pointer;
+  font-size: 18px;
+  transition-duration: 0.25s;
+}
+
+/* Ligne 120 */
+form a:hover
+{
+  background-color: #f5f7f9;
+}
+
+
+
+form button {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  outline: 0;
+  background-color: white;
+  border: 0;
+  padding: 10px 15px;
+  color: #53e3a6;
+  border-radius: 3px;
+  width: 250px;
+  cursor: pointer;
+  font-size: 18px;
+  -webkit-transition-duration: 0.25s;
+          transition-duration: 0.25s;
+}
+form button:hover {
+  background-color: #f5f7f9;
+}
+.image {
+
+    background-image :url(image.png);
+	background-repeat : no-repeat;
+	position : absolute ;
+    top: 0;
+	left: 0;
+    width: 100%;
+
+	z-index: 1;
+}
+
+
+.image li {
+  position: absolute;
+  list-style: none;
+  display: block;
+  width: 400px;
+  height: 400px;
+  background-color: rgba(0, 0, 0, 0);
+  bottom: -160px;
+  -webkit-animation: square 25s infinite;
+  animation: square 25s infinite;
+  -webkit-transition-timing-function: linear;
+  transition-timing-function: linear;
+}
+.image2 li:nth-child(1) {
+  left: 10%;
+}
+
+
+.image li:nth-child(4) {
+  left: 40%;
+  width: 60px;
+  height: 60px;
+  -webkit-animation-duration: 22s;
+          animation-duration: 22s;
+  background-color: rgba(0, 0, 0, 0);
+}
+.image li:nth-child(5) {
+  left: 70%;
+}
+.image li:nth-child(6) {
+  left: 80%;
+  width: 400px;
+  height: 400px;
+  -webkit-animation-delay: 3s;
+          animation-delay: 3s;
+  background-color: rgba(0, 0, 0, 0);
+}
+
+.image li:nth-child(8) {
+  left: 55%;
+  width: 400px;
+  height: 400px;
+  -webkit-animation-delay: 5s;
+          animation-delay: 5s;
+  -webkit-animation-duration: 40s;
+          animation-duration: 40s;
+}
+.image li:nth-child(9) {
+  left: 36%;
+  width: 400px;
+  height: 400px;
+  -webkit-animation-delay: 0.1s;
+          animation-delay: 0.1s;
+  -webkit-animation-duration: 40s;
+          animation-duration: 40s;
+  background-color: rgba(0, 0, 0, 0);
+}
+.image li:nth-child(10) {
+  left: 17%;
+  top:200%;
+  width: 400px;
+  height: 400px;
+  -webkit-animation-delay: 4s;
+          animation-delay: 4s;
+}
+@-webkit-keyframes square {
+  0% {
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+  }
+  100% {
+    -webkit-transform: translateY(-700px) rotate(600deg);
+            transform: translateY(-700px) rotate(600deg);
+  }
+}
+@keyframes square {
+  0% {
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+  }
+  100% {
+    -webkit-transform: translateY(-700px) rotate(600deg);
+            transform: translateY(-700px) rotate(600deg);
+  }
+}

css_login/my_eight_point_star.css

@@ -0,0 +1,32 @@
+body {
+  display: table ;
+  margin: auto;
+  padding-top: 5%;
+  background: #50A3A2;
+
+}
+
+.star-eight {
+    background: #53E3A6;
+    width: 150px;
+    height: 150px;
+    position: relative;
+    text-align: center;
+    -webkit-transform: rotate(0deg);
+       -moz-transform: rotate(0deg);
+        -ms-transform: rotate(0deg);
+         -o-transform: rotate(0eg);
+}
+.star-eight:before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 150px;
+    width: 150px;
+    background: #53E3A6;
+    -webkit-transform: rotate(135deg);
+       -moz-transform: rotate(135deg);
+        -ms-transform: rotate(135deg);
+         -o-transform: rotate(135deg);
+}