diff --git a/css/float-grid.css b/css/float-grid.css new file mode 100644 index 00000000..80896d39 --- /dev/null +++ b/css/float-grid.css @@ -0,0 +1,45 @@ +*{ + margin:0; + padding:0; + box-sizing: border-box; +} + +.row{ + width:960px; + margin-top:20px; + margin:auto; + +} +.col-4{ + float:left; + width:100%; + height:200px; + padding-right:1.041%; + padding-left:1.041%; + margin-bottom:15%; + + +} + +img{ + width:100%; + height:80%; +} + +.desc{ + width:100%; + text-align:center; + height:20%; +} + + +@media only screen and (min-width: 640px) { + .col-4 { + width: 31.25%; + } + +@media only screen and (max-width: 640px) { + .col-4{ + width:100%; + } +} \ No newline at end of file diff --git a/css/main.css b/css/main.css new file mode 100644 index 00000000..25855069 --- /dev/null +++ b/css/main.css @@ -0,0 +1,11 @@ + +header{ + width:100%; + margin-bottom:20px; + background-color:#ffc107; +} + +.inner-box{ + margin-bottom:20px; + border:1px solid #e6e3e3; +} \ No newline at end of file diff --git a/index.html b/index.html index 7345fc0c..cd86ead3 100644 --- a/index.html +++ b/index.html @@ -1,22 +1,84 @@ - - Star Wars Responsive Challenge + + Star Wars Responsive Challenge - - + + - - + + - - - - + + + + + - +
+

Star Wars Characters

+

Incomplete list
+
+ + + +
+
+
+
rey +
+
Ray
+
Protagonist, from tatooine
+
+
+
+
+
finn +
+
Finn
+
Storm Trooper,befriends Ray
+
+
+
+
+
kylo +
+
Kylo
+
Main villian, or is he?
+
+
+
+
+ +
+
+
poe +
+
Poe
+
Neutral pilot
+
+
+
+
+
chewbacca +
+
Chewbacca
+
A great first mate
+
+
+
+
+
yoda +
+
Yoda
+
Wise old Jedi master
+
+
+
+
- - +
+ +