template/base.html


{% load static %}

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>The Search</title>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" href="{% static "css/style.css" %}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

</head>
<body>
<nav>
    <div class="container nav-wrapper">
        <a href="/" class="brand-logo">The Search</a>
        <ul id="nav-mobile" class="right">
            <li><a href="/">Home</a></li>
        </ul>
    </div>
</nav>

<div class="container">
    <h1 style="text-align: center">What do you want to search on List?</h1>
    <div class="row">
        <div class="col s4">
            <!-- Promo Content 1 goes here -->
            <div class="center">
                <i class="large material-icons" style="color: #EE6E73">flash_on</i>
                <p>Fast web scraper</p>
                <p class="light center">Scrape away right here with a beautiful GUI.</p>
            </div>
        </div>

        <div class="col s4">
            <!-- Promo Content 2 goes here -->
            <div class="center">
                <i class="large material-icons" style="color: orange">camera</i>
                <p>Filter your searches</p>
                <p class="light center">We built in functionality to filter based on #.</p>
            </div>
        </div>

        <div class="col s4">
            <!-- Promo Content 3 goes here -->
            <div class="center">
                <i class="large material-icons" style="color: blue">chrome_reader_mode</i>
                <p>A much fine front-end </p>
                <p class="light center">We built this with ❤️</p>
            </div>
        </div>
    </div>

    <form action="{% url 'new_search' %}" method="post">
        {% csrf_token %}
        <input type="text" name="search" placeholder="search">
        <button class="btn waves-effect waves-light" type="submit" name="action">Submit
            <i class="material-icons right">send</i>
        </button>
    </form>

    {% block content %}

    {% endblock content %}
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>