自己紹介（CSS)

CSS

自己紹介（CSS)

@@ -0,0 +1,182 @@
+body{
+  color:white;
+  margin: 0;
+  text-align: center;
+  font-family: 'Corben', cursive;
+}
+
+h1{
+  color:red;
+  font-size:  5.625rem;
+  margin: 50px auto 0 auto;
+  font-family: 'Corben', cursive;
+}
+h2{
+  color:crimson;
+  font-family: 'Anton', sans-serif;
+  font-size: 2.5rem;
+  font-weight:normal;
+  padding-bottom: 10px;
+}
+h3{
+  color:coral;
+  font-family: 'Anton', sans-serif;
+   }   
+p{
+  line-height: 2;
+  font-family: 'Anton', sans-serif;
+  }
+hr{
+  border: dotted 6px;
+  border-bottom: none;
+  width:4%;
+  margin: 100px auto;
+}
+a{
+  color: #09f;
+  font-family: 'Anton', sans-serif;
+  margin: 10px 20px;
+  text-decoration: underline overline #FF3028;
+}
+a:hover{
+  color: beige;
+}
+
+.top{
+  background-color:white;
+  position: relative;
+  padding-top: 100px;
+}
+.middle{
+  margin: 100px 0; 
+}
+.skill-row{
+  width:50%;
+  margin: 100px auto 100px auto;
+}
+
+.top-star{
+  position: absolute;
+  right: 300px;
+  top: 0px;
+  width:90px;
+}
+.bottom-star{
+  position: absolute;
+  left: 250px;
+  bottom: 30px;
+  width:90px;
+}
+.mountain{
+  width: 60%;
+
+}
+.skill-row{
+  width:50%;
+  text-align: left;
+  margin:100px auto 100px auto;
+  }
+.intro{
+  width: 60%;
+  margin:auto;
+}
+.read{
+  width: 400px;
+  float:left;
+  margin-right: 30px;
+}
+.original {
+  width: 300px;
+  float: right;
+  margin-left: 10px;
+}
+
+.contact-me{
+    margin: 40px auto 60px;
+    width:40% ;
+
+}
+.bottom-container{
+  padding: 100px auto 200px ;
+  background-color:whitesmoke;
+}
+.name{
+  text-decoration: underline;
+}
+.contact-message{
+  width: 100%;
+}
+.footer-link{
+  font-size:2rem;
+}
+.copyright {
+  color:black;
+  font-size: 0.75rem;
+  padding: 20px 0;
+}
+.btn {
+  background: #11cdd4;
+  background-image: -webkit-linear-gradient(top, #11cdd4, #11999e);
+  background-image: -moz-linear-gradient(top, #11cdd4, #11999e);
+  background-image: -ms-linear-gradient(top, #11cdd4, #11999e);
+  background-image: -o-linear-gradient(top, #11cdd4, #11999e);
+  background-image: linear-gradient(to bottom, #11cdd4, #11999e);
+  -webkit-border-radius: 8;
+  -moz-border-radius: 8;
+  border-radius: 8px;
+
+  font-family: 'Corben', cursive;
+  color: #ffffff;
+  font-size: 20px;
+  padding: 10px 20px 10px 20px;
+  text-decoration: none;
+
+}
+
+.btn:hover {
+  background: #30e3cb;
+  background-image: -webkit-linear-gradient(top, #30e3cb, #2bc4ad);
+  background-image: -moz-linear-gradient(top, #30e3cb, #2bc4ad);
+  background-image: -ms-linear-gradient(top, #30e3cb, #2bc4ad);
+  background-image: -o-linear-gradient(top, #30e3cb, #2bc4ad);
+  background-image: linear-gradient(to bottom, #30e3cb, #2bc4ad);
+  text-decoration: none;
+}
+
+
+
+
+
+.bg {
+  animation:slide 3s ease-in-out infinite alternate;
+  background-image: linear-gradient(-60deg, #6c3 50%, #09f 50%);
+  bottom:0;
+  left:-50%;
+  opacity:.5;
+  position:fixed;
+  right:-50%;
+  top:0;
+  z-index:-1;
+}
+
+.bg2 {
+  animation-direction:alternate-reverse;
+  animation-duration:4s;
+}
+
+.bg3 {
+  animation-duration:5s;
+}
+
+
+
+
+
+@keyframes slide {
+  0% {
+    transform:translateX(-25%);
+  }
+  100% {
+    transform:translateX(25%);
+  }
+}