Difference between revisions of "Widget:Homepage"

From LINKS Community Center
Jump to: navigation, search
Line 15: Line 15:
 
         #hp-main { width: 75%; margin: auto; }
 
         #hp-main { width: 75%; margin: auto; }
 
         .hp-search { margin-bottom: 5em; }
 
         .hp-search { margin-bottom: 5em; }
         #hp-main h2 { font-family: 'Raleway'; font-weight: 300; letter-spacing: .06em; }
+
         .hp-area { display: flex; justify-content: space-between; }
         .area-desc { font-size: 1.2em; }
+
        .hp-area-icon { flex: 1 0; }
 +
        .hp-area-text h2 { font-family: 'Raleway'; font-weight: 300; letter-spacing: .06em; }
 +
         .hp-area-text p { font-size: 1.2em; }
 +
        .hp-area-arrow { flex: 1 0; font-size: 5em; }
 
         .placeholder-box {
 
         .placeholder-box {
 
             position: relative;
 
             position: relative;
Line 64: Line 67:
  
 
             <div class="hp-areas">
 
             <div class="hp-areas">
                 <div class="d-flex mb-4">
+
                 <div class="hp-area">
                    <div class="placeholder-box mr-4"></div>
+
                    <div class="hp-area-icon">
                     <div>
+
                        <div class="placeholder-box"></div>
 +
                    </div>
 +
                     <div class="hp-area-text">
 
                         <h2>SMCS Technologies Library</h2>
 
                         <h2>SMCS Technologies Library</h2>
                         <div class="area-desc">
+
                         <p>
 
                             Software for interaction with, within or among communities in case of a disaster and for analysis of these interactions.​
 
                             Software for interaction with, within or among communities in case of a disaster and for analysis of these interactions.​
                         </div>
+
                         </p>
 
                     </div>
 
                     </div>
                     <div style="font-weight: 100; font-size: 45px;">&rarr;</div>
+
                     <div class="hp-area-arrow">&rarr;</div>
 
                 </div>
 
                 </div>
                 <div class="d-flex">
+
 
                     <div class="placeholder-box mr-4"></div>
+
                 <div class="hp-area">
                     <div>
+
                     <div class="hp-area-icon">
 +
                        <div class="placeholder-box"></div>
 +
                    </div>
 +
                     <div class="hp-area-text">
 
                         <h2>Guidelines</h2>
 
                         <h2>Guidelines</h2>
                         <div class="area-desc">
+
                         <p>
 
                             Expert guidelines for usage of social media in disasters.​
 
                             Expert guidelines for usage of social media in disasters.​
                         </div>
+
                         </p>
 
                     </div>
 
                     </div>
 +
                    <div class="hp-area-arrow">&rarr;</div>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>

Revision as of 14:39, 20 May 2022

   Development verstion of the DCT Homepage.
Not ready for production!