Skip to content

Instantly share code, notes, and snippets.

@Beyarz

Beyarz/angle-desgin.html

Last active June 7, 2020 12:47
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Beyarz/83ca3051d28c4dca333dba04d1db6b15 to your computer and use it in GitHub Desktop.
Save Beyarz/83ca3051d28c4dca333dba04d1db6b15 to your computer and use it in GitHub Desktop.
Download ZIP
angle desgin
Raw
angle-desgin.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Angle design</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css' />
</head>
<body>
<nav id="nav" class="level top-padding has-text-centered">
<div class="level-item">
<div>
<p class="heading">Simple</p>
<p class="title">Title</p>
</div>
</div>
</nav>
<div class="page-wrapper has-text-centered">
<div class="container top-padding">
<div class="subheading">Look! A circle made out of circles</div>
<div class="columns">
<div class="column">
<pre>●</pre>
</div>
</div>
<div class="columns">
<div class="column">
<pre>●</pre>
</div>
<div class="column">
<pre>●</pre>
</div>
</div>
<div class="columns">
<div class="column">
<pre>●</pre>
</div>
<div class="column">
<pre>●</pre>
</div>
<div class="column">
<pre>●</pre>
</div>
</div>
<div class="columns">
<div class="column">
<pre>●</pre>
</div>
<div class="column">
<pre>●</pre>
</div>
</div>
<div class="columns">
<div class="column">
<pre>●</pre>
</div>
</div>
</div>
</div>
</body>
</html>
Raw
style.css
* {
margin: 0;
padding: 0;
}
#nav {
padding-bottom: 6rem;
}
.top-padding {
padding-top: 3rem;
}
.page-wrapper:before, .page-wrapper:after {
left: 0;
right: 0;
content: '';
height: 15vh;
position: absolute;
background: inherit;
}
.page-wrapper:before {
transform-origin: 0;
transform: skewY(-3deg);
background-color: whitesmoke;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment