I Create Professional Dance Website With Pug | I Create Pug Template
Full Websites
Contact Page
Index.pug not serve this file
//- index.pug
doctype html
html
head
title Shohaib's Dance Academy
style
include ../static/style.css
body
nav#navbar
ul
div#logo
img(src="/static/logo-1.png")
|HDA
li #[a(href="/") Home]
li #[a(href="/") About]
li #[a(href="/") Contact Us]
li #[a(href="/") Services]
li #[a(href="/") Class Info]
section#introsection
div Welcome to Shohaib's Dance Academy
div.small Eat Sleep Dance Repeat
section#missionsection
h2 Our Mission
div.card
h3 Dance Perfection
div.card-box
div.card-img
img(src="/static/png-1.png")
div.card-content
p This is The Best Dance Academy Of The Universe
div.card
h3 Dance The Way You Like
div.card-box
div.card-img
img(src="/static/png-2.png")
div.card-content
p This is The Best Dance Academy Of The Universe
div.card
h3 Expert Teaching
div.card-box
div.card-img
img(src="/static/png-3.png")
div.card-content
p This is The Best Dance Academy Of The Universe
section#Sponsorssection
h2 Our Sponsors
div#sponsors
img(src="/static/s-1.png", alt="Sponsors image" Class="spImage")
img(src="/static/s-2.png", alt="Sponsors image" Class="spImage")
img(src="/static/s-3.png", alt="Sponsors image" Class="spImage")
img(src="/static/s-4.png", alt="Sponsors image" Class="spImage")
footer#footer
| Copyright © 2020 Shohaib'sDanceAcademy.Com | All right reserved
script
include ../static/index.js
Home.pug serve this file
extends base.pug
block scripts
script(src='/static/index.js')
block style
style
include ../static/style.css
block content
section#introsection
div Welcome to Shohaib's Dance Academy
div.small Eat Sleep Dance Repeat
section#missionsection
h2 Our Mission
div.card
h3 Dance Perfection
div.card-box
div.card-img
img(src="/static/png-1.png")
div.card-content
p This is The Best Dance Academy Of The Universe
div.card
h3 Dance The Way You Like
div.card-box
div.card-img
img(src="/static/png-2.png")
div.card-content
p This is The Best Dance Academy Of The Universe
div.card
h3 Expert Teaching
div.card-box
div.card-img
img(src="/static/png-3.png")
div.card-content
p This is The Best Dance Academy Of The Universe
section#Sponsorssection
h2 Our Sponsors
div#sponsors
img(src="/static/s-1.png", alt="Sponsors image" Class="spImage")
img(src="/static/s-2.png", alt="Sponsors image" Class="spImage")
img(src="/static/s-3.png", alt="Sponsors image" Class="spImage")
img(src="/static/s-4.png", alt="Sponsors image" Class="spImage")
Base.pug
//- layout.pug
doctype html
html
head
title Shohaib's Dance Academy
block scripts
block style
body
nav#navbar
ul
div#logo
img(src="/static/logo-1.png")
|HDA
li #[a(href="/") Home]
li #[a(href="/") About]
li #[a(href="/") Contact Us]
li #[a(href="/") Services]
li #[a(href="/") Class Info]
block content
footer#footer
| Copyright © 2020 Shohaib'sDanceAcademy.Com | All right reserved
Contact.pug
extends base.pug
block scripts
script(src='/static/index.js')
block style
style
include ../static/style.css
include ../static/stylecontact.css
block content
div.container
h1 Contact Us
form(action="/contact", method="post", class="myForm")
input(type="text" class="myInput" name="name", placeholder="Enter Your Name")
input(type="phone" class="myInput" name="phone", placeholder="Enter Your phone")
input(type="email" class="myInput" name="email", placeholder="Enter Your Email Id")
input(type="text" class="myInput" name="address", placeholder="Enter Your Address")
input(type="text" class="myInput" name="desc", placeholder="Enter Your Concern")
button(class="btn")
| Submit
stylecontact.css
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;400;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Red+Rose:wght@300;400;700&display=swap');
h1{
text-align: center;
margin:12px 0;
}
.container{
/* margin: 43px 0; */
min-height: 80vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'Roboto Slab', serif;
}
.myForm{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
}
.myInput{
width: 40%;
padding: 9px;
margin: 8px;
font-size: 16px;
border: 2px solid #a0deaa;
border-radius: 12px;
outline: none;
}
.btn{
padding: 12px 16px;
font-size: 18px;
border: 2px solid #a0deaa;
border-radius: 10px;
color: #fff;
background: #0927ff;
cursor: pointer;
outline: none;
}
style.css
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;400;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Red+Rose:wght@300;400;700&display=swap');
*{
padding:0;
margin:0;
box-sizing:border-box;
}
#logo{
display:flex;
color:#fff;
align-items: center;
margin:0 14px;
font-size:28px;
font-weight: bold;
margin-right: 40px;
}
#logo img{
height: 42px;
filter: invert(1);
}
#navbar{
font-family: 'Roboto Slab', serif;
background-color:#d43b3b;
padding: 10px 14px;
}
#navbar ul{
list-style:none;
display:flex;
flex-direction:row;
/* justify-content:center; */
align-items: center;
}
#navbar li a{
color:#fff;
text-decoration: none;
padding:13px 30px;
}
#navbar li a:hover{
font-weight:bold;
color:black;
}
#introsection{
padding-bottom:40px;
font-family: 'Red Rose', cursive;
font-size:35px;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
color:white;
background: center/cover no-repeat url("/static/bg1.jpg");
height:380px;
}
#introsection div.small{
font-size:27px;
padding:5px;
}
#missionsection{
margin:auto;
height:326px;
width:100%;
background:#fff;
display:block;
}
#missionsection h2{
text-align:center;
padding-top:12px;
font-family: 'Red Rose', cursive;
}
.card{
display:inline-block;
border: 2px solid black;
border-radius: 10px;
width: 29%;
margin: 20px 20px;
height: 209px;
background:#ffffff;
}
.card h3{
text-align:center;
margin:12px;
}
.card-box{
display:flex;
align-items: center;
justify-content: space-between;
}
.card-img{
height: 100px;
padding: 0 14px;
/* margin: 12px 9px; */
}
.card-img img{
height: inherit;
}
.card-content{
padding: 0 20px;
}
.card-content p{
font-size: 14px;
}
#Sponsorssection{
height:300px;
background:#ffe2e2;
}
#Sponsorssection h2{
text-align:center;
padding-top:12px;
font-family: 'Red Rose', cursive;
}
#sponsors{
height: 191px;
max-width: 1000px;
margin: 25px auto;
}
.spImage{
height: 80%;
margin: 20px;
}
#footer{
display: flex;
color:#fff;
height:60px;
background:black;
justify-content: center;
align-items: center;
font-size: 20px;
}
App.js
const express = require("express");
const path = require("path");
const app = express();
const port= 8000;
// EXPRESS SPECIFIC STUFF
app.use('/static', express.static('static')) // For serving static files
app.use(express.urlencoded())
// PUG SPECIFIC STUFF
app.set('view engine', 'pug') // Set the template engine as pug
app.set('views', path.join(__dirname, 'views')) // Set the views directory
// ENDPOINTS
app.get('/', (req, res)=>{
const params = {}
res.status(200).render('Home.pug', params);
});
app.get('/contact', (req, res)=>{
const params = {}
res.status(200).render('contact.pug', params);
});
// START THE SERVER
app.listen(port, ()=>{
console.log(`The application started successfully on port ${port}`);
});
No comments