hackyourfuturecanada · cuilhan · Aug 7, 2019 · Aug 18, 2019
diff --git a/README.md b/README.md
@@ -14,3 +14,5 @@
   - How about some nice colors, fonts?
   - According to the grid specification, some products are bigger than others. Maybe these are "highlighted" products, so the rest of the styling could also be different.
 - Read the [style guide](https://www.w3schools.com/html/html5_syntax.asp) and check your files
+
+![Layout](https://user-images.githubusercontent.com/1719156/62662582-8c0aaa00-b942-11e9-9a59-e76f88466896.png)
diff --git a/images/drone1.png b/images/drone1.png
diff --git a/images/drone2.png b/images/drone2.png
diff --git a/images/drone3.png b/images/drone3.png
diff --git a/images/drone4.png b/images/drone4.png
diff --git a/images/drone5.png b/images/drone5.png
diff --git a/images/drone6.png b/images/drone6.png
diff --git a/images/drone7.png b/images/drone7.png
diff --git a/index.html b/index.html
@@ -0,0 +1,167 @@
+<!doctype html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Grids</title>
+        <link rel="stylesheet" href="style.css">
+    </head>
+    <body>
+        <header>
+            <h1>Grids</h1>
+        </header>
+        <main>
+            <section>
+                <h2>Grid with floats</h2>
+                <ul id="grid-floats">
+                    <li class="grid-item">
+                        <h3>6 Eksenli Drone + Kamera</h3>
+                        <img src="images/drone1.png">
+                        <p>Oyuncakçı Eddy’nin dronu yeni başlayanlar için, altı ekseni var. 2.4Ghz kumadasıyla hareket ederek 50 metre yüksekliğe kadar çıkabilir. Uçuş süresi ise 6 dakika.</p>
+                    </li>
+                    <li class="grid-item">
+                        <h3>DJI Mavic Pro Fly More Combo</h3>
+                        <img src="images/drone2.png">
+                         <p dir="rtl">طائرة مافيك: مايميز هذه الطائرة هو صغر حجمها، وهي معيار جديد في مجال الطائرات من دون طيار. طائرة المافيك مفيدة كثيراً في الحالات التي لايكون الطيران فيها سهلاً، وذلك بفضل التقنيات العديدة المدمجة فيها.</p>
+                    </li>
+                    <li class="grid-item">
+                        <h3>DJI Phantom 4</h3>
+                        <img src="images/drone3.png">
+                        <p>De DJI Phantom 4 is een intelligente drone die onder meer automatisch obstakels vermijdt en 4K-beelden opneemt. Uiteraard is dit niet het enige waar de Phantom 4 indruk mee maakt. Wat dacht je van ActiveTrack, een sportmodus en een nog langere vliegduur.</p>
+                    </li>
+                    <li class="grid-item">
+                        <h3>DJI Phantom 3 Standard</h3>
+                        <img src="images/drone4.png">
+                        <p>Met een bereik van 500 meter, een Full HD-camera die met 30 fps opneemt en een f/2.8-lens maakt u met de DJI Phantom 3 standard de mooiste opnames vanuit de lucht.</p>
+                    </li>
+                    <li class="grid-item">
+                        <h3>YUNEEC Breeze 4K</h3>
+                        <img src="images/drone5.png">
+                        <p>De Breeze 4K van Yuneec is makkelijk te besturen, veilig en snel in staat opnames te delen. De drone wordt bestuurd met je iOS- of Android-apparaat en produceert indrukwekkende 4K-beelden.</p>
+                    </li>
+                    <li class="grid-item">
+                        <h3>SKEYE Nano Drone</h3>
+                        <img src="images/drone6.png">
+                        <p>Met de Nano Drone kan iedereen het gevoel van vliegen met een drone ervaren. De zeer kleine drone van slechts vier centimeter breed is na uitpakken direct klaar om te vliegen.</p>
+                    </li>
+                    <li class="grid-item">
+                        <h3>DJI Spreading Wings S900</h3>
+                        <img src="images/drone7.png">
+                        <p>Met prachtige luchtfoto's en -video's maak je indruk. De DJI Spreading Wings S900 is een lichtgewicht drone die met zijn draaggewicht van maximaal 8,2 kilogram voorziet in het maken van dergelijke beelden.</p>
+                    </li>
+                    <li class="grid-item">
+                        <h3>Drone 6-AXIS + camera</h3>
+                        <img src="images/drone1.png">
+                        <p>De Eddy Toys Drone is een instap drone met 6 assen en laat zich besturen door de meegeleverde 2.4Ghz controller met een bereik tot 50m hoogte.Vliegduur is 6 minuten.</p>
+                    </li>
+                    <li class="grid-item">
+                        <h3>DJI Mavic Pro Fly More Combo</h3>
+                        <img src="images/drone2.png">
+                        <p>Met de Mavic, die direct opvalt vanwege zijn kleine afmeting, zet DJI een nieuwe standaard op het gebied van drones. De Mavic is zeer behulpzaam tijdens de niet altijd even makkelijke vluchten, vooral dankzij de vele ingebouwde technieken.</p>
+                    </li>
+                    <li class="grid-item">
+                        <h3>DJI Phantom 4</h3>
+                        <img src="images/drone3.png">
+                        <p>De DJI Phantom 4 is een intelligente drone die onder meer automatisch obstakels vermijdt en 4K-beelden opneemt. Uiteraard is dit niet het enige waar de Phantom 4 indruk mee maakt. Wat dacht je van ActiveTrack, een sportmodus en een nog langere vliegduur.</p>
+                    </li>
+                    <li class="grid-item">
+                        <h3>DJI Phantom 3 Standard</h3>
+                        <img src="images/drone4.png">
+                        <p>Met een bereik van 500 meter, een Full HD-camera die met 30 fps opneemt en een f/2.8-lens maakt u met de DJI Phantom 3 standard de mooiste opnames vanuit de lucht.</p>
+                    </li>
+                    <li class="grid-item">
+                        <h3>YUNEEC Breeze 4K</h3>
+                        <img src="images/drone5.png">
+                        <p>De Breeze 4K van Yuneec is makkelijk te besturen, veilig en snel in staat opnames te delen. De drone wordt bestuurd met je iOS- of Android-apparaat en produceert indrukwekkende 4K-beelden.</p>
+                    </li>
+                    <li class="grid-item">
+                        <h3>SKEYE Nano Drone</h3>
+                        <img src="images/drone6.png">
+                        <p>Met de Nano Drone kan iedereen het gevoel van vliegen met een drone ervaren. De zeer kleine drone van slechts vier centimeter breed is na uitpakken direct klaar om te vliegen.</p>
+                    </li>
+                    <li class="grid-item">
+                        <h3>DJI Spreading Wings S900</h3>
+                        <img src="images/drone7.png">
+                        <p>Met prachtige luchtfoto's en -video's maak je indruk. De DJI Spreading Wings S900 is een lichtgewicht drone die met zijn draaggewicht van maximaal 8,2 kilogram voorziet in het maken van dergelijke beelden.</p>
+                    </li>
+                </ul>
+
+            </section>
+            <section>
+                <h2>Grid with flexbox</h2>
+                <ul id="grid-flex">
+                    <li class="grid-item">
+                        <h3>Drone 6-AXIS + camera</h3>
+                        <img src="images/drone1.png">
+                        <p>Oyuncakçı Eddy’nin dronu yeni başlayanlar için, altı ekseni var. 2.4Ghz kumadasıyla hareket ederek 50 metre yüksekliğe kadar çıkabilir. Uçuş süresi ise 6 dakika.</p>
+                    </li>
+                    <li class="grid-item">
+                        <h3>DJI Mavic Pro Fly More Combo</h3>
+                        <img src="images/drone2.png">
+                         <p dir="rtl">طائرة مافيك: مايميز هذه الطائرة هو صغر حجمها، وهي معيار جديد في مجال الطائرات من دون طيار. طائرة المافيك مفيدة كثيراً في الحالات التي لايكون الطيران فيها سهلاً، وذلك بفضل التقنيات العديدة المدمجة فيها.</p>
+                    </li>
+                    <li class="grid-item">
+                        <h3>DJI Phantom 4</h3>
+                        <img src="images/drone3.png">
+                        <p>De DJI Phantom 4 is een intelligente drone die onder meer automatisch obstakels vermijdt en 4K-beelden opneemt. Uiteraard is dit niet het enige waar de Phantom 4 indruk mee maakt. Wat dacht je van ActiveTrack, een sportmodus en een nog langere vliegduur.</p>
+                    </li>
+                    <li class="grid-item">
+                        <h3>DJI Phantom 3 Standard</h3>
+                        <img src="images/drone4.png">
+                        <p>Met een bereik van 500 meter, een Full HD-camera die met 30 fps opneemt en een f/2.8-lens maakt u met de DJI Phantom 3 standard de mooiste opnames vanuit de lucht.</p>
+                    </li>
+                    <li class="grid-item">
+                        <h3>YUNEEC Breeze 4K</h3>
+                        <img src="images/drone5.png">
+                        <p>De Breeze 4K van Yuneec is makkelijk te besturen, veilig en snel in staat opnames te delen. De drone wordt bestuurd met je iOS- of Android-apparaat en produceert indrukwekkende 4K-beelden.</p>
+                    </li>
+                    <li class="grid-item">
+                        <h3>SKEYE Nano Drone</h3>
+                        <img src="images/drone6.png">
+                        <p>Met de Nano Drone kan iedereen het gevoel van vliegen met een drone ervaren. De zeer kleine drone van slechts vier centimeter breed is na uitpakken direct klaar om te vliegen.</p>
+                    </li>
+                    <li class="grid-item">
+                        <h3>DJI Spreading Wings S900</h3>
+                        <img src="images/drone7.png">
+                        <p>Met prachtige luchtfoto's en -video's maak je indruk. De DJI Spreading Wings S900 is een lichtgewicht drone die met zijn draaggewicht van maximaal 8,2 kilogram voorziet in het maken van dergelijke beelden.</p>
+                    </li>
+                    <li class="grid-item">
+                        <h3>Drone 6-AXIS + camera</h3>
+                        <img src="images/drone1.png">
+                        <p>De Eddy Toys Drone is een instap drone met 6 assen en laat zich besturen door de meegeleverde 2.4Ghz controller met een bereik tot 50m hoogte.Vliegduur is 6 minuten.</p>
+                    </li>
+                    <li class="grid-item">
+                        <h3>DJI Mavic Pro Fly More Combo</h3>
+                        <img src="images/drone2.png">
+                        <p>Met de Mavic, die direct opvalt vanwege zijn kleine afmeting, zet DJI een nieuwe standaard op het gebied van drones. De Mavic is zeer behulpzaam tijdens de niet altijd even makkelijke vluchten, vooral dankzij de vele ingebouwde technieken.</p>
+                    </li>
+                    <li class="grid-item">
+                        <h3>DJI Phantom 4</h3>
+                        <img src="images/drone3.png">
+                        <p>De DJI Phantom 4 is een intelligente drone die onder meer automatisch obstakels vermijdt en 4K-beelden opneemt. Uiteraard is dit niet het enige waar de Phantom 4 indruk mee maakt. Wat dacht je van ActiveTrack, een sportmodus en een nog langere vliegduur.</p>
+                    </li>
+                    <li class="grid-item">
+                        <h3>DJI Phantom 3 Standard</h3>
+                        <img src="images/drone4.png">
+                        <p>Met een bereik van 500 meter, een Full HD-camera die met 30 fps opneemt en een f/2.8-lens maakt u met de DJI Phantom 3 standard de mooiste opnames vanuit de lucht.</p>
+                    </li>
+                    <li class="grid-item">
+                        <h3>YUNEEC Breeze 4K</h3>
+                        <img src="images/drone5.png">
+                        <p>De Breeze 4K van Yuneec is makkelijk te besturen, veilig en snel in staat opnames te delen. De drone wordt bestuurd met je iOS- of Android-apparaat en produceert indrukwekkende 4K-beelden.</p>
+                    </li>
+                    <li class="grid-item">
+                        <h3>SKEYE Nano Drone</h3>
+                        <img src="images/drone6.png">
+                        <p>Met de Nano Drone kan iedereen het gevoel van vliegen met een drone ervaren. De zeer kleine drone van slechts vier centimeter breed is na uitpakken direct klaar om te vliegen.</p>
+                    </li>
+                    <li class="grid-item">
+                        <h3>DJI Spreading Wings S900</h3>
+                        <img src="images/drone7.png">
+                        <p>Met prachtige luchtfoto's en -video's maak je indruk. De DJI Spreading Wings S900 is een lichtgewicht drone die met zijn draaggewicht van maximaal 8,2 kilogram voorziet in het maken van dergelijke beelden.</p>
+                    </li>
+                </ul>
+            </section>
+        </main>
+    </body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,69 @@
+*{
+    border: 1px solid red;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+/* Grid Float*/
+.grid-item{
+    width: 50%;
+    padding: 20px;
+    min-height: 450px;
+}
+
+img{
+    max-width: 100%;
+    max-height: 300px;
+}
+
+#grid-floats .grid-item{
+    float: left;
+}
+
+#grid-floats{
+    overflow: hidden;
+}
+
+.grid-item:nth-child(odd){
+    background-color: teal;
+}
+.grid-item:nth-child(even){
+    background-color: tomato;
+}
+
+.grid-item:nth-child(1){
+    background-color: thistle;
+    width: 100%;
+}
+
+ul{
+    list-style: none;
+}
+
+/* Grid Flex*/
+
+#grid-flex{
+    display: flex;
+    flex-wrap: wrap;
+}
+
+
+
+@media (min-width: 768px){
+    .grid-item:nth-child(1), .grid-item:nth-child(2) {
+        width: 50%;
+    }
+    .grid-item:nth-child(n+3) {
+        width: calc(100% / 3);
+    }
+}
+
+@media (min-width: 1023px){
+    .grid-item:nth-child(1){
+        width: 50%;
+    }
+    .grid-item:nth-child(n+2){
+        width: 25%;
+    }
+}