All of my text is not showing - html

Question

Can someone please tell me why my paragraph text at the bottom is not displaying all my text in my div. If I need to send screenshots please let me know.
/* Main */
.main {
position: relative;
margin: 0;
overflow-x:hidden;
}
.main.fullscreen {
height: 100%;
}
.main.style1 {
text-align: center;
padding: 3em 0 3em 0;
}
.main.style1 h2 {
font-size: 4.25em;
line-height: 1em;
letter-spacing: -4px;
}
.main.style1:before {
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.main.style1 .content {
opacity: 1.0;
display: inline-block;
vertical-align: middle;
-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
-moz-transform: translateZ(0);
-webkit-transform: translateZ(0);
-o-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
.main.style1.inactive {
}
.main.style1.inactive .content {
opacity: 0;
}
.main.style2 {
padding: 3em 0 3em 0;
overflow: hidden;
}
.main.style2 .content {
position: relative;
width: 35%;
display: inline-block;
vertical-align: middle;
-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
-moz-transform: translateZ(0);
-webkit-transform: translateZ(0);
-o-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
visibility: visible;
}
.main.style2.left {
}
.main.style2.left:after {
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.main.style2.left .content {
left: 0;
}
.main.style2.right {
}
.main.style2.right:before {
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.main.style2.right .content {
left: 65%;
}
.main.style2.inactive {
}
.main.style2.inactive .content {
}
.main.style2.inactive.left .content {
left: -35%;
}
.main.style2.inactive.right .content {
left: 100%;
}
.main.style3 {
text-align: center;
padding: 6em 0 6em 0;
}
.main.style3 .content {
}
.main.style3 .content > header {
margin-bottom: 2em;
}
.main.style3.primary {
background: #fff;
}
.main.style3.secondary {
background: #f5f6f7;
}
/* Dark */
.dark {
color: #fff;
}
.dark a {
color: #fff;
}
.dark .button.style2 {
border-color: inherit;
background-color: rgba(64,64,64,0.05);
}
.dark .button.style2:hover {
background-color: rgba(255,255,255,0.1);
}
.dark .button.style2.down {
background-image: url('images/dark-arrow.svg');
}
/*********************************************************************************/
/* Spinner */
/*********************************************************************************/
#-moz-keyframes spinner-rotate { 0% { -moz-transform: scale(1) rotate(0deg); -webkit-transform: scale(1) rotate(0deg); -o-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } 100% { -moz-transform: scale(1) rotate(360deg); -webkit-transform: scale(1) rotate(360deg); -o-transform: scale(1) rotate(360deg); -ms-transform: scale(1) rotate(360deg); transform: scale(1) rotate(360deg); } }
#-webkit-keyframes spinner-rotate { 0% { -moz-transform: scale(1) rotate(0deg); -webkit-transform: scale(1) rotate(0deg); -o-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } 100% { -moz-transform: scale(1) rotate(360deg); -webkit-transform: scale(1) rotate(360deg); -o-transform: scale(1) rotate(360deg); -ms-transform: scale(1) rotate(360deg); transform: scale(1) rotate(360deg); } }
#-o-keyframes spinner-rotate { 0% { -moz-transform: scale(1) rotate(0deg); -webkit-transform: scale(1) rotate(0deg); -o-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } 100% { -moz-transform: scale(1) rotate(360deg); -webkit-transform: scale(1) rotate(360deg); -o-transform: scale(1) rotate(360deg); -ms-transform: scale(1) rotate(360deg); transform: scale(1) rotate(360deg); } }
#-ms-keyframes spinner-rotate { 0% { -moz-transform: scale(1) rotate(0deg); -webkit-transform: scale(1) rotate(0deg); -o-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } 100% { -moz-transform: scale(1) rotate(360deg); -webkit-transform: scale(1) rotate(360deg); -o-transform: scale(1) rotate(360deg); -ms-transform: scale(1) rotate(360deg); transform: scale(1) rotate(360deg); } }
#keyframes spinner-rotate { 0% { -moz-transform: scale(1) rotate(0deg); -webkit-transform: scale(1) rotate(0deg); -o-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } 100% { -moz-transform: scale(1) rotate(360deg); -webkit-transform: scale(1) rotate(360deg); -o-transform: scale(1) rotate(360deg); -ms-transform: scale(1) rotate(360deg); transform: scale(1) rotate(360deg); } }
/*********************************************************************************/
/* Loader */
/*********************************************************************************/
#-moz-keyframes spinner-show { 0% { opacity: 0; } 100% { opacity: 1; } }
#-webkit-keyframes spinner-show { 0% { opacity: 0; } 100% { opacity: 1; } }
#-o-keyframes spinner-show { 0% { opacity: 0; } 100% { opacity: 1; } }
#-ms-keyframes spinner-show { 0% { opacity: 0; } 100% { opacity: 1; } }
#keyframes spinner-show { 0% { opacity: 0; } 100% { opacity: 1; } }
#-moz-keyframes spinner-hide { 0% { color: #ececec; z-index: 100001; -moz-transform: scale(1) rotate(0deg); -webkit-transform: scale(1) rotate(0deg); -o-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } 99% { color: #ececec; z-index: 100001; -moz-transform: scale(0.5) rotate(360deg); -webkit-transform: scale(0.5) rotate(360deg); -o-transform: scale(0.5) rotate(360deg); -ms-transform: scale(0.5) rotate(360deg); transform: scale(0.5) rotate(360deg); } 100% { color: #ececec; z-index: -1; -moz-transform: scale(0.5) rotate(360deg); -webkit-transform: scale(0.5) rotate(360deg); -o-transform: scale(0.5) rotate(360deg); -ms-transform: scale(0.5) rotate(360deg); transform: scale(0.5) rotate(360deg); } }
#-webkit-keyframes spinner-hide { 0% { color: #ececec; z-index: 100001; -moz-transform: scale(1) rotate(0deg); -webkit-transform: scale(1) rotate(0deg); -o-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } 99% { color: #ececec; z-index: 100001; -moz-transform: scale(0.5) rotate(360deg); -webkit-transform: scale(0.5) rotate(360deg); -o-transform: scale(0.5) rotate(360deg); -ms-transform: scale(0.5) rotate(360deg); transform: scale(0.5) rotate(360deg); } 100% { color: #ececec; z-index: -1; -moz-transform: scale(0.5) rotate(360deg); -webkit-transform: scale(0.5) rotate(360deg); -o-transform: scale(0.5) rotate(360deg); -ms-transform: scale(0.5) rotate(360deg); transform: scale(0.5) rotate(360deg); } }
#-o-keyframes spinner-hide { 0% { color: #ececec; z-index: 100001; -moz-transform: scale(1) rotate(0deg); -webkit-transform: scale(1) rotate(0deg); -o-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } 99% { color: #ececec; z-index: 100001; -moz-transform: scale(0.5) rotate(360deg); -webkit-transform: scale(0.5) rotate(360deg); -o-transform: scale(0.5) rotate(360deg); -ms-transform: scale(0.5) rotate(360deg); transform: scale(0.5) rotate(360deg); } 100% { color: #ececec; z-index: -1; -moz-transform: scale(0.5) rotate(360deg); -webkit-transform: scale(0.5) rotate(360deg); -o-transform: scale(0.5) rotate(360deg); -ms-transform: scale(0.5) rotate(360deg); transform: scale(0.5) rotate(360deg); } }
#-ms-keyframes spinner-hide { 0% { color: #ececec; z-index: 100001; -moz-transform: scale(1) rotate(0deg); -webkit-transform: scale(1) rotate(0deg); -o-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } 99% { color: #ececec; z-index: 100001; -moz-transform: scale(0.5) rotate(360deg); -webkit-transform: scale(0.5) rotate(360deg); -o-transform: scale(0.5) rotate(360deg); -ms-transform: scale(0.5) rotate(360deg); transform: scale(0.5) rotate(360deg); } 100% { color: #ececec; z-index: -1; -moz-transform: scale(0.5) rotate(360deg); -webkit-transform: scale(0.5) rotate(360deg); -o-transform: scale(0.5) rotate(360deg); -ms-transform: scale(0.5) rotate(360deg); transform: scale(0.5) rotate(360deg); } }
#keyframes spinner-hide { 0% { color: #ececec; z-index: 100001; -moz-transform: scale(1) rotate(0deg); -webkit-transform: scale(1) rotate(0deg); -o-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } 99% { color: #ececec; z-index: 100001; -moz-transform: scale(0.5) rotate(360deg); -webkit-transform: scale(0.5) rotate(360deg); -o-transform: scale(0.5) rotate(360deg); -ms-transform: scale(0.5) rotate(360deg); transform: scale(0.5) rotate(360deg); } 100% { color: #ececec; z-index: -1; -moz-transform: scale(0.5) rotate(360deg); -webkit-transform: scale(0.5) rotate(360deg); -o-transform: scale(0.5) rotate(360deg); -ms-transform: scale(0.5) rotate(360deg); transform: scale(0.5) rotate(360deg); } }
#-moz-keyframes overlay-hide { 0% { opacity: 1; z-index: 100000; } 15% { opacity: 1; z-index: 100000; } 99% { opacity: 0; z-index: 100000; } 100% { opacity: 0; z-index: -1; } }
#-webkit-keyframes overlay-hide { 0% { opacity: 1; z-index: 100000; } 15% { opacity: 1; z-index: 100000; } 99% { opacity: 0; z-index: 100000; } 100% { opacity: 0; z-index: -1; } }
#-o-keyframes overlay-hide { 0% { opacity: 1; z-index: 100000; } 15% { opacity: 1; z-index: 100000; } 99% { opacity: 0; z-index: 100000; } 100% { opacity: 0; z-index: -1; } }
#-ms-keyframes overlay-hide { 0% { opacity: 1; z-index: 100000; } 15% { opacity: 1; z-index: 100000; } 99% { opacity: 0; z-index: 100000; } 100% { opacity: 0; z-index: -1; } }
#keyframes overlay-hide { 0% { opacity: 1; z-index: 100000; } 15% { opacity: 1; z-index: 100000; } 99% { opacity: 0; z-index: 100000; } 100% { opacity: 0; z-index: -1; } }
body {
text-decoration: none;
}
body:before {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-transform: none !important;
}
body:before {
-moz-animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-hide 0.25s ease-in-out forwards !important;
-webkit-animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-hide 0.25s ease-in-out forwards !important;
-o-animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-hide 0.25s ease-in-out forwards !important;
-ms-animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-hide 0.25s ease-in-out forwards !important;
animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-hide 0.25s ease-in-out forwards !important;
-moz-transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
color: #ececec;
content: '\f1ce';
cursor: default;
display: block;
font-size: 2em;
height: 2em;
left: 50%;
line-height: 2em;
margin: -1em 0 0 -1em;
opacity: 0;
position: fixed;
text-align: center;
top: 50%;
width: 2em;
z-index: -1;
}
body:after {
-moz-animation: overlay-hide 1.5s ease-in forwards !important;
-webkit-animation: overlay-hide 1.5s ease-in forwards !important;
-o-animation: overlay-hide 1.5s ease-in forwards !important;
-ms-animation: overlay-hide 1.5s ease-in forwards !important;
animation: overlay-hide 1.5s ease-in forwards !important;
background: #ffffff;
content: '';
display: block;
height: 100%;
left: 0;
opacity: 0;
position: fixed;
top: 0;
width: 100%;
z-index: -1;
}
body.is-loading:before {
-moz-animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-rotate 0.75s infinite linear !important;
-webkit-animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-rotate 0.75s infinite linear !important;
-o-animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-rotate 0.75s infinite linear !important;
-ms-animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-rotate 0.75s infinite linear !important;
animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-rotate 0.75s infinite linear !important;
z-index: 100001;
}
body.is-loading:after {
-moz-animation: none !important;
-webkit-animation: none !important;
-o-animation: none !important;
-ms-animation: none !important;
animation: none !important;
opacity: 1;
z-index: 100000;
}
#media (-webkit-min-device-pixel-ratio: 2) {
body:before {
line-height: 2.025em;
}
}
/*********************************************************************************/
/* Icons */
/*********************************************************************************/
.icon {
text-decoration: none;
}
.icon:before {
display: inline-block;
font-family: FontAwesome;
font-size: 1.25em;
text-decoration: none;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
.icon > .label {
display: none;
}
/*********************************************************************************/
/* Header */
/*********************************************************************************/
#header {
position: fixed;
z-index: 10000;
left: 0;
top: 0;
width: 100%;
background: #fff;
background: rgba(255,255,255,0.95);
height: 3em;
line-height: 3em;
box-shadow: 0 0 0.15em 0 rgba(0,0,0,0.1);
}
body {
padding-top: 3em;
}
#logo {
position: absolute;
left: 1em;
top: 0;
height: 3em;
line-height: 3em;
letter-spacing: -1px;
}
#logo a {
font-size: 1.25em;
}
#nav {
position: absolute;
right: 0.5em;
top: 0;
height: 3em;
line-height: 3em;
}
#nav ul {
margin: 0;
}
#nav ul li {
display: inline-block;
margin-left: 0.5em;
font-size: 0.9em;
}
#nav ul li a {
display: block;
color: inherit;
text-decoration: none;
height: 3em;
line-height: 3em;
padding: 0 0.5em 0 0.5em;
outline: 0;
}
/*********************************************************************************/
/* Intro */
/*********************************************************************************/
#intro {
background: url('images/overlay.png'), url('../images/intro.jpg');
background-size: 256px 256px, cover;
background-attachment: fixed, fixed;
background-position: top left, bottom center;
background-repeat: repeat, no-repeat;
}
/*********************************************************************************/
/* One */
/*********************************************************************************/
#one {
background: url('images/overlay.png'), url('../images/one.jpg');
background-size: 256px 256px, cover;
overflow:auto
background-attachment: fixed, fixed;
background-position: top left, center center;
}
/*********************************************************************************/
/* Two */
/*********************************************************************************/
#two {
background: url('images/overlay.png'), url('../images/two.jpg');
background-size: 256px 256px, cover;
background-attachment: fixed, fixed;
background-position: top left, center center;
}
/*********************************************************************************/
/* Three */
/*********************************************************************************/
#three {
background: url('images/overlay.png'), url('../images/three.jpg');
background-size: 256px 256px, cover;
background-attachment: fixed, fixed;
background-position: top left, center center;
}
/*********************************************************************************/
/* Four */
/*********************************************************************************/
#four {
background: url('images/overlay.png'), url('../images/.jpg');
background-size: 256px 256px, cover;
background-attachment: scroll
background-position: top left, center center;
}
/*********************************************************************************/
/* Contact */
/*********************************************************************************/
#contact {
padding-bottom: 0;
overflow: hidden;
}
#contact .box {
position: relative;
bottom: 0;
-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
-moz-transform: translateZ(0);
-webkit-transform: translateZ(0);
-o-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
#contact.inactive {
}
#contact.inactive .box {
bottom: -30em;
}
/*********************************************************************************/
/* Footer */
/*********************************************************************************/
#footer {
position: relative;
height: 5em;
line-height: 5em;
margin: 0;
background: #39454b;
color: #999;
color: rgba(185,186,187,0.5);
overflow: hidden;
}
#footer a {
color: #999;
color: rgba(185,186,187,0.5);
}
#footer a:hover {
color: #bbb;
color: rgba(185,186,187,1.0);
}
#footer .actions {
position: absolute;
left: 1em;
top: 0.25em;
height: 5em;
line-height: 5em;
margin: 0;
}
#footer .actions li {
font-size: 1.25em;
margin: 0;
}
#footer .actions li a {
padding: 0.5em;
}
#footer .menu {
position: absolute;
right: 2em;
top: 0;
height: 5em;
line-height: 5em;
margin: 0;
}
#footer .menu li {
font-size: 0.9em;
}
<!DOCTYPE HTML>
<html>
<head>
<title>IJDKY</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.poptrox.min.js"></script>
<script src="js/jquery.scrolly.min.js"></script>
<script src="js/jquery.scrollex.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/init.js"></script>
<noscript>
<link rel="stylesheet" href="css/skel.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/style-wide.css" />
<link rel="stylesheet" href="css/style-normal.css" />
</noscript>
<!--[if lte IE 9]><link rel="stylesheet" href="css/ie/v9.css" /><![endif]-->
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
</head>
<body>
<!-- Header -->
<header id="header">
<!-- Logo -->
<h1 id="logo">IJDKY</h1>
</header>
<!-- Intro -->
<section id="intro" class="main style1 dark fullscreen">
<div class="content container 75%">
<header>
<h2>Jasmine's Blog</h2>
</header>
<p>Welcome to <strong>My Blog</strong>. To continue click on the arrow and <strong>ENJOY!</strong></p>
<footer>
Next
</footer>
</div>
</section>
<!-- One -->
<section id="one" class="main style2 right dark fullscreen">
<div class="content box style2">
<header>
<h2>One</h2>
</header>
*<p>
Over four years ago....
<br>
I met the love of my life unknowingly to me. The night was crazy me and two of my best girlfriends had gone out to our favorite hometown spot, I just getting over a major breakup needed to get out and I might of had a couple of shots so my mouth was alittle liberal with the things that came out of my mouth.
</p>
<p>
My girlfriend and cousin Courtney was the one who noticed this gentleman across the room staring at me ever so thirsty like(insider), after about an hour of playing peekaboo with my eyes he mustard up the courage to come over and I expecting something superficial and arrogant this handsome man says to me HELLO my name is Quan and I think you are the most beautiful woman I have ever seen. I was taken back and a little tipsy so what came out of my mouth was a lot arrogant and straight forward I replied what do u have to offer me? He with no hesitation said if u give me a chance to take you out I will show u can I have ur number? I said sure but if u can't call me by Wednesday don't bother wasting your time he said of course.
</p>
<p>
He is going to say I told u so when he gets to this part I knew he wasn't going to call because I gave him the wrong number little did I know this was only the beginning of our story!!! The moral of this story in life you never know who you will encounter and what that person will be in your life sometimes you have to just JUMP and take a chance.
<br>
<strong style="right:inherit">Signed,
-Not Yet Jasmine Lynch</strong>
</p>*
</div>
Next
</section>
</body>
</html>

Answer 1

You have css issues For example .dark {color: #fff;} sets the text as white and since background is also white its not showing
try change .dark {color: #fff;} to .dark {color: #ccc;} you will see difference
do this for all css selectors