Intento de cambiar a grilla de semantic

assets/index.html

@@ -63,74 +63,85 @@
       </div>
     </header>
 
-    <div class="column1 column" id="column">
-      <section id="seccion1" class="ui simple segment">
-        <div class="image-container">
-          <img src="./assets/images/seccion11.png" />
-          <img src="./assets/images/seccion12.png" />
-          <img src="./assets/images/seccion13.png" />
-        </div>
-        <div class="paragraph">
-          <div class="header">
-            LOREM IPSUM DOLOR SIT AMET, CONSECTETUR
+    <div class="ui grid">
+      <div class="column1 twelve wide column" id="column">
+        <section id="seccion1" class="ui simple segment">
+          <div class="image-container">
+            <div class="ui grid">
+              <div class="ten wide column">
+                <div class="ui medium images">
+                  <img src="./assets/images/seccion11.png" />
+                  <img src="./assets/images/seccion12.png" />
+                </div>
+              </div>
+              <div class="six wide column">
+                <div class="ui medium image">
+                  <img src="./assets/images/seccion13.png" />
+                </div>
+              </div>
+            </div>
           </div>
-          adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
-        </div>
-      </section>
-
-      <section id="seccion2" class="ui simple segment">
-        <div class="column1 column">
-          <img src="./assets/images/foto1.jpg" />
-        </div>
-        <div class="column2 column">
-          <div class="row">
+          <div class="paragraph">
             <div class="header">
-              VENTAJAS
+              LOREM IPSUM DOLOR SIT AMET, CONSECTETUR
             </div>
-            <ul>
-              <li>Apoyo estable del tel&eacute;fono</li>
-              <li>&Aacute;ngulo preciso de inclinaci&oacute;n para usar en conferencias</li>
-              <li>Compatible con tablets permite cargar mientras se usa</li>
-              <li>Dise&ntilde;o moderno y minimalista</li>
-            </ul>
+            adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
           </div>
-          <div class="row">
-            <img src="./assets/images/foto2.jpg" />
-            <img src="./assets/images/foto3.jpg" />
+        </section>
+
+        <section id="seccion2" class="ui simple segment">
+          <div class="column1 column">
             <img src="./assets/images/foto1.jpg" />
-            <img src="./assets/images/foto2.jpg" />
           </div>
-        </div>
-      </section>
-
-      <section id="dimensiones" class="ui simple segment">
-        <div class="header">
-          <span class="bigger">DIMENSIONES</span> y colores
-        </div>
-        <div class="images">
-          <div class="column">
-            <img src="./assets/images/variedades.png" />
-            <div>
-              <img src="./assets/images/bandera.svg" />
-              DISE&Ntilde;ADO Y FABRICADO EN CHILE
+          <div class="column2 column">
+            <div class="row">
+              <div class="header">
+                VENTAJAS
+              </div>
+              <ul>
+                <li>Apoyo estable del tel&eacute;fono</li>
+                <li>&Aacute;ngulo preciso de inclinaci&oacute;n para usar en conferencias</li>
+                <li>Compatible con tablets permite cargar mientras se usa</li>
+                <li>Dise&ntilde;o moderno y minimalista</li>
+              </ul>
+            </div>
+            <div class="row">
+              <img src="./assets/images/foto2.jpg" />
+              <img src="./assets/images/foto3.jpg" />
+              <img src="./assets/images/foto1.jpg" />
+              <img src="./assets/images/foto2.jpg" />
             </div>
           </div>
-          <div class="column">
-            <img src="./assets/images/dimensiones.svg" />
-            <div>
-              Fabricado en pl&aacute;stico de origen vegetal sin derivados del petr&oacute;leo
+        </section>
+
+        <section id="dimensiones" class="ui simple segment">
+          <div class="header">
+            <span class="bigger">DIMENSIONES</span> y colores
+          </div>
+          <div class="images">
+            <div class="column">
+              <img src="./assets/images/variedades.png" />
+              <div>
+                <img src="./assets/images/bandera.svg" />
+                DISE&Ntilde;ADO Y FABRICADO EN CHILE
+              </div>
+            </div>
+            <div class="column">
+              <img src="./assets/images/dimensiones.svg" />
+              <div>
+                Fabricado en pl&aacute;stico de origen vegetal sin derivados del petr&oacute;leo
+              </div>
             </div>
           </div>
-        </div>
-      </section>
+        </section>
 
-      <section id="construido" class="ui simple segment">
-        <div class="header">
-          CONSTRUIDOS EN IMPRESI&Oacute;N 3D
-        </div>
-      </section>
-    </div>
-    <div class="column2 column fondo-blanco">
+        <section id="construido" class="ui simple segment">
+          <div class="header">
+            CONSTRUIDOS EN IMPRESI&Oacute;N 3D
+          </div>
+        </section>
+      </div>
+      <div class="column2 four wide column fondo-blanco">
       <div class="ui sticky">
         <form class="ui form" name="form-sticky">
           <div class="row">
@@ -170,6 +181,7 @@
         </form>
       </div>
     </div>
+    </div>
 
     <section id="corporativos" class="ui simple segment">
       <div class="column1 column">

assets/sass/main.scss

@@ -225,7 +225,7 @@ body {
     }
   }
 
-  &>.column {
+  /*&>.column {
     display: inline-block;
     float: left;
 
@@ -235,9 +235,9 @@ body {
     &::after {
       clear: both;
     }
-  }
-  &>.column1 {
-    width: percentage($column1/100);
+  }*/
+  &>.grid>.column1 {
+    //width: percentage($column1/100);
 
 
     #seccion1 {
@@ -245,15 +245,15 @@ body {
       width: 100%;
 
       .image-container {
-        display: flex;
-        justify-content: space-between;
+        /*display: flex;
+        justify-content: space-between;*/
         height: rem(112+128);
 
-        img {
+        /*img {
           height: rem(155);
           width: rem(188);
           margin-top: rem(85);
-        }
+        }*/
       }
       .paragraph {
         padding-top: rem(28);
@@ -362,8 +362,8 @@ body {
       }
     }
   }
-  &>.column2 {
-    width: percentage($column2/100);
+  &>.grid>.column2 {
+    //width: percentage($column2/100);
     height: ($column_height1)+rem;
 
     .sticky {
@@ -449,7 +449,7 @@ body {
     width: 100%;
     height: (map.get($heights, "corporativos"))+rem;
 
-    margin-top: ($column_height1)+rem !important;
+    //margin-top: ($column_height1)+rem !important;
 
     &>.column {
       display: inline-block;
@@ -786,7 +786,7 @@ body {
   .container {
     text-align: right;
     padding: 0 1rem !important;
-    
+
     i.icons {
       cursor: pointer;
     }

public/assets/styles/main.css

@@ -110,6 +110,17 @@ body {
   height: 211.25rem;
   position: relative;
   top: -211.25rem;
+  /*&>.column {
+    display: inline-block;
+    float: left;
+
+    padding-left: 1rem !important;
+    padding-right: 1rem !important;
+
+    &::after {
+      clear: both;
+    }
+  }*/
 }
 #content #header {
   color: white;
@@ -161,63 +172,51 @@ body {
 #content #header .logo .frase2 {
   font-size: 1rem;
 }
-#content > .column {
-  display: inline-block;
-  float: left;
-  padding-left: 1rem !important;
-  padding-right: 1rem !important;
-}
-#content > .column::after {
-  clear: both;
-}
-#content > .column1 {
-  width: 67%;
-}
-#content > .column1 #seccion1 {
+#content > .grid > .column1 #seccion1 {
   height: 25rem;
   width: 100%;
 }
-#content > .column1 #seccion1 .image-container {
-  display: flex;
-  justify-content: space-between;
+#content > .grid > .column1 #seccion1 .image-container {
+  /*display: flex;
+  justify-content: space-between;*/
   height: 15rem;
+  /*img {
+    height: rem(155);
+    width: rem(188);
+    margin-top: rem(85);
+  }*/
 }
-#content > .column1 #seccion1 .image-container img {
-  height: 9.6875rem;
-  width: 11.75rem;
-  margin-top: 5.3125rem;
-}
-#content > .column1 #seccion1 .paragraph {
+#content > .grid > .column1 #seccion1 .paragraph {
   padding-top: 1.75rem;
   line-height: 0.875rem;
   text-align: justify;
 }
-#content > .column1 #seccion1 .paragraph .header {
+#content > .grid > .column1 #seccion1 .paragraph .header {
   margin-bottom: 1rem;
   font-size: 1.375rem;
 }
-#content > .column1 #seccion2 {
+#content > .grid > .column1 #seccion2 {
   height: 27.5rem;
 }
-#content > .column1 #seccion2 > .column {
+#content > .grid > .column1 #seccion2 > .column {
   display: inline-block;
   float: left;
   width: 50%;
 }
-#content > .column1 #seccion2 > .column::after {
+#content > .grid > .column1 #seccion2 > .column::after {
   clear: both;
 }
-#content > .column1 #seccion2 .column1 {
+#content > .grid > .column1 #seccion2 .column1 {
   margin-top: 5rem;
 }
-#content > .column1 #seccion2 .column1 img {
+#content > .grid > .column1 #seccion2 .column1 img {
   width: 19.8125rem;
   height: 19.8125rem;
 }
-#content > .column1 #seccion2 .column2 {
+#content > .grid > .column1 #seccion2 .column2 {
   margin-top: 7.125rem;
 }
-#content > .column1 #seccion2 .column2 .row:first-child {
+#content > .grid > .column1 #seccion2 .column2 .row:first-child {
   background-color: #00427b;
   color: white;
   height: 11.25rem;
@@ -226,120 +225,119 @@ body {
   margin-left: -3rem;
   overflow: hidden;
 }
-#content > .column1 #seccion2 .column2 .row:first-child .header {
+#content > .grid > .column1 #seccion2 .column2 .row:first-child .header {
   font-weight: bold;
   font-size: 1rem;
   margin-bottom: 1rem;
 }
-#content > .column1 #seccion2 .column2 .row:first-child ul {
+#content > .grid > .column1 #seccion2 .column2 .row:first-child ul {
   list-style: disc inside;
   font-size: 0.8333333333rem;
 }
-#content > .column1 #seccion2 .column2 .row:last-child {
+#content > .grid > .column1 #seccion2 .column2 .row:last-child {
   margin-top: 1.125rem;
   display: flex;
   justify-content: space-between;
 }
-#content > .column1 #seccion2 .column2 .row:last-child img {
+#content > .grid > .column1 #seccion2 .column2 .row:last-child img {
   width: 4.375rem;
   height: 5.3125rem;
 }
-#content > .column1 #dimensiones {
+#content > .grid > .column1 #dimensiones {
   height: 27.5rem;
 }
-#content > .column1 #dimensiones .header {
+#content > .grid > .column1 #dimensiones .header {
   padding: 2.3125rem 0 !important;
 }
-#content > .column1 #dimensiones .header .bigger {
+#content > .grid > .column1 #dimensiones .header .bigger {
   font-size: 1rem;
 }
-#content > .column1 #dimensiones .images {
+#content > .grid > .column1 #dimensiones .images {
   display: flex;
 }
-#content > .column1 #dimensiones .images .column {
+#content > .grid > .column1 #dimensiones .images .column {
   float: left;
 }
-#content > .column1 #dimensiones .images .column > img {
+#content > .grid > .column1 #dimensiones .images .column > img {
   width: 19.5625rem;
   height: 14.6875rem;
 }
-#content > .column1 #dimensiones .images .column div {
+#content > .grid > .column1 #dimensiones .images .column div {
   width: 19.5625rem;
   margin-top: 1.5625rem;
 }
-#content > .column1 #construido {
+#content > .grid > .column1 #construido {
   height: 21.875rem;
   padding-top: 1.4375rem !important;
 }
-#content > .column1 #construido .header {
+#content > .grid > .column1 #construido .header {
   font-size: 1.8333333333rem;
   padding: 0.625rem 2.6875rem;
   background-color: rgba(255, 255, 255, 0.6);
 }
-#content > .column2 {
-  width: 33%;
+#content > .grid > .column2 {
   height: 101.875rem;
 }
-#content > .column2 .sticky {
+#content > .grid > .column2 .sticky {
   height: 16.5625rem;
   width: 19.375rem;
   margin: auto;
 }
-#content > .column2 .sticky .row:first-child {
+#content > .grid > .column2 .sticky .row:first-child {
   height: 10.625rem;
   margin-top: 5rem;
 }
-#content > .column2 .sticky .row:first-child .column {
+#content > .grid > .column2 .sticky .row:first-child .column {
   display: inline-block;
   float: left;
 }
-#content > .column2 .sticky .row:first-child .column::after {
+#content > .grid > .column2 .sticky .row:first-child .column::after {
   clear: both;
 }
-#content > .column2 .sticky .row:first-child .column1 {
+#content > .grid > .column2 .sticky .row:first-child .column1 {
   vertical-align: bottom;
   padding-top: 1.25rem;
   width: 12.9166666667rem;
   font-size: 1.1666666667rem;
 }
-#content > .column2 .sticky .row:first-child .column1 .linea {
+#content > .grid > .column2 .sticky .row:first-child .column1 .linea {
   margin-bottom: 0.625rem;
 }
-#content > .column2 .sticky .row:first-child .column1 .titulo {
+#content > .grid > .column2 .sticky .row:first-child .column1 .titulo {
   font-size: 2.0833333333rem;
 }
-#content > .column2 .sticky .row:first-child .column1 .precio {
+#content > .grid > .column2 .sticky .row:first-child .column1 .precio {
   font-size: 1.3333333333rem;
 }
-#content > .column2 .sticky .row:first-child .column1 .colores {
+#content > .grid > .column2 .sticky .row:first-child .column1 .colores {
   vertical-align: center;
 }
-#content > .column2 .sticky .row:first-child .column1 .colores .text {
+#content > .grid > .column2 .sticky .row:first-child .column1 .colores .text {
   margin-right: 0.1875rem;
 }
-#content > .column2 .sticky .row:first-child .column1 .colores .white {
+#content > .grid > .column2 .sticky .row:first-child .column1 .colores .white {
   border: thin solid black;
   background-color: white;
 }
-#content > .column2 .sticky .row:first-child .column1 .colores .black {
+#content > .grid > .column2 .sticky .row:first-child .column1 .colores .black {
   background-color: black;
 }
-#content > .column2 .sticky .row:first-child .column1 .colores .blue {
+#content > .grid > .column2 .sticky .row:first-child .column1 .colores .blue {
   background-color: blue;
 }
-#content > .column2 .sticky .row:first-child .column1 .colores .green {
+#content > .grid > .column2 .sticky .row:first-child .column1 .colores .green {
   background-color: lime;
 }
-#content > .column2 .sticky .row:first-child .column1 .colores .yellow {
+#content > .grid > .column2 .sticky .row:first-child .column1 .colores .yellow {
   background-color: yellow;
 }
-#content > .column2 .sticky .row:first-child .column1 .colores .orange {
+#content > .grid > .column2 .sticky .row:first-child .column1 .colores .orange {
   background-color: #ff8200;
 }
-#content > .column2 .sticky .row:first-child .column1 .colores .red {
+#content > .grid > .column2 .sticky .row:first-child .column1 .colores .red {
   background-color: red;
 }
-#content > .column2 .sticky .row:first-child .column1 .colores .circle {
+#content > .grid > .column2 .sticky .row:first-child .column1 .colores .circle {
   display: inline-block;
   width: 0.75rem;
   height: 0.75rem;
@@ -347,19 +345,19 @@ body {
   margin: auto 0.0625rem;
   cursor: pointer;
 }
-#content > .column2 .sticky .row:first-child .column1 .colores .circle.selected {
+#content > .grid > .column2 .sticky .row:first-child .column1 .colores .circle.selected {
   width: 0.875rem;
   height: 0.875rem;
   cursor: default;
 }
-#content > .column2 .sticky .row:first-child .column1 .input {
+#content > .grid > .column2 .sticky .row:first-child .column1 .input {
   width: 4.5rem;
   border: thin solid black;
   text-align: center;
   padding: 0.5rem 0.05rem;
   font-size: 0.8333333333rem;
 }
-#content > .column2 .sticky .row:first-child .column1 .input button {
+#content > .grid > .column2 .sticky .row:first-child .column1 .input button {
   background: none;
   border: none;
   width: 1rem;
@@ -368,7 +366,7 @@ body {
   cursor: pointer;
   font-weight: bold;
 }
-#content > .column2 .sticky .row:first-child .column1 .input input {
+#content > .grid > .column2 .sticky .row:first-child .column1 .input input {
   width: 2rem;
   background: none;
   margin: 0;
@@ -376,21 +374,20 @@ body {
   padding: 0;
   text-align: center;
 }
-#content > .column2 .sticky .row:first-child .column2 {
+#content > .grid > .column2 .sticky .row:first-child .column2 {
   width: 6.4583333333rem;
 }
-#content > .column2 .sticky .row:first-child .column2 img {
+#content > .grid > .column2 .sticky .row:first-child .column2 img {
   width: 6.875rem;
   height: 10rem;
 }
-#content > .column2 .sticky .row:last-child .button {
+#content > .grid > .column2 .sticky .row:last-child .button {
   border-radius: 0 !important;
   width: 100%;
 }
 #content #corporativos {
   width: 100%;
   height: 32.5rem;
-  margin-top: 101.875rem !important;
 }
 #content #corporativos > .column {
   display: inline-block;