Skip to content
Permalink
master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Go to file
 
 
Cannot retrieve contributors at this time
<!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>