aplay latest design

public/ecogood.css

@@ -1,6 +1,12 @@
 body {
     color: #333;
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-size: 1rem;
+    
+    margin:0;
+    padding:0;
+    text-align:center;
+    display:block; 
 }
 
 a {
@@ -8,8 +14,9 @@ a {
     color: #333;
 }
 
+/*
 .item-box {
-	border-radius: 15px;
+    border-radius: 15px;
     position: relative;
     float: left;
 
@@ -40,3 +47,137 @@ h2 {
     font-size: 26px;
     font-weight: 500;
 }
+*/
+
+#epframe {
+    margin: auto;
+    max-width: 900px;
+    display: block;
+    text-align: center;
+    padding: 24px;
+}
+
+.epsquare,
+.epsquareplus {
+    width: 23%;
+    padding-bottom: 23%;
+    position: relative;
+    margin: 0.5%;
+    display: inline-block;
+    background-size: cover;
+}
+
+.epsquareplus {
+    padding-bottom: 0
+}
+
+.epsrect {
+    width: 23%;
+    padding-bottom: 32.2%;
+    background-color: none;
+    position: relative;
+    margin: 0.5%;
+    display: inline-block;
+    background-size: contain;
+    background-repeat: no-repeat;
+    border: 1px solid #ccc;
+}
+
+.eptextfunc {
+    width: 100%;
+    font-weight: bold;
+    position: absolute;
+    color: white;
+    bottom: 20%;
+    font-size: 1.35rem
+}
+
+.eptexttool {
+    width: 100%;
+    position: absolute;
+    color: white;
+    bottom: 8%;
+}
+
+.epcolwiki {
+    background-color: #009da5;
+    background-image: url(epwiki.png);
+}
+
+.epcolprojekte {
+    background-color: #889e33;
+    background-image: url(epprojekte.png);
+}
+
+.epcolmail {
+    background-color: #0099CC;
+    background-image: url(epmail.png);
+}
+
+.epcolmaillist {
+    background-color: #99CC00;
+    background-image: url(epmaillist.png);
+}
+
+.epcolcloud {
+    background-color: #3B6CA6;
+    background-image: url(epcloud.png);
+}
+
+.epcolsmartwe {
+    background-color: #E05656;
+    background-image: url(epsmartwe.png);
+}
+
+.epcolcode {
+    background-color: #40B075;
+    background-image: url(epcode.png);
+}
+
+.epcolforum {
+    background-color: #FF9900;
+    background-image: url(epforum.png);
+}
+
+@media only screen and (max-width: 900px) {
+    .epsquare {
+        width: 30%;
+        padding-bottom: 30%;
+    }
+    .epsrect {
+        width: 30%;
+        padding-bottom: 42%;
+    }
+    .epsquareplus {
+        width: 30%;
+    }
+}
+@media only screen and (max-width: 640px) {
+	.epsquare {
+		width: 40%;
+		padding-bottom: 40%;
+	}
+	.epsrect {
+		width: 40%;
+		padding-bottom: 56%;
+	}
+	.epsquareplus {
+		width: 40%;
+	}
+}
+@media only screen and (max-width: 450px) {
+	.epsquare {
+		width: 50%;
+		padding-bottom: 50%;
+		margin: 1.5%;
+	}
+	.epsrect {
+		width: 50%;
+		padding-bottom: 70%;
+		margin: 1.5%;
+	}
+	.epsquareplus {
+		width: 50%;
+		margin: 1.5%;
+	}
+}