index.html

<!DOCTYPE html>
<html lang="en">

<head>
	<!-- Bootstrap Meta Tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description"
        content="YourSpace"> 
	
	<!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css"
        integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
	
	<!-- Font Awesome -->
    <script src="https://kit.fontawesome.com/72d227a617.js" SameSite="None; Secure" crossorigin="anonymous"></script>

    <!-- Icon -->
    <link rel="apple-touch-icon" sizes="180x180" href="images/favicon/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="images/favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="images/favicon/favicon-16x16.png">
    <link rel="manifest" href="/site.webmanifest">
	
	<!-- Website CSS -->
    <link rel="stylesheet" type="text/css" href="styles/styles.css">
    <link rel="stylesheet" type="text/css" href="styles/media.css">
	
	<title>YourSpace</title>
	
	<script src="https://code.jquery.com/jquery-3.5.1.min.js"
	        integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous">
	    </script>

</head>

<body>
    <div id='header'>
        <div class='container'>
            <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top py-lg-0">
                <a class="navbar-brand" href="index.html">
                    <img src="images/yourspacelogo.png" width=80px height=80px alt="logo" class="logo-img d-inline-block">
                </a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                <div class="navbar-nav ml-auto">
                    <a class="nav-item nav-link" href="#about">About</a>
                    <a class="nav-item nav-link" href="#features">Features</a>
                    <a class="nav-item nav-link" href="#team">Team</a>
                </div>
                </div>
            </nav>
        </div>
    </div>

    <div id='page'>
        <div class='container'>

            <div class='row section'>
                <div class='col-md-6' class='fade'>
                    <h1 id='intro'>YourSpace</h1>
                    <p>A convenient and portable online tool provides students the ability to be organized and study more effectively. YourSpace provides students with an all-in-one approach,
                        the ability to manage to do lists, listen to music, set timers, and discuss 
                        with their peers, all in one space.
                    </p>
                    <p>
                        Avoid the clutter - choose <b>YourSpace</b>
                    </p>

                    <a class='btn btn-primary btn-lg' href="https://chrome.google.com/webstore/detail/yourspace/hbnjcjicdodldbfjcplllfdimjoocjmk?utm_source=chrome-ntp-icon" target='_blank' role='button'>Download Chrome Extension</a>
        
                </div>
                <div class='col-md-4 extension justify-content-center'>
                    <div class="pictureextension"><img src="images/extension.png" style='border:1px solid #274c77'></div>
                </div>
                <a name='about'></a>
            </div>

            
            
            <div class='row section' >
                <div class='col-md-5'>
                    <br>
                    <br>
                    <div class="pictureabout"><img src="images/About.png"></div>
                </div>
                <div class='col-md-6 offset-1 about' class='fade'>
                    <h1>About</h1>
                    <p>
                        Think back to the countless times you have wished <b>“Why couldn’t all of my studying and school assignment 
                        deadlines be in one place?”</b> or <b>“How can I study more effectively with my time without getting distracted 
                        by switching through apps”? </b>
                    </p>
                    <p>This is why we decided to create a Chrome extension to solve this problem.
                        Nowadays there are so many different productivity apps you can find. But in practice trying to use all of them doesn't 
                        maximize productivity, it wastes time. Wishing there was a simple place where all to-do lists from homework & assignments, 
                        timers and music was stored is what birthed YourSpace.
                    </p>    
                </div>
            <a name='features'></a>
            </div>
            
            <div class='row features' class='fade'>
                <h1>Features</h1>
                <p>Upon opening up the extension, you will see many features including, a digital <b>To-do List</b> to manage and keep track of your homework. 
                    The <b>Music Manager</b> helps quickly control the music you want played while you study and will connect to your Spotify, Apple Music, or Google Music account.
                    The ability to change whatever <b>Wallpaper</b> you want as a background to study & finally a <b>Productivity Mode</b> which allows you to block applications.</p>
            </div>
            <div class='row justify-content-center columns' class='fade'>
                <div class=col-md-3>
                    <p>To-Do List</p>
                    <i class="iconfeatures fas fa-th-list fa-3x"></i>
                </div>
                <div class=col-md-3>
                    <p>Wallpaper</p>
                    <i class="iconfeatures fas fa-images fa-3x"></i>
                </div>
                <div class=col-md-3>
                    <p>Music Manager</p>
                    <i class="iconfeatures fas fa-music fa-3x"></i>
                </div>
                <div class=col-md-3>
                    <p>Productivity Mode</p>
                    <i class="iconfeatures fas fa-ban fa-3x"></i>
                </div>
                <a name='team'></a>
            </div>
            <br>
            <br>
            <div class='row features section' class='fade'>
                <p>Some features we want to add in next updates include: <b>Study Together</b> which would offer a shared room with a chatbox
                to study with friends, <b>Pomodoro</b> to allow users to structure their studying and plan breaks. Finally, expanding
                the Chrome Extension to a <b>Web Application</b> making it available for all browsers.</p>
            </div>

            <div id='team'>
            <div class='row team'>
                <h1>Team</h1>
            </div>
            <div class='row section pictures justify-content-center'>
                <div class="col-md-3">
                    <div class="image"><img src="images/Empty.PNG" style='border:1px solid #274c77' class="fit-image"></div>
                    <p class="mt-2 text-center image-name">Emily Saint
                        <br>
                        <a class="socials" href="https://www.linkedin.com/in/emilysaint/" target='_blank'><i class="fab fa-linkedin fa-lg"></i></a>
                        <a class="socials" href="https://github.com/emilysaint" target='_blank'><i class="fab fa-github-square fa-lg"></i></a>
                    </p>
                    
                </div>
                <div class="col-md-3">
                    <div class="image"><img src="images/lauryne.jpeg" style='border:1px solid #274c77' class="fit-image"></div>
                    <p class="mt-2 text-center image-name">Lauryne Assa
                        <br>
                        <a class="socials" href="https://www.linkedin.com/in/lauryne-assa/" target='_blank'><i class="fab fa-linkedin fa-lg"></i></a>
                        <a class="socials" href="https://github.com/lauryneada" target='_blank'><i class="fab fa-github-square fa-lg"></i></a>
                    </p>

                </div>

                <div class="col-md-3">
                    <div class="image"><img src="images/Rishabh.jpg" style='border:1px solid #274c77' class="fit-image"></div>
                    <p class="mt-2 text-center image-name">Rishabh Sharma
                        <br>
                        <a class="socials" href="https://www.linkedin.com/in/rishabh2003sharma/" target='_blank'><i class="fab fa-linkedin fa-lg"></i></a>
                        <a class="socials" href="https://github.com/ri3habh" target='_blank'><i class="fab fa-github-square fa-lg"></i></a>
                    </p>
                </div>

                <div class="col-md-3">
                    <div class="image"><img src="images/shayan.jpeg" style='border:1px solid #274c77' class="fit-image"></div>
                    <p class="mt-2 text-center image-name">Shayan Rahman
                        <br>
                        <a class="socials" href="https://www.linkedin.com/in/shayan-rahman-89a414218/" target='_blank'><i class="fab fa-linkedin fa-lg"></i></a>
                        <a class="socials" href="https://github.com/Hagoo21" target='_blank'><i class="fab fa-github-square fa-lg"></i></a>
                    </p>
                </div>
            </div>
            </div>
        </div>
    </div>

    <div id='footer'>
        
    </div>

    <!-- J Query -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    
    <!-- Bootstrap Javascript -->
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
        integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/js/bootstrap.min.js"
        integrity="sha384-XEerZL0cuoUbHE4nZReLT7nx9gQrQreJekYhJD9WNWhH8nEW+0c5qq7aIo2Wl30J"
        crossorigin="anonymous"></script>

    <!-- Scripts -->
    <script type="text/javascript" src="scripts/script.js"></script>
</body>