diff --git a/css/ipad.css b/css/ipad.css new file mode 100644 index 0000000..4d4df07 --- /dev/null +++ b/css/ipad.css @@ -0,0 +1,61 @@ +body{ + font-family: 'Maven Pro', sans-serif; + background-color: #e3db8c; +} + h3{ + font-size: 1em; + color: #725707; +} + h1,h2,h3{ + text-align: center; +} + h2{ + clear: both; +} + img{ + width:80%; +} + section{ + margin: 0px; + padding: 0px; +} + p{ + font-size: 1em; +} + #grid-floats > .grid-item{ + float: left; +} + #grid-floats{ +} + #grid-flex{ + clear: both; + display: flex; + flex-direction: row; + text-align: center; + flex-wrap: wrap; +} + .grid-item{ + background-color: white; + text-align: center; + box-shadow: 10px 10px 5px 0px rgba(158, 158, 158, 0.14); + color: gray; + width:25vw; + height: 40vw; + padding: 20px; + margin: 0.3em 0.3em; + border-radius: 20px; +} + #grid-floats: li:nth-child(2){ + color: red; +} + li:nth-child(1), li:nth-child(2) { + width: 40vw; +} + #grid-floats> li:first-child > img{ + width:100px; +} + + ul{ + list-style-type: none; +} + \ No newline at end of file diff --git a/css/main.css b/css/main.css new file mode 100644 index 0000000..4f7927f --- /dev/null +++ b/css/main.css @@ -0,0 +1,61 @@ +img{ + width: 200px; +} + body{ + background-color: #e9cea7; + margin: 0px; + position: 0px; + font-family: 'Maven Pro', sans-serif; +} + h1,h2{ + text-align: center; + margin: 40px; + clear: both; +} + h3{ + color: #725707; +} + #grid-floats { + text-align: center; +} + li{ +} + #grid-floats > .grid-item{ + float: left; + width: 20vw; + height: 20vw; +} + h2{ + clear: both; +} +/** modify the size of first li in the grid **/ + #grid-floats> li:first-child{ + width: 43vw; +} + #grid-flex{ + clear: both; + display: flex; + flex-direction: row; + flex-wrap: wrap; +} +/** target all the itmes inside the id grid-flex**/ + #grid-flex > .grid-item{ +} + .grid-item{ + background-color: white; + text-align: center; + margin:1em; + box-shadow: 10px 10px 5px 0px rgba(158, 158, 158, 0.14); + color: gray; + padding: 32px 10px; + border-radius: 20px; + width: 20vw; + height: 20vw; +} +/** removes the dots from li itmes**/ + ul{ + list-style-type: none; +} + p{ + font-size: 0.9em; +} diff --git a/css/mobile.css b/css/mobile.css new file mode 100644 index 0000000..e20c9ac --- /dev/null +++ b/css/mobile.css @@ -0,0 +1,58 @@ +body{ + font-family: 'Maven Pro', sans-serif; + background-color: #ada982; +} + h3{ + font-size: 0.7em; + color: #725707; +} + h1,h2,h3{ + text-align: center; +} + + h2{ + clear: both; +} + img{ + width:80%; +} + section{ + margin: 0px; + padding: 0px; +} + p{ + font-size: 0.2em; +} + #grid-floats > .grid-item{ + float: left; +} + + #grid-flex{ + clear: both; + display: flex; + flex-direction: row; + text-align: center; + flex-wrap: wrap; +} + .grid-item{ + background-color: white; + text-align: center; + box-shadow: 10px 10px 5px 0px rgba(158, 158, 158, 0.14); + color: gray; + width:28vw; + height: 40vw; + padding: 20px; + margin: 0.3em 0.3em; + border-radius: 20px; +} + #grid-floats> li:first-child{ + width: 68vw; +} + #grid-floats> li:first-child > img{ + width:100px; +} + + ul{ + list-style-type: none; +} + \ No newline at end of file diff --git a/index.html b/index.html index 021eae1..d14d92f 100755 --- a/index.html +++ b/index.html @@ -1,92 +1,170 @@ + - - - - Grids - - - -
-

Grids

-
-
-
-

Grid with floats

- - -
-
- - + + + + Grids + + + + + + +
+

Grids

+
+
+
+

Grid with floats

+ +
+
+

Grid with flexbox

+ +
+
+ + \ No newline at end of file