Web.QHMIT
.com
Toggle navigation
☰
Home
HTML
CSS
Scripting
Database
Run
<!doctype html> <title>Example</title> <style> body { display: grid; grid-template: "header header header" 60px "article nav ads" 1fr "footer footer footer" 60px / 1fr 20% 15%; animation: myAnimation 1s ease 1s 5 alternate forwards; grid-gap: 10px; height: 100vh; margin: 0; } header, footer, article, nav, div { padding: 20px; background: hotpink; } #pageHeader { grid-area: header; } #pageFooter { grid-area: footer; } #mainArticle { grid-area: article; } #mainNav { grid-area: nav; } #siteAds { grid-area: ads; } @keyframes myAnimation { 100% { grid-template: "header header header" 60px "nav article ads" 1fr "nav footer footer" 60px / 20% 1fr 15%; } </style> <body> <header id="pageHeader">Header</header> <article id="mainArticle">Article</article> <nav id="mainNav">Nav</nav> <div id="siteAds">Ads</div> <footer id="pageFooter">Footer</footer> </body>
Preview