We Keep Coding

Fixed Headers and Section Anchors with bootstrap

I swear I have tried everything that I can think of to solve this issue. I have a fixed bootstrap navbar, using a javascript onscroll event listener to apply the fixed attribute...I tried using style in the markup, but it did not have the desired effect. So of course this is a repetitive issue, but I have tried all the recommendations and then some. At least all that I could find. The problem is that when I use any #about internal link, the content falls beneath the navbar. I have tried margins, absolute, relative, top -...px on .section2. None of it worked.
And please I am new to this, so any solutions, please make it specific to my code and not just add a position to the anchor. Give me the exact class/id and what to add, or remove, or both.
here is a link to the live page to see what happens when you click any link for #about section: portfolio #about
https://kingdomb.github.io/live_portfolio/#about
NOTE: The code below does not give display the error properly so use the link above.
UPDATE: 3/22 02:16
I managed to find this:
Come on guys!
This have a very simple solution, create your ancho like this:
<div style="margin: -50px 0px 50px 0px; position: absolute;">
<a id="myanchor"></a>
</div>
With -50px margin what i make is upper the anchor div, and with 50px margin, i push down the next content. You only have to make your test with your custom margins.
Works like a charm. I use this trick in all one page design websites.
BUT, now one click on the about link in the navbar to #myanchor gives me this:
And if I click the exact same navbar link I get a minor adjustment to this:
THANKS!!!
// When the user scrolls the page, execute myFunction
window.onscroll = function() {
myFunction();
myFunction2();
};
// Get the navbar
var navbar = document.getElementById("navbar");
// Get the offset position of the navbar
var sticky = navbar.offsetTop;
// Add the sticky class to the navbar when you reach its scroll
position.Remove "sticky"
when you leave the scroll position
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky");
} else {
navbar.classList.remove("sticky");
}
}
// Get the logo
var logo = document.getElementById("logo");
// Get the offset position of the logo
var logoSpin = logo.offsetTop;
// Add the logo-spin class to the navbar when you reach its scroll
position.Remove "logo-spin"
when you leave the scroll position
function myFunction2() {
if (window.pageYOffset >= logoSpin) {
logo.classList.add("logo-spin");
} else {
logo.classList.remove("logo-spin");
}
}
// All links will have a target:__blank for external page linking
// Read more: https://html.com/attributes/a-target/#ixzz6GMsDfQEr
// jQuery(document.links)
// .filter(function() {
// return this.hostname != window.location.hostname;
// })
// .attr("target", "_blank");
//OR Read more: https://html.com/attributes/a-target/#ixzz6GN6pd1Qt
function externalLinks() {
for (var c = document.getElementsByTagName("a"), a = 0; a <
c.length; a++) {
var b = c[a];
b.getAttribute("href") &&
b.hostname !== location.hostname &&
(b.target = "_blank");
}
}
externalLinks();
html,
body {
background-color: #E3E3E3;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
/* HOME */
.section1 {
background: url("../images/laptop-table1920-gray.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size: cover;
background-attachment: scroll;
width: 100%;
height: 100%;
}
.section1 .container {
background-color: rgb(0, 0, 0, 0.65);
min-height: -webkit-fill-available;
min-width: -webkit-fill-available;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.home-btn {
background-color: transparent;
font-weight: 500;
border-color: #8e0000;
border-radius: 3px;
color: #8e0000;
margin-top: 35px;
font-size: 1.12em;
transform: translate(-50%, -50%);
position: absolute;
text-shadow: .1px .8px 1px black;
-webkit-filter: drop-shadow(0px 3px 10px rgba(0, 0, 0, .8));
filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, .8));
}
/* hover styling required !important */
.home-btn:hover {
color: #8e0000 !important;
border-color: #8e0000;
font-size: 1.4em;
border-width: 3px;
font-weight: 600;
text-shadow: .1px 2px 1px black;
-webkit-filter: drop-shadow(0px 3px 10px rgba(0, 0, 0, .8));
filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, .8));
}
.intro {
color: white;
font-size: 2.74em;
text-shadow: .1px .8px 1px black;
}
.highlight {
color: #8e0000;
text-shadow: .1px .8px 1px black;
}
/* NAVIGATION */
.logo {
display: inline-flex;
flex-direction: row;
-webkit-filter: drop-shadow(0px 3px 10px rgba(0, 0, 0, .8));
filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, .8));
}
.navbar-brand {
margin: 0px;
padding: 0px 0px !important;
}
.logo-wrapper {
color: white;
font-size: 1.4em;
font-family: 'Raleway', sans-serif;
text-shadow: .1px 2px 1px black;
}
.logo-spin {
-webkit-animation: spin 1s;
animation: spin 3s;
animation-iteration-count: 1;
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotateY(360deg);
}
100% {
-webkit-transform: rotateY(-360deg);
}
}
#keyframes spin {
from {
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
}
to {
-moz-transform: rotateY(-360deg);
-ms-transform: rotateY(-360deg);
transform: rotateY(-360deg);
}
}
.navbar {
background-color: #333;
height: 65px;
border-bottom: 6px solid #212529;
border-top: 6px solid #212529;
}
#navbar {
z-index: 9999;
}
.navbar-text {
vertical-align: middle;
margin-left: 200px;
height: inherit;
}
#media only screen and (max-width: 860px) {
.navbar-text {
display: inline-block;
align-items: center;
margin-left: 30px;
}
}
#navbar a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 0px 30px;
text-decoration: none;
font-size: 1.2em;
font-family: 'Raleway', sans-serif;
text-shadow: .1px 1px 1px black;
}
/* ABOUT */
#about {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size: cover;
width: 100%;
height: 100%;
text-shadow: .1px .8px 1px black;
position: relative;
height: -65px;
margin-top: 200px;
}
/* .section2 {
position: absolute;
width: 100%;
} */
.section2 .row {
background: url("../images/improved-teamwork-and-
collaboration_1887x741.jpg") center center no-repeat;
height: 100%;
width: 100%;
margin-left: 0px;
margin-right: 0px;
border-radius: 0%;
}
.section2 .card {
background-color: RGBA(33, 37, 41, .80);
color: white;
min-height: -webkit-fill-available;
height: 100%;
}
.section2 .card-block {
font-weight: 520;
width: 50%;
margin: 0 auto;
font-size: 25px;
line-height: 50px;
padding: 60px;
}
.section2 a {
color: #9b0000;
-webkit-filter: drop-shadow(.1px .8px 2px rgba(0, 0, 0, .8));
filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, .8));
}
.section2 .card-block {
z-index: 8000;
padding-right: 200px;
padding-left: 0px;
margin-left: 100px;
}
.section2 a:hover,
.section2 #skills:hover,
.section2 #projects:hover {
text-decoration: underline;
}
.section2 .btn {
border-color: #8e0000;
border-radius: 13px;
border-width: 3px;
font-weight: 500;
font-size: 0.8em;
transition: color 0.15s ease-in-out, background-color 0.15s ease- in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in- out;
}
.section2 .btn:hover {
background-color: #8e0000;
color: #212529;
text-decoration: none;
}
#about {
margin-bottom: 75px;
}
<!doctype html>
<html lang="en">
<head>
</head>
<body>
<!-- HOME -->
<section id="home" class="section1">
<div class='container'>
<div class="row justify-content-center">
<div class="col-md-12 col-sm-12">
<p class='intro'>
Hello, my name is <span class="highlight animated fadeIn" style="animation-delay: 1s; animation-duration:
1.8s">King</span>.
<br>
<div class="intro animated fadeInLeft" style="animation-
delay: 3s; animation- duration: 2s">And I'm a full- stack web developer.</div>
<a href="#myanchor"><button type="button" class="home-btn
btn btn-primary-outline btn-xs animated fadeIn"
style="animation-delay: 5s; animation-duration:
2s">VIEW MY WORK</button></a>
</p>
</div>
</div>
</div>
</section>
<!-- NAVIGATION -->
<div id="navbar">
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="container">
<div class="logo-wrapper nav-item active">
<div class="logo" id="logo">
<a class="navbar-brand" href="#home"><img src="favicon.ico" alt="King's Brand Logo"></a>
</div>
<span class="brand" id="brand" style="animation-delay: 0s;
animation-duration: 3s">KING MAJOR</span>
</div>
<button class="navbar-toggler" type="button" data- toggle="collapse" data- target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#myanchor">ABOUT
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#skills">SKILLS
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#projects">PROJECTS
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">CONTACT
<span class="sr-only">(current)</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<!-- ABOUT -->
<div class="blank" style="margin: -65px 0px 200px 0px; position:
absolute;">
<a id="myanchor"></a>
</div>
<section id="about" class="section2">
<div class="row-fluid">
<div class="row">
<div class="card ">
<div class="card-block">
<div class="card-title">
<h1>Welcome, let's talk!</h1>
</div>
<div id="container">
<p> I started independent web development two years ago, and haven't looked back. A couple of things I love about coding are those moments when tough projects are complete, or discovering a solution to a difficult problem. Take a look at my
skills, and some of my recent
projects. THANKS!
</p>
<a href="General_Resume.pdf" class="btn btn-outline-
primary" target="__blank">Print My Resume
</a>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>

The reason you are having this issue is that the .section2 section it looks like you have a margin-top: 200px. Therefore creating that space. Now you can just adjust accordingly.
I would be careful when using margins. Using them only if you have to. I rarely use it, only for minor tweaks and responsiveness. If you are styling correct there should be no use for margins. I would take a look into using Flexbox. This is super useful when creating nice functional layouts. It's a great starter for new people too. The sooner you get into it, the easier layouts will be for you.
I also noticed that you are using javascript to add external links that open in a new page. To do that an easier way is to do something like this <a href="someoutsidelink.com" target="_blank">. Here is a reference, w3schools
As for your navbar fixed, here is some code that you should use instead of the one you have now.
var elementPosition = $("#navbar").offset();
$(window).scroll(function() {
if ($(window).scrollTop() > elementPosition.top) {
$("#navbar")
.css("position", "fixed")
.css("top", "0");
} else {
$("#navbar").css("position", "static");
}
});
Edit One:
Here's one way to do this one is adding a blank <div class="blank"> tags. Place it on top of the <section class="section2"> opening tag. then add a height: 200px; width: 100% therefore creating that space.

I found a solution! I refactored the code in the ABOUT section to this:
<!-- ABOUT -->
<div class="blank" style="position: absolute">
<a id="myanchor"></a>
</div>
<section id="about" class="section2">
<div class="row-fluid">
<div class="row">
<div class="card ">
<div class="card-block">
<div class="card-title">
<h1>Welcome, let's talk!</h1>
</div>
<div id="container">
<p> I started independent web development two years ago, and haven't looked back. A couple of things I love about coding are those moments when tough projects are complete, or discovering a solution to a difficult problem. Take a look at my
skills, and some of my recent projects. THANKS!
</p>
Print My Resume
</div>
</div>
</div>
</div>
</div>
</section>
Notice that I removed the opening div margin html styling.

Responsive navigation disrupting other code elements

At max-width:37.em, the nav styled under a hamburger is opened automatically and I'd rather it be closed than open when scaled to size.
It also lets the underlying menu show underneath it (div.gallery with clickable radio buttons/labels), and I'd rather the nav slide everything below it down once open.
Here is the HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon"
type="image/png"
href="mpicon.png">
<title>The Marshall Project | About Us</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<link href="about.css" rel='stylesheet' type='text/css' />
<!-- javascript -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<header>
<section id="space">
<section id="screen1">
<h1>About Us</h1>
</section>
<!-- navigation -->
<nav class="navigation-bar">
<img class="logo" src="mplogo.png" width="200" height="27">
<a class="burger-nav"></a>
<ul class="open">
<li>ABOUT</li>
<li>EUROPEAN TUNE</li>
<li>FINANCIAL</li>
<li>SUPPORT</li>
</ul>
</nav>
</section>
<!-- javascript -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(window).bind('scroll', function() {
var navHeight = $( window ).height() - 65;
if ($(window).scrollTop() > navHeight) {
$('nav').addClass('fixed');
}
else {
$('nav').removeClass('fixed');
}
});
});
</script>
</header>
<div class="sticky">
<div id="intro">
<i>
Investigative reporting is at the core of what we do. </i>
<div class="gallery">
<label for="raz0" title="0">ABOUT US</label>
<label for="raz1" title="1">MESSAGE FROM THE PRESIDENT</label>
<label for="raz2" title="2">WHY THE MARSHALL PROJECT?</label>
<label for="raz3" title="3">OUR TEAM</label>
<label for="raz4" title="4">CONTACT US</label>
</div>
</div>
</div>
<!-- info -->
<input type="radio" checked="checked" name="raz" id="raz0" />
<input type="radio" name="raz" id="raz1" />
<input type="radio" name="raz" id="raz2" />
<input type="radio" name="raz" id="raz3" />
<input type="radio" name="raz" id="raz4" />
<div id="contentdiv0">
<h3>ABOUT US</h3>
<p id="content0">
<img src="citizen.png" style="width: 85%; height: 85%;">
<br>
<br>
<b style="font-size: 1em;">THE MARSHALL PROJECT</b> is a nonpartisan, nonprofit news
organization that seeks to create and sustain a sense of national urgency about the U.S. criminal justice system.
<br>
<br>
We achieve this through award-winning journalism, partnerships with other news outlets and public forums. In all of our work we strive to educate and enlarge the audience of people who care about the state of criminal justice. Our reporters dive into stories that other media have missed or misunderstood. <br>
<br>
We often spend months interviewing sources, digging through documents, filing Freedom of Information Act requests, and visiting jails, prisons, courtrooms, and police stations around the United States.
<br>
<br>
We keep a close eye on breaking criminal justice news, looking for opportunities to provide context or analysis. Since our launch in November 2014, we have published a steady stream of stories, including profiles, interviews, commentaries, and first-person narratives.
</p>
</div>
<div id="contentdiv">
<h3 style="margin-bottom: -20px;">MESSAGE FROM THE PRESIDENT</h3>
<p id="content">
<i style="line-height: 25px;">
<br>The American criminal justice system is in crisis. The statistics tell the story. Even in the bitterly divided world of American politics, both liberals and conservatives have vowed their commitment to reform. Achieving it will require hard work: from advocates, criminal justice experts, law enforcement, the judiciary, and yes, good and skillful politicians.</i>
<br>
<br>
<img src="president.png" style="width: 85%; height: 85%;">
<br>
<br>
<b font-size: 1em;>IT WILL TAKE GREAT JOURNALISM. </b>
<br>
No social problems has ever been solved without shining a light into some dark corners. That’s what The Marshall Project was born to do. In just two years, we’ve published approximately 650 criminal justice stories and worked with a diverse range of media partners.
<br>
<br>
We’ve had an amazing launch. In our first year, President Barack Obama granted us an exclusive interview. By 18 months, we’d won our first Pulitzer. We’ve prompted federal investigations, informed a Supreme Court opinion, helped improve police training, and gotten cameras installed in a prison where abuse was rampant. Along the way, we’ve told fresh and important stories and given voice to Americans who were not being heard in our national conversation.
<br>
<br>
<b>We both come to this issue with hopeful hearts. </b>
<br>
Neil, a former reporter and hedge fund manager, launched The Marshall Project based on his belief that the criminal justice system is a national disgrace and high-quality journalism could help elevate the issue. Carroll, once a foreign correspondent for Newsweek, spent nearly two decades at Human Rights Watch before feeling impelled to focus on America’s biggest human rights problem: criminal justice. We’re proud to work with one of the country’s preeminent journalists, our Editor-in-Chief Bill Keller, in leading The Marshall Project.
Our aim is to create and sustain a sense of urgency about criminal justice.
We hope you will find a way to help.
</p>
</div>
<div id="contentdiv2">
<h3>WHY THE MARSHALL PROJECT?</h3>
<p id="content2"><i style="line-height: 25px;">If Marshall were alive, I have no doubt that he would place criminal justice reform high among the urgent priorities of today’s civil rights movement, and that his would be a powerful voice for change. It is for these reasons that I chose to name The Marshall Project in his honor.
<br>
— Neil Barsky, founder of The Marshall Project</i>
<br>
<br>
<img src="thurgood.png" style="width: 85%; height: 85%;">
<br>
<br>
<b style="font-size: 1em;">THURGOOD MARSHALL IS AN AMERICAN HERO.</b>
His work as a lawyer for the NAACP Legal Defense Fund, including the landmark Brown vs. Board of Education decision, laid the groundwork for the modern U.S. civil rights movement. As the first African-American justice of the U.S. Supreme Court, he was a persuasive advocate for a living and breathing Constitution that sees beyond the prejudices of revolutionary America.
<br>
<br>
Thurgood Marshall (1908-1993) was a towering figure in the civil rights movement and the first African American justice to serve on the United States Supreme Court. Before joining the court in 1967, he worked as a civil rights lawyer, famously criss-crossing the South on behalf of black clients who were facing Jim Crow justice from white police officials, prosecutors, judges and juries. In 1940, at age 32, he founded the NAACP Legal Defense and Education Fund and served as an executive there for two decades. He and his colleagues won a series of Supreme Court victories that gradually eroded the "separate but equal" doctrine, the legal underpinning of segregation in America. The most famous of those cases was Brown v. Board of Education, the landmark 1954 decision that declared unconstitutional segregation in the nation's public schools.
<br>
<br>
Marshall served on the Supreme Court for 24 years until his retirement at the end of the 1991 term. During his tenure, he was known for his strong support of First Amendment principles and was a reliable vote against the death penalty, even though he often said he was personally not opposed to capital punishment. He frequently sided with his fellow Warren Court jurists in seeking to protect and expand the constitutional rights of citizens charged with crimes, and he became a frequent dissenter during his later years as the Court moved rightward. The leader of that conservative shift, Chief Justice William Rehnquist, spoke at Marshall's funeral in 1993:
“As a result of his career as a lawyer and as a judge, Thurgood Marshall left an indelible mark, not just upon the law, but upon his country. Inscribed above the front entrance to the Supreme Court building are the words ‘Equal justice under law.’ Surely no one individual did more to make these words a reality than Thurgood Marshall.”
</p>
</div>
<div id="contentdiv3">
<h3>OUR TEAM</h3>
<p id="content3">The Marshall Project is a nonprofit news organization covering the U.S. criminal justice system. Our team draws together seasoned investigative journalists, veteran crime reporters, innovative digital producers, and experienced news editors.
<br>
<br>
Neil Barsky <i>Founder & Chairman</i><br>
Bill Keller <i>Editor-in-Chief</i><br>
Carroll Bogert <i>President</i><br>
<br>
<b>EDITORIAL</b>
<br>
Kirsten Danis <i>Managing Editor</i><br>
Andrew Cohen <i>Senior Editor</i><br>
Tom Meagher <i>Deputy Managing Editor</i><br>
Geraldine Sealey <i>Features Editor</i><br>
Maurice Chammah <i>Staff Writer</i><br>
Tatiana Craine <i>Social Media Editor</i><br>
Taylor Eldridge <i>Investigative Fellow</i><br>
Celina Fang <i>Multimedia Editor</i><br>
Anna Flagg <i>Interactive Reporter</i><br>
John Carlos Frey <i>Special Correspondent</i><br>
Justin George <i>Washington, D.C. Correspondent</i><br>
Eli Hager <i>Staff Writer</i><br>
Gabe Isman <i>Director of Technology</i><br>
Nicole Lewis <i>Tow Reporting Fellow</i><br>
Yolanda Martinez <i>Web Producer</i><br>
Joseph Neff <i>Staff Writer</i><br>
Alysia Santo <i>Staff Writer</i><br>
Beth Schwartzapfel <i>Staff Writer</i><br>
Alex Tatusian <i>Editorial Designer</i><br>
Christie Thompson <i>Staff Writer</i><br>
Abbie Vansickle <i>Staff Writer</i><br>
Manuel Villa <i>Data Reporting Fellow</i><br>
Simone Weichselbaum <i>Data Reporting Fellow</i><br>
</p>
</div>
<div id="contentdiv4">
<h3>CONTACT US</h3>
<p id="content4">
<img id="feyes" src="feyes.png" style="width: 85%; height: 85%;">
<br>
<b>General Inquiries</b><br>
Inquiries can be addressed to <br>info#themarshallproject.org
<br>or mailed to
<br>
The Marshall Project<br>
156 West 56th Street, Suite 701<br>
New York, NY 10019<br>
212-803-5200<br>
<br>
<b>Story Ideas and Tips</b><br>
To pitch a story idea to our editors, please email<br>
pitches#themarshallproject.org.
<br>
To pitch opinions, essays, analysis or other commentary pieces, please email<br>
commentary#themarshallproject.org.
<br>
<br>
<b>Media Inqueries</b>
<br>
All media and interview requests should contact Ruth Baldwin, director of communications at
<br>rbaldwin#themarshallproject.org
<br>or 212-803-5270.
<br>
<br>
<b>themarshallproject.org</b></p>
</div>
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="menu.js"></script>
</body>
</html>
Here is the CSS
/* split sides (for content) and navigation */
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
/* configuring support of HTML5 */
header, main, nav, footer, figure, figcaption, aside, section, article {
display: block;
}
/* general body styles */
body {
font-family: Franklin Gothic, Arial, sans-serif;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
#intro {
position: -webkit-sticky;
position: sticky;
top: 100px;
margin-left: 50px;
margin-top: 100px;
margin-bottom: -30px;
padding-right: 12px;
line-height: 22px;
width: 75%;
text-align: left;
}
i {
font-family: Georgia, serif;
}
p {
line-height: 22.5px;
}
/* header */
h1 {
color: #E1E000;
font-size: 4em;
margin: auto;
padding-left: 50px;
padding-top: 50px;
position: relative;
}
h2 {
font-size: 1.25em;
margin-left: 50px;
width: 78%;
color: black;
}
h3 {
/*background-color: white;*/
visibility: hidden;
opacity: 0;
color: #E1E000;
letter-spacing: 2px;
}
/* top image */
#screen1 {
background-image: url(about.png);
background-size: cover;
max-width:100%;
height:730px;
position: inherit;
}
/* navigation styles */
.fixed {
position: fixed;
top: 0;
height: 70px;
z-index: 1;
}
nav {
top: 0;
width: 100%;
background: #fff;
display: inline-block;
z-index: 1;
padding: 25px 25px 15px 25px;
}
nav ul {
float: right;
margin-top: 1px;
z-index: 1;
}
nav li {
display: inline;
z-index: 1;
padding: 10px;
}
nav li a:hover {
color: #E1E000;
z-index: 1;
}
li {
list-style-type: none;
}
a {
text-decoration: none;
color: black;
}
a:hover {
color: #E1E000;
text-decoration: line-through;
}
div.sticky {
width: 25%;
float: left;
margin: 0;
position: -webkit-sticky;
position: sticky;
top: 20px;
height: 1420px;
background-color: #E1E000;
}
#contentdiv0, #contentdiv, #contentdiv2, #contentdiv3, #contentdiv4, #contentdiv5{
position: absolute;
width: 35%;
margin-left: 500px;
margin-top: 75px;
}
#contentdiv0 a {
color: black;
}
#contentdiv0 a:hover {
color: #E1E000;
cursor: pointer;
}
#content0, #content, #content2, #content3, #content4, #content5{
/*background-color: white;*/
visibility: hidden;
opacity: 0;
}
/*clickable gallery*/
input[name="raz"] {
display: none;
}
div.gallery {
position: absolute;
top: 145%;
padding: 0;
width: 200px;
background: no-repeat 50% 0;
background-size: auto 100%;
}
div.gallery label {
display: inline-block;
width: 300px;
height: 20px;
background: no-repeat 50% 50%;
background-size: calc(100% - 5px) calc(100% - 5px);
margin: 5px;
cursor: pointer;
}
.gallery label:hover {
text-decoration: line-through;
color: white;
transition: background 0.3s ease-in;
}
#raz0:checked ~ #contentdiv0 h3 {
visibility: visible;
opacity: 1;
transition: .5s ease-in;
}
#raz1:checked ~ #contentdiv h3 {
visibility: visible;
opacity: 1;
transition: .5s ease-in;
}
#raz2:checked ~ #contentdiv2 h3 {
visibility: visible;
opacity: 1;
transition: .5s ease-in;
}
#raz3:checked ~ #contentdiv3 h3 {
visibility: visible;
opacity: 1;
transition: .5s ease-in;
}
#raz4:checked ~ #contentdiv4 h3 {
visibility: visible;
opacity: 1;
transition: .5s ease-in;
}
#raz5:checked ~ #contentdiv5 h3 {
visibility: visible;
opacity: 1;
transition: .5s ease-in;
}
#raz0:checked ~ #contentdiv0 p {
visibility: visible;
opacity: 1;
transition: .5s ease-in;
}
#raz1:checked ~ #contentdiv p {
visibility: visible;
opacity: 1;
transition: .5s ease-in;
}
#raz2:checked ~ #contentdiv2 p {
visibility: visible;
opacity: 1;
transition: .5s ease-in;
}
#raz3:checked ~ #contentdiv3 p {
visibility: visible;
opacity: 1;
transition: .5s ease-in;
}
#raz4:checked ~ #contentdiv4 p {
visibility: visible;
opacity: 1;
transition: .5s ease-in;
}
#raz5:checked ~ #contentdiv5 p {
visibility: visible;
opacity: 1;
transition: .5s ease-in;
}
/* beginning of media queries - tablet display */
#media only screen and (max-width: 64em){
}
/* smartphone display */
#media only screen and (max-width: 37.5em) {
*{
height: auto;
}
.logo {
margin-top: 20px;
margin-left: 20px;
width: 50;
height: 6.75;
display: block;
}
.burger-nav {
margin-top: -80px;
display: inline-block;
height: 60px;
width: 100%;
background: url(nav.png) no-repeat 98% center;
background-color: none;
cursor: pointer;
padding: 0;
}
header {
padding-bottom: 0;
}
header .navigation-bar {
width: 100%;
padding: 0;
height: 70px;
z-index: 1;
}
header nav ul {
height: 0;
overflow: hidden;
background: #fff;
width: 100%;
padding: 0;
margin: 0;
z-index: 1;
}
header nav ul.open {
height: auto;
z-index: 1;
margin-bottom: 10px;
}
header nav ul li {
float: none;
text-align: left;
width: 100%;
margin: 0;
z-index: 1;
}
header nav li a {
color: black;
padding: 10px;
border-bottom: 1px solid #e1e000;
display: block;
margin: 0;
z-index: 1;
}
#screen1 {
position: relative;
height: 300px;
}
mobile {
display: inline;
}
div.sticky {
clear:both;
width: 100%;
min-height: 13px;
height: auto;
position: inherit;
margin-bottom: 20px;
}
#intro {
font-size: 15px;
margin: auto;
padding: 15px;
width: 90%;
max-width: 100%;
min-height: 250px;
overflow: hidden;
position: inherit;
}
#contentdiv0, #contentdiv0, #contentdiv, #contentdiv2, #contentdiv3, #contentdiv4 {
visibility: visible;
position: absolute;
margin: auto;
margin-top: 250px;
margin-left: 30px;
width: 80%;
}
#contentdiv0, #contentdiv0, #contentdiv, #contentdiv2, #contentdiv3, #contentdiv4 h2{
position: absolute;
text-align: left;
margin: auto;
padding: auto;
font-size: 3em;
margin-top: 250px;
margin-bottom: -15px;
}
#contentdiv0, #contentdiv0, #contentdiv, #contentdiv2, #contentdiv3, #contentdiv4 p {
text-align: left;
margin-top: 250px;
margin-bottom: 30px;
}
#contentdiv0, #contentdiv0, #contentdiv, #contentdiv2, #contentdiv3, #contentdiv4 h3 {
font-size: 1em;
width: 100%;
text-align: left;
margin-top: 250px;
padding: 10px;
margin-left: 15px;
}
h1 {
font-size: 3em;
width: 100%;
margin: auto;
top: 100px;
}
div.gallery {
top: 55%;
padding: 5px;
width: 300px;
background: no-repeat 50% 0;
background-size: auto 100%;
}
div.gallery label {
display: inline-block;
width: 300px;
height: 20px;
background: no-repeat 50% 50%;
background-size: calc(100% - 5px) calc(100% - 5px);
margin: 5px;
margin-left: -5px;
cursor: pointer;
}
.gallery label:hover {
text-decoration: line-through;
color: white;
transition: background 0.3s ease-in;
}
}
and here is the external JS
$(document).ready(function() {
$(".burger-nav").on("click", function() {
$("header nav ul").toggleClass("open");
})
})

For starters, you've included jquery 3 times in the html, you might want to remove all but the last one near the foot of your html. It's best to load script tags at the end of your markup.
Also, its good practice to use css classes to target your markup, instead of using style tags directly.

fade in and fade out div onclick with jQuery

I have a div on left and right of the page. Currently the div on the right is being hidden.
I'm trying to use jQuery to fadeout the div that is currently being displayed and replace it by fading in the hidden div.
What am I doing wrong? I followed the example on this similar question.
It should happen when you click the About link in the code snippet:
$("a").on('click', function() {
$("#feed-show").fadeIn();
$(".feed").fadeOut();
});
a {
color: rgba(255, 80, 70, 1) !important;
text-decoration: none;
}
.nav a {
font-size: 13px;
color: rgba(255, 80, 70, 1);
text-decoration: none;
font-weight: bold;
}
/* Content ---------------------*/
/* nav */
.nav {
position: fixed;
float: left;
width: 96%;
left: 2%;
margin-left: -2px;
border-bottom: 2px solid rgba(255, 80, 70, 1);
padding-bottom: 18px;
background: white;
z-index: 999;
top: 0px;
padding-top: 18px;
}
.c1 {
max-width: 24%;
}
.column {
position: relative;
float: left;
padding-right: 1%;
width: 585px;
}
/* feed */
.feed {
width: 96%;
left: 2%;
margin-top: 75px;
padding-left: 2px;
}
.c2 {
max-width: 49%;
}
.feed-item {
position: relative;
width: 100%;
height: auto;
padding-bottom: 25px;
padding-top: 2.5%;
}
.feed-show {
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
<div class="column c1">
About
</div>
</div>
<div id="feed" class="feed" style="margin-top: 54px;">
<div class="column c2">
<p>
Creatives of Colour (C-oC) is an independent directory that provides you with up to date information on current, and future work of creatives of colour being showcased in the UK. C-oC aims to contribute to the necessary exaltation of talented artists
within the various ethnic minorities within the UK.
</p>
<p>
Find out more about Creatives of Colour..
</p>
</div>
<!-- Show on click -->
<div id="feed-show" class="feed-show" style="margin-top: 54px;">
<div class="column c2">
<p>
Creatives of Colour (C-oC) is an independent directory that provides you with up to date information on current, and future work of creatives of colour being showcased in the UK.
</p>
<p>
Find out more about Creatives of Colour..
</p>
</div>
</div>
Here is a codepen
Many thanks!

I have maded some modifications to your code:
I have changed position:absolute to keep hidden #feed-show with display:none
I have changed inside click function fadeIn to be executed when fadeOut is finish to avoid strange moving effect
$(document).ready(function(){
$("#feed-show").fadeOut(0);
$("a").on('click', function() {
$(".feed").fadeOut(1000,function(){
$("#feed-show").fadeIn(1000);
});
});
});
a {
color: rgba(255,80,70,1) !important ;
text-decoration: none;
}
.nav a {
font-size: 13px;
color: rgba(255,80,70,1);
text-decoration: none;
font-weight: bold;
}
/* Content ---------------------*/
/* nav */
.nav {
position: fixed;
float:left;
width: 96%;
left: 2%;
margin-left: -2px;
border-bottom: 2px solid rgba(255,80,70,1);
padding-bottom: 18px;
background: white;
z-index: 999;
top: 0px;
padding-top: 18px;
}
.c1 {
max-width: 24%;
}
.column {
position: relative;
float:left;
padding-right: 1%;
width: 585px;
}
/* feed */
.feed {
width: 96%;
left: 2%;
margin-top: 75px;
padding-left: 2px;
}
.c2 {
max-width: 49%;
}
.feed-item {
position: relative;
width: 100%;
height: auto;
padding-bottom: 25px;
padding-top:2.5%;
}
#feed-show{
display:none;
}
#feed-show p{
background:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
<div class="column c1">
About
</div>
</div>
<div id="container">
<div id="feed" class="feed" style="margin-top: 54px;">
<div class="column c2">
<p>
Creatives of Colour (C-oC) is an independent directory
that provides you with up to date information on
current, and future work of creatives of colour
being showcased in the UK. C-oC aims to contribute to the
necessary exaltation of talented artists within the various
ethnic minorities within the UK.
</p>
<p>
Find out more about Creatives of Colour..
</p>
</div>
</div>
<!-- Show on click -->
<div id="feed-show" class="feed-show" style="margin-top: 54px;">
<div class="column c2">
<p>
OCULT TEXT
Creatives of Colour (C-oC) is an independent directory
that provides you with up to date information on
current, and future work of creatives of colour
being showcased in the UK.
</p>
<p>
Find out more about Creatives of Colour..
</p>
</div>
</div>
</div>

You have some problems on your code.
First, your feed-show div is inside your feed div. So if you fadeOut() your feed div, everything inside will be hidden.
And second, in your CSS you have absolute position and top and left properties set for your feed-show, so even if you fadeIn() that element, you're not gonna be able to see it.
I've made a couple of changes on your code, so you can see how one div is fade out and the other one is fade in.
Cheers!
$("a").on('click', function() {
$("#feed-show").fadeIn();
$(".feed").fadeOut();
});
a {
color: rgba(255,80,70,1) !important ;
text-decoration: none;
}
.nav a {
font-size: 13px;
color: rgba(255,80,70,1);
text-decoration: none;
font-weight: bold;
}
/* Content ---------------------*/
/* nav */
.nav {
position: fixed;
float:left;
width: 96%;
left: 2%;
margin-left: -2px;
border-bottom: 2px solid rgba(255,80,70,1);
padding-bottom: 18px;
background: white;
z-index: 999;
top: 0px;
padding-top: 18px;
}
.c1 {
max-width: 24%;
}
.column {
position: relative;
float:left;
padding-right: 1%;
width: 585px;
}
/* feed */
.feed {
width: 96%;
left: 2%;
margin-top: 75px;
padding-left: 2px;
}
.c2 {
max-width: 49%;
}
.feed-item {
position: relative;
width: 100%;
height: auto;
padding-bottom: 25px;
padding-top:2.5%;
}
.feed-show {
display: none;
background:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
<div class="column c1">
About
</div>
</div>
<div id="feed" class="feed" style="margin-top: 54px;">
<div class="column c2">
<p>
Creatives of Colour (C-oC) is an independent directory that provides you with up to date information on current, and future work of creatives of colour being showcased in the UK. C-oC aims to contribute to the necessary exaltation of talented artists
within the various ethnic minorities within the UK.
</p>
<p>
Find out more about Creatives of Colour..
</p>
</div>
</div>
<!-- Show on click -->
<div id="feed-show" class="feed-show" style="margin-top: 54px;">
<div class="column c2">
<p>
Creatives of Colour (C-oC) is an independent directory that provides you with up to date information on current, and future work of creatives of colour being showcased in the UK.
</p>
<p>
Find out more about Creatives of Colour..
</p>
</div>
</div>

DIV side by side, incorrect positions

I've tried so many different ways trying to get 2 div's staying side by side, but no matter what I do I can't seem to figure it out.
I managed to sort it for a while with "position: absolute" but that was until I realized the menu hight wasn't changing. I'm not an expert when it comes to CSS but the rest I'm good at. I've searched and search and so far this is the best results I've came up with:
Results like this: http://puu.sh/oWRbK/4827eeba57.jpg but should looks like this: http://puu.sh/oWS52/a2dc6282e4.jpg anyone that has any suggestions how to fix this issue, please feel free helping me as I'm getting gray haired by this right now, been trying to figure out a way for the past 4 hours but no matter what I do, if I margin-top the pixels space I get it correct but in a different resolution comparing to my monitor messes it completely up.
.wrapper {
padding-left: 68px;
padding-right: 68px;
width: auto;
height: auto;
margin: 0;
}
.header {
padding-top: 16px;
padding-bottom: 14px;
}
.hline {
width:auto;
height:2px;
background: #FFFFFF;
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
#contentwrapper{
float: left;
width: 100%;
}
#contentcolumn{
margin-left: 325px;
}
/* USER MENU */
.menuWrap {
padding-right: 65px;
width: 260px;
}
.user_menu {
border-style: solid;
border-color: rgba(255, 255, 255, 0.5);
border-width: 1px;
margin-top: 41px;
min-height: 390px;
width: 260px;
color: #a6bed5;
background: rgba(110, 110, 110, 0.5); /* For browsers that do not support gradients */
background: -webkit-linear-gradient(left top, rgba(110, 110, 110, 0.5), rgba(235, 235, 235, 0.5)); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom right, rgba(110, 110, 110, 0.5), rgba(235, 235, 235, 0.5)); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom right, rgba(110, 110, 110, 0.5), rgba(235, 235, 235, 0.5)); /* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom right, rgba(110, 110, 110, 0.5), rgba(235, 235, 235, 0.5)); /* Standard syntax */
}
.user_after {
border-style: solid;
border-color: #FFFFFF;
border-width: 1px;
margin-top: 17px;
height: 39px;
width: 260px;
background: #6e6e6e; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(left top, #6e6e6e, #ebebeb); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom right, #6e6e6e, #ebebeb); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom right, #6e6e6e, #ebebeb); /* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom right, #6e6e6e, #ebebeb); /* Standard syntax */
opacity: 0.3;
filter: alpha(opacity=30); /* For IE8 and earlier */
}
.user_menu .content {
width: 260px;
}
.user_menu .header {
padding: 6px;
border-bottom: 1px rgba(255, 255, 255, 0.5) solid;
min-height: 62px;
}
.user_menu .header img {
width: 62px;
height: 62px;
float: left;
}
.user_menu .header p {
padding-left: 70px;
font-family: Open Sans;
font-size: 17px;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 20px;
}
.user_menu .header a {
text-decoration: none;
font-size: 16px;
color: #94a9b9;
}
.user_menu .header a:link a:visited a:active {
text-decoration: none;
font-size: 16px;
color: #94a9b9;
}
.user_menu .header a:hover {
text-decoration: none;
color: #b5cee6;
}
.user_menu .addMenu {
font-family: Open Sans;
font-size: 20px;
font-style: normal;
font-variant: normal;
font-weight: 500;
line-height: 20px;
}
.user_menu .addMenu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.user_menu .addMenu li a {
display: block;
color: #94a9b9;
padding: 12px 0 12px 20px;
text-decoration: none;
border-bottom: 1px rgba(255, 255, 255, 0.5) solid;
}
/* Change the link color on hover */
.user_menu .addMenu li a:hover {
color: #b5cee6;
}
/* MAIN CONTAINER */
.bs-container {
border-style: solid;
border-color: #FFFFFF;
border-width: 1px;
margin-top: 41px;
min-height: 390px;
width: 100%;
background: #FFFFFF;
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
<div class="wrapper">
<div class="header">
<img src="/images/logo.png" />
</div>
<div class="hline"></div>
<div id="contentwrapper">
<div id="contentcolumn">
<div class="bs-container">
</div>
</div>
</div>
<div class="row">
<div class="col-md-2"><!--ISSUE IS RIGHT HERE.-->
<div class="user_menu">
<div class="content">
<div class="header">
<img src="http://mta.everest-community.net/mta-image.php?id=1" />
<p>
<b><font color="#f7b618">123B3n</font> <font color="#334c66">(1)</font></b><br>
LOGOUT
</p>
</div>
<div class="addMenu">
<ul>
<li>HOME</li>
<li>CHARACTERS <i class="fa fa-angle-down" aria-hidden="false"></i></li>
<div id="characters" class="collapse">
<li>OVERVIEW</li>
<li>STAT TRANSFER</li>
<li>CUSTOM INTERIORS</li>
<li>MANAGEMENT</li>
</div>
<li>ACCOUNT <i class="fa fa-angle-down" aria-hidden="false"></i></li>
<div id="account" class="collapse">
<li>PROFILE</li>
<li>HISTORY</li>
<li>SETTINGS</li>
<li>OVERVIEW</li>
</div>
<li>PREMIUM <i class="fa fa-angle-down" aria-hidden="false"></i></li>
<div id="premium" class="collapse">
<li>PREMIUM FEATURES</li>
<li>DONATION HISTORY</li>
<li>DONATE NOW!</li>
</div>
</ul>
</div>
</div>
</div>
<div class="user_after"></div><!--JUST FOR SHOW-->
</div>
</div>
</div>
My JSFiddle: https://jsfiddle.net/123B3n/ohku4a0q/
P.S Didn't know about JSFiddle until now, thanks for letting me know!

You are providing your CSS, but you are also using Bootstrap in your code (or what looks like it) and I am wondering if you have thought about the impact.
--> row
---->col-md-2
That is using the two column grid of a 12 column system with the md breakpoint, where is the other col-md-10 for the right side.
To me, it looks like you are in a losing battle with bootstrap. And without the full code, the only solution here is to rewrite all of your code and that actualyl does you no service.
I will give you this:
<div class="row">
<div class="col-md-2">Left</div>
<div class="col-md-10">Right</div>
</div>
12 Column system, but then you need to look into what happens when you go mobile and get smaller than the md breakpoint.
That MAY be as simple as
<div class="row">
<div class="col-md-2 col-xs-12">Left</div>
<div class="col-md-10 col-xs-12">Right</div>
</div>

How's this? https://jsfiddle.net/wx3emp71/2/
I reorganized your row div to contain both of the columns you want beside each other. Then I gave them a class of "content" (feel free to change that) and made them inline-blocks of 50% width each. I also removed some margin you had on one of your containers. To make them display beside each other at 50% width, I had to restructure your divs a little bit so that there's no white space between the end of the close tag and the beginning of the new open tag. Lastly, I gave them box-sizing: border-box just so that any margins/padding don't come into play when calculating the width, therefore allowing the 50% width to work.
If you like my solution, I actually recommend you add the following style, *{ box-sizing: border-box;} to all your CSS files. That way, everything has the border-box property and you never have to worry about fitting the paddings into your calculations.
I put my work under the /***** my edit *****/ comment so you can change it however you feel fit. I don't think I added any other styling elsewhere, but I did remove some as I mentioned before.

How to create the Super Saiyan effect in CSS / JS ?

When I was a child, I used to read all Dragon Ball manga books.
The Super Saiyan effect (surrounding aura and lightning) is really cool!
Now I have an event page which lists all upcoming events in cards and it looks like this:
And here is the code
<div class="col-sm-3 col-xs-12 event">
<div class="row hidden-xs icon">
<div class="title">16 Apr</div>
<div class="event-time"><i>8:00PM</i></div>
<div class="sub-title">Registration Opens 14 Apr</div>
</div>
<div class="row hidden-xs sub-icon">
<div><span>LRC Thursday Night Run test long long</span></div>
<div>
<input type="button" class="btn btn-primary" value="Register" />
</div>
</div>
<div class="row visible-xs-inline-block hidden-lg hidden-md hidden-sm event-sm">
<div class="col-xs-4 event-left">
<div class="event-day">16</div>
<div class="event-month">apr</div>
<div class="event-time"><i>8:00PM</i></div>
</div>
<div class="col-xs-8 event-right">
<div class="event-notice">Registration Opens 14 Apr</div>
<div class="event-title">LRC Night Run</div>
<div class="event-slogan">Come run with us</div>
</div>
</div>
</div>
One of them is a special event.
So here is what I want:
I want this special event being surrounded by the "Super Saiyan" effect!
So it will look like this one:
(sorry the Saiyan isn't drawn beautifully, but the effect is well addressed)
So there will be many lightning strikes and flames around this event card, and they are flowing!
Sorry, I cannot come up with any css code for this one as I am not even sure that whether it can be done by css or not.
Is it possible?
Update
If this is impossible, how about the static lightning and flames(KI)? And it has to be responsive.
Update 2
Also, this page is responsive, and it would be terrible if the flame and lightning were mis-placed when the page got resized.
So here is how it looks like on a smaller screen
Update 3
Here is my css code for event card:
.event {
margin:10px;
text-transform: uppercase;
}
.icon {
background: #545454 url(../Content/img/event-icon.png) no-repeat center center;
background-size:cover;
min-height: 250px;
height: 250px;
width: auto;
min-width: 250px;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
align-items: center;
justify-content: center;
}
.title{
font-weight: 700;
color:#6c6c6c;
font-size: 67px;
text-shadow: 0 1px 0 rgba(0,0,0,.5);
}
.sub-title{
overflow: hidden;
font-size: 18px;
text-shadow: 0 1px 0 rgba(0,0,0,.4);
color:#87e300;
text-transform: uppercase;
font-style: normal;
font-weight: normal;
font-family: 'TradeGothicW01-BoldCn20 675334', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
-ms-font-smoothing: antialiased;
font-smoothing: antialiased;
}
.event-time{
color:orange;
font-size:25px;
}
.sub-icon {
display: flex;
-ms-flex-direction: column;
flex-direction: column;
justify-content: center;
align-items: center;
align-content: space-around;
background: #f3f3f3;
font-size: 15px;
font-weight: bold;
font-style: normal;
line-height: 1.1;
text-transform: uppercase;
font-family: 'TradeGothicW01-BoldCn20 675334', Helvetica, Arial, sans-serif;
}
.sub-icon span {
display: inline-block;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
overflow: hidden;
width: 200px;
white-space: nowrap;
color:black;
}
.sub-icon div{
margin-top : 10px;
margin-bottom:10px;
}
.event-day{
font-size:24px;
line-height:0.85;
font-style:normal;
font-weight:normal;
color: #6c6c6c;
}
.event-month{
color: #cccbcb;
font-size: 42px;
}
.event-time{
color:orange;
font-size:25px;
}
.event-notice {
color: #87e300;
font-size: 14px;
font-weight:600;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
line-height: .95;
font-family: 'TradeGothicW01-BoldCn20 675334', Helvetica, Arial, sans-serif;
}
.event-title{
font-size:16px;
font-weight:800;
color:white;
font-family: 'TradeGothicW01-BoldCn20 675334', Helvetica, Arial, sans-serif;
}
.event-slogan{
font-size:14px;
font-weight:600;
color: #999;
}
#media (max-width: 767px) {
.event-sm {
display: flex !important;
}
}

SVG
CODEPEN
I am a bit unsure if you wanted the yellow KI glow or the lighting so i went for the lighting effect.
I reused a simple <svg> shape with the <use> element.
The lighting shape is taken from Gohan.
The top left lighting.
body {
margin: 0;
}
.main {
background-color: black;
width: 100vw;
height: 100vh;
}
.calander {} .calander h2 {
margin: 0;
color: white;
text-align: center;
}
.calander .event-grid {
margin: 0 5%;
}
.event-grid .event {
position: relative;
display: inline-block;
width: 30%;
height: 250px;
margin: 1%;
text-align: center;
background: -moz-radial-gradient(center, ellipse cover, #4c4c4c 0%, #212121 100%);
/* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #4c4c4c), color-stop(100%, #212121));
/* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, #4c4c4c 0%, #212121 100%);
/* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, #4c4c4c 0%, #212121 100%);
/* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, #4c4c4c 0%, #212121 100%);
/* IE10+ */
background: radial-gradient(ellipse at center, #4c4c4c 0%, #212121 100%);
}
.event .date {
color: #666;
font-size: 3em;
margin-bottom: 10px;
text-shadow: 0px 1px #222;
}
.event .time {
font-size: 1.4em;
color: #dd8834;
}
.event .note {
font-size: 1.3em;
color: LawnGreen;
}
.event .bottom-reg {
position: absolute;
bottom: 0;
height: 25%;
width: 100%;
background-color: white;
}
.event .bottom-reg p {
margin: 5px 0;
}
.event .bottom-reg input {
text-align: center;
color: white;
background-color: #55f;
border: 1px solid #99f;
}
::-webkit-input-placeholder {
/* WebKit browsers */
color: white;
font-weight: bold;
}
:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: white;
font-weight: bold;
}
::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: white;
font-weight: bold;
}
:-ms-input-placeholder {
/* Internet Explorer 10+ */
color: white;
font-weight: bold;
}
.test {
display: none;
}
.spesial {
z-index: 5;
position: absolute;
top: -25%;
left: -25%;
width: 150%;
height: 150%;
}
<div class="main">
<section class="calander">
<h2>UPCOMING EVENTS</h2>
<div class="event-grid">
<div class="event">
<h1 class="date">16 APR</h1>
<span class="time">8:00 PM</span>
<br>
<span class="note">registration</span>
<div class="bottom-reg">
<p>LRC</p>
<input placeholder="REGISTER"></input>
</div>
</div>
<div class="event">
<h1 class="date">19 APR</h1>
<span class="time">10:00 PM</span>
<br>
<span class="note">registration</span>
<div class="bottom-reg">
<p>LRC</p>
<input placeholder="REGISTER"></input>
</div>
<div class="spesial">
<svg width="100%" height="100%" viewBox="0 0 200 200">
<use x="40" y="100" transform="scale(0.5) rotate(20)" xlink:href="#light" />
<use x="150" y="-790" transform="scale(0.2) rotate(90)" xlink:href="#light" />
<use x="0" y="200" transform="scale(0.35) rotate(-45)" xlink:href="#light" />
<use x="-240" y="390" transform="scale(0.5) rotate(-70)" xlink:href="#light" />
<use x="300" y="-90" transform="scale(0.4) rotate(90)" xlink:href="#light" />
</svg>
</div>
</div>
<div class="event">
<h1 class="date">23 APR</h1>
<span class="time">8:00 PM</span>
<br>
<span class="note">registation</span>
<div class="bottom-reg">
<p>LRC</p>
<input placeholder="REGISTER" />
</div>
</div>
</div>
</section>
<svg class="test" width="100px" height="100px" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path fill="#ddf" stroke="#ddf" id="light" d="m 0,0 c 6.24111,-8.9445 10.61204,-23.77912 17.97353,-53.80856 l 29.7995,-5.55584 35.35534,41.92133 c -1.95372,12.45653 45.89675,34.80534 61.61931,34.34518 -17.63651,5.49982 -9.56977,24.91725 2.52538,36.87057 C 139.10793,46.26094 131.45087,39.06432 122.46831,22.22336 118.45247,16.48431 87.40919,-0.96167 83.63345,0.73967 c -9.2424,4.06941 -3.52888,14.963 -1.51523,18.60117 -4.31715,4.656 -7.89706,8.06774 -8.43836,13.6677 0.0873,-12.34933 1.5179,-42.45863 -5.49456,-26.14667 L 65.95578,-14.91769 C 61.11992,-21.99984 48.27857,-50.5446 47.89033,-37.93673 46.10689,-46.50735 39.22534,-49.00909 35.6512,-48.25273 17.657,-46.88454 17.9011,-38.9303 16.45831,-31.58521 7.76504,-6.22367 6.56293,-8.29891 0,0 Z"
/>
</defs>
</svg>
</div>

This might not be the best way, but a quick way could be to download an animated gif of super saiyan, make it transparent, edit the character out, then use css to overlay the image on your event.
With better photo editing software this could probably look a lot better, but this only took me about 5 minutes.
Here's the code: http://codepen.io/anon/pen/gpLMGr
<div class="event">
<img id="saiyan" src="http://i.stack.imgur.com/CFoa1.gif" />
<h1 class="date">19 APR</h1>
<span class="time">10:00 PM</span>
<br>
<span class="note">registration</span>
<div class="bottom-reg">
<p>LRC</p>
<input placeholder="REGISTER"></input>
</div>
</div>
<style>
#saiyan {
position: absolute;
z-index: 1;
width: 160%;
height: 100%;
left: -30%;
top: 0;
}
</style>
I just absolutely position the image over the rest of the event object, and have its width and height dependent on the event div.

Disclaimer: this code is for the lulz.
Moved by curiosity, I've created a small example you might like:
Running demo on jsFiddle
Lightning effect
I've used the HTML5 Canvas Lightning from this fiddle, that is itself a fork of akm2's Lightning Points (Lightning 2); the canvas is then placed under a div with 0.99 of opacity, 20px oversized on each side, to give the effect of surrounding the boundaries, but only of few pixels.
Fire effect
The fire effect in CSS is easily achievable with the text-shadow property; I've taken parts of this but it is the same code I've seen dozens of time in many articles / fiddles, probably the first one ever is the one in the second link.
Since this applies only to text and not, for example, to divs, I've used the content attribute of the :before pseudo-element of the .sayan div to create a huge text composed by symbols (for a romantic reason, I've used the Go (悟) kanji from Goku (悟空), but the important is that it is not a recognizable alphabetic character, or goodbye aura effect... try it by yourself with content: 'a';), and I've put it between the canvas and the div with a negative z-index.
This is just an experiment for fun, not production code nor responsive stuff as asked in the question (even though if you resize the page, the divs move and the sayan div will retain its capabilities); my attempt to answer the question:
is it possible to do it, and how ?
, that I hope you liked.
If you want to transform it to something more serious, there is a lot of work to do (first of all, alter the script to make some dots moving only along the sides, to prevent having all of them inside the square), but I still suggest you to use a transparent animated PNG, or however something easier and less CPU-killer than this, declaratively made for the sake of the lulz ;)