From 358b1e5240335491d9dce167e4e270db64b284e4 Mon Sep 17 00:00:00 2001 From: roilev Date: Mon, 6 Feb 2017 15:03:36 -0500 Subject: [PATCH] Week2 --- index.html | 63 +++++++++ look.png | Bin 0 -> 1634 bytes style.css | 386 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 449 insertions(+) create mode 100644 index.html create mode 100644 look.png create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..90a54dd --- /dev/null +++ b/index.html @@ -0,0 +1,63 @@ + + + + + + + Look! + + + + + + + + +
+ + + +
+ +

+ + +

+
+ + +
+

Explore

+

+ +

+
+ + +
+

Create

+

+ +

+

+ +

+

+ + + + + +

+
+ + + + + + + + + + diff --git a/look.png b/look.png new file mode 100644 index 0000000000000000000000000000000000000000..a0d37abb822bfd1cdd093a29e2637b1c62ff0367 GIT binary patch literal 1634 zcmV-o2A%ndP)Xa9!|LI+C+VJiq799O}z6@;zeNCl_u zfK;$f2c&|-9pDOdKRn)(=fDOu0y)tT3LrjxKTXM>qbN!M6vnwqYu$w*3p9~x01qbCP8KTx z@MQe30}y}}DEL@`yrDw?Rv;JD24DpWQ(>S0tUw=+x&W*|0a$^;R2V2w09K#?tUxzR zH&KL+q9_KC($@^fvJ(KbTI=2u9upkPV=?`0f&YrK0a*TkDFILd$N}85pP!8L_5d0H z_1eXAT5wkok9Q;I0Kgjng=2xg_f&Bej8zH%a$8z@7Em=Ds#=HjbXdL>fwN?`M_QGP3wc#4x(NvQRoFCI~W0pe+ z^B0rfG-fHYk?T?%*DUn|*A-h@EE+#OWN~aQmKVSp098NJ9A_g!SB^o|Or3h^9<>Cx zBxFW_@0k+E?*>?mF--zY77BmJ>Qw?fwu08C7_eUHn!uv5>X{;^0`l_%Sfn-DR%<3q zshP$7>H%w-TJo6leySOo&uLOoOK1@i*e{X@gqUoFZ3g!nUU4At-u(#-dHrYL~uMh`XMC*t#!qs+j505 zFDP<0Bfwhl5xoy3o#Kl1vZb7b``;+(I!6d*V)l)|AW7!^?i{B{G5~*@{c#EAErFFA zpI@Z2=5)XMf*|Jz-IYaY22ww+sues%xdLRe61*ocp2%{ zMa_={`|1){)Zd1Uw?%r2w2x@gaOB@?q5k>m7h)N$rg2%lz%IfdFsCy4fY{1~BGA8#&u6wa%AxgJP!HmDS2-OgSd7zBu$l zstaSWgvu!qC4skOQE=&M(6?HeoZ$bHED@q&5o;;T z4`1u0Hd5-E<+enp#LcEc!z`B&+*xzszG}wys1AZVb1v+kOt#!&kMkWnVy=i6z>?Us zI$@XZtU<%T7A+faVR&0wvGuzf2JY1?80Q_e>NLha0c&ixaV4+`c9C<6;XQ?!&`VB~ zM=u4bm)vh;oOfOU>k7EKDcVii(@9x|3zkM*11bTk!tgsAlxJ_7;X9+dDb{_YZ~Bz~ z%dqT~L9?2`R{4{~P$aO7T1ChDk@HgruK_S$2T+qQml3clTz^A-r|{!WKN96sk7jxmC6;lnq>wQB3%fq)LUQ~)~lK+P~~zuC(UkW@UxRn zvN{A7Pgu7zeY4-!M7Q!kp=lj=PTCL;lxSLV9Q&2{Nl3uyKuxhDewz3EzaJ^tTamKe g;kZ(@&|3HZ0x)A=bpm8y_y7O^07*qoM6N<$g6fj}iU0rr literal 0 HcmV?d00001 diff --git a/style.css b/style.css new file mode 100644 index 0000000..43f98d6 --- /dev/null +++ b/style.css @@ -0,0 +1,386 @@ +body { + font-family: 'Source Sans Pro', sans-serif; + padding-top: 20px; + padding-bottom: 20px; +} +.landing{ + background-color: springgreen; +} +.explore{ + background-color: skyblue; +} +.create{ + background-color: pink; +} +.create_btns{ +} + +.btn-circle + { + width: 30px; + height: 30px; + text-align: center; + padding: 6px 0; + font-size: 12px; + line-height: 1.428571429; + border-radius: 15px; + } + .btn-circle.btn-lg + { + width: 50px; + height: 50px; + padding: 10px 16px; + font-size: 18px; + line-height: 1.33; + border-radius: 25px; + } + .btn-circle.btn-xl + { + width: 70px; + height: 70px; + padding: 10px 16px; + font-size: 24px; + line-height: 1.33; + border-radius: 35px; + } + +/* WRENCHING */ +@keyframes wrench { + 0%{transform:rotate(-12deg)} + 8%{transform:rotate(12deg)} + 10%{transform:rotate(24deg)} + 18%{transform:rotate(-24deg)} + 20%{transform:rotate(-24deg)} + 28%{transform:rotate(24deg)} + 30%{transform:rotate(24deg)} + 38%{transform:rotate(-24deg)} + 40%{transform:rotate(-24deg)} + 48%{transform:rotate(24deg)} + 50%{transform:rotate(24deg)} + 58%{transform:rotate(-24deg)} + 60%{transform:rotate(-24deg)} + 68%{transform:rotate(24deg)} + 75%,100%{transform:rotate(0deg)} +} +.faa-wrench.animated, +.faa-wrench.animated-hover:hover, +.faa-parent.animated-hover:hover > .faa-wrench { + animation: wrench 2.5s ease infinite; + transform-origin-x: 90%; + transform-origin-y: 35%; + transform-origin-z: initial; +} +.faa-wrench.animated.faa-fast, +.faa-wrench.animated-hover.faa-fast:hover, +.faa-parent.animated-hover:hover > .faa-wrench.faa-fast { + animation: wrench 1.2s ease infinite; +} +.faa-wrench.animated.faa-slow, +.faa-wrench.animated-hover.faa-slow:hover, +.faa-parent.animated-hover:hover > .faa-wrench.faa-slow { + animation: wrench 3.7s ease infinite; +} + +/* BELL */ +@keyframes ring { + 0%{transform:rotate(-15deg)} + 2%{transform:rotate(15deg)} + 4%{transform:rotate(-18deg)} + 6%{transform:rotate(18deg)} + 8%{transform:rotate(-22deg)} + 10%{transform:rotate(22deg)} + 12%{transform:rotate(-18deg)} + 14%{transform:rotate(18deg)} + 16%{transform:rotate(-12deg)} + 18%{transform:rotate(12deg)} + 20%,100%{transform:rotate(0deg)} +} +.faa-ring.animated, +.faa-ring.animated-hover:hover, +.faa-parent.animated-hover:hover > .faa-ring { + animation: ring 2s ease infinite; + transform-origin-x: 50%; + transform-origin-y: 0px; + transform-origin-z: initial; +} +.faa-ring.animated.faa-fast, +.faa-ring.animated-hover.faa-fast:hover, +.faa-parent.animated-hover:hover > .faa-ring.faa-fast { + animation: ring 1s ease infinite; +} +.faa-ring.animated.faa-slow, +.faa-ring.animated-hover.faa-slow:hover, +.faa-parent.animated-hover:hover > .faa-ring.faa-slow { + animation: ring 3s ease infinite; +} + +/* VERTICAL */ +@keyframes vertical { + 0%{transform:translate(0,-3px)} + 4%{transform:translate(0,3px)} + 8%{transform:translate(0,-3px)} + 12%{transform:translate(0,3px)} + 16%{transform:translate(0,-3px)} + 20%{transform:translate(0,3px)} + 22%,100%{transform:translate(0,0)} +} +.faa-vertical.animated, +.faa-vertical.animated-hover:hover, +.faa-parent.animated-hover:hover > .faa-vertical { + animation: vertical 2s ease infinite; +} +.faa-vertical.animated.faa-fast, +.faa-vertical.animated-hover.faa-fast:hover, +.faa-parent.animated-hover:hover > .faa-vertical.faa-fast { + animation: vertical 1s ease infinite; +} +.faa-vertical.animated.faa-slow, +.faa-vertical.animated-hover.faa-slow:hover, +.faa-parent.animated-hover:hover > .faa-vertical.faa-slow { + animation: vertical 4s ease infinite; +} + +/* HORIZONTAL */ +@keyframes horizontal { + 0%{transform:translate(0,0)} + 6%{transform:translate(5px,0)} + 12%{transform:translate(0,0)} + 18%{transform:translate(5px,0)} + 24%{transform:translate(0,0)} + 30%{transform:translate(5px,0)} + 36%,100%{transform:translate(0,0)} +} +.faa-horizontal.animated, +.faa-horizontal.animated-hover:hover, +.faa-parent.animated-hover:hover > .faa-horizontal { + animation: horizontal 2s ease infinite; +} +.faa-horizontal.animated.faa-fast, +.faa-horizontal.animated-hover.faa-fast:hover, +.faa-parent.animated-hover:hover > .faa-horizontal.faa-fast { + animation: horizontal 1s ease infinite; +} +.faa-horizontal.animated.faa-slow, +.faa-horizontal.animated-hover.faa-slow:hover, +.faa-parent.animated-hover:hover > .faa-horizontal.faa-slow { + animation: horizontal 3s ease infinite; +} + +/* FLASHING */ +@keyframes flash { + 0%,100%,50%{opacity:1} + 25%,75%{opacity:0} +} +.faa-flash.animated, +.faa-flash.animated-hover:hover, +.faa-parent.animated-hover:hover > .faa-flash { + animation: flash 2s ease infinite; +} +.faa-flash.animated.faa-fast, +.faa-flash.animated-hover.faa-fast:hover, +.faa-parent.animated-hover:hover > .faa-flash.faa-fast { + animation: flash 1s ease infinite; +} +.faa-flash.animated.faa-slow, +.faa-flash.animated-hover.faa-slow:hover, +.faa-parent.animated-hover:hover > .faa-flash.faa-slow { + animation: flash 3s ease infinite; +} + +/* BOUNCE */ +@keyframes bounce { + 0%,10%,20%,50%,80%,100%{transform:translateY(0)} + 40%{transform:translateY(-15px)} + 60%{transform:translateY(-15px)} +} +.faa-bounce.animated, +.faa-bounce.animated-hover:hover, +.faa-parent.animated-hover:hover > .faa-bounce { + animation: bounce 2s ease infinite; +} +.faa-bounce.animated.faa-fast, +.faa-bounce.animated-hover.faa-fast:hover, +.faa-parent.animated-hover:hover > .faa-bounce.faa-fast { + animation: bounce 1s ease infinite; +} +.faa-bounce.animated.faa-slow, +.faa-bounce.animated-hover.faa-slow:hover, +.faa-parent.animated-hover:hover > .faa-bounce.faa-slow { + animation: bounce 3s ease infinite; +} + +/* SPIN */ +@keyframes spin{ + 0%{transform:rotate(0deg)} + 100%{transform:rotate(359deg)} +} +.faa-spin.animated, +.faa-spin.animated-hover:hover, +.faa-parent.animated-hover:hover > .faa-spin { + animation: spin 1.5s linear infinite; +} +.faa-spin.animated.faa-fast, +.faa-spin.animated-hover.faa-fast:hover, +.faa-parent.animated-hover:hover > .faa-spin.faa-fast { + animation: spin 0.7s linear infinite; +} +.faa-spin.animated.faa-slow, +.faa-spin.animated-hover.faa-slow:hover, +.faa-parent.animated-hover:hover > .faa-spin.faa-slow { + animation: spin 2.2s linear infinite; +} + +/* FLOAT */ +@keyframes float{ + 0%{transform: translateY(0)} + 50%{transform: translateY(-6px)} + 100%{transform: translateY(0)} +} +.faa-float.animated, +.faa-float.animated-hover:hover, +.faa-parent.animated-hover:hover > .faa-float { + animation: float 2s linear infinite; +} +.faa-float.animated.faa-fast, +.faa-float.animated-hover.faa-fast:hover, +.faa-parent.animated-hover:hover > .faa-float.faa-fast { + animation: float 1s linear infinite; +} +.faa-float.animated.faa-slow, +.faa-float.animated-hover.faa-slow:hover, +.faa-parent.animated-hover:hover > .faa-float.faa-slow { + animation: float 3s linear infinite; +} + +/* PULSE */ +@keyframes pulse { + 0% {transform: scale(1.1)} + 50% {transform: scale(0.8)} + 100% {transform: scale(1.1)} +} +.faa-pulse.animated, +.faa-pulse.animated-hover:hover, +.faa-parent.animated-hover:hover > .faa-pulse { + animation: pulse 2s linear infinite; +} +.faa-pulse.animated.faa-fast, +.faa-pulse.animated-hover.faa-fast:hover, +.faa-parent.animated-hover:hover > .faa-pulse.faa-fast { + animation: pulse 1s linear infinite; +} +.faa-pulse.animated.faa-slow, +.faa-pulse.animated-hover.faa-slow:hover, +.faa-parent.animated-hover:hover > .faa-pulse.faa-slow { + animation: pulse 3s linear infinite; +} + +/* SHAKE */ +.faa-shake.animated, +.faa-shake.animated-hover:hover, +.faa-parent.animated-hover:hover > .faa-shake { + animation: wrench 2.5s ease infinite; +} +.faa-shake.animated.faa-fast, +.faa-shake.animated-hover.faa-fast:hover, +.faa-parent.animated-hover:hover > .faa-shake.faa-fast { + animation: wrench 1.2s ease infinite; +} +.faa-shake.animated.faa-slow, +.faa-shake.animated-hover.faa-slow:hover, +.faa-parent.animated-hover:hover > .faa-shake.faa-slow { + animation: wrench 3.7s ease infinite; +} + +/* TADA */ +@keyframes tada { + 0% {transform: scale(1)} + 10%,20% {transform:scale(.9) rotate(-8deg);} + 30%,50%,70% {transform:scale(1.3) rotate(8deg)} + 40%,60% {transform:scale(1.3) rotate(-8deg)} + 80%,100% {transform:scale(1) rotate(0)} +} + +.faa-tada.animated, +.faa-tada.animated-hover:hover, +.faa-parent.animated-hover:hover > .faa-tada { + animation: tada 2s linear infinite; +} +.faa-tada.animated.faa-fast, +.faa-tada.animated-hover.faa-fast:hover, +.faa-parent.animated-hover:hover > .faa-tada.faa-fast { + animation: tada 1s linear infinite; +} +.faa-tada.animated.faa-slow, +.faa-tada.animated-hover.faa-slow:hover, +.faa-parent.animated-hover:hover > .faa-tada.faa-slow { + animation: tada 3s linear infinite; +} + +/* PASSING */ +@keyframes passing { + 0% {transform:translateX(-50%); opacity:0} + 50% {transform:translateX(0%); opacity:1} + 100% {transform:translateX(50%); opacity:0} +} + +.faa-passing.animated, +.faa-passing.animated-hover:hover, +.faa-parent.animated-hover:hover > .faa-passing { + animation: passing 2s linear infinite; +} +.faa-passing.animated.faa-fast, +.faa-passing.animated-hover.faa-fast:hover, +.faa-parent.animated-hover:hover > .faa-passing.faa-fast { + animation: passing 1s linear infinite; +} +.faa-passing.animated.faa-slow, +.faa-passing.animated-hover.faa-slow:hover, +.faa-parent.animated-hover:hover > .faa-passing.faa-slow { + animation: passing 3s linear infinite; +} + +/* PASSING REVERSE */ + +@keyframes passing-reverse { + 0% {transform:translateX(50%); opacity:0} + 50% {transform:translateX(0%); opacity:1} + 100% {transform:translateX(-50%); opacity:0} +} + +.faa-passing-reverse.animated, +.faa-passing-reverse.animated-hover:hover, +.faa-parent.animated-hover:hover > .faa-passing-reverse { + animation: passing-reverse 2s linear infinite; +} +.faa-passing-reverse.animated.faa-fast, +.faa-passing-reverse.animated-hover.faa-fast:hover, +.faa-parent.animated-hover:hover > .faa-passing-reverse.faa-fast { + animation: passing-reverse 1s linear infinite; +} +.faa-passing-reverse.animated.faa-slow, +.faa-passing-reverse.animated-hover.faa-slow:hover, +.faa-parent.animated-hover:hover > .faa-passing-reverse.faa-slow { + animation: passing-reverse 3s linear infinite; +} + +/* WAVE */ +@keyframes burst { + 0% {opacity:.6} + 50% {transform:scale(1.8);opacity:0} + 100%{opacity:0} +} +.faa-burst.animated, +.faa-burst.animated-hover:hover, +.faa-parent.animated-hover:hover > .faa-burst { + animation: burst 2s infinite linear +} +.faa-burst.animated.faa-fast, +.faa-burst.animated-hover.faa-fast:hover, +.faa-parent.animated-hover:hover > .faa-burst.faa-fast { + animation: burst 1s infinite linear +} +.faa-burst.animated.faa-slow, +.faa-burst.animated-hover.faa-slow:hover, +.faa-parent.animated-hover:hover > .faa-burst.faa-slow { + animation: burst 3s infinite linear +}