index-nav.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Newspaper - Home</title>
        <!-- Website Stylesheets -->
        <link href="styles/style.css" type="text/css" rel="stylesheet">
        <link href="styles/fonts.css" type="text/css" rel="stylesheet">
        <!-- Font Awesome (https://fontawesome.com/) -->
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
    </head>
    <body id="top" class="flex">
        <!-- Site Header -->
        <header class="site-header">
            <a class="menu-button" href="index-nav.html"><i class="fas fa-bars"></i></a>
            <a class="logo" href="index.html"><img src="images/logo.png" alt="Newspaper Logo"></a>
            <div class="search-box">
                <i class="fas fa-search"><input type="search" value="Search"></i>
            </div>
            <a class="search-button" href="index-search.html"><i class="fas fa-search"></i></a>
        </header>

        <!-- Site Navigation -->
        <nav class="site-nav">
            <ul>
                <li><a class="current-page" href="index.html">Home</a></li>
                <li><a href="reviews.html">Reviews</a></li>
                <li><a href="glossary.html">Glossary</a></li>
                <li><a href="jobs.html">Jobs</a></li>
                <li><a href="tutorials.html">Tutorials</a></li>
            </ul>
        </nav>
        
        <!-- Mobile Navigation -->
        <nav class="mobile-nav">
            <ul>
                <li><a class="close-button" href="index.html"><i class="fas fa-times"></i></a></li>
                <li><a href="index.html">Home</a></li>
                <li><a href="reviews.html">Reviews</a></li>
                <li><a href="glossary.html">Glossary</a></li>
                <li><a href="jobs.html">Jobs</a></li>
                <li><a href="tutorials.html">Tutorials</a></li>                    
            </ul>
        </nav>
        
        <!-- Site Main -->
        <main class="site-main">
            <!-- Featured Articles -->
            <h2>Featured Articles</h2>
            <div class="card-wrapper">
                <a class="carousel-arrow carousel-arrow-left" href=""><i class="fas fa-arrow-alt-circle-left"></i></a>
                <div class="card">
                    <!-- Image from https://www.pexels.com/photo/book-computer-design-development-326424/ -->
                    <img src="images/articles/homepage/featured/article-1.jpg" alt="Laptop with a book covering HTML & CSS.">
                    <h2>The Top 10 Best Resources For Learning HTML & CSS</h2>
                    <p>Are you wanting to begin your journey as a Web Developer? Are you unsure on where you should start your learning from? If so, this article is for you! Not only will we be looking at the Top 10 best resources for learning HTML & CSS, but also the quality of the content they each provide for learning.</p>
                    <a class="button" href="#">Read More</a>
                </div>
                <div class="card">
                    <!-- Image from https://www.pexels.com/photo/close-up-of-computer-keyboard-248515/ -->
                    <img src="images/articles/homepage/featured/article-2.jpg" alt="HTML and CSS code displayed within a code editor.">
                    <h2>The Benefits Of Writing Clear And Efficient Code</h2>
                    <p>When writing any form of code, whether it be in a language such as HTML, CSS or JavaScript, it is possible for code to become disorganised as the size of a project grows. In some cases, this may make it harder and/or impossible to read. In this article we will be exploring the benefits of writing clear and efficient code, along with providing examples that can help you to improve your own code.</p>
                    <a class="button" href="#">Read More</a>
                </div>
                <div class="card">
                    <!-- Image from https://www.pexels.com/photo/apple-computer-desk-devices-326501/ -->
                    <img src="images/articles/homepage/featured/article-3.jpg" alt="An iMac with a secondary monitor running Adobe Photoshop.">
                    <h2>Optimising Images For The Web</h2>
                    <p>When creating graphical content to include on your website, whether it be in the form of images or videos, it is important to keep file sizes in mind. Having large file sizes can result in a user having to download a large amount of data, potentially having an impact on performance. In this article, we explore the different image file types that are used on the web, the advantages and disadvantages of using each, and methods on optimising already existing images for use on the web.</p>
                    <a class="button" href="#">Read More</a>
                </div>
                <a class="carousel-arrow carousel-arrow-right" href=""><i class="fas fa-arrow-alt-circle-right"></i></a>
            </div>

            <!-- Other Articles -->
            <h2 class="card-header">Other Articles</h2>
            <div class="card-wrapper">
                    <a class="carousel-arrow carousel-arrow-left" href=""><i class="fas fa-arrow-alt-circle-left"></i></a>
                    <div class="card">
                        <!-- Image from https://unsplash.com/photos/Fi-GJaLRGKc -->
                        <img src="images/articles/homepage/other/article-4.jpg" alt="JavaScript code being displayed in a code editor.">
                        <h2>Java & JavaScript: What's The Difference?</h2>
                        <p>Whilst they may sound similar, Java and JavaScript are in fact two different programming languages. Whilst both languages are used in the development of websites and/or web applications, they are used for different purposes. Here, we explain the differences between both Java and JavaScript and how they're used in Web Development.</p>
                        <a class="button" href="#">Read More</a>
                    </div>
                    <div class="card">
                        <!-- Image from https://www.pexels.com/photo/internet-screen-security-protection-60504/ -->
                        <img src="images/articles/homepage/other/article-5.jpg" alt="Cursor hovering over a navigation link labelled Security.">
                        <h2>HTTP Vs. HTTPS: How can you keep your website secure?</h2>
                        <p>In today's world, it is more important than ever to keep your website and/or web application secure, especially if it allows access to sensitive data. Without the proper measures in place, this could potentially result in sensitive data being leaked and internal company policies being revealed, alongside the company's reputation being damaged. In this article, we will discuss the differences between HTTP and HTTPS alongside the methods that can be used to keep your website/web application secure.</p>
                        <a class="button" href="#">Read More</a>
                    </div>
                    <div class="card">
                        <!-- Image from https://www.pexels.com/photo/interior-of-office-building-325229/ -->
                        <img src="images/articles/homepage/other/article-6.jpg" alt="Server racks in a data center.">
                        <h2>What web host should you choose?</h2>
                        <p>When it comes to delivering your website to the world, companies and individuals often use the services provided by a web host, a company that provides space on their own servers for hosting websites for clients. Whilst a web server can be set up without the need for a web host, a web host usually makes it easier for small businesses and inviduals to deliver their own websites. Here we will showcase some of the most popular web hosts that are used in the UK, the services that they each provide, and which web host is most ideal for those on a budget.</p>
                        <a class="button" href="#">Read More</a>
                    </div>
                    <a class="carousel-arrow carousel-arrow-right" href=""><i class="fas fa-arrow-alt-circle-right"></i></a>
                </div>
        </main>

        <!-- Site Footer -->
        <footer class="site-footer">
            <p>Copyright &copy; 2018 <a class="name" href="https://darkmetal485.github.io/" target="_blank">Alexander Turner</a></p>
            <ul class="social-icons">
                <li><a href="https://github.com/UoN-Computing/Turner_18416709" target="_blank"><i class="fab fa-github"></i></a></li>
                <li><a href="https://www.linkedin.com/in/alexander-turner-aa8883156/" target="_blank"><i class="fab fa-linkedin"></i></a></li>
                <li><a href="https://twitter.com/DarkMetal485" target="_blank"><i class="fab fa-twitter"></i></a></li>
            </ul>
            <p>
                <a href="https://jigsaw.w3.org/css-validator/check/referer">
                    <img style="border:0;width:88px;height:31px"
                    src="https://jigsaw.w3.org/css-validator/images/vcss"
                    alt="Valid CSS!" />
                </a>
            </p>   
            <a class="back-to-top" href="#top"><i class="fas fa-arrow-circle-up"></i> Back To Top</a>
        </footer>
    </body>
</html>