feat: Video Site App - 2. Add templates, views and urls.
Bobson Lin
5 years ago
parent
1dd3ed9ce4
commit
d2577a8d21
@ -0,0 +1,28 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Video</title>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css"
|
||||
/>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<nav
|
||||
class="navbar is-primary"
|
||||
role="navigation"
|
||||
aria-label="main navigation"
|
||||
>
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="{% url 'index' %}">Video Site</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<h5>this is base.</h5>
|
||||
{% block body %}
|
||||
{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,144 @@
|
||||
{% extends 'core/base.html' %}
|
||||
|
||||
{% block body %}
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="card">
|
||||
<div class="card-image">
|
||||
<figure class="image is-4by3">
|
||||
<img
|
||||
src="https://bulma.io/images/placeholders/1280x960.png"
|
||||
alt="Placeholder image"
|
||||
/>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="media">
|
||||
<div class="media-content">
|
||||
<p class="title is-4">Video Title</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
11 hours ago
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="card">
|
||||
<div class="card-image">
|
||||
<figure class="image is-4by3">
|
||||
<img
|
||||
src="https://bulma.io/images/placeholders/1280x960.png"
|
||||
alt="Placeholder image"
|
||||
/>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="media">
|
||||
<div class="media-content">
|
||||
<p class="title is-4">Video Title</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
11 hours ago
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="card">
|
||||
<div class="card-image">
|
||||
<figure class="image is-4by3">
|
||||
<img
|
||||
src="https://bulma.io/images/placeholders/1280x960.png"
|
||||
alt="Placeholder image"
|
||||
/>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="media">
|
||||
<div class="media-content">
|
||||
<p class="title is-4">Video Title</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
11 hours ago
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="card">
|
||||
<div class="card-image">
|
||||
<figure class="image is-4by3">
|
||||
<img
|
||||
src="https://bulma.io/images/placeholders/1280x960.png"
|
||||
alt="Placeholder image"
|
||||
/>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="media">
|
||||
<div class="media-content">
|
||||
<p class="title is-4">Video Title</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
11 hours ago
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="card">
|
||||
<div class="card-image">
|
||||
<figure class="image is-4by3">
|
||||
<img
|
||||
src="https://bulma.io/images/placeholders/1280x960.png"
|
||||
alt="Placeholder image"
|
||||
/>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="media">
|
||||
<div class="media-content">
|
||||
<p class="title is-4">Video Title</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
11 hours ago
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="card">
|
||||
<div class="card-image">
|
||||
<figure class="image is-4by3">
|
||||
<img
|
||||
src="https://bulma.io/images/placeholders/1280x960.png"
|
||||
alt="Placeholder image"
|
||||
/>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="media">
|
||||
<div class="media-content">
|
||||
<p class="title is-4">Video Title</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
11 hours ago
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
@ -0,0 +1,32 @@
|
||||
{% extends 'core/base.html' %}
|
||||
|
||||
{% block body %}
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<video controls>
|
||||
<source src="earth_video.mp4" type="video/mp4" />
|
||||
</video>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<!-- Main container -->
|
||||
<nav class="level">
|
||||
<!-- Left side -->
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<h1 class="title">Video Title</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right side -->
|
||||
<div class="level-right">
|
||||
<p class="level-item">
|
||||
<strong>11 hours ago</strong>
|
||||
</p>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
@ -0,0 +1,7 @@
|
||||
from django.urls import path
|
||||
from . import views
|
||||
|
||||
urlpatterns = [
|
||||
path('', views.index, name='index'),
|
||||
path('video/', views.video, name='video')
|
||||
]
|
||||
@ -1,3 +1,9 @@
|
||||
from django.shortcuts import render
|
||||
|
||||
# Create your views here.
|
||||
|
||||
def index(request):
|
||||
return render(request, 'core/index.html')
|
||||
|
||||
|
||||
def video(request):
|
||||
return render(request, 'core/video.html')
|
||||
|
||||
Loading…
Reference in New Issue