Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
week4-layout2
  • Loading branch information
@jzc16101
jzc16101 committed Mar 3, 2020
1 parent d5379c1 commit d3acb1e
Show file tree
Hide file tree
Showing 15 changed files with 583 additions and 220 deletions.
86 changes: 29 additions & 57 deletions css-showcase-midterm.html
View file
Expand Up @@ -25,69 +25,41 @@
<![endif]-->

<!-- Add your site or application content here -->

<header>
<!--Neon Text Animation-->
<div class="wrapper">
<div class="neon-wrapper">
<span class="txt" >CSS Animations by Jamison Cote</span>
<span class="gradient"></span>
<span class="dodge"></span>
</div>
</div>
</header>
<div class="section1">
<!--text animation-->
<div id=container>
I Think
<div id=flip>
<div id=container>
I Think
<div id=flip>
<div><div>Web Design</div></div>
<div><div>UConn</div></div>
<div><div>Connecticut</div></div>
</div>
Is Awesome!
</div>
<!--Neon Text Animation-->
<div class="neon-wrapper">
<span class="txt" >Jamison Cote</span>
<span class="gradient"></span>
<span class="dodge"></span>
</div>
</div>
Is Awesome!
</div>
</div>
<div class="section2">
<!--Flame animation-->
<div class="flame-wrapper">
<div class="flame red"></div>
<div class="flame orange"></div>
<div class="flame gold"></div>
<div class="flame white"></div>
<div class="base blue"></div>
<div class="base black"></div>
</div>
<div class="flame-wrapper">
<div class="flame red"></div>
<div class="flame orange"></div>
<div class="flame gold"></div>
<div class="flame white"></div>
<div class="base blue"></div>
<div class="base black"></div>
</div>
</div>
<!--Loader Animation-->
<main>
<div class="dank-ass-loader">
<div class="row">
<div class="arrow up outer outer-18"></div>
<div class="arrow down outer outer-17"></div>
<div class="arrow up outer outer-16"></div>
<div class="arrow down outer outer-15"></div>
<div class="arrow up outer outer-14"></div>
</div>
<div class="row">
<div class="arrow up outer outer-1"></div>
<div class="arrow down outer outer-2"></div>
<div class="arrow up inner inner-6"></div>
<div class="arrow down inner inner-5"></div>
<div class="arrow up inner inner-4"></div>
<div class="arrow down outer outer-13"></div>
<div class="arrow up outer outer-12"></div>
</div>
<div class="row">
<div class="arrow down outer outer-3"></div>
<div class="arrow up outer outer-4"></div>
<div class="arrow down inner inner-1"></div>
<div class="arrow up inner inner-2"></div>
<div class="arrow down inner inner-3"></div>
<div class="arrow up outer outer-11"></div>
<div class="arrow down outer outer-10"></div>
</div>
<div class="row">
<div class="arrow down outer outer-5"></div>
<div class="arrow up outer outer-6"></div>
<div class="arrow down outer outer-7"></div>
<div class="arrow up outer outer-8"></div>
<div class="arrow down outer outer-9"></div>
</div>
</div>
</main>


<script src="js/vendor/modernizr-3.8.0.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
Expand Down
224 changes: 72 additions & 152 deletions css/css-showcase-midterm.css
View file
Expand Up @@ -49,96 +49,6 @@
margin: 1em 0;
padding: 0;
}

/* loader animation */
$color: #fd7000;
$size: 12px;
$time: 1;

main {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #090707;
}

.dank-ass-loader {
display: flex;
flex-direction: column;
align-items: center;

.row {
display: flex;
}
}

.arrow {
width: 0;
height: 0;
margin: 0 (-$size / 2);
border-left: $size solid transparent;
border-right: $size solid transparent;
border-bottom: ($size * 1.8) solid $color;
animation: blink $time + s infinite;
filter: drop-shadow(0 0 ($size * 1.5) $color);

&.down {
transform: rotate(180deg);
}

@for $i from 1 through 18 {
&.outer-#{$i} {
animation-delay: -($time / 18) * $i + s;
}
}

@for $i from 1 through 6 {
&.inner-#{$i} {
animation-delay: -($time / 6) * $i + s;
}
}
}

@keyframes blink {
0% { opacity: 0.1; }
30% { opacity: 1; }
100% { opacity: 0.1; }
}

* Remove the gap between audio, canvas, iframes,
* images, videos and the bottom of their containers:
* https://github.com/h5bp/html5-boilerplate/issues/440
*/

audio,
canvas,
iframe,
img,
svg,
video {
vertical-align: middle;
}

/*
* Remove default fieldset styles.
*/

fieldset {
border: 0;
margin: 0;
padding: 0;
}

/*
* Allow only vertical resizing of textareas.
*/

textarea {
resize: vertical;
}

/* ==========================================================================
Browser Upgrade Prompt
========================================================================== */
Expand Down Expand Up @@ -258,37 +168,98 @@ html {
* {
box-sizing: border-box;
}
/* text animation */

@import url('https://fonts.googleapis.com/css?family=Roboto:700');

body {
margin:0px;
padding: 0;
font-family:'Roboto';
text-align:center;
text-align: center;
background-color: black;
}
header {
margin: auto;
width: 300px;
}
.wrapper {
display: flex;
align-items: center;
justify-content: center;
height: 500px;
}
.txt {
color: #ffffff;
background:#000000;
font-size:50px;
font-weight: bold;
font-family: Arial;
text-transform: uppercase;
margin-top: 200px;
}
.txt::before {
content: 'CSS Animations by Jamison Cote';
position: absolute;
mix-blend-mode: difference;
filter: blur(3px);
font-size: 50px;
margin-top: 200px;

}
.neon-wrapper {
position: absolute;
transform: translate(-50%, -50%);
display: inline-flex;
filter: brightness(300%);
overflow: hidden;
}
.gradient{
background: linear-gradient(114.5793141156962deg, rgba(6, 227, 250,1) 4.927083333333334%,rgba(229, 151, 64,1) 97.84374999999999%);
position: absolute;
top: 0;
left:0;
width: 100%;
height:100%;
mix-blend-mode: multiply;
}
.dodge {
background: radial-gradient(circle,white,black 35%) center / 25% 25%;
position: absolute;
top:-100%;
left:-100%;
right:0;
bottom:0;
mix-blend-mode: color-dodge;
animation: dodge-area 3s linear infinite;
}
@keyframes dodge-area {
to {
transform: translate(50%,50%);
}
}
.section1 {
background-color: darkred;
}
/* text animation */
#container {
color:#999;
text-transform: uppercase;
font-size:36px;
font-weight:bold;
padding-top:200px;
position: absolute;
width:100%;
bottom:45%;
font-weight:bold;
display:block;
margin: auto;
width: 300px;
}

#flip {
height:50px;
height: 60px;
overflow:hidden;
}

#flip > div > div {
color:#fff;
padding:4px 12px;
height:45px;
height: 45px;
margin-bottom:45px;
display:inline-block;
}
Expand Down Expand Up @@ -326,59 +297,8 @@ p {
color:#999;
margin-top:200px;
}
/* neon text animation */
body {
background: #000000;
margin: 0;
padding: 0;
}
.txt {
color: #ffffff;
background:#000000;
font-size:100px;
font-weight: bold;
font-family: Arial;
text-transform: uppercase;
}
.txt::before {
content: 'Jamison Cote';
position: absolute;
mix-blend-mode: difference;
filter: blur(3px);
font-size: 100px;
}
.neon-wrapper {
position: absolute;
top: 80%;
left: 50%;
transform: translate(-50%, -50%);
display:inline-flex;
filter: brightness(300%);
overflow: hidden;
}
.gradient{
background: linear-gradient(114.5793141156962deg, #ff33cc 4.927083333333334%,#66ff33 97.84374999999999%);
position: absolute;
top: 0;
left:0;
width: 100%;
height:100%;
mix-blend-mode: multiply;
}
.dodge {
background: radial-gradient(circle,white,black 35%) center / 25% 25%;
position: absolute;
top:-100%;
left:-100%;
right:0;
bottom:0;
mix-blend-mode: color-dodge;
animation: dodge-area 3s linear infinite;
}
@keyframes dodge-area {
to {
transform: translate(50%,50%);
}
.section2 {
background-color: black;
}
/* flame animation */
.red {
Expand Down

0 comments on commit d3acb1e

Please sign in to comment.