Intento de cambiar a grilla de semantic

assets/index.html

@@ -63,13 +63,24 @@
       </div>
     </header>
 
-    <div class="column1 column" id="column">
+    <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>
           <div class="paragraph">
             <div class="header">
               LOREM IPSUM DOLOR SIT AMET, CONSECTETUR
@@ -130,7 +141,7 @@
           </div>
         </section>
       </div>
-    <div class="column2 column fondo-blanco">
+      <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 {
+  &>.grid>.column1 {
-    width: percentage($column1/100);
+    //width: percentage($column1/100);
 
 
     #seccion1 {
@@ -245,15 +245,15 @@ body {
       width: 100%;
 
       .image-container {
-        display: flex;
+        /*display: flex;
-        justify-content: space-between;
+        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 {
+  &>.grid>.column2 {
-    width: percentage($column2/100);
+    //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;

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 {
+#content > .grid > .column1 #seccion1 {
-  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 {
   height: 25rem;
   width: 100%;
 }
-#content > .column1 #seccion1 .image-container {
+#content > .grid > .column1 #seccion1 .image-container {
-  display: flex;
+  /*display: flex;
-  justify-content: space-between;
+  justify-content: space-between;*/
   height: 15rem;
+  /*img {
+    height: rem(155);
+    width: rem(188);
+    margin-top: rem(85);
+  }*/
 }
-#content > .column1 #seccion1 .image-container img {
+#content > .grid > .column1 #seccion1 .paragraph {
-  height: 9.6875rem;
-  width: 11.75rem;
-  margin-top: 5.3125rem;
-}
-#content > .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 {
+#content > .grid > .column2 {
-  width: 33%;
   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;