You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
70 lines
3.0 KiB
70 lines
3.0 KiB
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>blockstart.css Demos</title>
|
|
<link rel="stylesheet" href="/blockstart/blockstart.css">
|
|
<style>
|
|
grid > shape {
|
|
--w: 150px;
|
|
--h: 150px;
|
|
}
|
|
|
|
grid > shape > a {
|
|
color: var(--value9);
|
|
}
|
|
|
|
#demo-grid {
|
|
grid-template-rows: auto;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
grid-gap: 1rem;
|
|
}
|
|
|
|
@media only screen and (max-width: 600px) {
|
|
#demo-grid {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<block class="horizontal pad" style="border-bottom: 1px solid var(--value6); --spacing: space-around; width: unset;">
|
|
<a href="/blockstart/">blockstart.css</a>
|
|
<div class="horizontal" style="--spacing: end;">
|
|
<a href="/blockstart/#about">About</a> |
|
|
<a href="/blockstart/#docs">Docs</a> |
|
|
<a href="/blockstart/demos/">Demos</a> |
|
|
<a href="/blockstart/blockstart.css">Download</a>
|
|
</div>
|
|
</block>
|
|
|
|
<content class="pad center" style="--pad: 2rem;">
|
|
<h1>Demos</h1>
|
|
|
|
<p>Here are a few simple demos of using <a href="/blockstart/blockstart.css">blockstart.css</a> to create copies of landing pages. Copying other websites is a great way to learn web development. The text in the demos is either taken from the "inspiration" site, or is from <a href="https://hipsum.co/">hipster ipsum</a>.</p>
|
|
|
|
<block class="solid pad border" style="--value: 0; --text: 9; --pad: 2rem;">
|
|
<p class="no-flex"><b>WARNING</b> The entire point of this project is to remove irrelevant details in the beginning of a project. Making a web page work on every imaginable aspect ratio just so Google and Apple don't have to make their browsers work correctly is exactly the kind of detail people should ignore when they start. What that means is <b>NONE</b> of these demos work on mobile. Maybe they do, maybe they don't, but they are on desktop because I use a desktop to make them and that's the easiest start. Nothing prevents you from starting with moblile using <a href="/blockstart/blockstart.css">blockstart.css</a> if you like "mobile first", so don't take me avoiding it <b>in the start</b> as some indication of a flaw. It's a choice, and I am aware of it.</p>
|
|
</block>
|
|
|
|
<hr>
|
|
|
|
<grid id="demo-grid">
|
|
<shape><a href="asana.html">Asana</a></shape>
|
|
<shape><a href="canva.html">Canva</a></shape>
|
|
<shape><a href="todoist.html">Todoist</a></shape>
|
|
<shape><a href="square.html">Square</a></shape>
|
|
<shape><a href="earlybird.html">Earlybird</a></shape>
|
|
<shape><a href="vimeo.html">Vimeo</a></shape>
|
|
<shape><a href="wordstream.html">Wordstream</a></shape>
|
|
<shape><a href="breadcrumbs.html">Breadcrumbs</a></shape>
|
|
<shape><a href="snapchat.html">Snapchat</a></shape>
|
|
<shape><a href="patreon.html">Patreon</a></shape>
|
|
<shape><a href="slack.html">Slack</a></shape>
|
|
<shape><a href="zoom.html">Zoom</a></shape>
|
|
</grid>
|
|
</content>
|
|
</body>
|
|
</html>
|
|
|