Skip to content
Snippets Groups Projects
Commit ab55025f authored by Mansoor Saleem's avatar Mansoor Saleem
Browse files

Article and Comment Section

parent 1ffdf8bd
No related branches found
No related tags found
1 merge request!2Article and Comment Section
Pipeline #3073 failed
Stage: build
Stage: test
Hide whitespace changes
Inline Side-by-side
templates/about.html 0 → 100644
+ 72
− 0
View file @ ab55025f
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width-device-width">
<meta name="description" content="Articles and Published Blogs">
<meta name="keywords" content="web design, fitness , meditation , professional, others">
<meta name="author" content="Saif Ali">
<title>Blogs| About</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1><span class="highlight">Articles</span> and Blogs</h1>
</div>
<nav>
<ul>
<li ><a href="index.html">Home</a></li>
<li class="current"><a href="About.html">About</a></li>
<li><a href="Services.html">Services</a></li
<li><a href="login.html">Login</a></li>
</ul>
</nav>
</div>
</header>
<section id="newsletter">
<div class="container">
<h1>Subscribe to our Blogs</h1>
<form>
<input type="email" placeholder="Enter Username....">
<button type="submit" class="button_1">Subscribe</button>
</form>
</div>
</section>
<section id="main">
<div class="container">
<article id="main-col">
<h1 class="page-title">About Us</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet, enim tincidunt tristique lacinia, ex sapien ultrices nulla, nec rhoncus sem sapien ac risus. Sed dignissim est quis mi molestie mattis. Integer sollicitudin pellentesque lorem, id sollicitudin arcu dapibus vitae. Pellentesque sit amet dolor sed odio euismod ultrices vel in diam. Nullam euismod lectus non ex auctor pulvinar. Praesent a lorem pharetra, vestibulum lacus in, luctus diam. Mauris nibh odio, mollis in tincidunt ac, lobortis quis mi. Pellentesque vestibulum venenatis felis eu condimentum. Praesent enim nulla, eleifend sit amet mauris in, luctus aliquet dolor. Nullam vulputate mattis imperdiet. Vestibulum augue nisi, aliquet in lectus sit amet, tincidunt tempus diam. Vivamus ac magna nunc. Sed sit amet pellentesque risus. Mauris sodales in eros mattis egestas.
</p>
<p class="dark">
Pellentesque est tortor, tempus quis erat sit amet, dictum interdum arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce fermentum interdum venenatis. Etiam ac nisi libero. Suspendisse est magna, vulputate eu efficitur sit amet, ullamcorper vitae ex. Donec hendrerit eros nunc, sed vulputate leo pellentesque sed. Vestibulum rutrum bibendum lacus sit amet dictum. Proin eget lorem vel felis feugiat accumsan. Nam et lobortis velit.
</p>
</article>
<aside id="sidebar">
<div class="dark">
<h3>What We Do</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet, enim tincidunt tristique lacinia, ex sapien ultrices nulla, nec rhoncus .
</p>
</div>
</aside>
</div>
</section>
<footer>
<p>Tech-Science Blog, Copyright &copy; 2019</p>
</footer>
</body>
</html>
templates/base_layout.html 0 → 100644
+ 160
− 0
View file @ ab55025f
{% load static from staticfiles %}
<!DOCTYPE html>
<html lang="en">
<title>W3.CSS Template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-black.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
html,body,h1,h2,h3,h4,h5,h6 {font-family: "Roboto", sans-serif;}
.w3-sidebar {
z-index: 3;
width: 250px;
top: 43px;
bottom: 0;
height: inherit;
}
</style>
<body>
<!-- Navbar -->
<div class="w3-top">
<div class="w3-bar w3-theme w3-top w3-left-align w3-large">
<a class="w3-bar-item w3-button w3-right w3-hide-large w3-hover-white w3-large w3-theme-l1" href="javascript:void(0)" onclick="w3_open()"><i class="fa fa-bars"></i></a>
<a href="#" class="w3-bar-item w3-button w3-theme-l1">Home</a>
<a href="about/" class="w3-bar-item w3-button w3-hide-small w3-hover-white">About</a>
<a href="articles/" class="w3-bar-item w3-button w3-hide-small w3-hover-white">Articles</a>
<a href="#" class="w3-bar-item w3-button w3-hide-small w3-hover-white">News</a>
<a href="#" class="w3-bar-item w3-button w3-hide-small w3-hover-white">Contact</a>
<a href="#" class="w3-bar-item w3-button w3-hide-small w3-hide-medium w3-hover-white">Clients</a>
<a href="#" class="w3-bar-item w3-button w3-hide-small w3-hide-medium w3-hover-white">Partners</a>
<a href="/accounts/signup" class="w3-bar-item w3-button w3-hide-small w3-hide-medium w3-hover-white w3-right">Sign Up</a>
<a href="accounts/login/" class="w3-bar-item w3-button w3-hide-small w3-hide-medium w3-hover-white w3-right">Sign In</a>
<a href="logout/" class="w3-bar-item w3-button w3-hide-small w3-hide-medium w3-hover-white w3-right">logout</a>
</div>
</div>
<!-- Sidebar -->
<!--<nav class="w3-sidebar w3-bar-block w3-collapse w3-large w3-theme-l5 w3-animate-left" id="mySidebar">
<a href="javascript:void(0)" onclick="w3_close()" class="w3-right w3-xlarge w3-padding-large w3-hover-black w3-hide-large" title="Close Menu">
<i class="fa fa-remove"></i>
</a>
<h4 class="w3-bar-item"><b>Menu</b></h4>
<a class="w3-bar-item w3-button w3-hover-black" href="#">Link</a>
<a class="w3-bar-item w3-button w3-hover-black" href="#">Link</a>
<a class="w3-bar-item w3-button w3-hover-black" href="#">Link</a>
<a class="w3-bar-item w3-button w3-hover-black" href="#">Link</a>
</nav> -->
<div class="wrapper">
{% block content %}
{% endblock %}
</div>
<!-- Overlay effect when opening sidebar on small screens -->
<div class="w3-overlay w3-hide-large" onclick="w3_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div>
<!-- Main content: shift it to the right by 250 pixels when the sidebar is visible -->
<div class="w3-main" style="margin-left:250px">
<div class="w3-row w3-padding-64">
<div class="w3-twothird w3-container">
<h1 class="w3-text-teal">Heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="w3-third w3-container">
<p class="w3-border w3-padding-large w3-padding-32 w3-center">AD</p>
<p class="w3-border w3-padding-large w3-padding-64 w3-center">AD</p>
</div>
</div>
<div class="w3-row">
<div class="w3-twothird w3-container">
<h1 class="w3-text-teal">Heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="w3-third w3-container">
<p class="w3-border w3-padding-large w3-padding-32 w3-center">AD</p>
<p class="w3-border w3-padding-large w3-padding-64 w3-center">AD</p>
</div>
</div>
<div class="w3-row w3-padding-64">
<div class="w3-twothird w3-container">
<h1 class="w3-text-teal">Heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="w3-third w3-container">
<p class="w3-border w3-padding-large w3-padding-32 w3-center">AD</p>
<p class="w3-border w3-padding-large w3-padding-64 w3-center">AD</p>
</div>
</div>
<!-- Pagination -->
<div class="w3-center w3-padding-32">
<div class="w3-bar">
<a class="w3-button w3-black" href="#">1</a>
<a class="w3-button w3-hover-black" href="#">2</a>
<a class="w3-button w3-hover-black" href="#">3</a>
<a class="w3-button w3-hover-black" href="#">4</a>
<a class="w3-button w3-hover-black" href="#">5</a>
<a class="w3-button w3-hover-black" href="#">»</a>
</div>
</div>
<footer id="myFooter">
<div class="w3-container w3-theme-l2 w3-padding-32">
<h4>Footer</h4>
</div>
<div class="w3-container w3-theme-l1">
<p>Powered by <a href="https://www.w3schools.com/w3css/default.asp" target="_blank">w3.css</a></p>
</div>
</footer>
<!-- END MAIN -->
</div>
<script>
// Get the Sidebar
var mySidebar = document.getElementById("mySidebar");
// Get the DIV with overlay effect
var overlayBg = document.getElementById("myOverlay");
// Toggle between showing and hiding the sidebar, and add overlay effect
function w3_open() {
if (mySidebar.style.display === 'block') {
mySidebar.style.display = 'none';
overlayBg.style.display = "none";
} else {
mySidebar.style.display = 'block';
overlayBg.style.display = "block";
}
}
// Close the sidebar with the close button
function w3_close() {
mySidebar.style.display = "none";
overlayBg.style.display = "none";
}
</script>
</body>
</html>
<!-- this serves as a base and will appear in all and every template-->
<!-- this base template will appeearr everywhere -->
<!-- 1. by this we dont have to change the source attribute,and thats a better way to load style -->
<!-- 11. if there were two detail urls is in two different apps..django knows to look in articles url -->
templates/index.html 0 → 100644
+ 16
− 0
View file @ ab55025f
{% extends 'base_layout.html' %}
{% block content%}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Homepage</title>
</head>
<body>
<h1>This is the homepage</h1>
<p>Welcome to Djangonauts</p>
</body>
</html>
{% endblock %}
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment