{% load static %}

<!DOCTYPE html>

<html lang="en">

<head>

<title>

Card Players Unite / card tournaments and events near you

</title>

<link rel="stylesheet" href="{% static '/listing/listing.css' %}">

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="/listing/listing.css">

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&family=Sen:wght@400;700;800&display=swap" rel="stylesheet">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">

</head> 

<body>

<div class="navbar">

<div class="navbar-container">

<div class="logo-container">

<h1 class="logo">

Card Players Unite

</h1>

</div>

<div class="menu-container">

<ul class="menu-list">

<li class="menu-list-item active">Home</li>

<li class="menu-list-item">Tournaments</li>

<li class="menu-list-item">Teams</li>

<li class="menu-list-item">Login</li>

</ul>

</div>

            <div class="profile-container">
			
                <div class="toggle">
                    <i class="fas fa-moon toggle-icon"></i>
                    <i class="fas fa-sun toggle-icon"></i>
                    <div class="toggle-ball"></div>
                </div>
            </div>
        </div>
    </div>

<div class="sidebar">

<i class="left-menu-icon fas fa-home"></i>

<i class="left-menu-icon fas fa-users"></i>

<i class="left-menu-icon fas fa-bookmark"></i>

<i class="left-menu-icon fas fa-tv"></i>

</div>

<div class="container">

<div class="content-container">

<div class="featured-content"	style="background: linear-gradient(to bottom, rgba(0,0,0,0), #151515), url('{% static 'listing/imagery/18.jpg' %}');">

<p class="featured-desc">

		
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iusto illo dolor deserunt nam assumenda ipsa eligendi dolore, ipsum id fugiat quo enim impedit, laboriosam omnis minima voluptatibus incidunt. Accusamus, provident.

</p>

<button class="featured-button">

LEARN MORE

</button>

</div>


	<div class="movie-list-container">
	<h1 class="movie-list-title">Alll Tournaments</h1>
	<div class="movie-list-wrapper">
	<div class="movie-list">
	<div class="movie-list-item">
	<img class="movie-list-item-img" src="{% static '/listing/imagery/8.jpg' %}" alt="">
	<span class="movie-list-item-title">Her</span>
	<p class="movie-list-item-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. At
	hic fugit similique accusantium.</p>
	<button class="movie-list-item-button">Watch</button>
	</div>
	<div class="movie-list-item">
	<img class="movie-list-item-img" src="{% static '/listing/imagery/9.jpg' %}" alt="">
	<span class="movie-list-item-title">Her</span>
	<p class="movie-list-item-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. At
	hic fugit similique accusantium.</p>
	<button class="movie-list-item-button">Watch</button>
	</div>
	<div class="movie-list-item">
	<img class="movie-list-item-img" src="{% static '/listing/imagery/10.jpg' %}" alt="">
	<span class="movie-list-item-title">Her</span>
	<p class="movie-list-item-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. At
	hic fugit similique accusantium.</p>
	<button class="movie-list-item-button">Watch</button>
	</div>
	<div class="movie-list-item">
	<img class="movie-list-item-img" src="{% static '/listing/imagery/11.jpg' %}" alt="">
	<span class="movie-list-item-title">Her</span>
	<p class="movie-list-item-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. At
	hic fugit similique accusantium.</p>
	<button class="movie-list-item-button">Watch</button>
	</div>
	<div class="movie-list-item">
	<img class="movie-list-item-img" src="{% static '/listing/imagery/12.jpg' %}" alt="">
	<span class="movie-list-item-title">Her</span>
	<p class="movie-list-item-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. At
	hic fugit similique accusantium.</p>
	<button class="movie-list-item-button">Watch</button>
	</div>
	<div class="movie-list-item">
	<img class="movie-list-item-img" src="{% static '/listing/imagery/1.jpg' %}" alt="">
	<span class="movie-list-item-title">Her</span>
	<p class="movie-list-item-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. At
	hic fugit similique accusantium.</p>
	<button class="movie-list-item-button">Watch</button>
	</div>
	<div class="movie-list-item">
	<img class="movie-list-item-img" src="{% static '/listing/imagery/1.jpg' %}" alt="">
	<span class="movie-list-item-title">Her</span>
	<p class="movie-list-item-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. At
	hic fugit similique accusantium.</p>
	<button class="movie-list-item-button">Watch</button>
	</div>
	</div>
	<i class="fas fa-chevron-right arrow"></i>
	</div>
	</div>

	<div class="featured-content"	style="background: linear-gradient(to bottom, rgba(0,0,0,0), #151515), url('{% static 'listing/imagery/7.jpg' %}');">
	
	<img class="featured-title" src="{% static '/listing/imagery/f-t-2.png" alt="">
	<p class="featured-desc">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iusto illo dolor
	deserunt nam assumenda ipsa eligendi dolore, ipsum id fugiat quo enim impedit, laboriosam omnis
	minima voluptatibus incidunt. Accusamus, provident.</p>
	<button class="featured-button">111WATCH</button>
	</div>         

	<div class="featured-content"	style="background: linear-gradient(to bottom, rgba(0,0,0,0), #151515), url('{% static 'listing/imagery/6.jpg' %}');">
	
	<img class="featured-title" src="{% static '/listing/imagery/f-t-2.png" alt="">
	<p class="featured-desc">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iusto illo dolor
	deserunt nam assumenda ipsa eligendi dolore, ipsum id fugiat quo enim impedit, laboriosam omnis
	minima voluptatibus incidunt. Accusamus, provident.</p>
	<button class="featured-button">WATCH</button>
	</div>     

	<div class="featured-content"	style="background: linear-gradient(to bottom, rgba(0,0,0,0), #151515), url('{% static 'listing/imagery/8.jpg' %}');">
	
	<img class="featured-title" src="{% static '/listing/imagery/f-t-2.png" alt="">
	<p class="featured-desc">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iusto illo dolor
	deserunt nam assumenda ipsa eligendi dolore, ipsum id fugiat quo enim impedit, laboriosam omnis
	minima voluptatibus incidunt. Accusamus, provident.</p>
	<button class="featured-button">WATCH</button>
	</div>     

	<div class="featured-content"	style="background: linear-gradient(to bottom, rgba(0,0,0,0), #151515), url('{% static 'listing/imagery/9.jpg' %}');">
	
	<img class="featured-title" src="{% static '/listing/imagery/f-t-2.png" alt="">
	<p class="featured-desc">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iusto illo dolor
	deserunt nam assumenda ipsa eligendi dolore, ipsum id fugiat quo enim impedit, laboriosam omnis
	minima voluptatibus incidunt. Accusamus, provident.</p>
	<button class="featured-button">WATCH</button>
	</div>     
	</div>

	</div>

<!--
<script src="{% static 'listing/listing.js' %}"></script>

<script src="{% static 'listing/features.js' %}"></script>

-->
</body>

</html>
