mirror of
https://github.com/vladocar/Basic.css.git
synced 2024-09-28 14:21:28 +02:00
86 lines
1.6 KiB
HTML
86 lines
1.6 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
<title> Lorem Ipsum Crash Test </title>
|
|
<meta name="author" content="Vladimir Carrer">
|
|
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="css/basic.css" type="text/css">
|
|
|
|
<style>
|
|
main {
|
|
margin: 0 auto;
|
|
width: 82%;
|
|
text-align: left;
|
|
padding: 0 20px;
|
|
}
|
|
[style*="--c:"],aside{
|
|
color: #fff;
|
|
background-color: #00bbeb;
|
|
padding: 15px;
|
|
margin: 10px 8px 10px 8px;
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<main>
|
|
<h1>Simple Grid</h1>
|
|
<section>
|
|
<aside> 1 </aside>
|
|
<aside> 2 </aside>
|
|
<aside> 3 </aside>
|
|
</section>
|
|
<section>
|
|
<aside>1</aside>
|
|
<aside>2</aside>
|
|
<aside>3</aside>
|
|
<aside>4</aside>
|
|
</section>
|
|
<section>
|
|
<aside> 1 </aside>
|
|
<aside> 2 </aside>
|
|
<aside> 3 </aside>
|
|
<aside> 4 </aside>
|
|
<aside> 5 </aside>
|
|
</section>
|
|
<h2>Complex grid</h2>
|
|
<section>
|
|
<aside> 1 </aside>
|
|
<aside> 2 </aside>
|
|
<aside> 3 </aside>
|
|
</section>
|
|
<section>
|
|
<aside style = "--c:2">Merge the first 2 columns</aside>
|
|
<aside>2</aside>
|
|
<aside>3</aside>
|
|
<aside>4</aside>
|
|
</section>
|
|
<section>
|
|
<aside> 1 </aside>
|
|
<aside style = "--c:3"> Merge 3 columns </aside>
|
|
<aside> 3 </aside>
|
|
</section>
|
|
<section>
|
|
<aside>1</aside>
|
|
<aside style = "--c:2">Merge 2</aside>
|
|
<aside style = "--c:3">Merge 3</aside>
|
|
<aside>4</aside>
|
|
<aside>5</aside>
|
|
<aside>6</aside>
|
|
<aside>7</aside>
|
|
</section>
|
|
<section>
|
|
<div style = "--c:1"> 1 </div>
|
|
<div style = "--c:2"> Merge 2 columns</div>
|
|
<div style = "--c:1"> 3 </div>
|
|
</section>
|
|
</main>
|
|
</body>
|
|
|
|
</html> |