Cornflakes_91 wrote:page produces weird images next to the inserted youtube video
I see the same too CF.
Looking at the page source, I see that the Media link just jumps down to the Media tag.
It could also be something to do with the extra images appended to the youtube video source.
In all honesty, you would be better removing them, and just having links for youtube... if there are gaps either side, don't worry, most people will max screen the vid - your website should merely be a portal for people to connect to
Code: Select all
<article id="media">
<div class="carousel-wrapper" >
<div class="carousel">
<div>
<iframe width="854" height="510" src="https://www.youtube.com/embed/0tPdbLe3zx0" frameborder="0" allowfullscreen></iframe>
</div>
<div>
<img src="images/LT3.png" class="icon" alt="Lorem Ipsum">
</div>
<div>
<img src="images/LT4.png" class="icon" alt="Lorem Ipsum">
</div>
<div>
<img src="images/LT2.jpg" class="icon" alt="Lorem Ipsum">
</div>
<div>
<img src="images/LT5.png" alt="Lorem Ipsum">
</div>
</div><!--carousel -->
</div><!-- carousel-wrapper-->
</article>
Also, your floating menu isn't referenced correctly:
Code: Select all
<ul id="main-menu nav-anchor" style="z-index:10;">
<li id="menu-item-carousel" class="menu-item link-scroll" style="z-index:10;"><a href="#text">Story</a></li>
<li id="menu-item-carousel" class="menu-item scroll" style="z-index:10;"><a href="#media">Media</a></li>
<li id="menu-item-grid" class="menu-item scroll" style="z-index:10;"><a href="#grid">Dev Blog</a></li>
<li id="menu-item-featured" class="menu-item scroll" style="z-index:10;"><a href="#featured">Forums</a></li>
<li id="menu-item-contact" class="menu-item scroll" style="z-index:10;"><a href="#contact">FAQ</a></li>
</ul><!-- #main-menu -->
"media" works because you have media referenced correctly for the link to work:
<article id="media">
"Story" works because you have have text referenced correctly too:
<article id="text" class="section-wrapper clearfix" style="height:150vh;" >
However, Dev Blog doesn't work, as your href says #grid, but the information article id is blog, and you're trying to call grid, which doesn't exist@
<article id="blog" class="row">
Forums doesn't exist, as you have created a href called #featured, but it doesn't exist in the html code, in fact the location of the Forum link is lost under the Dev Blog, and you don't make it apparent that it is a clickable link (ie. you use the same font and colour as the heading for Dev Blog for example.):
Code: Select all
<div class="col-sm-10 col-md-9 pull-right" style="color:#fff;">
<a href="http://forums.ltheory.com/"><h1>Join the discussion on the Forums</h1></a>
</div>
FAQ link doesn't work as you don't have an article id for the FAQ section:
Code: Select all
<article>
<div id="faq" class="col-sm-10 col-md-9 pull-right" style="color:#fff;">
Also, I would change the href to be FAQ instead of contact:
Code: Select all
existing:
<li id="menu-item-contact" class="menu-item scroll" style="z-index:10;"><a href="#contact">FAQ</a></li>
change to:
<li id="menu-item-contact" class="menu-item scroll" style="z-index:10;"><a href="#FAQ">FAQ</a></li>
Hope these help as having a functional menu is all important.
Good luck
P.S.
For the "Main Page", you have a wonderful shadow for the menu.
I would ask that you consider using that on the main page, to diffuse the white text which disappears into the header_image.png
It makes the text hard to read and I have to highlight the text to read it, which ruins the experience of the background/text.
Already people have commented on it:
- Protip: Try a different font color
- white text with a black outline is always readable