From 3244ed206613cda58015686d1e65a6968ca3dc99 Mon Sep 17 00:00:00 2001 From: Nisha Bharti Date: Tue, 24 Apr 2018 15:19:13 -0700 Subject: [PATCH 1/3] changes made --- index.html | 17 ++++++++++- style.css | 87 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 103 insertions(+), 1 deletion(-) 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/style.css b/style.css index e69de29..f0a73db 100644 --- a/style.css +++ b/style.css @@ -0,0 +1,87 @@ +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; + -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:510px; + background-color: white; +} + +.row3{ + height:70px; + background-color: black; + + position: fixed; + left: 0; + bottom: 0; + + color: white; + text-align: center; +} From 9f1fe5ccf69fb76d840501b10d9fe0b0f98e0b30 Mon Sep 17 00:00:00 2001 From: Nisha Bharti Date: Tue, 24 Apr 2018 15:58:21 -0700 Subject: [PATCH 2/3] second assignment --- index1.html | 37 +++++++++++ style1.css | 182 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 219 insertions(+) create mode 100644 index1.html create mode 100644 style1.css 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/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; +} From c54c10b6fca1241f3dda835a052d06b6d97ec5a6 Mon Sep 17 00:00:00 2001 From: Nisha Bharti Date: Tue, 24 Apr 2018 19:12:20 -0700 Subject: [PATCH 3/3] modified first assignment --- style.css | 21 ++++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) diff --git a/style.css b/style.css index f0a73db..c0b9543 100644 --- a/style.css +++ b/style.css @@ -19,6 +19,8 @@ display: block; width: 80%; height: 80%; display:block; + padding-top:5px; + } .first{ @@ -35,17 +37,24 @@ display: block; .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 { @@ -58,14 +67,20 @@ display: block; 100% { -webkit-transform:rotate(360deg); } } -image4{ +.image4{ - margin-left: 180px; + margin-left: 20px; + padding-left: 20px; + padding-right: 20px; } .row1{ height:200px; - /* margin:0px auto; */ + background-color: black; + margin-left: -10px; + + padding-right: 20px; + margin-top:-10px; }