product.html

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

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Title -->
    <title>Puzzle Product</title>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="css/fontawesome-all.css" />
    <!-- Animated CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Chilanka&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Luckiest+Guy&display=swap" rel="stylesheet">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <!-- Favicon -->
    <link rel="shortcut icon" href="images/Logo.png" type="image/x-icon">
    <!-- Stylesheet -->
    <link rel="stylesheet" href="css/stylesheet.css" />
</head>

<body>

    <!-- Loading Screen-->
    <div id='loading'>
        <div class="loading__primary"></div>
        <div class="loading__secondary"></div>
        <div class="loading__tertiary"></div>
    </div>
    <!-- Loading Screen-->

    <!-- Uppernav -->
    <div class="uppernav">
        <ul class="list-unstyled uppernav__list">
            <li class='uppernav__item'>
                <a href="shop.html" class='uppernav__link'>
                    <i class="fas fa-shopping-cart uppernav__icon"></i>
                    <span class='uppernav-text'>Shop</span>
                </a>
            </li>
            <li class='uppernav__item' id='notification__btn'>
                <i class="fas fa-bell uppernav__icon"></i>
                <span class='uppernav-text'>Notifications</span>
                <span class='notification__count'>3</span>
                <div class="settings">
                    <h5>Notifications</h5>
                    <ul class="list-unstyled notification">
                        <li class='notify'>
                                <p class="paragraph">
                                    Your kid <strong>Mohamed</strong> has joined <strong>Alphabetic Workshop</strong>
                                </p>
                            <div class="notify__date float-right">3 min ago</div>
                        </li>
                        <li class='notify'>
                            <p class="paragraph">
                                Your kid <strong>Mostafa</strong> has watched <strong>Adventure Time</strong>
                            </p>
                            <div class="notify__date float-right">1 hour</div>
                        </li>
                        <li class='notify'>
                            <p class="paragraph">
                                Your kid <strong>Mohamed</strong> has played <strong>Puzzle</strong>
                            </p>
                            <div class="notify__date float-right">5 min ago</div>
                        </li>
                        <li class='notify'>
                            <p class="paragraph">
                                Your kid <strong>Mostafa</strong> has watched <strong>Adventure Time</strong>
                            </p>
                            <div class="notify__date float-right">1 hour</div>
                        </li>
                        <li class='notify'>
                            <p class="paragraph">
                                Your kid <strong>Mohamed</strong> has joined <strong>Alphabetic Workshop</strong>
                            </p>
                            <div class="notify__date float-right">3 min ago</div>
                        </li>
                        <li class='notify'>
                            <p class="paragraph">
                                Your kid <strong>Mohamed</strong> has played <strong>Puzzle</strong>
                            </p>
                            <div class="notify__date float-right">5 min ago</div>
                        </li>
                    </ul>
                </div>
            </li>
            <li class='uppernav__item' id='profile__btn'>
                <i class='fa fa-user uppernav__icon'></i>
                <span class='uppernav__text'>Mostafa <i class='fas fa-chevron-down'></i></span>
                <div class="profile__settings">
                    <ul class="list-unstyled links">
                        <li><a href="parent.html">Profile</a></li>
                        <li><a href="index.html">Logout</a></li> 
                    </ul>
                </div>
            </li>
        </ul>
    </div>
    <!-- Uppernav -->

    <!-- Main Wrapper -->
    <div class="shop">
        <!-- Shop Header -->
        <div class="shop-header">
            <a href="index.html">
                <button class="ak-btn ak-btn-bth mt-5 mb-5">
                    <i class="fas fa-chevron-left"></i>
                    Back to homepage
                </button>
            </a>
            <div class="shop-header__logo-box">
                <a href='index.html'><img src="images/Logo.png" alt="Logo" class='header__logo img-fluid'></a>
                <div class="slogan">
                    <h2 class="heading-secondary">Alpha kids shop</h2>
                    <h2 class="heading-primary">Buy and make them happy!</h2>
                </div>
            </div>
        </div>
        <!-- Shop Header -->
    
        <!-- Shop Search -->
        <div class="shop-search">
            <form action="" method="">
                <div class="form-group">
                    <i class="fas fa-search"></i>
                    <input type="search" class="form-control" placeholder='Search'>
                </div>
            </form>
        </div>
        <!-- Shop Search -->

        <!-- Product ********************************* -->
        <div class="product-preview mt-5 mb-5">
            <div class="container">
                <div class="row">
                    <div class="col-md-4">
                        <div class="product-preview__image">
                            <img src="images/Shop/Games/2.jpg" alt="" class='img-fluid'>
                        </div>
                    </div>
                    <div class="col-md-8">
                        <div class="product__data">
                            <h2 class="heading-secondary">Puzzle</h2>
                            <span class='product__price'>$199</span>
                        </div>
                        <p class="paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique cumque ut cupiditate itaque error, voluptatum dolor culpa adipisci labore tenetur cum ratione accusamus ex tempore vel doloremque officiis nobis explicabo? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores ut quam est nemo quos impedit officiis similique? Vitae nisi tenetur, ex molestiae dolorem, error repellendus dolores, est distinctio perferendis mollitia.</p>
                        <button class='ak-btn ak-btn-primary mt-5'>Buy now</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- Product ********************************* -->
        <hr>
        <!-- Content -->
        <div class="content">
            <div class="container">
                <!-- Suggestions -->
                <!-- Suggestions Slider-->
                <h2 class="heading-secondary mt-5">Related Products</h2>
                <div id="suggestions" class="carousel slide" data-ride="carousel">
                        <div class="carousel-inner">
                            <div class="carousel-item active">
                                <div class="row mt-5">
                                    <div class="col-md-4">
                                        <a href='product.html' class='product-link'>
                                            <div class="product">
                                                <div class="product__image product__image--1">
                                                    <img src='images/Shop/Books/1.jpg' alt='' class='img-fluid'>
                                                </div>
                                                <div class='product__data'>
                                                    <h2 class="heading-primary mt-4">Product name</h2>
                                                    <span class="product__price">$199</span>
                                                </div>
                                                <p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus exercitationem</p>
                                            </div>
                                        </a>
                                    </div>
                                    <div class="col-md-4">
                                        <a href='product.html' class='product-link'>
                                            <div class="product">
                                                <div class="product__image product__image--1">
                                                    <img src='images/Shop/Books/2.jpg' alt='' class='img-fluid'>
                                                </div>
                                                <div class='product__data'>
                                                    <h2 class="heading-primary mt-4">Product name</h2>
                                                    <span class="product__price">$199</span>
                                                </div>
                                                <p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus exercitationem</p>
                                            </div>
                                        </a>
                                    </div>
                                    <div class="col-md-4">
                                        <a href='product.html' class='product-link'>
                                            <div class="product">
                                                <div class="product__image product__image--1">
                                                    <img src='images/Shop/Books/3.jpg' alt='' class='img-fluid'>
                                                </div>
                                                <div class='product__data'>
                                                    <h2 class="heading-primary mt-4">Product name</h2>
                                                    <span class="product__price">$199</span>
                                                </div>
                                                <p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus exercitationem</p>
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="carousel-item">
                                <div class="row mt-5">
                                    <div class="col-md-4">
                                        <a href='product.html' class='product-link'>
                                            <div class="product">
                                                <div class="product__image product__image--1">
                                                    <img src='images/Shop/Books/4.jpg' alt='' class='img-fluid'>
                                                </div>
                                                <div class='product__data'>
                                                    <h2 class="heading-primary mt-4">Product name</h2>
                                                    <span class="product__price">$199</span>
                                                </div>
                                                <p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus exercitationem</p>
                                            </div>
                                        </a>
                                    </div>
                                    <div class="col-md-4">
                                        <a href='product.html' class='product-link'>
                                            <div class="product">
                                                <div class="product__image product__image--1">
                                                    <img src='images/Shop/Books/5.jpg' alt='' class='img-fluid'>
                                                </div>
                                                <div class='product__data'>
                                                    <h2 class="heading-primary mt-4">Product name</h2>
                                                    <span class="product__price">$199</span>
                                                </div>
                                                <p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus exercitationem</p>
                                            </div>
                                        </a>
                                    </div>
                                    <div class="col-md-4">
                                        <a href='product.html' class='product-link'>
                                            <div class="product">
                                                <div class="product__image product__image--1">
                                                    <img src='images/Shop/Books/1.jpg' alt='' class='img-fluid'>
                                                </div>
                                                <div class='product__data'>
                                                    <h2 class="heading-primary mt-4">Product name</h2>
                                                    <span class="product__price">$199</span>
                                                </div>
                                                <p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus exercitationem</p>
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="carousel-item">
                                <div class="row mt-5">
                                    <div class="col-md-4">
                                        <a href='product.html' class='product-link'>
                                            <div class="product">
                                                <div class="product__image product__image--1">
                                                    <img src='images/Shop/Books/5.jpg' alt='' class='img-fluid'>
                                                </div>
                                                <div class='product__data'>
                                                    <h2 class="heading-primary mt-4">Product name</h2>
                                                    <span class="product__price">$199</span>
                                                </div>
                                                <p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus exercitationem</p>
                                            </div>
                                        </a>
                                    </div>
                                    <div class="col-md-4">
                                        <a href='product.html' class='product-link'>
                                            <div class="product">
                                                <div class="product__image product__image--1">
                                                    <img src='images/Shop/Books/3.jpg' alt='' class='img-fluid'>
                                                </div>
                                                <div class='product__data'>
                                                    <h2 class="heading-primary mt-4">Product name</h2>
                                                    <span class="product__price">$199</span>
                                                </div>
                                                <p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus exercitationem</p>
                                            </div>
                                        </a>
                                    </div>
                                    <div class="col-md-4">
                                        <a href='product.html' class='product-link'>
                                            <div class="product">
                                                <div class="product__image product__image--1">
                                                    <img src='images/Shop/Books/3.jpg' alt='' class='img-fluid'>
                                                </div>
                                                <div class='product__data'>
                                                    <h2 class="heading-primary mt-4">Product name</h2>
                                                    <span class="product__price">$199</span>
                                                </div>
                                                <p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus exercitationem</p>
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <a class="carousel-control-prev" href="#suggestions" role="button" data-slide="prev">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            <span class="sr-only">Previous</span>
                        </a>
                        <a class="carousel-control-next" href="#suggestions" role="button" data-slide="next">
                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                            <span class="sr-only">Next</span>
                        </a>
                    </div>
                    <!-- Suggestions Slider-->
                <!-- Suggestions -->
                <!-- Suggestion Products -->
                <h2 class="heading-secondary mb-5 mt-5">Suggestion products</h2>
                <div class="row mt-5">
                    <div class="col-md-4">
                        <a href='product.html' class='product-link'>
                            <div class="product">
                                <div class="product__image product__image--1">
                                    <img src='images/Shop/Books/1.jpg' alt='' class='img-fluid'>
                                </div>
                                <div class='product__data'>
                                    <h2 class="heading-primary mt-4">Product name</h2>
                                    <span class="product__price">$199</span>
                                </div>
                                <p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus exercitationem</p>
                            </div>
                        </a>
                    </div>
                    <div class="col-md-4">
                        <a href='product.html' class='product-link'>
                            <div class="product">
                                <div class="product__image product__image--2">
                                    <img src='images/Shop/Books/2.jpg' alt='' class='img-fluid'>
                                </div>
                                <div class='product__data'>
                                    <h2 class="heading-primary mt-4">Product name</h2>
                                    <span class="product__price">$199</span>
                                </div>
                                <p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus exercitationem</p>
                            </div>
                        </a>
                    </div>
                    <div class="col-md-4">
                        <a href='product.html' class='product-link'>
                            <div class="product">
                                <div class="product__image product__image--3">
                                    <img src='images/Shop/Books/3.jpg' alt='' class='img-fluid'>
                                </div>
                                <div class='product__data'>
                                    <h2 class="heading-primary mt-4">Product name</h2>
                                    <span class="product__price">$199</span>
                                </div>
                                <p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus exercitationem</p>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="row mt-5">
                    <div class="col-md-4">
                        <a href='product.html' class='product-link'>
                            <div class="product">
                                <div class="product__image product__image--1">
                                    <img src='images/Shop/Books/1.jpg' alt='' class='img-fluid'>
                                </div>
                                <div class='product__data'>
                                    <h2 class="heading-primary mt-4">Product name</h2>
                                    <span class="product__price">$199</span>
                                </div>
                                <p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus exercitationem</p>
                            </div>
                        </a>
                    </div>
                    <div class="col-md-4">
                        <a href='product.html' class='product-link'>
                            <div class="product">
                                <div class="product__image product__image--2">
                                    <img src='images/Shop/Books/2.jpg' alt='' class='img-fluid'>
                                </div>
                                <div class='product__data'>
                                    <h2 class="heading-primary mt-4">Product name</h2>
                                    <span class="product__price">$199</span>
                                </div>
                                <p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus exercitationem</p>
                            </div>
                        </a>
                    </div>
                    <div class="col-md-4">
                        <a href='product.html' class='product-link'>
                            <div class="product">
                                <div class="product__image product__image--3">
                                    <img src='images/Shop/Books/3.jpg' alt='' class='img-fluid'>
                                </div>
                                <div class='product__data'>
                                    <h2 class="heading-primary mt-4">Product name</h2>
                                    <span class="product__price">$199</span>
                                </div>
                                <p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus exercitationem</p>
                            </div>
                        </a>
                    </div>
                </div>
                <div class='load-more'>
                    <button class='load-more-btn'>Load more</button>
                </div>
                <!-- New Books -->

            </div>
        </div>
        <!-- Content -->
    </div>
    <!-- Main Wrapper-->

    <!-- Footer -->
    <footer class='footer'>
        <div class="container">
            <div class="row">
                <div class="col-sm-4">
                    <div class="footer__logo">
                        <img src="images/Logo.png" alt="" class='img-fluid' />
                    </div>
                </div>
                <div class="col-sm-4">
                    <h2 class="heading-primary heading-white">Sitemap</h2>
                    <ul class='list-unstyled'>
                        <li><a href='index.html'>Home</a></li>
                        <li><a href='workshops.html'>Workshops</a></li>
                        <li><a href='videos.html'>Videos</a></li>
                        <li><a href='games.html'>Games</a></li>
                        <li><a href='parent.html'>Parent Profile</a></li>
                        <li><a href='teacher.html'>Teacher Profile</a></li>
                        <li><a href='shop.html'>Shop</a></li>
                    </ul>
                </div>
                <div class="col-sm-">
                    <h2 class="heading-primary heading-white">Contact us</h2>
                    <p class='paragraph paragraph-white'>exampleemail.gmail.com</p>
                </div>
            </div>
        </div>
    </footer>
    <!-- Footer -->

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="js/jquery-3.1.1.min.js"></script>
    <script src="js/popper.min.js"></script> <!-- Javascript Tooltip library -->
    <script src="js/bootstrap.min.js"></script>
    <!-- Nicescroll -->
    <script src="js/jquery.nicescroll.min.js"></script>
    <script src='js/plugins.js'></script>
</body>

</html>