Skip to content
Permalink
Browse files

improved layout

  • Loading branch information
mdr19002 committed Mar 7, 2020
1 parent afb121f commit 96dcee1a96e95535f13d9787dc88e5843da8c3c9
Showing with 22 additions and 5 deletions.
  1. +19 −2 css/midterm.css
  2. +3 −3 midterm.html
@@ -111,22 +111,39 @@ body {

header {
background-color: white;
display: flex;
flex-direction: column;
justify-content: space-around;
}

ul, ol {
text-align: left;
margin-left: 100px;
}

.copy {
display: flex;
flex-direction: column;
justify-content: space-around;
}

.particle-wrapper {
position: relative;
height: 400px;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr auto 1fr;
}

.particle-wrapper p {
grid-row: 2/3;
grid-column: 1/2;
}

.particle-container {
overflow: hidden;
height: 100%;
position: absolute;
grid-row: 1/4;
grid-column: 1/2;
}

.particle-temp {
@@ -48,7 +48,7 @@ <h1>Particle Animation</h1>
<p>Or you can make your particles show-stopping!</p>
</div>

<div id="info1">
<div class="copy" id="info1">
<p>Particles are the key to all of the realistic animation effects below.
Check them out!</p>
<ul>
@@ -78,7 +78,7 @@ <h1>Particle Animation</h1>
</div>
</div>

<div id="info2">
<div class="copy" id="info2">
<p>Say you’re already familiar with the animation properties of CSS.
What makes particle animation any different?</p>
<p>The defining characteristics of a particle animation are: </p>
@@ -95,7 +95,7 @@ <h1>Particle Animation</h1>
<p>We'll look at some ways to get past these limitations later on.</p>
</div>

<div id="info3">
<div class="copy" id="info3">
<h2>Tutorial</h2>
<p>Read on to find out how you can create awesome CSS particle animations yourself!</p>
<h3>Outline</h3>

0 comments on commit 96dcee1

Please sign in to comment.
You can’t perform that action at this time.