Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="main-grid">
  
     <div style="grid-column: 8/span 1">Touch</div>
     <div style="grid-column: 9/span 1">
       Path To Square</div>
   <div style="grid-column: 10/span 1">
       Square's Strategy</div>
   <div style="grid-column: 11/span 1">
       Square's Visual Guide</div>
   <div style="grid-column: 12/span 1">
       Square's Colors</div>
 
  
  
   <div style="grid-column: 2/span 3;margin-top: 50px">
     <img src="https://i.postimg.cc/6Q8PDYKX/Group-35eidetic.png" alt=""> </div>
  
  
  
   <div class="brain" style="grid-column: 5/span 7; margin-top: 50px; margin-bottom: 0px">
     
     <h1>EIDETIC</h1>
     <h2><font color="#FFBA08">MEMORIZE & PASTE!</font>
     </h2>
     <p style="width: 33%">
       Did you know? Squares can help you
       improving your memory skills.
       <b>Ding!</b> is the sound for every correct move.
       This game app provides you various ways to
       memorize procedures while having fun.</p>
   </div>



      <div class="two-squares" style="grid-column: span 4; 
       margin-top: 200px; margin-bottom: -60px">

       <h1 class="touch">TOUCH</h1>
      </div>
        

      <div style="grid-column: 3/span 3;
                        margin-top: 30px; margin-bottom: 0px">
     <p> Touch was the initial situation.

     The intention: To create an app based on this topic. It was necessary to focus on one definition of the mentioned term. These are the most appealing outcomes after a brainstorm session:

    </p>
     <br></br>
     <b>Touch can…</b>

                      <p>…occur due physical contact.
                      <p>…occur between a human-being and machines.</p>
                      <p>…occur as an interface.</p>
                      <p>…occur due to communication.</p>
                      <p>…occur as a touch point.</p>

     <br></br>

                                          
                      <b>Definition Choice</b>
                      <p>Execution of touch screen gestures on                                  the touch screen</p>
   </div>




    <div style="grid-column: 7/span 4; margin-top: -70px; margin-                       bottom: 0px">
     <img src="https://i.postimg.cc/WzwYKwwr/Moodboard-Layout-                        white.png" alt="">

     </div>

      <div class="three-squares" style="grid-column: 2/span 10; 
                                 margin-top: 200px; margin-bottom: 0px">
        
       

     <h1 class="path-to-square" style="width: 33%">PATH TO
     <font color="#FFBA08">SQUARE</h1></font>
     
     <h2 class="rough-concept"><font color="#FFBA08">ROUGH CONCEPT</font>            </h2>
        
     <p class="text-path" style="width: 20%">
       The plan: Creating a game app, 
       which is based on touch screen 
       gestures gestures & pictorials 
       should be memorized. In addition 
       the users will have the 
       opportunity to improve their 
       memory skills while playing. 
       The design should be reduced to 
       provide a minimalistic, clear 
       and calm image.</p>
        
        
   </div>   

   <div style="grid-column: 1/span 1"></div>
   <div style="grid-column: 2/span 1"></div>
   <div style="grid-column: 3/span 1"></div>
   <div style="grid-column: 4/span 1"></div>
   <div style="grid-column: 5/span 1"></div>
   <div style="grid-column: 6/span 1"></div>
   <div style="grid-column: 7/span 1"></div>
   <div style="grid-column: 8/span 1"></div>
   <div style="grid-column: 9/span 1"></div>
   <div style="grid-column: 10/span 1"></div>
   <div style="grid-column: 11/span 1"></div>
   <div style="grid-column: 12/span 1"></div>
        
   


   <div style="grid-column: 2/span 10; margin-top: 150px; margin-bottom: 0px">
   <h1 class="squares-strategy"><font color="#FFBA08">SQUARE'S</font> STRATEGY</h1>
   </div>
    
   <div class="user-flow-chart" style="grid-column: 2/span 10">
     
     <h2 class="hstf"><font color="#FFBA08">HOW'S THE FLOW?</font></h2>
        
     <p class="text-hstf" style="width: 20%">
      This user flow diagram 
      demonstrate a simple  
      construction, which can be 
      followed easily. You will be 
      lead through the screens with 
      enough break outside the 
      game for a different atmosphere.</p>        
   </div>   
    



    <div style="grid-column: 2/span 10; margin-top: 150px; margin-bottom: 0px">
   <h1 class="visual-guide"><font color="#FFBA08">SQUARE'S</font> VISUAL GUIDE</h1>
   </div>
    
   <div class="userflow-temp" style="grid-column: 2/span 10">
     
     <h2 class="visualg"><font color="#FFBA08">WHAT WILL LEAD ME?</font></h2>
        
     <p class="text-visualguide" style="width: 20%">
      The answer is: tiny icons.  
      Depending on the prevailing
      screen content, you will see
      the opportunity to move 
      forward or to return. The 
      amount of options is 
      reduced for a clear overview
      while using the app.</p> 
   </div>   



    <div style="grid-column: 2/span 10; margin-top: 150px; margin-bottom: 0px">
   <h1 class="visual-guide"><font color="#FFBA08">SQUARE'S</font> COLORS</h1>
   </div>

   <div class="lying-phone" style="grid-column: span 5"> 
   <h2 class="fsam"><font color="#FFBA08">FOR SENSES AND MIND</font></h2>
        
     <p class="text-fsam" style="width: 33%">
      Based on the game content, 
      the chosen colors should 
      boost the concentration 
      during the game and provide 
      calmness beyond the game.
      <br></br>
      This present color palette will
      remain constantly throughout 
      the app:

      <p class="text-colors" style="width: 33%"><b>Sherpa blue</b> ensures for             the calmness and accuracy.

      <p class="text-colors" style="width: 33%"><b>Selective yellow</b> ensures           for the impulsion.

      <p class="text-colors" style="width: 33%"><b>Nordic and white</b> operate           for information and statistics.</p> 
   
   </div>
      


   <div style="grid-column: span 2"> 
   <h2><center>MAIN COLORS:</center></h2>
   <img class="main-colors" src="https://i.postimg.cc/KjMT75G5/Group-38sbsy.png" alt="">
     
   <p class="sherpa-blue" style="width: 33%">a tint of 
   <b>sherpa blue</b></p>
     
   <p class="selective-yellow" style="width: 33%">a tint of 
   <b>selective yellow</b></p>
   
   <h2 class="accent-colors"><center>ACCENT COLORS:</center></h2>
   <img class="accent-colors-img" src="https://i.postimg.cc/4dMth0gd/Group-37nw.png" alt="">
   
   <p class="nordic" style="width: 33%">a tint of 
   <b>nordic</b></p>
     
   <p class="white" style="width: 33%">a tint of 
   <b>white</b></p>
   
   </div>

   <div style="grid-column: 8/span 4">
   <img class="app-menu" src="https://i.postimg.cc/vmMs1p4P/Group-3.png" alt="">
   </div>



   <div style="grid-column: 4/span 6; margin-top: 0px; margin-bottom: 0px">
   <h1 class="app-preview">APP PREVIEW</h1>
   <div style="grid-column: span 12"> 
     <iframe class="video" width="560" height="315"                 src="https://www.youtube.com/embed/7H8oNMIysxM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
   </div>
   </div>
   


   
   <div class="whats-next-box" style="grid-column: span 6">
   <h1 class="wsn" style="width: 80%"><font color="#ffffff">WHAT'S NEXT?
   <p class="daei">DOWNLOAD AND ENJOY IT!
     </p></font></h1>
   </div>


   <div class="eidetic-logo" style="grid-column: 7/span 6">
   <p class="ending" style="width: 33%"><font color="#ffffff">
      A project university project
      for the interface and 
      interaction design course

   <p class="ending1" style="width: 35%">developed by Bao Thu Nguyen HMKW University Of Applied Sciences SS 2020</font></p>
   
   </div>

   


   



  
</div>
              
            
!

CSS

              
                body {
  color: #004752;
  font-family: 'Titillium Web', sans-serif;
  font-size: 14px;
}


.main-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);

}


.main-grid > div {
  border: px solid cyan;
  padding: 22px;
}


img {
  width: 100%;
}


h1 {
  margin-top: 110px;
  height: 100px;
  font-size: 110px; 
  font-style: bold; 
}


h2 {  
  line-height: 1px; 
}


.brain { 
  background: url(https://i.postimg.cc/tJKWX7Hp/Zeichenfl-che-1.png) -60px -130px no-repeat;
  height: 600px;
}



.two-squares {
   background:
 url(https://i.postimg.cc/YCmpZ8yB/image-3twosquares.png) no-repeat;
   height: 220px;
}


.touch {
  margin-left: 240px;
    font-size: 80px;
}



.three-squares {
  background:
  url(https://i.postimg.cc/JhDrX8kX/Group-36patosquares.png) 200px no-repeat;
   height: 800px;
}



.path-to-square { 
  font-size: 80px;
  line-height: 1;
}


.user-flow-chart {
  
  
}



.rough-concept {
  margin-top:  350px;
  margin-left: 930px;  
}


.text-path {
  margin-left: 930px; 
}


.squares-strategy {
  font-size: 80px;
  text-align: center;
  margin-top: 0px;
}


.user-flow-chart {
  background:
  url(https://i.postimg.cc/1XxsL0SX/userflow-eidetic.png) -50px no-repeat;
  height: 650px;
}


.hstf {
 margin-top: 450px;
 margin-left: 930px;
  
}


.text-hstf {
  margin-left: 930px;
}


.visual-guide {
  font-size: 80px;
  text-align: center;
  margin-top: 0px;
}


.userflow-temp {
  background: 
  url(https://i.postimg.cc/LsZWGc8k/Web-1920-2.png) no-repeat;
  height: 650px;
}

.visualg {
  margin-top: 450px;
  margin-left: 690px;
}

.text-visualguide{
  margin-left: 690px; 
  
}



.squares-colors {
  font-size: 80px;
  text-align: center;
  margin-top: 0px;
}


.lying-phone {
  background: 
  url(https://i.postimg.cc/xjPVdwVj/screen-sm.png) -5px 440px no-repeat;
  height: 800px;
  
}


.fsam {
  margin-top: px;
  margin-left: 220px;
}


.text-fsam {
  margin-top: px;
  margin-left: 220px;
}


.text-colors {
  margin-left: 220px;
}


.main-colors {
  margin-top: 15px;
}


.sherpa-blue {
  margin-top: -10px;
  margin-left: 13px;
  text-align: center;
}


.selective-yellow {
  margin-top: -77px;
  margin-left: 102px;
  text-align: center;
}


.accent-colors {
  margin-top: 80px;
}


.accent-colors-img {
   margin-top: 15px;
}


.nordic {
  margin-top: -10px;
  margin-left: 13px;
  text-align: center;
}

.white{
  margin-top: -55px;
  margin-left: 102px;
  text-align: center;
}


.app-menu {
  margin-top: 30px;
  margin-left: 30px;
}

.app-preview {
  font-size: 80px;
  text-align: center;
}


.video {
 margin-left: 48px; 
  
}

.whats-next-box {
  background-color: #004752;
  height: 500px;
  margin-top: 200px;
}


.wsn {
  margin-top: 50px;
  font-size: 80px;
  line-height: 1; 
}


.daei {
  margin-top: 0px;
}



.eidetic-logo {
  height: 500px;
  margin-top: 200px; 
  background: 
  url(https://i.postimg.cc/C5TbbLdF/Group-12eidetic-brain.png) 400px 100px no-repeat;
  background-color: #004752;
}


.ending {
  margin-top: 100px;
  margin-left: 120px;
}

.ending1 {
  margin-left: 120px;
}



              
            
!

JS

              
                
              
            
!
999px

Console