Finally! Build an App With Flare Content

Delete this text and replace it with your own content.

Slow, Simple Animation

Here is an example.

Copy 
<style>
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}
</style>

Simple Animation Example

 

Stressless Alignments

Copy 
<style>
.flex-container {
  display: flex;
  height: 200px;
  align-items: baseline;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>

Used for Header Item Alignment

hello

Copy 
<body>
<h1>The align-items Property</h1>

<p>The "align-items: baseline;" aligns the flex items such as their baselines aligns:</p>

<div class="flex-container">
  <div><h1>1</h1></div>
  <div><h6>2</h6></div>
  <div><h3>3</h3></div>  
  <div><small>4</small></div>  
</div>

</body>

another paragraph