Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
layout adjustments and downloaded images for next animation
  • Loading branch information
mdr19002 committed Mar 9, 2020
1 parent 00afdf9 commit 942fa16
Show file tree
Hide file tree
Showing 6 changed files with 328 additions and 317 deletions.
549 changes: 278 additions & 271 deletions css/midterm.css

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions css/midterm.map

Large diffs are not rendered by default.

Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/spinning-coin-gif.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions midterm.html
Expand Up @@ -28,7 +28,7 @@
<header>
<h2>CSS Showcase:</h2>
<h1>Particle Animation</h1>
<p>by Maria Raykova | March 2020</p>
<p>by Maria Raykova &#8226 March 2020</p>
</header>

<section class="particle-wrapper" id="subtle">
Expand Down Expand Up @@ -130,7 +130,7 @@
<div class="star-wrapper rotate10"><div class="particle-star"></div></div>
</div>
</div>
<h3>...or you can make your particles POP!</h3>
<h2>...or you can make your particles POP!</h2>
<p class="attribution">"Sandiego skyline at night" by Whoismanu is licensed under CC BY-SA 3.0.</p>
</section>

Expand Down
88 changes: 46 additions & 42 deletions scss/midterm.scss
Expand Up @@ -51,7 +51,7 @@ hr {
}

/* ==========================================================================
Author's custom styles
LAYOUT STYLING (NOT PARTICLE RELATED)
========================================================================== */


Expand All @@ -77,7 +77,42 @@ header {
-webkit-box-direction: normal;
flex-direction: column;
-webkit-box-pack: center;
justify-content: center;
justify-content: center;
}

#subtle {
background: -webkit-gradient(linear, left top, left bottom, from(#1c0f3b), color-stop(#4d1354), to(#1c0f3b));
background: linear-gradient(#1c0f3b 15%, #4d1354 50%, #1c0f3b 85%, #1a1819 100%);
color: white;
height: 50vh;
min-height: 400px;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr auto 1fr;
}

#fireworks {
background-image: url("https://upload.wikimedia.org/wikipedia/commons/1/15/Sandiego_skyline_at_night.JPG");
background-size: cover;
background-position: top left;
color: white;
height: 50vh;
min-height: 400px;
display: grid;
grid-template-rows: 1fr auto 1fr auto;
grid-template-columns: 1fr;
}

#info1 {
background-color: lemonchiffon;
}

#info2 {
background-color: aliceblue;
}

#info3 {
background-color: pink;
}

ul, ol {
Expand All @@ -99,11 +134,14 @@ ul, ol {
#subtle h3 {
grid-row: 2/3;
grid-column: 1/2;
text-shadow: 2px 2px 4px #000000;
margin: 15px;
}

#fireworks h3 {
#fireworks h2 {
grid-row:2/3;
grid-column:1/2;
text-shadow: 2px 2px 4px #000000;
}

.attribution {
Expand All @@ -113,6 +151,11 @@ ul, ol {
margin: 0 5px;
}

/* ==========================================================================
PARTICLE-RELATED STYLES & ANIMATION
========================================================================== */


.particle-container {
overflow: hidden;
height: 100%;
Expand Down Expand Up @@ -550,39 +593,34 @@ $star-size: 6px;
#starburst1 .particle-star {
background: magenta;
}

#starburst1 .particle-star:before {
background:magenta;
}

#starburst2 .particle-star {
background: orangered;
}

#starburst2 .particle-star:before {
background:orangered;
}

#starburst3 .particle-star {
background: yellow;
}

#starburst3 .particle-star:before {
background:yellow;
}

#starburst4 .particle-star {
background: cyan;
}

#starburst4 .particle-star:before {
background:cyan;
}

#starburst5 .particle-star {
background: lime;
}

#starburst5 .particle-star:before {
background:lime;
}
Expand Down Expand Up @@ -694,38 +732,4 @@ $star-size: 6px;
}


#subtle {
background: -webkit-gradient(linear, left top, left bottom, from(#1c0f3b), color-stop(#4d1354), to(#1c0f3b));
background: linear-gradient(#1c0f3b, #4d1354, #1c0f3b, #1a1819);
color: white;
height: 50vh;
min-height: 400px;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr auto 1fr;
}

#fireworks {
background-image: url("https://upload.wikimedia.org/wikipedia/commons/1/15/Sandiego_skyline_at_night.JPG");
background-size: cover;
color: white;
height: 50vh;
min-height: 400px;
display: grid;
grid-template-rows: 1fr auto 2fr auto;
grid-template-columns: 1fr;
}

#info1 {
background-color: lemonchiffon;
}

#info2 {
background-color: aliceblue;
}

#info3 {
background-color: pink;
}


0 comments on commit 942fa16

Please sign in to comment.