Skip to content
Permalink
Browse files

layout adjustments and downloaded images for next animation

  • Loading branch information
mdr19002 committed Mar 9, 2020
1 parent 00afdf9 commit 942fa16ec9fc15a3ff4e38710f95eb358a41fec0

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Binary file not shown.
Binary file not shown.
@@ -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">
@@ -130,7 +130,7 @@ <h3>You can use animated particles to create a subtle background effect...</h3>
<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>
@@ -51,7 +51,7 @@ hr {
}

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


@@ -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 {
@@ -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 {
@@ -113,6 +151,11 @@ ul, ol {
margin: 0 5px;
}

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


.particle-container {
overflow: hidden;
height: 100%;
@@ -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;
}
@@ -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.
You can’t perform that action at this time.