Skip to content

/ dmd5470-mr

Permalink
Browse files

improved layout

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


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


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


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

.particle-wrapper { .particle-wrapper {
position: relative;
height: 400px; 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 { .particle-container {
overflow: hidden; overflow: hidden;
height: 100%; height: 100%;
position: absolute; grid-row: 1/4;
grid-column: 1/2;
} }


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


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


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


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

0 comments on commit 96dcee1

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