Layout Example
For Single Content Full Width<div class="cardes">Implementation full code
<div class="carde">
<img width="100%" alt="" src=""/>
<div class="card-content">
<h1>The title</h1>
<p>input content in here</p>
</div>
</div>
</div>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1,
shrink-to-fit=no"/>
<title> your title here</title>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/astronot/css/astronot.min.css"/>
</head>
<body>
<div class="cardes">
<div class="carde">
<img width="100%" alt="" src=""/>
<div class="card-content">
<h1>The title</h1>
<p>input content in here</p>
</div>
</div>
</div>
</body>
</html>
Run Single →
For Grid Column<div class="cards">Implementation full code
<div class="card">
<div class="card-content">
<h1>The title col 1</h1>
<p>input content in here</p>
</div>
</div>
<div class="card">
<div class="card-content">
<h1>The title col 2</h1>
<p>input content in here</p>
</div>
</div>
<div class="card">
<div class="card-content">
<h1>The title col 3</h1>
<p>input content in here</p>
</div>
</div>
</div>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1,
shrink-to-fit=no"/>
<title> your title here</title>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/astronot/css/astronot.min.css"/>
</head>
<body>
<div class="cards">
<div class="card">
<div class="card-content">
<h1>The title col 1</h1>
<p>input content in here</p>
</div>
</div>
<div class="card">
<div class="card-content">
<h1>The title col 2</h1>
<p>input content in here</p>
</div>
</div>
<div class="card">
<div class="card-content">
<h1>The title col 3</h1>
<p>input content in here</p>
</div>
</div>
</div>
</body>
</html>
Run Column →
Navbar Header Menu
<nav class="nav">
<a class="link" href="/">Home</a>
<a class="link" href="/about">About</a>
<a class="link" href="/contact">Contact</a>
</nav>
Navbar Output
The Starter Layout code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1,
shrink-to-fit=no"/>
<title> your title here</title>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/astronot/css/astronot.min.css"/>
</head>
<body>
<nav class="nav">
<a class="link" href="/">Home</a>
<a class="link" href="/about">About</a>
<a class="link" href="/contact">Contact</a>
</nav>
<header class="cardes">
<section class="carde">
<img width="100%" alt="" src=""/>
<div class="card-content">
<h1>The title</h1>
<p>input content in here</p>
</div>
</section>
</header>
<main class="cards">
<section class="card">
<div class="card-content">
<h1>The title col 1</h1>
<p>input content in here</p>
</div>
</section>
<section class="card">
<div class="card-content">
<h1>The title col 2</h1>
<p>input content in here</p>
</div>
</section>
<section class="card">
<div class="card-content">
<h1>The title col 3</h1>
<p>input content in here</p>
</div>
</section>
</main>
<footer>
<h3>Thank you</h3>
<p> Thanks for using astronot css for develope your unique blog and website </p>
</footer>
</body>
</html>