diff --git a/css.css b/css.css new file mode 100644 index 0000000..91d956a --- /dev/null +++ b/css.css @@ -0,0 +1,44 @@ +/*ul#grid-floats li:not(:first-child) {*/ +/* float: left;*/ +/* width: 50%;*/ +/*}*/ + +/*li.grid-item:not(:first-child) img {*/ +/* width: 50%;*/ +/*}*/ + +/*#grid-floats li:first-child img {*/ +/* width: 100%;*/ +/*}*/ +* { + box-sizing: border-box; + border: 1px solid red; +} + +li { + list-style-type: none; +} + +section { + width: 100%; +} + +ul#grid-floats li:not(:nth-child(-n+2)) { + float: left; + width: 31%; + height: 40vh; + margin-bottom: 10vh; +} + +li.grid-item:not(:nth-child(-n+2)) img { + width: 50%; +} + +#grid-floats li:nth-child(-n+2) { + float: left; + width: 50%; +} + +#grid-floats li:nth-child(-n+2) img { + width: 50%; +} diff --git a/css/desktop.css b/css/desktop.css new file mode 100644 index 0000000..c885088 --- /dev/null +++ b/css/desktop.css @@ -0,0 +1,52 @@ +body{ + background-color: #658387; + text-align: center; + font-family: 'Fira Sans Condensed', sans-serif; +} +img{ + float:bottom; + width: 200px; +} + +p{ +} +#grid-floats > .grid-item{ + float: left; +} +/* + target the first child li that is inside the id grid-floats +*/ +#grid-floats > li:nth-child(1){ + width: 42vw ; +} + + +h1,h2{ + + clear: both; +} + +.grid-item{ + background-color: blue; + margin: 10px; + padding: 5px; + height: 24vw; + width:20vw ; + background-color: white; +} +.grid-item:hover{ + box-shadow: 10px 13px 43px 4px rgba(0,0,0,0.38); +} + +#grid-flex{ + clear: both; + display: flex; + flex-wrap: wrap; +} + + + +ul{ + list-style-type: none; +} + diff --git a/css/medium.css b/css/medium.css new file mode 100644 index 0000000..00e2be4 --- /dev/null +++ b/css/medium.css @@ -0,0 +1,52 @@ +body{ + background-color: #658387; + text-align: center; + font-family: 'Fira Sans Condensed', sans-serif; +} +img{ + float:bottom; + width:100px; +} + +p{ +} +#grid-floats > .grid-item{ + float: left; +} +/* + target the first child li that is inside the id grid-floats +*/ +#grid-floats > li:nth-child(1),#grid-floats > li:nth-child(2){ + width: 40.5vw ; +} + + +h1,h2{ + + clear: both; +} + +.grid-item{ + background-color: blue; + margin: 10px; + padding: 5px; + height: 37vw; + width:26vw ; + background-color: white; +} +.grid-item:hover{ + box-shadow: 10px 13px 43px 4px rgba(0,0,0,0.38); +} + +#grid-flex{ + clear: both; + display: flex; + flex-wrap: wrap; +} + + + +ul{ + list-style-type: none; +} + diff --git a/css/small.css b/css/small.css new file mode 100644 index 0000000..8303283 --- /dev/null +++ b/css/small.css @@ -0,0 +1,53 @@ +body{ + background-color: #658387; + text-align: center; + font-family: 'Fira Sans Condensed', sans-serif; + font-size: 0.4em; +} +img{ + float:bottom; + width:70px; +} + +p{ +} +#grid-floats > .grid-item{ + float: left; +} +/* + target the first child li that is inside the id grid-floats +*/ +#grid-floats > li:nth-child(1){ + width: 57vw ; +} + + +h1,h2{ + + clear: both; +} + +.grid-item{ + background-color: blue; + margin: 10px; + padding: 5px; + height: 42vw; + width:26vw ; + background-color: white; +} +.grid-item:hover{ + box-shadow: 10px 13px 43px 4px rgba(0,0,0,0.38); +} + +#grid-flex{ + clear: both; + display: flex; + flex-wrap: wrap; +} + + + +ul{ + list-style-type: none; +} + diff --git a/images/drone1.png b/images/drone1.png new file mode 100755 index 0000000..6c002ee Binary files /dev/null and b/images/drone1.png differ diff --git a/images/drone2.png b/images/drone2.png new file mode 100755 index 0000000..a863c19 Binary files /dev/null and b/images/drone2.png differ diff --git a/images/drone3.png b/images/drone3.png new file mode 100755 index 0000000..84974d4 Binary files /dev/null and b/images/drone3.png differ diff --git a/images/drone4.png b/images/drone4.png new file mode 100755 index 0000000..77e469e Binary files /dev/null and b/images/drone4.png differ diff --git a/images/drone5.png b/images/drone5.png new file mode 100755 index 0000000..58ca438 Binary files /dev/null and b/images/drone5.png differ diff --git a/images/drone6.png b/images/drone6.png new file mode 100755 index 0000000..69b554c Binary files /dev/null and b/images/drone6.png differ diff --git a/images/drone7.png b/images/drone7.png new file mode 100755 index 0000000..51f486f Binary files /dev/null and b/images/drone7.png differ diff --git a/index.html b/index.html new file mode 100755 index 0000000..db1f631 --- /dev/null +++ b/index.html @@ -0,0 +1,170 @@ + + + + + + + Grids + + + + + + +
+

Grids

+
+
+
+

Grid with floats

+ +
+
+

Grid with flexbox

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