I am working on my Tritium website (hosted on Github: feel free to fork and send pull requests), and now am looking for a review of it.  If you are looking to critique the design of the website, please visit the sister question over on Graphic Design.Here is what I would like reviewed:Organization - Can you find where something should be easily?Stale code - Is there code that isn't in use?Modern conventions - Am I using the latest and greatest with HTML5 and CSS3?Readability - Is the code formatted in a way that is compliant with today's standards?Performance - Can I speed up any aspect of my code?Portability - Websites can be hard to support for mobile devices.  Is there anything I can improve so that these devices can have just as good of an experience? Also, I noticed that the animation of my atom is a bit laggy on those types of platforms; how can I fix that?User Experience - What do you find annoying and how would you fix it? Those are just some suggestions though.  Please feel free to comment on any aspect of the code.  No matter how small that aspect may be, I consider it important.index.html:<!DOCTYPE html><html lang=en>    <head>        <meta charset=utf-8>        <meta name=viewport content=width=device-width, initial-scale=1.0>        <meta name=description content=>        <meta name=author content=>        <title>Tritium</title>        <link rel=icon href=img/tritium-logo.png sizes=256x227 type=image/png>        <link rel=icon href=img/tritium-logo.svg sizes=any type=image/svg+xml>        <!-- Bootstrap Core CSS -->        <link rel=stylesheet href=https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css type=text/css>        <!-- Fonts -->        <link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css type=text/css>        <link rel=stylesheet href=https://fonts.googleapis.com/css?family=Roboto+Slab:300,500,300italic,500italic type='text/css'>        <link rel=stylesheet href=https://fonts.googleapis.com/css?family=Montserrat:400,700 type='text/css'>        <!-- Custom Theme CSS -->        <link rel=stylesheet href=css/tritium.css type='text/css'>    </head>    <?php flush(); ?>    <body id=page-top data-spy=scroll data-target=.navbar-custom>        <nav class=navbar navbar-custom navbar-fixed-top role=navigation>            <div class=container>                <div class=navbar-header page-scroll> <a class=navbar-brand href=#page-top>                    <span class=light>Tritium</span>                </a>                </div>                <!-- Collect the nav links, forms, and other content for toggling -->                <div class=collapse navbar-collapse navbar-right navbar-main-collapse>                    <ul class=nav navbar-nav>                        <!-- Hidden li included to remove active class from about link when scrolled up past about section -->                        <li class=hidden> <a href=#page-top></a>                        </li>                        <li class=page-scroll> <a href=#about>About</a>                        </li>                        <li class=page-scroll> <a href=#contact>Contact</a>                        </li>                    </ul>                </div>                <!-- /.navbar-collapse -->            </div>            <!-- /.container -->        </nav>        <section id=intro class=intro>            <div class=intro-body>                <div class=container>                    <div class=row>                        <div class=col-md-8 col-md-offset-2>                            <img src=img/tritium-logo.svg height=100 width=100 />                             <h1 class=brand-heading>Tritium</h1>                            <p class=intro-text>A free, premium quality speech synthesis engine written completely in C.</p>  <a href=#download-box class=btn btn-default btn-lg download-window>Visit Download Page</a>                        </div>                    </div>                    <svg xmlns=http://www.w3.org/2000/svg width=434.78391px height=436.34589px version=1.1>                        <g transform=matrix(5.7971186,0,0,5.7971186,217.39195,218.95394)>                            <g id=a1 transform=matrix(0.76604444,0.64278761,-0.64278761,0.76604444,0,0)>                                <circle cx=0 cy=5 r=4 style=fill:#333 />                                <circle cx=4.3299999 cy=-2.5 r=4 style=fill:#333 />                                <circle cx=-4.3299999 cy=-2.5 r=4 style=fill:#333 />                            </g>                            <circle cx=0 cy=0 r=37 style=fill:none;stroke:#333;stroke-width:1 />                            <g id=a2 transform=matrix(-0.93969262,0.34202014,-0.34202014,-0.93969262,0,0)>                                <circle cx=0 cy=37 r=2 style=fill:#333 />                            </g>                        </g>                    </svg>                </div>            </div>        </section>        <section id=about class=container content-section text-center>            <div class=row>                <div class=col-lg-8 col-lg-offset-2>                     <h2>About Tritium</h2>                    <p>Tritium is a compact, fast run-time synthesis engine primarily designed for both small embedded systems and large servers.</p>                    <p>One use for Tritium is as an <a href=https://en.wikipedia.org/wiki/Tritium#Controlled_nuclear_fusion>important fuel for controlled nuclear fusion.</a> Based off of that idea, Tritium was created to fuel other projects with a simple, yet powerful, speech sythesizer.</p>                </div>            </div>        </section>        <section id=contact class=container contact-section text-center>            <div class=contact>                <div class=col-lg-8 col-lg-offset-2>                     <h2>Contact</h2>                    <p>Feel free to contact me to provide some feedback on the software, give suggestions for new features and improvements, or to just say hello!</p>                    <ul class=list-inline banner-social-buttons>                        <li class=bitcon> <a href=https://codereview.stackexchange.com/users/27623/syb0rg <i class=fa fa-stack-exchange fa-4x></i></a>                        </li>                        <li class=twitter> <a href=https://twitter.com/syb0rg <i class=fa fa-twitter fa-4x></i></a>                        </li>                        <li class=github> <span class=logo></span> <a href=https://github.com/syb0rg <i class=fa fa-github fa-4x></i></a>                        </li>                    </ul>                </div>            </div>        </section>        <div id=download-box class=download-popup text-center><a href=# class=close><i class=fa fa-times btn-close></i></a>             <h2>Please Donate!</h2>            <p>As a college student, I have many bills to pay and therefore not a lot of time to spend on development. Help me change that by donating a bit of money. Every little bit helps!</p>            <ul class=list-inline banner-social-buttons>                <li class=paypal> <span class=logo></span> <a href=https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=WABVCTSPENJFJ&lc=US&item_name=Tritium&currency_code=USD&bn=PP%2dDonationsBF%3abtn_donate_SM%2egif%3aNonHosted <i class=fa fa-pied-piper fa-4x></i></a>                </li>                <li class=bitcoin data-address=1EYDqUKuLKF9di1pSEtEfNA8pj2CgL7Wne> <a data-code=717ff45d85b1cc7cdd6752e618dd6d62 data-button-style=custom_large href=https://coinbase.com/checkouts/717ff45d85b1cc7cdd6752e618dd6d62><i class=fa fa-bitcoin fa-4x></i></a>                </li>                <li class=gittip> <span class=logo></span> <a href=https://www.gittip.com/syb0rg/ <i class=fa fa-gittip fa-4x></i></a>                </li>            </ul>        </div>        <!-- Core JavaScript Files -->        <script src=https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js></script>        <script src=https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js></script>        <script src=https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js></script>        <script src=https://coinbase.com/assets/button.js type=text/javascript></script>        <!-- Custom Theme JavaScript -->        <script src=js/tritium.js></script>    </body>    <script>        (function(i, s, o, g, r, a, m) {            i['GoogleAnalyticsObject'] = r;            i[r] = i[r] || function() {                (i[r].q = i[r].q || []).push(arguments)            }, i[r].l = 1 * new Date();            a = s.createElement(o),            m = s.getElementsByTagName(o)[0];            a.async = 1;            a.src = g;            m.parentNode.insertBefore(a, m)        })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');        ga('create', 'UA-50973307-2', 'auto');        ga('send', 'pageview');    </script></html>tritium.css:body {    width: 100%;    height: 100%;    font-family:Roboto Slab, Helvetica Neue, Helvetica, Arial, sans-serif;    color: #fff;    background-color: #171d25;    -webkit-backface-visibility:hidden;}html {    width: 100%;    height: 100%;}h1, h2, h3, h4, h5, h6 {    margin-bottom: 35px;    text-transform: uppercase;    font-family: Montserrat, Helvetica Neue, Helvetica, Arial, sans-serif;    font-weight: 700;    letter-spacing: 1px;}p {    margin: 0 0 25px;    font-size: 18px;    line-height: 1.5;}svg {    z-index: -1;}@media(min-width:767px) {    p {        margin: 0 0 35px;        font-size: 20px;        line-height: 1.6;    }}a {    color: transparent;    color: #6e6e6e;    -webkit-transition: all .2s ease-in-out;    -moz-transition: all .2s ease-in-out;    transition: all .2s ease-in-out;}a:hover, a:focus {    text-decoration: none;    color: #78C40F;}svg {    position: absolute;    right: 0;    bottom: -100px;    width: 250px;    height: 436.34589px;}.light {    font-weight: 400;}.navbar {    margin-bottom: 0;    border-bottom: 1px solid rgba(255, 255, 255, .3);    text-transform: uppercase;    font-family: Montserrat, Helvetica Neue, Helvetica, Arial, sans-serif;    background-color: #000;}.navbar-brand {    font-weight: 700;}.navbar-brand:focus {    outline: 0;}.navbar-custom a {    color: #fff;}.navbar-custom .nav li a {    -webkit-transition: background .3s ease-in-out;    -moz-transition: background .3s ease-in-out;    transition: background .3s ease-in-out;}.navbar-custom .nav li a:hover, .navbar-custom .nav li a:focus, .navbar-custom .nav li.active {    outline: 0;    background-color: rgba(255, 255, 255, .2);}.navbar-toggle {    padding: 4px 6px;    font-size: 16px;    color: #fff;}.navbar-toggle:focus, .navbar-toggle:active {    outline: 0;}@media(min-width:767px) {    .navbar {        position: fixed;        margin-left: 0px;        margin-right: 0px;        padding: 20px 0;        border-bottom: 0;        letter-spacing: 1px;        background: 0 0;        -webkit-transition: background .4s ease-in-out, padding .4s ease-in-out;        -moz-transition: background .4s ease-in-out, padding .4s ease-in-out;        transition: background .4s ease-in-out, padding .4s ease-in-out;    }    .top-nav-collapse {        padding: 0;        background-color: #000;    }    .navbar-custom.top-nav-collapse {        border-bottom: 1px solid rgba(255, 255, 255, .3);    }}.intro {    display: table;    width: 100%;    height: auto;    padding: 100px 0;    text-align: center;    color: #fff;    -webkit-background-size: cover;    -moz-background-size: cover;    -o-background-size: cover;    background-size: cover;    position: relative;}.intro-body {    display: table-cell;    vertical-align: middle;}.brand-heading {    font-size: 40px;    color: #78C40F;}.intro-text {    font-size: 18px;}@media(min-width:767px) {    .intro {        height: 100%;        padding: 0;    }    .brand-heading {        font-size: 100px;    }    .intro-text {        font-size: 25px;    }}.btn-circle {    width: 70px;    height: 70px;    margin-top: 15px;    padding: 7px 16px;    border: 2px solid #fff;    border-radius: 35px;    font-size: 40px;    color: #fff;    background: 0 0;    -webkit-transition: background .3s ease-in-out;    -moz-transition: background .3s ease-in-out;    transition: background .3s ease-in-out;}.btn-circle:hover, .btn-circle:focus {    outline: 0;    color: #fff;    background: rgba(255, 255, 255, .1);}.page-scroll .btn-circle i.animated {    -webkit-transition-property: -webkit-transform;    -webkit-transition-duration: .9s;    -moz-transition-property: -moz-transform;    -moz-transition-duration: .9s;}.page-scroll .btn-circle:hover i.animated {    -webkit-animation-name: pulse;    -moz-animation-name: pulse;    -webkit-animation-duration: 1.4s;    -moz-animation-duration: 1.4s;    -webkit-animation-iteration-count: infinite;    -moz-animation-iteration-count: infinite;    -webkit-animation-timing-function: linear;    -moz-animation-timing-function: linear;}@-webkit-keyframes pulse {    0 {        -webkit-transform: scale(1);        transform: scale(1);    }    50% {        -webkit-transform: scale(1.2);        transform: scale(1.2);    }    100% {        -webkit-transform: scale(1);        transform: scale(1);    }}@-moz-keyframes pulse {    0 {        -moz-transform: scale(1);        transform: scale(1);    }    50% {        -moz-transform: scale(1.2);        transform: scale(1.2);    }    100% {        -moz-transform: scale(1);        transform: scale(1);    }}.content-section {    padding-top: 100px;}.contact-section {    padding-top: 300px;    padding-bottom: 200px;}@media(min-width:767px) {    .content-section {        padding-top: 150px;    }    .contact-section {        padding-top: 300px;    }}.btn {    text-transform: uppercase;    font-family: Montserrat, Helvetica Neue, Helvetica, Arial, sans-serif;    font-weight: 400;    -webkit-transition: all .3s ease-in-out;    -moz-transition: all .3s ease-in-out;    transition: all .3s ease-in-out;}.btn-default {    border: 1px solid #78C40F;    color: #78C40F;    background-color: transparent;}.btn-default:hover, .btn-default:focus {    border: 1px solid #78C40F;    outline: 0;    color: #000;    background-color: #78C40F;}.banner-social-buttons {    margin-top: 0;}@media(max-width:1199px) {    ul.banner-social-buttons {        margin-top: 15px;    }}@media(max-width:767px) {    ul.banner-social-buttons>li {        display: inline-block;        margin: 20px;    }}::-moz-selection {    text-shadow: none;    background: #fcfcfc;    background: rgba(255, 255, 255, .2);}::selection {    text-shadow: none;    background: #fcfcfc;    background: rgba(255, 255, 255, .2);}img::selection {    background: 0 0;}img::-moz-selection {    background: 0 0;}body {    webkit-tap-highlight-color: rgba(255, 255, 255, .2);}/* Mask for background, by default is not display */ #mask {    display: none;    background: #000;    position: fixed;    left: 0;    top: 0;    z-index: 10;    width: 100%;    height: 100%;    opacity: 0.8;    z-index: 999;}/* You can customize to your needs  */ .download-popup {    display: none;    background: #333;    padding: 10px;    float: left;    position: fixed;    top:50%;    left:50%;    width:400px;    /* adjust as per your needs */    height:400px;    /* adjust as per your needs */    margin-left:-200px;    /* negative half of width above */    margin-top:-200px;    /* negative half of height above */    z-index: 99999;    border-radius: 3px 3px 3px 3px;    -moz-border-radius: 3px;    -webkit-border-radius: 3px;}tritium.js:$(window).scroll(function () {    // jQuery to collapse the navbar on scroll    if ($(.navbar).offset().top > 50) {        $(.navbar-fixed-top).addClass(top-nav-collapse);    } else {        $(.navbar-fixed-top).removeClass(top-nav-collapse);    }    // jQuery to animate atom SVG    var s = ($(window).scrollTop() / (($(#intro).height() + $(#about).height()) - $(window).height()));    var r1 = 40 + 106 * s,        r2 = 160 - 100 * s;    $(#a1).attr(transform, rotate( + r1 + ));    $(#a2).attr(transform, rotate( + r2 + ));});// jQuery for page scrolling feature - requires jQuery Easing plugin$(function () {    $('.page-scroll a').bind('click', function (event) {        var $anchor = $(this);        $('html, body').stop().animate({            scrollTop: $($anchor.attr('href')).offset().top        }, 1000, 'easeInOutExpo');        event.preventDefault();    });});$(document).ready(function () {    $('a.download-window').click(function () {        var a = document.createElement(a);        a.target = '_blank';        a.href = https://github.com/syb0rg/Tritium;        var evt = document.createEvent(MouseEvents);        //the tenth parameter of initMouseEvent sets ctrl key        evt.initMouseEvent(click, true, true, window, 0, 0, 0, 0, 0,        true, false, false, true, 0, null);        a.dispatchEvent(evt);        $(body).css(overflow, hidden);        //Getting the variable's value from a link         var loginBox = $(this).attr('href');        //Fade in the Popup        $(loginBox).fadeIn(500);        // Add the mask to body        $('body').append('<div id=mask></div>');        $('#mask').fadeIn(300);        return false;    });    // When clicking on the button close or the mask layer the popup closed    $('a.close, #mask').on('click', function () {        $('#mask , .download-popup').fadeOut(300, function () {            $('#mask').remove();            $(body).css(overflow, auto);        });        return false;    });});
Tritium website
javascript;jquery;html5;css3
About your HTMLYou still have a <?php flush(); ?> in your HTML code.To be on the safe side, you might want to escape & in URLs with &amp; (but its only required for ambiguous ampersands).You have a script after the body element, which is not allowed.You are missing many > of your a start tags (i.e., you are using <a <i></i></a>).Your img containing the logo must have an alt attribute, but it should be empty in your case because the logo contains no relevant content:<img src=img/tritium-logo.svg height=100 width=100 alt= />Empty linksAn empty link like <a href=# class=close><i class=fa fa-times btn-close></i></a> (you have some more of these) is not accessible.And using the i element for this is not appropriate. If you really need this empty element, it should be a span instead.Side effect of these font icon links (which is a problem many sites have): For me, these links look like that:OutlineYou dont want to have the page heading (Tritium) in a section element. Its the heading for the whole page, so it should belong to the body sectioning root, not only to its section. As it contains no content suitable for a section, remove this first section element completely.The section with the Please Donate! heading should get its own section element.So removing anything not related to the outline, you would get this structure:<body>    <nav>    </nav>    <h1>Tritium</h1>    <section>        <h2>About Tritium</h2>    </section>    <section>        <h2>Contact</h2>    </section>    <section>        <h2>Please Donate!</h2>    </section></body>You might want to consider using a header element for the page heading and the logo (you could even include the nav in it, too):<header>  <!-- also the 'nav', if you like -->  <img src=img/tritium-logo.svg height=100 width=100 alt= />  <h1 class=brand-heading>Tritium</h1></header>