I went to the first protest in my city, it was unimaginable energy of unity and passion for change. All types of people from all kinds of walks of life and even some of those who didn't support the movement. None the less we marched with our faces covered and trying to keep our space since we were still trying to survive an unfamiliar illness. We cried out names of those we lost, we cried out chants of our hurt, we cried out our desire of change and we did it all peacefully together. Unfortunately, not everyone that stayed after the protest once ended had the same mindset. Our city experienced some vandalism but the next morning we came together again to clean up for those that decided to change their expression. We don't really know why there are some that took advantage of a movement crying out for equal treatment. Perhaps they had lost a father or a sister to police brutality? Perhaps it was to detour the message as terrorism? Perhaps it was just bad apples, but one will never really know. Regardless change is needed for the POC communities, reform is needed for our civil community workers, adding of correct departments for specific calls when the community is in need are all things we should want for our future. If not for yours then for your successors.
I hope this background makes you feel the same thing I feel, that Black Lives Matter. That once Black Lives Matter that all of us will matter. If one group is suffering then we shall all end up suffering. So let's not suffer, let us come together for a better day.
example {
7% {opacity: 0.1;}
80% {opacity: 1.0;}
100% {opacity: .1;}
}
/* background */
body{
background:url(https://media.giphy.com/media/kZnioLZNgD1zy7cLyj/giphy.gif);
p {
background-color: black;
font-family: "Times New Roman", Times, serif;
}
font-size: 15px;
color: rgb(255,255,255);
text-align: center;
}
/* border colors, font, font colors and details */
.blurbs, #top, #box, .box, #header, #hSub, button {
background-color: black;
color: white;
padding-right: 2px;
padding-left: 3px;
padding-top: 3px;
padding-bottom: 2px;
box-shadow: 1px 0 #d4d6d6,0 1px #d4d6d6,1px 1px #d4d6d6,inset 1px 1px #d4d6d6,0 0 150px 1px rgba(255,0,255,.5);
box-shadow: 1px 0 #d4d6d6, 0 1px #d4d6d6, 1px 1px #d4d6d6, inset 1px 1px #d4d6d6;
background-color: rgba(0,0,0,0.0);
border-right: 1px solid grey;
border-bottom: 1px solid grey;
color: #e0e0e0;
}
.rightHead, .boxHead {
background: linear-gradient(315deg,#282829 0,#eae8ed 100%);
color: #282829;
font-weight: none;
}
/*Friend Face codes*/
.fwiendFace {
background: url(https://media.giphy.com/media/XGDUeCKQ3PxKI0xQoj/giphy.gif) no-repeat;
height: 125px;
background-size: 120px;
background-position: center;
}
.fwiendFace img {
opacity: 0.1;
}
.url.box {
animation: bootAndClippy 3s steps(1) none;
animation-fill-mode: forwards;
}
/* Start http://www.cursors-4u.com */ * {cursor: url(https://ani.cursors-4u.net/symbols/sym-9/sym809.cur), auto !important;} /* End http://www.cursors-4u.com */
.logo b span {display: none;}
.logo b:before {content: "GravityBongRipsLLC";font-size:15px; color: white;}
div#header {
background: #D0E4F5 url(https://media.giphy.com/media/LqTWL4igVrGMPIRQmn/giphy.gif
) repeat-x fixed 50% 0%;
background-size: cover;
font-size: 15pt;
font-family: serif;
letter-spacing: 5px;
}
div#hSub {color: white; background-color: #000; background-image:url(https://media.giphy.com/media/5VqqDPfFsFV28/giphy.gif); font-family: Times New Roman}
.tableLeft {
background: #ffffff00;
background-image:url(https://media.giphy.com/media/5VqqDPfFsFV28/giphy.gif);
width: 25%;
padding: 10px;
vertical-align: top;
overflow: hidden;
border: 3px solid black;}
.tableRight {
width: 75%;
background: #ffffff00;
background-image:url(https://media.giphy.com/media/LkkNVOLOO36937aFHt/giphy.gif);
padding: 10px;
vertical-align: top;
overflow-wrap: anywhere;
}
/*
CSS caption changer
feel free to reuse this.
made with love by utf-16
*/
:root {
--_font-size: 15px;
/* blurbs */
--blurbs: "\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'s interesting stuff";
--blurbs-about: "info man:";
--blurbs-meet: "message for my fwiends:";
/* friend space */
--friends: "\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'s Fwiends man";
--friends-counter-prefix: "";
--friends-counter-suffix: " people to smoke with.";
--friends-counter-name-prefix: "";
--friends-counter-name-suffix: " definitely has ";
--friend-count-prefix: "like ";
--friend-count-suffix: "";
/* contact box */
--contact-prefix: "";
--contact-suffix: "s contact box";
--contact-block: "never see me again man";
--contact-report: "please dont report me man";
--contact-send-message: "hit me up man";
--contact-add-friend: "take a toke man";
/* myspace url */
--myspace-url: "My URL:";
/* song */
--song-prefix: "songs that i change often";
--song-suffix: "";
/* comment box */
--comment: "Leave a comment hunny!!";
/* note: because of css limitations, you cannot change the text of the "Send" button */
/* comment list */
--wall-username-prefix: "";
--wall-username-suffix: "";
}
.blurbs.box>.rightHead>b { font-size: 0 }
.blurbs.box>.rightHead>b>.uName { font-size: var(--_font-size); }
.blurbs.box>.rightHead>b::after { content: var(--blurbs); font-size: var(--_font-size); }
.blurbs.box > h4:nth-child(2) { font-size: 0 }
.blurbs.box > h4:nth-child(2)::before { content: var(--blurbs-about); font-size: var(--_font-size); margin-top: 19.95px; display: block; }
.blurbs.box > h4:nth-child(4) { font-size: 0 }
.blurbs.box > h4:nth-child(4)::before { content: var(--blurbs-meet); font-size: var(--_font-size); margin-top: 19.95px; display: block; }
#container > .topRight > .box:nth-child(3) > .rightHead > b { font-size: 0 }
#container > .topRight > .box:nth-child(3) > .rightHead > b > .uName { font-size: var(--_font-size) }
#container > .topRight > .box:nth-child(3) > .rightHead > b::after { content: var(--friends); font-size: var(--_font-size); }
.fwiendCounter > b { font-size: 0 }
.fwiendCounter > b::before,
.fwiendCounter > b::after,
.fwiendCounter > b > .uName,
.fwiendCounter > b > .fwiendCount { font-size: var(--_font-size); }
.fwiendCounter > b::before { content: var(--friends-counter-prefix) }
.fwiendCounter > b::after { content: var(--friends-counter-suffix) }
.fwiendCounter > b > .uName::before { content: var(--friends-counter-name-prefix) }
.fwiendCounter > b > .uName::after { content: var(--friends-counter-name-suffix) }
.fwiendCounter > b > .fwiendCount::before { content: var(--friend-count-prefix) }
.fwiendCounter > b > .fwiendCount::after { content: var(--friend-count-suffix) }
.boxInfo > .boxHead > b, #block, #report, #sMsg, #add { font-size: 0 }
.boxInfo > .boxHead > b::before,
.boxInfo > .boxHead > b::after,
.boxInfo > .boxHead > b > .uName { font-size: var(--_font-size) }
.boxInfo > .boxHead > b::before { content: var(--contact-prefix); font-size: var(--_font-size) }
.boxInfo > .boxHead > b::after { content: var(--contact-suffix); font-size: var(--_font-size) }
#block::before, #report::before, #sMsg::before, #add::before { font-size: small }
#block::before { content: var(--contact-block) }
#report::before { content: var(--contact-report) }
#sMsg::before { content: var(--contact-send-message) }
#add::before { content: var(--contact-add-friend) }
.url.box > div:first-child > b { font-size: 0 }
.url.box > div:first-child > b::before { content: var(--myspace-url); font-size: var(--_font-size) }
.songName > b { font-size: 0 }
.songName > b::before { font-size: small; content: var(--song-prefix) }
.songName::after { content: var(--song-suffix) }
#userWall td.tableLeft > a > div > b::before { content: var(--wall-username-prefix) }
#userWall td.tableLeft > a > div > b::after { content: var(--wall-username-suffix) }
img:hover {
/* Start the shake animation and make the animation last for 0.5 seconds */
animation: shake 2.0s;
/* When the animation is finished, start again */
animation-iteration-count: infinite;
}
@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
Comments
Post a Comment