HTML

----------------------------------

 

<!DOCTYPE html>
<html>
<head>


<meta charset="UTF-8">
<meta name="viewport" content="width-device-width">

<link rel="stylesheet" href="./css/main.css" type="text/css">


<title></title>
</head>
<body>


<div class="intro">
<video id="video-bg-elem" preload="auto" autoplay="true" loop="loop" muted="muted">
<source src="kids.mp4" type="video/mp4">
Video not supported
</video>
</div>


<div class="overlay">
<h1>The World Of Wu</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>



<div class="content">
<h2>heading</h2>
<p>Aenean at finibus metus. In hac habitasse platea dictumst. Donec accumsan ipsum vitae felis congue, et volutpat tellus volutpat. Suspendisse id egestas nibh. Duis iaculis felis tortor, vitae tristique tellus hendrerit a. Donec turpis massa, tincidunt sit amet iaculis vehicula, ornare non ligula. In hac habitasse platea dictumst. Phasellus tortor orci, pretium gravida molestie ac, consectetur eu nisl. Donec efficitur leo eget nunc semper eleifend. Quisque ultrices, ipsum nec faucibus dapibus, orci justo gravida libero, sed ultrices nunc felis sed tellus. Nulla mollis, sapien et ultrices efficitur, nisi ante porta orci, in ullamcorper purus tellus ut enim. Praesent leo velit, pulvinar feugiat dolor id, iaculis semper arcu. </p>

</div>
















<Script type="text/javascript" src="jquery-2.1.1.min.js"></Script>
<script type="text/javascript">




(function() {
var windowH = $(window).height(),
introEl = $('div.intro'),
introHeadingH = introEl.find('h1').height();
introEl.css('padding', (windowH - introHeadingH)/2 + 'px 0');
$(document).on('scroll', function() {
introEl.slideUp(1000, function() { $(document).off('scroll'); });
});
})();





















</script>


</body>
</html>


CSS

----------------------------------

 

* {

margin:0;
padding:0;


}

body {
font-family:calibri, sans-serif;




}

.intro {

background-position:50% 50%;
background-size:cover;



}


.content {
height:2000px;
padding-top:100px;
background-color:#aaa;


}

.content h2, .content p {
width:60%;
margin:0 auto;

}


.intro {

z-index: -1000;
width: 100%;
height: 100%;
overflow: hidden;
top: 0;
left: 0;
}

#video-bg-elem {
position: absolute;
top: 0;
left: 0;
min-height: 100%;
min-width: 100%;
}

/* other ting */


.overlay {
position: absolute;
width: 100%;
min-height: 100%;
z-index: 1000;
background-color: rgba(0,0,0,0.7);
}
.overlay h1 {
text-align: center;
font-size: 65px;
text-transform: uppercase;
font-weight: 300;
color: #fff;
padding-top: 15%;
margin-bottom: 10px;
}
.overlay p {
text-align: center;
font-size: 20px;
letter-spacing: 3px;
color: #aaa;
}

-----------------------------------------

 

 

This is my code. I'm having trouble making the text visible on the "<div class="content">" element and I was wondering if anyone could help me out here?

Can you give a link to the site as it's far easier to inspect the code.

 

However, have you tried setting the color on the content class?

Yes I've already tried changing the color on the class content plus .content p and .content h2 ....Sorry I am quite new to this and don't know how to send a link...as far as i know i cant because i've been working in sublime text and i dont have a host. Is there an easy way to do it?

After a bit of playing around I've managed to find the solution, thank you for attempting to help though fisicx