diff --git a/index.html b/index.html index 36ce3bc..d2cd232 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,21 @@ - +
+ +
+
+
+
+
+
+
+
+
+
+

This is a fixed footer. © 2018 your name.

+ +
+ diff --git a/index1.html b/index1.html new file mode 100644 index 0000000..41fb587 --- /dev/null +++ b/index1.html @@ -0,0 +1,37 @@ + + + + + + + + +
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+

This is a fixed footer. © 2018 your name.

+ +
+ + + diff --git a/style.css b/style.css index e69de29..c0b9543 100644 --- a/style.css +++ b/style.css @@ -0,0 +1,102 @@ +body{ +  margin: 0px; +  padding: 0px; +  width: 100vw; +  height: 100vh; +} +.container{ + position: fixed; + top: 0; + left: 0; + bottom:0; + right:0; +} +.row { +width:100%; +display: block; +} +.image{ + width: 80%; + height: 80%; + display:block; + padding-top:5px; + +} + +.first{ + width: 15%; + height: 70%; + background: url(https://raw.githubusercontent.com/Nmuta/css_copycat/master/images/usa1.png); + background-size: contain; + background-repeat: no-repeat; + display:inline-block; + padding-top:80px; + margin-left: 60px; + +} +.image1{ + + margin-left: 60px; + padding-left: 20px; + padding-right: 20px; + + } +.image2{ + + + margin-left: 100px; + padding-left: 20px; + padding-right: 20px; +} + +.image3 { + margin-left: 100px; + -moz-animation: spin 3s infinite linear; + -webkit-animation: spin 3s infinite linear; + padding-left: 20px; + padding-right: 20px; +} + +@-moz-keyframes spin { + 0% {-moz-transform: rotate(0deg);} + 100% {-moz-transform: rotate(360deg);} +} + +@-webkit-keyframes spin { + 0% { -webkit-transform:rotate(0deg); } + 100% { -webkit-transform:rotate(360deg); } +} + +.image4{ + + margin-left: 20px; + padding-left: 20px; + padding-right: 20px; +} +.row1{ + height:200px; + + background-color: black; + margin-left: -10px; + + padding-right: 20px; + margin-top:-10px; + + +} +.row2{ + height:510px; + background-color: white; +} + +.row3{ + height:70px; + background-color: black; + + position: fixed; + left: 0; + bottom: 0; + + color: white; + text-align: center; +} diff --git a/style1.css b/style1.css new file mode 100644 index 0000000..955e04a --- /dev/null +++ b/style1.css @@ -0,0 +1,182 @@ +body{ +  margin: 0px; +  padding: 0px; +  width: 100vw; +  height: 100vh; +} +.container{ + position: fixed; + top: 0; + left: 0; + bottom:0; + right:0; +} +.row { +width:100%; +display: block; +} +.image{ + width: 80%; + height: 80%; + display:block; +} + +.first{ + width: 15%; + height: 70%; + background: url(https://raw.githubusercontent.com/Nmuta/css_copycat/master/images/usa1.png); + background-size: contain; + background-repeat: no-repeat; + display:inline-block; + padding-top:80px; + margin-left: 60px; + +} +.image1{ + + margin-left: 60px; + } +.image2{ + + + margin-left: 100px; +} + +.image3{ + margin-left: 100px; +} + +.image3, .img1, .img2, .img3 { + + -moz-animation: spin 3s infinite linear; + -webkit-animation: spin 3s infinite linear; +} + +@-moz-keyframes spin { + 0% {-moz-transform: rotate(0deg);} + 100% {-moz-transform: rotate(360deg);} +} + +@-webkit-keyframes spin { + 0% { -webkit-transform:rotate(0deg); } + 100% { -webkit-transform:rotate(360deg); } +} + +image4{ + + margin-left: 180px; +} +.row1{ + height:200px; + /* margin:0px auto; */ + background-color: black; + + +} + +.row2{ + height:540px; + background-color: white; + position: fixed; + left: 0; + bottom: 0; + +} + +.left_panel{ + float: left; + width: 40vw; + background-color: purple; + height:100%; + display:block; + /* background: url(https://raw.githubusercontent.com/Nmuta/css_copycat/master/images/usa1.png); */ +} +.myimage{ + + height:70%; + width:70%; + background: url(https://raw.githubusercontent.com/Nmuta/css_copycat/master/images/usa1.png); + background-size: contain; +background-repeat: no-repeat; +} + +.img1{ + +height:2%; +width:2%; + background: url(https://raw.githubusercontent.com/Nmuta/css_copycat/master/images/usa1.png); + background-size: contain; + background-repeat: no-repeat; + padding-left:100px; + padding-right:40px; + padding-top:40px; + margin:80px; +} +.img2{ + +height:2%; +width:2%; + background: url(https://raw.githubusercontent.com/Nmuta/css_copycat/master/images/usa1.png); + background-size: contain; + background-repeat: no-repeat; + padding-left:100px; + padding-top:40px; + margin:80px; +} +.img3{ + +height:2%; +width:2%; + background: url(https://raw.githubusercontent.com/Nmuta/css_copycat/master/images/usa1.png); + background-size: contain; + background-repeat: no-repeat; + padding-left:100px; + padding-top:40px; + margin:80px; +} + +/* .img{ + height:70%; + width:70%; +} + +.img1{ + height:10%; + width:10%; +} + +.img2{ + height:10%; + width:10%; +} +.img3{ + height:10%; + width:10%; +} +.img4{ + height:10%; + width:10%; +} */ + +.right_panel{ + float: right; + width: 70vw; + /* background-color: green; */ + height: 100%; + + margin:0px auto; + + +} + +.row3{ + height:70px; + background-color: black; + + position: fixed; + left: 0; + bottom: 0; + + color: white; + text-align: center; +}