training.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://kit.fontawesome.com/ae98632ed3.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hover.css/2.1.1/css/hover-min.css" type="text/css" />
    <link rel="stylesheet" type="text/css" href="assets/css/style.css">
    <title>Smart Soccer</title>
</head>

<body>
    <header>
        <!-- Navbar -->
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
            <div class="container">
                <a class="navbar-brand" href="index.html">
					SMART Soccer <span><i class="fas fa-brain"></i><i class="fas fa-futbol"></i></span>
				</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarResponsive">
                    <ul class="navbar-nav ml-auto">
                        <li class="nav-item">
                            <a class="nav-link" href="index.html">Home</a>
                        </li>
                        <li class="nav-item active">
                            <a class="nav-link" href="training.html">Training
								<span class="sr-only">(current)</span>
							</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="blog-start.html">Blog</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="contact.html">Contact</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>

    <!-- Training title and Special Offer -->
    <section class="training-header-section">
        <div class="container-fluid">
            <div class="row justify-content-center">
                <div class="col-12 training-header">
                    <h2>Training Offers</h2>
                </div>
            </div>
            <div class="row justify-content-center">
                <div class="col-6 col-sm-4 col-lg-3 promotion">
                    <button class="promotion-button" onclick="window.location.href = 'contact.html';">First 2 hours are free!
                        <br>Click to Book</button>
                </div>
            </div>
        </div>
    </section>

    <!-- Types of Training -->
    <section class="training-types-section">
        <div class="container-fluid">
            <div class="row justify-content-center">
                <div class="col-lg-4 col-sm-12 individual-training">
                    <h3>Individual</h3>
                    <img src="assets/images/individual-training.jpg" class="img-fluid" alt="Boy playing soccer">
                    <p>Perhaps you're a player looking to try and gain that extra edge? Or a parent who would like to get their child more engaged in soccer/outdoor activities? I can provide the following offer:</p>
                    <ul>
                        <li>300 SEK per hour</li>
                        <li>Free cancellation 24 hours before booking</li>
                        <li>Open to all ages, male and female</li>
                        <li>Open to all levels of ability</li>
                    </ul>
                </div>
                <div class="col-lg-4 col-sm-12 group-training">
                    <h3>Group</h3>
                    <img src="assets/images/group-training.jpg" class="img-fluid" alt="Women at soccer training">
                    <p>You're a defensive/attacking unit in the team who want to work on specific team play together? Or maybe a parent with more than one child you'd want to get active? Here's my Group offer:</p>
                    <ul>
                        <li>500 SEK per hour (2 minimum, 50 SEK for every extra person)</li>
                        <li>Free cancellation 48 hours before booking</li>
                        <li>Open to all ages, male and female</li>
                        <li>Open to all levels of ability</li>
                    </ul>
                </div>
                <div class="col-lg-4 col-sm-12 team-training">
                    <h3>Team</h3>
                    <img src="assets/images/team-training.jpg" class="img-fluid" alt="Women's team in team photo">
                    <p>You're a coach looking to get the best out of your team? Maybe even need support/inspiration for how to tackle pre-season? My Team offering is as follows::</p>
                    <ul>
                        <li>Free consultation session, followed by price offer depending on scope</li>
                        <li>Contract length minimum 1 month</li>
                        <li>Open to all ages, male and female</li>
                        <li>Open to all levels of ability</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <section class="training-location">
        <div class="container-fluid">
            <div class="row justify-content-center">
                <div class="col-12 training-location-header">
                    <h2>Training Location</h2>
                </div>
            </div>
        </div>

        <div class="container-fluid">
            <div class="row justify-content-center location-map-background">
                <div class="col-10 training-location-map embed-responsive embed-responsive-4by3">
                    <iframe class="embed-responsive-item" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2033.3871146571398!2d17.990935416069764!3d59.35987788166955!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x465f9d935e4d575f%3A0x4a774b75848a0ed2!2sSkytteholms%20IP!5e0!3m2!1sen!2sse!4v1582270331652!5m2!1sen!2sse" width="600" height="450" style="border:0;"></iframe>
                </div>
                <div class="col-10">
                    <!-- Button trigger modal -->
                    <button type="button" class="btn btn-primary training-times-button" data-toggle="modal" data-target="#trainingTimes">
                        Training Times
                    </button>
                </div>
            </div>
        </div>

        <!-- Modal -->
        <div class="container-fluid">
            <div class="row">
                <div class="col-8">
                    <div class="modal fade training-times-modal" id="trainingTimes" tabindex="-1" role="dialog" aria-labelledby="trainingTimesLabel" aria-hidden="true">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="trainingTimesLabel">Availability for Trainings</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    <div class="container-fluid">
                                        <div class="row">
                                            <div class="col-md-4">Monday-Friday:</div>
                                            <div class="col-md-4 ml-auto">09.00 - 20.00</div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-4">Saturday-Sunday:</div>
                                            <div class="col-md-4 ml-auto">09.00 - 17.00</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                    <button type="button" class="btn btn-primary modal-book-button" onclick="window.location.href='contact.html';">Book Training</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer>
        <div class="container-fluid bg-dark">
            <div class="row justify-content-sm-between">
                <div class="col-sm-4 footer-logo">
                    <h5>SMART Soccer <span><i class="fas fa-brain"></i><i class="fas fa-futbol"></i></span></h5>
                    <p class="inline-block">A service provided by Gustaf Ljungwaldh, an experienced football coach utilizing SMART goal setting methodology</p>
                </div>
                <div class="col-sm-4">
                    <h5>Social Media</h5>
                    <ul class="list-inline social-links">
                        <li class="list-inline-item">
                            <a target="_blank" href="https://www.facebook.com/">
                                <i class="fab fa-facebook" aria-hidden="true"></i>
                                <span class="sr-only">Facebook</span>
                            </a>
                        </li>
                        <li class="list-inline-item">
                            <a target="_blank" href="https://www.instagram.com/">
                                <i class="fab fa-instagram"></i>
                                <span class="sr-only">Instagram</span>
                            </a>
                        </li>
                        <li class="list-inline-item">
                            <a target="_blank" href="https://www.youtube.com/">
                                <i class="fab fa-youtube" aria-hidden="true"></i>
                                <span class="sr-only">YouTube</span>
                            </a>
                        </li>
                        <li class="list-inline-item">
                            <a target="_blank" href="https://twitter.com/">
                                <i class="fab fa-twitter" aria-hidden="true"></i>
                                <span class="sr-only">Twitter</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </footer>

    <!-- Javascript, enabling navbar -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
    </script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous">
    </script>
</body>

</html>