Web.QHMIT
.com
Toggle navigation
☰
Home
HTML
CSS
Scripting
Database
Run
<!doctype html> <title>Example</title> <style> body { display: grid; grid: "header header header" "nav article ads" "footer footer footer" / 20% 1fr 15%; grid-gap: 10px; animation: myAnimation 1s ease 1s 5 alternate forwards; } header, footer, article, nav, div { padding: 20px; background: gold; } #pageHeader { grid-area: header; } #pageFooter { grid-area: footer; } #mainArticle { grid-area: article; } #mainNav { grid-area: nav; } #siteAds { grid-area: ads; } @keyframes myAnimation { 100% { grid: "header article ads" "nav article ads" "footer article ads"; grid-gap: 30px; } } </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