aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--images/1.jpgbin0 -> 182648 bytes
-rw-r--r--images/logo.pngbin0 -> 3134 bytes
-rw-r--r--images/patron-technology-logo-color.pngbin0 -> 40538 bytes
-rw-r--r--images/showclix-logo-white.pngbin0 -> 2100 bytes
-rw-r--r--index.html227
-rw-r--r--style.css270
6 files changed, 497 insertions, 0 deletions
diff --git a/images/1.jpg b/images/1.jpg
new file mode 100644
index 0000000..12c3aa4
--- /dev/null
+++ b/images/1.jpg
Binary files differ
diff --git a/images/logo.png b/images/logo.png
new file mode 100644
index 0000000..1b46b3c
--- /dev/null
+++ b/images/logo.png
Binary files differ
diff --git a/images/patron-technology-logo-color.png b/images/patron-technology-logo-color.png
new file mode 100644
index 0000000..3c5652c
--- /dev/null
+++ b/images/patron-technology-logo-color.png
Binary files differ
diff --git a/images/showclix-logo-white.png b/images/showclix-logo-white.png
new file mode 100644
index 0000000..0171630
--- /dev/null
+++ b/images/showclix-logo-white.png
Binary files differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..1d07e0d
--- /dev/null
+++ b/index.html
@@ -0,0 +1,227 @@
+<!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">
+ <title>ShowClix</title>
+ <!-- Bootstrap CSS -->
+ <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
+ <!-- FontAwesome for icons -->
+ <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
+ <!-- Custom stylesheet -->
+ <link rel="stylesheet" href="style.css">
+</head>
+<body>
+ <!-- Navbar -->
+
+ <nav class="navbar navbar-expand-lg navbar-light bg-light">
+ <a class="navbar-brand" href="#">
+ <!-- ShowClix Logo as Image -->
+ <img src="images/logo.png">
+ </a>
+ <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+ <span class="navbar-toggler-icon"></span>
+ </button>
+ <div class="collapse navbar-collapse" id="navbarNav">
+ <ul class="navbar-nav ml-auto">
+ <li class="nav-item dropdown">
+ <a class="nav-link dropdown-toggle" href="#" id="signIn" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ Sign In
+ </a>
+ <div class="dropdown-menu" aria-labelledby="navbarDropdown">
+ <a class="dropdown-item" href="#"><i class="fas fa-ticket-alt"></i> My Tickets</a>
+ <a class="dropdown-item" href="#"><i class="fas fa-key"></i> Client Login</a>
+ </div>
+ </li>
+ <li class="nav-item dropdown">
+ <a class="nav-link dropdown-toggle" href="#" id="signIn" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ Help
+ </a>
+ <div class="dropdown-menu" aria-labelledby="navbarDropdown">
+ <a class="dropdown-item" href="#">Client Support</a>
+ <a class="dropdown-item" href="#">Customer Care</a>
+ </div>
+ </li>
+ <button type="button" class="btn-call" data-toggle="tooltip" data-placement="bottom" title="+1800800800"><i class="fas fa-phone"></i></button>
+ <button class="btn btn-primary cta-btn">Planning an Event?</button>
+ </ul>
+ </div>
+ </nav>
+
+ <!-- Jumbotron -->
+
+ <div class="jumbotron">
+ <div class="tint"></div>
+ <h1 class="jb-bold">Find your next event</h1>
+ <div class="row justify-content-md-center">
+ <div class="col-md-4 nopadding">
+ <input type="text" class="customInput" placeholder="Search by event or category">
+ </div>
+ <div class="col-md-2 nopadding">
+ <input type="text" class="customInput" placeholder="Location">
+ </div>
+ <div class="col-md-2 nopadding">
+ <button class="inputBtn"><i class="fas fa-search"></i></button>
+ </div>
+ </div>
+ </div>
+
+ <!-- Tickets Container -->
+
+ <div class="bg-lightgrey">
+ <div class="container padding-50">
+ <h3 class="upcoming"><i class="far fa-calendar-alt"></i>&emsp;Upcoming Events</h3>
+ <div class="padding-topdown-50">
+ <div class="row justify-content-md-center">
+ <div class="col-md-4">
+ <div class="card" style="width: 100%">
+ <img class="card-img-top" src="https://www.showclix.com/marketing/assets/i/buyer-homepage/featured-events/museum-of-ice-cream.jpg" alt="Card image cap">
+ <div class="card-body">
+ <h5 class="card-title">Museum of Ice Cream</h5>
+ <ul>
+ <li><i class="fas fa-calendar-alt ic-round-cal"></i> Multiple Dates</li>
+ <li><i class="fas fa-map-marker-alt ic-round-venue"></i> Museum of Ice Cream San Francisco, San Fra...</li>
+ </ul>
+ <a href="#" class="btn btn-ticket">Get Tickets</a>
+ </div>
+ </div>
+ </div>
+ <div class="col-md-4">
+ <div class="card" style="width: 100%">
+ <img class="card-img-top" src="https://www.showclix.com/marketing/assets/i/buyer-homepage/featured-events/mickey.jpg" alt="Card image cap">
+ <div class="card-body">
+ <h5 class="card-title">Mickey: The True Original Exhibition</h5>
+ <ul>
+ <li><i class="fas fa-calendar-alt ic-round-cal"></i> Multiple Dates</li>
+ <li><i class="fas fa-map-marker-alt ic-round-venue"></i> 60 10th Avenue, New York, NY</li>
+ </ul>
+ <a href="#" class="btn btn-ticket">Get Tickets</a>
+ </div>
+ </div>
+ </div>
+ <div class="col-md-4">
+ <div class="card" style="width: 100%">
+ <img class="card-img-top" src="https://www.showclix.com/marketing/assets/i/buyer-homepage/featured-events/color-factory.jpg" alt="Card image cap">
+ <div class="card-body">
+ <h5 class="card-title">Color Factory New York</h5>
+ <ul>
+ <li><i class="fas fa-calendar-alt ic-round-cal"></i> Multiple Dates</li>
+ <li><i class="fas fa-map-marker-alt ic-round-venue"></i> Color Factory - NY, New York, NY</li>
+ </ul>
+ <a href="#" class="btn btn-ticket">Get Tickets</a>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="container padding-topdown-50">
+ <h1 class="ticket-bold">Looking for event ticketing and box office solutions?</h1>
+ <p class="center">
+ <button class="btn btn-success">GET STARTED NOW</button>
+ <button class="btn btn-primary">TAKE TOUR</button>
+ </p>
+ </div>
+ <!-- Footer -->
+ <div class="container-fluid footer padding-100">
+ <div class="container">
+ <div class="row">
+ <div class="col-md-2">
+ <p class="footerTitle">Event Ticketing Services</p>
+ <a href="#" class="footerLink">Online Ticketing</a>
+ <a href="#" class="footerLink">Box Office, Admissions & RFID</a>
+ <a href="#" class="footerLink">Client Support</a>
+ <a href="#" class="footerLink">Reserved Seating</a>
+ <a href="#" class="footerLink">Ticket Scanners</a>
+ <a href="#" class="footerLink">Call Center</a>
+ <a href="#" class="footerLink">Event Operations</a>
+ <a href="#" class="footerLink">Integrations & Partnerships</a>
+ <a href="#" class="footerLink">Pricing</a>
+ </div>
+ <div class="col-md-2">
+ <p class="footerTitle">Industry Solutions</p>
+ <a href="#" class="footerLink">Comedy</a>
+ <a href="#" class="footerLink">Consumer Shows</a>
+ <a href="#" class="footerLink">Fandom Events</a>
+ <a href="#" class="footerLink">Festivals</a>
+ <a href="#" class="footerLink">Museums</a>
+ <a href="#" class="footerLink">Music</a>
+ <a href="#" class="footerLink">Pop-up Attractions</a>
+ </div>
+ <div class="col-md-2">
+ <p class="footerTitle">Analytics Tools</p>
+ <a href="#" class="footerLink">Timelines</a>
+ <a href="#" class="footerLink">Live</a>
+ <a href="#" class="footerLink">Segments</a>
+ <a href="#" class="footerLink">Report Builder</a>
+ <a href="#" class="footerLink">Marketing Integrations</a>
+ </div>
+ <div class="col-md-2">
+ <p class="footerTitle">About Us</p>
+ <a href="#" class="footerLink">Company</a>
+ <a href="#" class="footerLink">Careers</a>
+ <a href="#" class="footerLink">Press</a>
+ <a href="#" class="footerLink">Resources</a>
+ <a href="#" class="footerLink">Clients</a>
+ <a href="#" class="footerLink">Blog</a>
+ <a href="#" class="footerLink">Help</a>
+ <a href="#" class="footerLink">Sitemap</a>
+ </div>
+ <div class="col-md-4 footericons">
+ <a href="#" class="footerLink">Client Login</a>
+ <a href="#" class="footerLink">Ticket Buyer Login</a>
+ <a href="#" class="footerLink">Browse Events</a>
+ <a href="#" class="footerLink">Contact Us</a>
+ <hr class="white-ruler">
+ <i class="fab fa-facebook"></i>
+ <i class="fab fa-twitter"></i>
+ <i class="fab fa-youtube"></i>
+ <i class="fab fa-linkedin"></i>
+ <i class="fab fa-instagram"></i>
+ <i class="fab fa-google-plus"></i>
+ </div>
+ </div>
+ <hr class="white-ruler">
+ <div class="row">
+ <div class="col-md-2">
+ <a href="#" class="footerLink">Mobile Ticketing</a>
+ </div>
+ <div class="col-md-2">
+ <a href="#" class="footerLink">Sell Tickets Online</a>
+ </div>
+ <div class="col-md-2">
+ <a href="#" class="footerLink">Event Ticketing Software</a>
+ </div>
+ <div class="col-md-2">
+ <a href="#" class="footerLink">Event Ticketing System</a>
+ </div>
+ <div class="col-md-2">
+ <a href="#" class="footerLink">Box Office Ticketing</a>
+ </div>
+ <div class="col-md-2">
+ <a href="#" class="footerLink">RFID Software</a>
+ </div>
+ </div>
+ <hr class="white-ruler">
+ <p class="white-footer-text"><img src="images/showclix-logo-white.png">Use of ShowClix is subject to our Terms of Service. Copyright © 2018 ShowClix Inc. All Rights Reserved.</p>
+ </div>
+ </div>
+ <div class="center-image">
+ <img src="images/patron-technology-logo-color.png">
+ </div>
+ <!-- jQuery -->
+ <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+ <!-- Popper JS -->
+ <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>
+ <!-- Bootstrap JS -->
+ <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
+ <!-- Activating tooltips -->
+ <script>
+ $(function () {
+ $('[data-toggle="tooltip"]').tooltip()
+ })
+ </script>
+</body>
+</html> \ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..d268ecf
--- /dev/null
+++ b/style.css
@@ -0,0 +1,270 @@
+/* No padding for Columns, removing gutter spaces */
+
+.nopadding {
+ padding: 0 !important;
+ margin: 0 !important;
+ }
+
+/* Changing the navbar default color to white */
+
+.bg-light {
+ /* Using important to override predefined bootstrap class */
+ background-color: #fff !important;
+}
+
+/* Custom call to action button */
+
+.cta-btn {
+ background-color: #2772B8;
+ border: none;
+ font-size: 16px;
+ padding: 10px 20px 10px 20px;
+ font-family: Arial, Helvetica, sans-serif;
+ font-weight: 500;
+}
+.cta-btn:hover {
+ background-color: #175897;
+}
+
+/* Custom phone call button */
+
+.btn-call {
+ background-color: transparent;
+ border: none;
+ margin: 0px 40px 0px 20px;
+ font-size: 14px;
+ outline: none;
+}
+.btn-call:hover {
+ color: #55ADE1;
+ cursor: pointer;
+}
+
+/* Custom search button */
+
+.inputBtn {
+ background-color: #2772B8;
+ border: none;
+ font-size: 12px;
+ position: relative;
+ z-index: 2;
+ color: white;
+ width: 100%;
+ padding: 15px 10px;
+ border-radius: 2px;
+ outline: none;
+}
+.inputBtn:hover {
+ background-color: #175897;
+ cursor: pointer;
+}
+.inputBtn:focus {
+ outline: none;
+}
+
+
+/* Custom ticket button */
+
+.btn-ticket {
+ width: 100%;
+ border: none;
+ background-color: #000;
+ color: white;
+ font-weight: 100;
+ padding: 10px 0px;
+ font-size: 14px;
+}
+.btn-ticket:hover {
+ background-color: #2772B8;
+ color: white;
+}
+
+/* Changing Navbar fonts */
+
+.navbar-nav li a {
+ color: black !important;
+ font-size: 16px;
+ margin: 0px 5px;
+}
+
+/* Changing dropdown menu style of bootstrap */
+
+.dropdown-menu {
+ border: none;
+ border-radius: 0px;
+}
+.dropdown-item {
+ padding: 10px 10px;
+ font-size: 14px !important;
+}
+.dropdown-item:hover {
+ color: #55ADE1 !important;
+ background-color: transparent;
+}
+
+/* Custom Font Classes */
+
+.jb-bold {
+ color: white;
+ font-size: 50px;
+ text-align: center;
+ text-transform: capitalize;
+ font-weight: 700;
+ z-index: 2;
+ position: relative;
+ margin: 30px 0px 50px 0px;
+}
+.upcoming {
+ text-align: center;
+ font-weight: 300;
+}
+.ticket-bold {
+ text-align: center;
+ font-weight: 900;
+ font-size: 40px;
+ margin: 40px 0px;
+}
+.center {
+ text-align: center;
+}
+.center button {
+ padding: 10px 20px;
+ font-size: 14px;
+ font-weight: 700;
+ margin: 0px 0px 40px 0px;
+}
+
+/* Jumbotron and Blackish Tint */
+
+.jumbotron {
+ background-image: url(images/1.jpg);
+ position: relative;
+}
+.tint {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 100%;
+ background-color: rgba(0, 0, 0, 0.7);
+ z-index: 1;
+}
+
+/* Custom Inputs */
+
+.customInput {
+ position: relative;
+ z-index: 2;
+ outline: none;
+ width: 100%;
+ padding: 15px 10px;
+ border-radius: 2px;
+ border: none;
+ font-size: 12px;
+ margin-bottom: 30px;
+}
+
+/* Custom Background for ticket container */
+
+.bg-lightgrey {
+ background-color: #F5F8FA;
+ margin-top: -35px;
+}
+
+/* Margins and paddings*/
+
+.padding-50 {
+ padding-top: 50px;
+}
+.padding-topdown-50 {
+ padding: 50px 0px;
+}
+.padding-100 {
+ padding: 100px 0px;
+}
+
+
+/* Card Styles */
+
+.card-title {
+ font-size: 16px;
+ font-weight: 700;
+}
+.card-title:hover {
+ color: #55ADE1;
+ cursor: pointer;
+}
+.card-body ul {
+ list-style: none;
+ padding-left: 0;
+}
+.card-body ul li {
+ font-size: 12px;
+ color: #5c5c5c;
+}
+.ic-round-cal {
+ color: white;
+ background-color: #5c5c5c;
+ border-radius: 50%;
+ padding: 5px;
+}
+.ic-round-venue {
+ color: white;
+ background-color: #5c5c5c;
+ border-radius: 50%;
+ padding: 5px 6px;
+ margin-top: 5px;
+}
+
+/* Footer */
+
+.footer {
+ background-color: #151515;
+}
+.footerTitle {
+ color: rgb(89, 183, 230);
+ font-size: 12px;
+}
+.footerLink {
+ color: white;
+ font-size: 11px;
+ display: block;
+}
+.footerLink:hover {
+ color: white;
+}
+.footericons i {
+ color: white;
+ font-size: 24px;
+ padding: 0px 5px;
+}
+.white-footer-text {
+ color: rgb(230, 230, 230);
+ font-size: 10px;
+}
+.white-footer-text img {
+ width: 120px;
+ padding: 0px 10px;
+ margin-top: -5px;
+}
+
+/* Horizontal Rule */
+
+.white-ruler {
+ display: block;
+ height: 1px;
+ border: 0;
+ border-top: 1px solid #fff;
+ margin: 1em 0;
+ padding: 0;
+}
+
+/* Center Image */
+
+.center-image {
+ text-align: center;
+}
+.center-image img {
+ height: 70px;
+ padding: 20px;
+} \ No newline at end of file
generated by cgit v1.2.3 (git 2.25.1) at 2026-06-06 01:24:50 +0000