Project

General

Profile

Download (4.11 KB)

Patch #30451 » concept-gridbox-version.html

Anonymous, 2019-01-19 17:39

 
1 
<!DOCTYPE html>
2 
<html>
3 
	<head>
4 
		<title>Layout concept</title>
5 
	</head>
6 
	<body>
7 
		<header>
8 
			<nav>Top bar</nav>
9 
			<h1>Header<h1>
10 
		</header>
11 
		<main>
12 
			<nav>Main menu <button id="li" onclick="insertLoremIpsum()">Insert Lorem ipsum</button></nav>
13 
			<content>This is where content will be</content>
14 
			<aside>This is a sidebar</aside>
15 
		</main>
16 
		<footer>This is a footer</footer>
17 
	</body>
18 
</html>
19 

    		
  

  

    
      20
    
    
      
<style>


    		
  

  

    
      21
    
    
      
	body, html {height: 100%; text-align: center; margin: 0; padding: 0;}


    		
  

  

    
      22
    
    
      
	h1, h2, h3, h4 {padding: 0; margin: 0}


    		
  

  

    
      23
    
    
      
	header > nav {background: blue; height: 20px}


    		
  

  

    
      24
    
    
      
	main > nav {grid-column: 1 / 3;  background: magenta;}


    		
  

  

    
      25
    
    
      
	header {background: cyan; height: 100px}


    		
  

  

    
      26
    
    
      
	main {display: grid; grid-template-columns: auto 220px; grid-template-rows: 25px auto; grid-template-areas: "nav nav" "content aside"; min-height: calc(100vh - 125px); margin-bottom: 25px}


    		
  

  

    
      27
    
    
      
	content {grid-column: 2 / 1; background: yellow; padding: 20px}


    		
  

  

    
      28
    
    
      
	aside {grid-column: 2 / 2; background: green; padding: 20px;}


    		
  

  

    
      29
    
    
      
	footer {background: red; height: 25px; margin-top: -25px}


    		
  

  

    
      30
    
    
      
</style>


    		
  

  

    
      31
    
    
      

    		
  

  

    
      32
    
    
      

    		
  

  

    
      33
    
    
      
<script>


    		
  

  

    
      34
    
    
      
function insertLoremIpsum() {


    		
  

  

    
      35
    
    
      
	document.getElementsByTagName("content")[0].innerHTML += "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ultrices lacus nec ex pellentesque finibus. Aliquam erat volutpat. Donec hendrerit condimentum congue. Sed et ornare mi. Integer at lacus tempor, facilisis ligula vel, molestie ex. Proin ut nunc erat. Proin ut vestibulum urna. Vivamus condimentum dictum ligula nec lacinia. Ut pellentesque scelerisque scelerisque. Pellentesque vitae elit sodales enim sodales accumsan. Ut auctor malesuada est, cursus rutrum nisi euismod eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc imperdiet interdum bibendum. Nulla facilisi. Ut sit amet erat et odio sodales dictum eu at eros. Duis dictum interdum lacus, eu elementum ipsum congue sit amet. Integer lacinia orci nec venenatis porttitor. Ut neque dui, finibus eget blandit ut, molestie ac nisl. Sed iaculis hendrerit lectus, sit amet molestie massa pretium vitae. Morbi ullamcorper cursus arcu ac pellentesque. Donec risus quam, tincidunt id dui sit amet, tincidunt tristique lorem. Suspendisse vulputate ultricies sodales. Fusce consequat, mi ut commodo vulputate, lorem augue varius sem, nec commodo velit augue quis nulla. Vestibulum ut mauris et lorem egestas interdum. Aliquam feugiat tortor felis. Proin tincidunt imperdiet massa, nec faucibus tellus volutpat a. Etiam suscipit neque non erat cursus faucibus. Sed ultrices libero vitae lobortis dapibus. Vestibulum volutpat convallis auctor. Donec id volutpat justo. Sed porttitor erat metus, at facilisis lectus tempus id. Vivamus in nisl sit amet ante molestie consequat. Pellentesque dictum, ligula non tincidunt placerat, nulla dolor efficitur sapien, et tristique tellus arcu nec lorem. Vivamus interdum nisl eu massa viverra efficitur. Sed dolor dui, imperdiet a velit ut, pulvinar consequat ipsum. Sed eget dictum tellus, in congue libero. Quisque in varius urna. Aenean sit amet quam erat. Donec ac ex vel libero placerat sollicitudin vitae maximus ex. Integer id viverra lorem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque ac turpis mauris. Sed sit amet ullamcorper dui, id rutrum diam. Suspendisse quis efficitur sapien, sit amet tincidunt nibh. Duis vel est tristique tortor dignissim interdum a vel diam. Integer consectetur leo a ipsum dignissim porta sed id neque. Quisque eros dui, tempus ut aliquam ut, cursus in dolor. Praesent tempor velit et justo molestie, vel luctus eros fermentum. Vestibulum at vestibulum tortor, nec venenatis dolor. Nullam non ante elementum nibh dictum egestas. Nam feugiat enim nec ligula accumsan, quis placerat urna sollicitudin. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin tincidunt mi sit amet risus gravida ornare. Praesent bibendum, elit vitae egestas auctor, dui ligula vestibulum ipsum, vitae rhoncus arcu ante eu dolor. Mauris porttitor lectus a scelerisque semper. Morbi placerat mi a sem rutrum, at efficitur orci sagittis. Fusce tempor sodales egestas." 


    		
  

  

    
      36
    
    
      
}


    		
  

  

    
      37
    
    
      
</script>


    		
  












  (5-5/5)