Dance Website
Pug code ( generally pug is a template engine used in place of html , because it make the scripting easier as compared to html)
base.pug;
doctype html
html
head
title Pratik Dance Website
block scripts
script(src='../static/script.js')
block style
style
include ../static/style.css
body
nav#navbar
#logo
img(src="/static/2.png", alt="")
ul
li #[a(href='/') Home]
li #[a(href='/') About Us ]
li #[a(href='/') Services]
li #[a(href='/contact') Contact Info]
block content
block foot
home.pug:
extends base.pug
block scripts
script(src='../static/script.js')
block style
style
include ../static/style.css
include ../static/response.css
block content
section#introSection
div Welcome to My Dance Academy
.small Eat sleep Dance Repeat
section#missionSection
h2 Our Mission
.mission
.card
h3 Dance perfection
.card-box
.card-img
img(src="/static/card1.jpg", alt="")
p we will train in your best way
.card
h3 Removing your best dancer
.card-box
.card-img
img(src="/static/logo1.png", alt="")
p we will train in your best way
.card
h3 Versatile Dancer
.card-box
.card-img
img(src="/static/card2.png", alt="")
p we will train in your best way
section#sponsorSection
h2 Our Sponsors
#sponsors
img(src="/static/logo.jpg", alt="")
img(src="/static/logo2.png", alt="")
img(src="/static/logo3.jpg", alt="")
footer#footer
| this is footer
contact.pug:
extends base.pug
block scripts
script(src='../static/script.js')
block style
style
include ../static/contact.css
include ../static/style.css
block content
h3 Contact Us
form(action="/contact", method="post")
input(type="text", class="myInput",name="name",placeholder="enter your name")
input(type="number", class="myInput",name="number",placeholder="enter your number")
input(type="number", class="myInput",name="age",placeholder="enter your age")
textarea(name="address",class="myInput", cols="30", rows="10",placeholder="Give your description")
button(class="btn")
| Submit
style.css
#navbar ul{
display: flex;
flex-direction: row;
justify-content: center;
}
#navbar li{
list-style: none;
}
#logo{
display: inline-block;
/* align-items: center; */
height: 40px;
}
#navbar #logo img{
/* display: flex; */
/* align-items: center; */
height: 40px
}
@import url('https://fonts.googleapis.com/css2?family=Baloo+Bhaina+2&display=swap');
*{
margin: 0px;
box-sizing: border-box;
padding: 0px;
font-family: 'Baloo Bhaina 2', cursive;
}
#navbar{
display:flex ;
background-color: rgb(230, 46, 46);
padding: 10px;
font-size: 22px;
font-family: 'Baloo Bhaina 2', cursive;
position: sticky;
}
#navbar li a{
text-decoration: none;
padding: 10px 30px;
color: white;
}
#navbar li a:hover{
color: black;
}
#introSection{
display: flex;
justify-content: center;
align-items: center;
font-family: 'Baloo Bhaina 2', cursive;
background: url('/static/dance2.jpg') center center/cover no-repeat;
height: 600px;
/* background-color: red; */
color: white;
font-size: 35px;
flex-direction: column;
padding-bottom: 40px;
}
.small{
font-size: 1.3rem;
}
#missionSection{
height: 330px;
display: block;
width: 100%;
margin: auto;
/* display: flex;
justify-content: center;
align-items: center; */
}
#missionSection .mission{
height: 300px;
/* width: 80%; */
display: flex;
justify-content: center;
align-items: center;
}
#missionSection h2{
text-align: center;
padding: 5px;
}
.card{
border: 2px solid black;
border-radius: 15px;
width: 30%;
height: 70%;
margin: 10px;
display: inline-block;
background-color: lemonchiffon;
}
.card h3{
text-align: center;
/* text-align: center; */
margin: 10px;
}
.card-box{
display: flex;
justify-content: center;
align-items: center;
height: inherit;
}
.card-img{
height: 100px
}
.card-img img{
height: 100px
}
#sponsorSection{
height: 300px;
background-color: white;
}
#sponsorSection h2{
text-align: center;
padding: 5px;
background-color: wheat;
}
#sponsors{
display: flex;
align-items: center;
justify-content: center;
padding-top: 20px;
}
#sponsors img{
margin: 20px;
padding: 1px;
height: 150px;
border: 2px solid;
border-radius: 10px;
}
#footer{
height: 100px;
background-color: black;
}
mongo db database and it is written in node js)
const express = require('express');
const app = express();
const path=require('path');
const fs = require('fs');
const port = 80;
const bodyparser = require('body-parser');
var mongoose = require('mongoose');
mongoose.connect('mongodb://localhost/contactDance', {useNewUrlParser: true});
var db = mongoose.connection;
db.on('error', console.error.bind(console, 'connection error:'));
db.once('open', function() {
// we're connected!
console.log('connection established');
});
var contactSchema = new mongoose.Schema({
name: String,
number : String,
age: String,
description :String
});
var contact = mongoose.model('contact', contactSchema);
app.use('/static',express.static('static'));//for serving static files
app.use(express.urlencoded());
app.set('view engine','pug');//set the template engine as pug
app.set('views',path.join(__dirname,'views'));//set the views directory
app.get('/',(req,res)=>{
const params={}
res.status(200).render('home.pug',params);
})
app.get('/contact',(req,res)=>{
res.render('contact.pug')
})
app.post('/contact',(req,res)=>{
var myData = new contact(req.body);
myData.save().then(()=>{
res.send('this item has been saved to the database');
}).catch(()=>{
res.status(400).send('data not saved to the database')
})
// res.render('contact.pug')
})
app.listen(port,()=>{
console.log("the application is running on port 80");
})
No comments:
Post a Comment