Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
240 lines (225 sloc) 11.2 KB
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="./css/owl.carousel.min.css">
<!-- <link rel="stylesheet" href="./css/owl.theme.default.min.css"> -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<link rel="stylesheet" href="./css/main.css">
<link rel="stylesheet" href="./css/responsive.css">
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<link rel="stylesheet" href="../../css/projects.css">
<link rel="icon" type="image/png" href="./img/fcb-logo.png">
<title>FC Barcelona Fans - Always Stay Up To Date!</title>
</head>
<body>
<div class="btn-fixed-group">
<a href="../../index.html#projects" target="_self" class="site-btn btn-theme-blue-tr btn-github">
<i class="fas fa-arrow-alt-circle-left"></i> Projects</a>
<a target="_blank" class="site-btn btn-theme-blue-tr btn-github" href="https://github.com/alanthinks/alanthinks.github.io/blob/master/projects/spigot/soccer-landing.html">
<i class="fab fa-github"></i> Code</a>
</div>
<div class="container">
<header>
<div class="header-img">
<img src="./img/fcb-logo.png " alt=" ">
</div>
<div class="header-text ">
<h1>FC BARCELONA FANS!</h1>
<h2>Always Stay Up To Date</h2>
</div>
</header>
<div class="notifications-bar">
<div class="owl-carousel">
<div class="notification-main">
<div class="notification-inner ">
<div class="notification-img">
<img src="./img/messi-face.png " alt="FC Barcelona Logo">
</div>
<div class="notification-text">
<p class="news-text ">Leo Messi scores 3 goals against Atlético Madrid FC</p>
<p class="news-date ">4/11/2018</p>
</div>
</div>
</div>
<div class="notification-main">
<div class="notification-inner ">
<div class="notification-img">
<img src="./img/real-madrid-logo.png " alt="FC Barcelona Logo">
</div>
<div class="notification-text">
<p class="news-text ">"El Clásico" scheduled for October, 28, 2018</p>
<p class="news-date ">10/1/2018</p>
</div>
</div>
</div>
<div class="notification-main">
<div class="notification-inner ">
<div class="notification-img">
<img src="./img/iniestas-face.png " alt="FC Barcelona Logo">
</div>
<div class="notification-text">
<p class="news-text ">Andres Iniesta Retires after 2 decades at FC Barcelona</p>
<p class="news-date ">9/28/2017</p>
</div>
</div>
</div>
<div class="notification-main">
<div class="notification-inner ">
<div class="notification-img">
<img src="./img/busquets-face.png " alt="FC Barcelona Logo">
</div>
<div class="notification-text">
<p class="news-text ">Sergio Busquets injures his right hamstring</p>
<p class="news-date ">1/8/2017</p>
</div>
</div>
</div>
</div>
</div>
<div class="value-points-section ">
<div class="value-box ">
<div class="value-item ">
<img src="./img/SVG/icons-ball.svg" alt=" ">
<div class="value-text ">
Game Updates & Breaking News
</div>
</div>
<div class="value-item ">
<img src="./img/SVG/icons-transfer.svg" alt=" ">
<div class="value-text ">
Transfer Rumors
</div>
</div>
<div class="value-item ">
<img src="./img/SVG/icons-tickets.svg" alt=" ">
<div class="value-text ">
Special Ticket Discounts
</div>
</div>
</div>
</div>
<div class="cta-box ">
<button class="btn barcelona-cta activate-install" data-toggle="modal" data-target="#confirmationModal">
<div>CLICK HERE</div>
<div class="btn-subtext">and always be up to date with FC Barcelona!</div>
<div class="btn-subtext-mobile">and always be up to date!</div>
</button>
</div>
<footer>
<div class="testimonial-box ">
<img src="./img/testimonial-profile-pic.png" alt=" ">
<div class="testimonial-text ">
"Never again will I be the last one to find out when a player is being transfered! "
</div>
<div class="testimonial-name ">
<img src="./img/twitter-icon.png" alt="">@MonaLisa1503
</div>
</div>
<img class="fixed-img" src="./img/suarez.png" alt="">
</footer>
</div>
<!-- Modal -->
<div class="modal fade" id="confirmationModal" tabindex="-1" role="dialog" aria-labelledby="confirmationModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<div class="modal-title">
<h5 id="confirmationModalLabel">Great!</h5>
<h4>Would you also like to stay up to date with these leagues?</h4>
</div>
<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="other-notifications-line-item">
<a href="#">
<div class="row mr-5">
<div class="col-2">
<img src="./img/mls-logo.png" alt="">
</div>
<div class="col">MLS News</div>
<div class="col-2 mr-2">
<button>Subscribe</button>
</div>
</div>
</a>
</div>
<div class="other-notifications-line-item">
<a href="#">
<div class="row mr-5">
<div class="col-2">
<img src="./img/nfl-logo.png" alt="">
</div>
<div class="col">NFL News</div>
<div class="col-2 mr-2">
<button>Subscribe</button>
</div>
</div>
</a>
</div>
<!-- <div class="other-notifications-line-item">
<a href="#">
<div class="row mr-5">
<div class="col-2">
<img src="./img/nba-logo.png" alt="">
</div>
<div class="col">NBA News</div>
<div class="col-2 mr-2">
<button>Subscribe</button>
</div>
</div>
</a>
</div>
<div class="other-notifications-line-item">
<a href="#">
<div class="row mr-5">
<div class="col-2">
<img src="./img/mlb-logo.png" alt="">
</div>
<div class="col">MLB News</div>
<div class="col-2 mr-2">
<button>Subscribe</button>
</div>
</div>
</a>
</div>
<div class="other-notifications-line-item">
<a href="#">
<div class="row mr-5">
<div class="col-2">
<img src="./img/nhl-logo.png" alt="">
</div>
<div class="col">NHL News</div>
<div class="col-2 mr-2">
<button>Subscribe</button>
</div>
</div>
</a>
</div>
</div> -->
<div class="modal-footer">
<button data-dismiss="modal" href="#" type="button" class="btn btn-secondary">No, Thanks</button>
</div>
</div>
</div>
</div>
<!-- Javascript -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js " integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo "
crossorigin="anonymous "></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js " integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49 "
crossorigin="anonymous "></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js " integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy "
crossorigin="anonymous "></script>
<script src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous"></script>
<script src="./js/owl.carousel.min.js"></script>
<script src="./js/main.js "></script>
<!-- Push Notification Javscript -->
<!-- <script src="https://www.gstatic.com/firebasejs/4.6.2/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.6.2/firebase-messaging.js"></script>
<script src="https://pushible.com/js/prompt?imp=adx"></script> -->
</body>
</html>