Thank you for purchasing FoodeX - HTML Web Template.
If you have any problem with this product, be free to check for support on my TemplateMonster Author Profile (Oxygen Themes).
Also, if you have a problem to change this template, contact me, and I will do that for you. I worked hard to provide the best and newest features in this template. FoodeX is template particularly crafted for Restaurants & Food Delivery Companies.
01
Instructions
How to use this documentation?
There are fourteen sections in this documentation. Half of them contain information, which relates to instructions about how to use this documentation, installation instructions, licensing information, information about images and typography, info about available versions and info about files structure. In Code Structure you can find out more about structure of the code. One section contain information about support if there emerge any problem with this product, two sections give instructions how to change this template, one section give information about credits for this template, and one section give information about required tools to work with this template. The longest sections relate to HTML and SCSS files, where you can find about how to change text and images in the template. In SCSS section you can find more about how to install SCSS extension in Visual Studio Code, to apply different colors on this template, to apply different fonts. Finally, you can find how to work with variables. For more serious change of styling you are free to look for help and support. Finally, very important part of this documentation is PhP section, where user can find more about how to setup communication through contact form.
HTML Section
To go to HTML section, please click on HTML option on navbar. In this section, there are headings for each HTML file (blogFour.html, blogOne.html, blogThree.html, blogTwo.html). Also, there are smaller headings about code function (description, keywords, browser bar image, etc.). On the bottom image you can see how it looks in HTML section.
On the top of the image you can see "Section Header" heading, and it shows which part of the template you can change.
Blue rectangles mark areas where you can make changes of the template. On the bottom you can find "Show Code" button where you can see code which you have to change to modify Section Header - Logo (in this example).
SCSS Section
To go to SCSS section, please click on SCSS option on navbar. In this section you can find more about how to style your template in SCSS.
HTML Editor
To change HTML files you need to install HTML editor (for example - Atom, Komodo Edit, Visual Studio Code, Brackets).
Visual Studio Code download link: https://code.visualstudio.com/
Brackets download link: http://brackets.io/
Find out more info about installation of the Atom Editor on the following link:
https://www.youtube.com/watch?v=2qyH3hQ47zE
Compile SCSS
If you want to use SCSS files, you need to convert SCSS to CSS code.
If you need quality and stable HTML/SCSS editor, with appropriate conversion tool, use Visual Studio Code with "Live Sass Compiler" extension.
Easy installation instructions for this compiler, you can find on the following link:
https://www.youtube.com/watch?v=cpbN0YAW44g
02
Installation
Zip File
After download FoodeX - HTML Web Template, and unpacking zip file you get the following folders:
Install - Server and FTP Upload
To install Scientis - HTML Web Template you can use two methods:
1. Upload files to the server using cPanel (cPanel provide to you your hosting provider)
To upload files to the server:
- Log in to your account (hosting), - Upload your choosen template version to the server - ZIP file (all versions can be found in "Versions" folder). - Unzip files in following folder on server: public_html - You are ready to go.
2. Upload files to the server using some ftp client (for example - FileZilla). FileZilla website: https://filezilla-project.org/
Please, download the newest FileZilla version.
For more info how to upload your website/template on the server, check these links:
Along with classic and FTP installation methods, you can install FoodeX template on GitHub.
https://github.com/
03
Licensing
TemplateMonster offers licenses by product types. In section "Website Templates and Themes Licenses", there are following licenses: Personal, Commercial and Business. Also TM provides and FAQ's about any of these three types of licenses.
To find out more about TemplateMonster licensing options, please follow these links:
https://www.templatemonster.com/licenses/
https://www.templatemonster.com/licenses/website-templates/
04
Images
Template images aren't included in this package. It's only there for preview purposes. Instead, there are appropriate image placeholders with sizes in pixels.
To change image you need to take a care about image names. Image name need to be same in the folder (Images), but also and inside code. For example: Graphic.png (Images folder), src = "Images/Graphic.png" (code). You only need to replace placeholders with real images, and that's easy like that.
05
Typography
There are seven fonts in this package. All of these are carefully balanced to provide modern visual effect. These fonts you can find in "Fonts" folder.
There are sixteen versions in this package: Animati, Chocolate, Dark Chocolate, Draw, Glass, Light, Mint, Mover, Press, Shader, Styler, Sunlight, Tight, Typo, Typo Dark, Vanilla.
Each of these versions, have its unique style elements. There are different types of styles: several types of backgrounds, two sets of fonts, etc.
07
Files Structure
08
Code Structure
Folders and code (Mover Version).
09
HTML
In each version you can find HTML folder where are located HTML files (except index.html). These files are very important because there you can make changes, which relates to this web template. Actually, text and images are replaced inside HTML files (except background images). Also, each HTML file has the Table of Contents for your easier orientation.
Version - Mover
index.html
Description
Code Line: 11
<meta name = "description" content = "FoodeX is a high quality HTML web template, which is tailored for restaurants and food delivery companies.">
<!-- Large Img -->
<div class = "imgContainer m-0 p-0">
<img class = "img-fluid" src = "../Images/blogInside/Restaurant.png" alt = "Restaurant">
</div>
Blog One - Text, Form, Right
Code Lines: 152-357
<div class = "mb-0 ml-0 mr-0 p-0 txtContainer">
<h3 class = "m-0 p-0">
January 2023 - Restaurant - by Mark Portello
</h3>
</div>
<div class = "headingContainer mb-0 ml-0 mr-0 p-0">
<h3 class = "m-0 p-0">
OPENED NEW RESTAURANT
</h3>
</div>
<!-- Large Text -->
<div class = "mb-0 ml-0 mr-0 p-0 txtContainerRestaurant">
<h4 class = "m-0 p-0">
Yesterday, in the morning, in the city centre, is opened our new restaurant. In this place, you will have a possibility to find our dessert program. We added the newest technologies to this place, with purpose to create the best sweet program in the world. Our experts work hard to follow the new recipes, to make excellent desserts. Visit us and be our tester - for the best sweet program.
</h4>
</div>
<!-- Author -->
<div class = "align-items-center author d-flex justify-content-center mb-0 ml-0 mr-0 p-0">
<div class = "imgText ml-0 mr-0 p-0 row">
<div class = "col-6 imgContainerAuthor m-0 p-0">
<img class = "img-fluid m-0 p-0" src = "../Images/blogInside/authorMark.png" alt = "Author">
</div>
<div class = "align-items-center col-6 d-flex justify-content-center m-0 p-0 textContainerAuthor">
<div class = "m-0 mailText p-0">
<div class = "d-flex justify-content-center m-0 name p-0">
<h2 class = "m-0 p-0">
Mark Portello
</h2>
</div>
<div class = "mb-0 ml-0 mr-0 mail p-0">
<h3 class = "m-0 p-0">
markportello@email.com
</h3>
</div>
</div>
</div>
</div>
</div>
<div class = "comment mb-0 ml-0 mr-0 p-0">
<h2 class = "m-0 p-0">
1 Comment
</h2>
</div>
<div class = "commentAuthor mb-0 ml-0 mr-0 p-0">
<h4 class = "m-0 p-0">
ANA MARILLO
</h4>
</div>
<div class = "commentDate mb-0 ml-0 mr-0 p-0">
<h5 class = "m-0 p-0">
30/01/2023
</h5>
</div>
<div class = "commentText mb-0 ml-0 mr-0 p-0">
<h4 class = "m-0 p-0">
Excellent food. Recommendations!
</h4>
</div>
<div class = "leaveComment mb-0 ml-0 mr-0 p-0">
<h4 class = "m-0 p-0">
LEAVE YOUR COMMENT
</h4>
</div>
<!-- Comment Form -->
<form class = "mb-0 ml-0 mr-0 p-0 row">
<div class = "col-6 m-0 name p-0">
<input class = "m-0 nameField pl-0 pr-0 pt-0" id = "nameComment" name = "nameForComment" placeholder = "Name" type = "text" required>
</div>
<div class = "col-6 d-flex email justify-content-end m-0 p-0">
<input class = "emailField mb-0 mr-0 mt-0 pl-0 pr-0 pt-0" id = "emailComment" name = "emailForComment" placeholder = "Email" type = "email" required>
</div>
<div class = "col-12 mb-0 message ml-0 mr-0 pl-0 pr-0 pt-0">
<textarea class = "messageField" name = "messageComment" placeholder = "Comment"></textarea>
</div>
<div class = "buttonComment mb-0 ml-0 mr-0 pl-0 pr-0 pt-0">
<input class = "align-items-center d-flex justify-content-center m-0 p-0 submitComment" name = "submit" type = "submit" value = "Submit">
</div>
</form>
</div>
<div class = "col-12 col-xxl-6 d-flex justify-content-center justify-content-xxl-end mb-0 ml-0 mr-0 p-0 right">
<div class = "m-0 p-0 rightContent">
<!-- Categories -->
<div class = "categories m-0 p-0">
<div class = "heading m-0 p-0">
<h3 class = "m-0 p-0">
CATEGORIES
</h3>
</div>
<div class = "mb-0 ml-0 mr-0 p-0 text">
<h3 class = "mb-0 ml-0 mr-0 p-0 text-center textOne text-xxl-left">
Cakes
</h3>
<h3 class = "mb-0 ml-0 mr-0 p-0 text-center textTwo text-xxl-left">
Cupcakes
</h3>
<h3 class = "mb-0 ml-0 mr-0 p-0 text-center textThree text-xxl-left">
Pancakes
</h3>
<h3 class = "mb-0 ml-0 mr-0 p-0 text-center textFour text-xxl-left">
Restaurant
</h3>
</div>
</div>
<!-- Other Posts -->
<div class = "mb-0 ml-0 mr-0 p-0 posts">
<div class = "heading m-0 p-0">
<h3 class = "m-0 p-0 text-center text-xxl-left">
OTHER POSTS
</h3>
</div>
<div class = "block mb-0 ml-0 mr-0 p-0 row top">
<div class = "col-6 imgContainer m-0 p-0">
<img class = "img-fluid m-0 p-0" src = "../Images/blogInside/Cake.png" alt = "Cake">
</div>
<div class = "align-items-center col-6 d-flex mb-0 mr-0 p-0 textContainer">
<div class = "mb-0 mr-0 mt-0 pb-0 pr-0 pt-0 textArea">
<h3 class = "m-0 p-0">
Taste our Cakes
</h3>
<h4 class = "mb-0 ml-0 mr-0 p-0">
February 2023
</h4>
</div>
</div>
</div>
<div class = "block mb-0 middle ml-0 mr-0 p-0 row">
<div class = "col-6 imgContainer m-0 p-0">
<img class = "img-fluid m-0 p-0" src = "../Images/blogInside/Cupcake.png" alt = "Cupcake">
</div>
<div class = "align-items-center col-6 d-flex mb-0 mr-0 p-0 textContainer">
<div class = "mb-0 mr-0 mt-0 pb-0 pr-0 pt-0 textArea">
<h3 class = "m-0 p-0">
Our Cupcakes Recipe
</h3>
<h4 class = "mb-0 ml-0 mr-0 p-0">
February 2023
</h4>
</div>
</div>
</div>
<div class = "block bottom mb-0 ml-0 mr-0 p-0 row">
<div class = "col-6 imgContainer m-0 p-0">
<img class = "img-fluid m-0 p-0" src = "../Images/blogInside/Pancakes.png" alt = "Pancakes">
</div>
<div class = "align-items-center col-6 d-flex mb-0 mr-0 p-0 textContainer">
<div class = "mb-0 mr-0 mt-0 pb-0 pr-0 pt-0 textArea">
<h3 class = "m-0 p-0">
Pancakes for Breakfast
</h3>
<h4 class = "mb-0 ml-0 mr-0 p-0">
February 2023
</h4>
</div>
</div>
</div>
</div>
<!-- Tags -->
<div class = "mb-0 ml-0 mr-0 p-0 tags">
<div class = "heading m-0 p-0">
<h3 class = "m-0 p-0">
TAGS
</h3>
</div>
<div class = "mb-0 ml-0 mr-0 p-0 tagsText">
<h3 class = "m-0 p-0">
Burgers -> Cakes -> Desserts -> Drinks
</h3>
<h3 class = "mb-0 ml-0 mr-0 p-0 textBottom">
Food -> Pancakes -> Restaurants
</h3>
</div>
</div>
<!-- Follow Us -->
<div class = "follow mb-0 ml-0 mr-0 p-0">
<div class = "heading m-0 p-0">
<h3 class = "m-0 p-0">
FOLLOW US
</h3>
</div>
<div class = "d-flex iconsContainer justify-content-center justify-content-xxl-start mb-0 ml-0 mr-0 p-0">
<div class = "icons m-0 p-0">
<div class = "followImgContainer p-0">
<a href = "https://www.facebook.com/">
<img class = "img-fluid" src = "../Images/blogInside/blogInsideFb.png" alt = "Fb">
</a>
</div>
<div class = "followImgContainer p-0">
<a href = "https://twitter.com/">
<img class = "img-fluid" src = "../Images/blogInside/blogInsideTwitter.png" alt = "Twitter">
</a>
</div>
<div class = "followImgContainer p-0">
<a href = "https://www.linkedin.com/">
<img class = "img-fluid" src = "../Images/blogInside/blogInsideLinkedin.png" alt = "Linkedin">
</a>
</div>
<div class = "followImgContainer p-0">
<a href = "https://www.youtube.com/">
<img class = "img-fluid" src = "../Images/blogInside/blogInsideYT.png" alt = "YouTube">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
blogTwo.html
Blog Two - Top Img
Code Lines: 148-151
<!-- Large Img -->
<div class = "imgContainer m-0 p-0">
<img class = "img-fluid" src = "../Images/blogInside/Cake.png" alt = "Cake">
</div>
Blog Two - Text, Form, Right
Code Lines: 152-357
<div class = "mb-0 ml-0 mr-0 p-0 txtContainer">
<h3 class = "m-0 p-0">
February 2023 - Cakes - by Susan Vecchio
</h3>
</div>
<div class = "headingContainer mb-0 ml-0 mr-0 p-0">
<h3 class = "m-0 p-0">
TASTE OUR CAKES
</h3>
</div>
<!-- Large Text -->
<div class = "mb-0 ml-0 mr-0 p-0 txtContainerRestaurant">
<h4 class = "m-0 p-0">
We made a new challenge - Taste Our Cakes. We invite all cake - lovers to taste our new products. We believe that you will be super satisfied. Our cakemakers create the best cakes in the world. You just need to sign in on our mobile app, and you are in. We promise couple of the sweetest hours in your life. If you need more info about this challenge, be free to contact us.
</h4>
</div>
<!-- Author -->
<div class = "align-items-center author d-flex justify-content-center mb-0 ml-0 mr-0 p-0">
<div class = "imgText ml-0 mr-0 p-0 row">
<div class = "col-6 imgContainerAuthor m-0 p-0">
<img class = "img-fluid m-0 p-0" src = "../Images/blogInside/authorSusan.png" alt = "Author">
</div>
<div class = "align-items-center col-6 d-flex justify-content-center m-0 p-0 textContainerAuthor">
<div class = "m-0 mailText p-0">
<div class = "d-flex justify-content-center m-0 name p-0">
<h2 class = "m-0 p-0">
Susan Vecchio
</h2>
</div>
<div class = "mb-0 ml-0 mr-0 mail p-0">
<h3 class = "m-0 p-0">
susanvecchio@email.com
</h3>
</div>
</div>
</div>
</div>
</div>
<div class = "comment mb-0 ml-0 mr-0 p-0">
<h2 class = "m-0 p-0">
1 Comment
</h2>
</div>
<div class = "commentAuthor mb-0 ml-0 mr-0 p-0">
<h4 class = "m-0 p-0">
SERGIO FUNNINO
</h4>
</div>
<div class = "commentDate mb-0 ml-0 mr-0 p-0">
<h5 class = "m-0 p-0">
03/02/2023
</h5>
</div>
<div class = "commentText mb-0 ml-0 mr-0 p-0">
<h4 class = "m-0 p-0">
I like this challenge!
</h4>
</div>
<div class = "leaveComment mb-0 ml-0 mr-0 p-0">
<h4 class = "m-0 p-0">
LEAVE YOUR COMMENT
</h4>
</div>
<!-- Comment Form -->
<form class = "mb-0 ml-0 mr-0 p-0 row">
<div class = "col-6 m-0 name p-0">
<input class = "m-0 nameField pl-0 pr-0 pt-0" id = "nameComment" name = "nameForComment" placeholder = "Name" type = "text" required>
</div>
<div class = "col-6 d-flex email justify-content-end m-0 p-0">
<input class = "emailField mb-0 mr-0 mt-0 pl-0 pr-0 pt-0" id = "emailComment" name = "emailForComment" placeholder = "Email" type = "email" required>
</div>
<div class = "col-12 mb-0 message ml-0 mr-0 pl-0 pr-0 pt-0">
<textarea class = "messageField" name = "messageComment" placeholder = "Comment"></textarea>
</div>
<div class = "buttonComment mb-0 ml-0 mr-0 pl-0 pr-0 pt-0">
<input class = "align-items-center d-flex justify-content-center m-0 p-0 submitComment" name = "submit" type = "submit" value = "Submit">
</div>
</form>
</div>
<div class = "col-12 col-xxl-6 d-flex justify-content-center justify-content-xxl-end mb-0 ml-0 mr-0 p-0 right">
<div class = "m-0 p-0 rightContent">
<!-- Categories -->
<div class = "categories m-0 p-0">
<div class = "heading m-0 p-0">
<h3 class = "m-0 p-0">
CATEGORIES
</h3>
</div>
<div class = "mb-0 ml-0 mr-0 p-0 text">
<h3 class = "mb-0 ml-0 mr-0 p-0 text-center textOne text-xxl-left">
Cakes
</h3>
<h3 class = "mb-0 ml-0 mr-0 p-0 text-center textTwo text-xxl-left">
Cupcakes
</h3>
<h3 class = "mb-0 ml-0 mr-0 p-0 text-center textThree text-xxl-left">
Pancakes
</h3>
<h3 class = "mb-0 ml-0 mr-0 p-0 text-center textFour text-xxl-left">
Restaurant
</h3>
</div>
</div>
<!-- Other Posts -->
<div class = "mb-0 ml-0 mr-0 p-0 posts">
<div class = "heading m-0 p-0">
<h3 class = "m-0 p-0 text-center text-xxl-left">
OTHER POSTS
</h3>
</div>
<div class = "block mb-0 ml-0 mr-0 p-0 row top">
<div class = "col-6 imgContainer m-0 p-0">
<img class = "img-fluid m-0 p-0" src = "../Images/blogInside/Restaurant.png" alt = "Restaurant">
</div>
<div class = "align-items-center col-6 d-flex mb-0 mr-0 p-0 textContainer">
<div class = "mb-0 mr-0 mt-0 pb-0 pr-0 pt-0 textArea">
<h3 class = "m-0 p-0">
Opened New Rest.
</h3>
<h4 class = "mb-0 ml-0 mr-0 p-0">
January 2023
</h4>
</div>
</div>
</div>
<div class = "block mb-0 middle ml-0 mr-0 p-0 row">
<div class = "col-6 imgContainer m-0 p-0">
<img class = "img-fluid m-0 p-0" src = "../Images/blogInside/Cupcake.png" alt = "Cupcake">
</div>
<div class = "align-items-center col-6 d-flex mb-0 mr-0 p-0 textContainer">
<div class = "mb-0 mr-0 mt-0 pb-0 pr-0 pt-0 textArea">
<h3 class = "m-0 p-0">
Our Cupcakes Recipe
</h3>
<h4 class = "mb-0 ml-0 mr-0 p-0">
February 2023
</h4>
</div>
</div>
</div>
<div class = "block bottom mb-0 ml-0 mr-0 p-0 row">
<div class = "col-6 imgContainer m-0 p-0">
<img class = "img-fluid m-0 p-0" src = "../Images/blogInside/Pancakes.png" alt = "Pancakes">
</div>
<div class = "align-items-center col-6 d-flex mb-0 mr-0 p-0 textContainer">
<div class = "mb-0 mr-0 mt-0 pb-0 pr-0 pt-0 textArea">
<h3 class = "m-0 p-0">
Pancakes for Breakfast
</h3>
<h4 class = "mb-0 ml-0 mr-0 p-0">
February 2023
</h4>
</div>
</div>
</div>
</div>
<!-- Tags -->
<div class = "mb-0 ml-0 mr-0 p-0 tags">
<div class = "heading m-0 p-0">
<h3 class = "m-0 p-0">
TAGS
</h3>
</div>
<div class = "mb-0 ml-0 mr-0 p-0 tagsText">
<h3 class = "m-0 p-0">
Burgers -> Cakes -> Desserts -> Drinks
</h3>
<h3 class = "mb-0 ml-0 mr-0 p-0 textBottom">
Food -> Pancakes -> Restaurants
</h3>
</div>
</div>
<!-- Follow Us -->
<div class = "follow mb-0 ml-0 mr-0 p-0">
<div class = "heading m-0 p-0">
<h3 class = "m-0 p-0">
FOLLOW US
</h3>
</div>
<div class = "d-flex iconsContainer justify-content-center justify-content-xxl-start mb-0 ml-0 mr-0 p-0">
<div class = "icons m-0 p-0">
<div class = "followImgContainer p-0">
<a href = "https://www.facebook.com/">
<img class = "img-fluid" src = "../Images/blogInside/blogInsideFb.png" alt = "Fb">
</a>
</div>
<div class = "followImgContainer p-0">
<a href = "https://twitter.com/">
<img class = "img-fluid" src = "../Images/blogInside/blogInsideTwitter.png" alt = "Twitter">
</a>
</div>
<div class = "followImgContainer p-0">
<a href = "https://www.linkedin.com/">
<img class = "img-fluid" src = "../Images/blogInside/blogInsideLinkedin.png" alt = "Linkedin">
</a>
</div>
<div class = "followImgContainer p-0">
<a href = "https://www.youtube.com/">
<img class = "img-fluid" src = "../Images/blogInside/blogInsideYT.png" alt = "YouTube">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
blogThree.html
Blog Three - Top Img
Code Lines: 148-151
<!-- Large Img -->
<div class = "imgContainer m-0 p-0">
<img class = "img-fluid" src = "../Images/blogInside/Cupcake.png" alt = "Cupcake">
</div>
Blog Three - Text, Form, Right
Code Lines: 152-357
<div class = "mb-0 ml-0 mr-0 p-0 txtContainer">
<h3 class = "m-0 p-0">
February 2023 - Cupcakes - by Dilan Sergio
</h3>
</div>
<div class = "headingContainer mb-0 ml-0 mr-0 p-0">
<h3 class = "m-0 p-0">
OUR CUPCAKES RECIPE
</h3>
</div>
<!-- Large Text -->
<div class = "mb-0 ml-0 mr-0 p-0 txtContainerRestaurant">
<h4 class = "m-0 p-0">
Recently, we have created our new recipe for cupcakes. For now, it is a secret, and you will only in our restaurant have a possibility to taste our cupcakes. In the future, we will continue to develop new recipes for our cupcakes, and you are all invited to enjoy in new flavours of our new cupcakes. Our restaurant is all about quality food, and good company.
</h4>
</div>
<!-- Author -->
<div class = "align-items-center author d-flex justify-content-center mb-0 ml-0 mr-0 p-0">
<div class = "imgText ml-0 mr-0 p-0 row">
<div class = "col-6 imgContainerAuthor m-0 p-0">
<img class = "img-fluid m-0 p-0" src = "../Images/blogInside/authorDilan.png" alt = "Author">
</div>
<div class = "align-items-center col-6 d-flex justify-content-center m-0 p-0 textContainerAuthor">
<div class = "m-0 mailText p-0">
<div class = "d-flex justify-content-center m-0 name p-0">
<h2 class = "m-0 p-0">
Dilan Sergio
</h2>
</div>
<div class = "mb-0 ml-0 mr-0 mail p-0">
<h3 class = "m-0 p-0">
dilansergio@email.com
</h3>
</div>
</div>
</div>
</div>
</div>
<div class = "comment mb-0 ml-0 mr-0 p-0">
<h2 class = "m-0 p-0">
1 Comment
</h2>
</div>
<div class = "commentAuthor mb-0 ml-0 mr-0 p-0">
<h4 class = "m-0 p-0">
VANESSA RUBIN
</h4>
</div>
<div class = "commentDate mb-0 ml-0 mr-0 p-0">
<h5 class = "m-0 p-0">
04/02/2023
</h5>
</div>
<div class = "commentText mb-0 ml-0 mr-0 p-0">
<h4 class = "m-0 p-0">
Try their cupcakes. You will be delighted!
</h4>
</div>
<div class = "leaveComment mb-0 ml-0 mr-0 p-0">
<h4 class = "m-0 p-0">
LEAVE YOUR COMMENT
</h4>
</div>
<!-- Comment Form -->
<form class = "mb-0 ml-0 mr-0 p-0 row">
<div class = "col-6 m-0 name p-0">
<input class = "m-0 nameField pl-0 pr-0 pt-0" id = "nameComment" name = "nameForComment" placeholder = "Name" type = "text" required>
</div>
<div class = "col-6 d-flex email justify-content-end m-0 p-0">
<input class = "emailField mb-0 mr-0 mt-0 pl-0 pr-0 pt-0" id = "emailComment" name = "emailForComment" placeholder = "Email" type = "email" required>
</div>
<div class = "col-12 mb-0 message ml-0 mr-0 pl-0 pr-0 pt-0">
<textarea class = "messageField" name = "messageComment" placeholder = "Comment"></textarea>
</div>
<div class = "buttonComment mb-0 ml-0 mr-0 pl-0 pr-0 pt-0">
<input class = "align-items-center d-flex justify-content-center m-0 p-0 submitComment" name = "submit" type = "submit" value = "Submit">
</div>
</form>
</div>
<div class = "col-12 col-xxl-6 d-flex justify-content-center justify-content-xxl-end mb-0 ml-0 mr-0 p-0 right">
<div class = "m-0 p-0 rightContent">
<!-- Categories -->
<div class = "categories m-0 p-0">
<div class = "heading m-0 p-0">
<h3 class = "m-0 p-0">
CATEGORIES
</h3>
</div>
<div class = "mb-0 ml-0 mr-0 p-0 text">
<h3 class = "mb-0 ml-0 mr-0 p-0 text-center textOne text-xxl-left">
Cakes
</h3>
<h3 class = "mb-0 ml-0 mr-0 p-0 text-center textTwo text-xxl-left">
Cupcakes
</h3>
<h3 class = "mb-0 ml-0 mr-0 p-0 text-center textThree text-xxl-left">
Pancakes
</h3>
<h3 class = "mb-0 ml-0 mr-0 p-0 text-center textFour text-xxl-left">
Restaurant
</h3>
</div>
</div>
<!-- Other Posts -->
<div class = "mb-0 ml-0 mr-0 p-0 posts">
<div class = "heading m-0 p-0">
<h3 class = "m-0 p-0 text-center text-xxl-left">
OTHER POSTS
</h3>
</div>
<div class = "block mb-0 ml-0 mr-0 p-0 row top">
<div class = "col-6 imgContainer m-0 p-0">
<img class = "img-fluid m-0 p-0" src = "../Images/blogInside/Restaurant.png" alt = "Restaurant">
</div>
<div class = "align-items-center col-6 d-flex mb-0 mr-0 p-0 textContainer">
<div class = "mb-0 mr-0 mt-0 pb-0 pr-0 pt-0 textArea">
<h3 class = "m-0 p-0">
Opened New Rest.
</h3>
<h4 class = "mb-0 ml-0 mr-0 p-0">
January 2023
</h4>
</div>
</div>
</div>
<div class = "block mb-0 middle ml-0 mr-0 p-0 row">
<div class = "col-6 imgContainer m-0 p-0">
<img class = "img-fluid m-0 p-0" src = "../Images/blogInside/Cake.png" alt = "Cake">
</div>
<div class = "align-items-center col-6 d-flex mb-0 mr-0 p-0 textContainer">
<div class = "mb-0 mr-0 mt-0 pb-0 pr-0 pt-0 textArea">
<h3 class = "m-0 p-0">
Taste Our Cakes
</h3>
<h4 class = "mb-0 ml-0 mr-0 p-0">
February 2023
</h4>
</div>
</div>
</div>
<div class = "block bottom mb-0 ml-0 mr-0 p-0 row">
<div class = "col-6 imgContainer m-0 p-0">
<img class = "img-fluid m-0 p-0" src = "../Images/blogInside/Pancakes.png" alt = "Pancakes">
</div>
<div class = "align-items-center col-6 d-flex mb-0 mr-0 p-0 textContainer">
<div class = "mb-0 mr-0 mt-0 pb-0 pr-0 pt-0 textArea">
<h3 class = "m-0 p-0">
Pancakes for Breakfast
</h3>
<h4 class = "mb-0 ml-0 mr-0 p-0">
February 2023
</h4>
</div>
</div>
</div>
</div>
<!-- Tags -->
<div class = "mb-0 ml-0 mr-0 p-0 tags">
<div class = "heading m-0 p-0">
<h3 class = "m-0 p-0">
TAGS
</h3>
</div>
<div class = "mb-0 ml-0 mr-0 p-0 tagsText">
<h3 class = "m-0 p-0">
Burgers -> Cakes -> Desserts -> Drinks
</h3>
<h3 class = "mb-0 ml-0 mr-0 p-0 textBottom">
Food -> Pancakes -> Restaurants
</h3>
</div>
</div>
<!-- Follow Us -->
<div class = "follow mb-0 ml-0 mr-0 p-0">
<div class = "heading m-0 p-0">
<h3 class = "m-0 p-0">
FOLLOW US
</h3>
</div>
<div class = "d-flex iconsContainer justify-content-center justify-content-xxl-start mb-0 ml-0 mr-0 p-0">
<div class = "icons m-0 p-0">
<div class = "followImgContainer p-0">
<a href = "https://www.facebook.com/">
<img class = "img-fluid" src = "../Images/blogInside/blogInsideFb.png" alt = "Fb">
</a>
</div>
<div class = "followImgContainer p-0">
<a href = "https://twitter.com/">
<img class = "img-fluid" src = "../Images/blogInside/blogInsideTwitter.png" alt = "Twitter">
</a>
</div>
<div class = "followImgContainer p-0">
<a href = "https://www.linkedin.com/">
<img class = "img-fluid" src = "../Images/blogInside/blogInsideLinkedin.png" alt = "Linkedin">
</a>
</div>
<div class = "followImgContainer p-0">
<a href = "https://www.youtube.com/">
<img class = "img-fluid" src = "../Images/blogInside/blogInsideYT.png" alt = "YouTube">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
blogFour.html
Blog Four - Top Img
Code Lines: 148-151
<!-- Large Img -->
<div class = "imgContainer m-0 p-0">
<img class = "img-fluid" src = "../Images/blogInside/Pancakes.png" alt = "Pancakes">
</div>
Blog Four - Text, Form, Right
Code Lines: 152-357
<div class = "mb-0 ml-0 mr-0 p-0 txtContainer">
<h3 class = "m-0 p-0">
February 2023 - Pancakes - by Alissa Seedorf
</h3>
</div>
<div class = "headingContainer mb-0 ml-0 mr-0 p-0">
<h3 class = "m-0 p-0">
PANCAKES FOR BREAKFAST
</h3>
</div>
<!-- Large Text -->
<div class = "mb-0 ml-0 mr-0 p-0 txtContainerRestaurant">
<h4 class = "m-0 p-0">
If you don’t know what to prepare for quality breakfast - make the pancakes. Fill them with jam, Nutella or your favourite chocolate sirup. We like to fill our pancakes with Nutella, and it's simple delicious meal for the breakfast. Also, if you prefer healthier food, we offer our pancakes filled with some fruit jam. Visit us, and try our pancakes. We believe that you will back again.
</h4>
</div>
<!-- Author -->
<div class = "align-items-center author d-flex justify-content-center mb-0 ml-0 mr-0 p-0">
<div class = "imgText ml-0 mr-0 p-0 row">
<div class = "col-6 imgContainerAuthor m-0 p-0">
<img class = "img-fluid m-0 p-0" src = "../Images/blogInside/authorAlissa.png" alt = "Author">
</div>
<div class = "align-items-center col-6 d-flex justify-content-center m-0 p-0 textContainerAuthor">
<div class = "m-0 mailText p-0">
<div class = "d-flex justify-content-center m-0 name p-0">
<h2 class = "m-0 p-0">
Alissa Seedorf
</h2>
</div>
<div class = "mb-0 ml-0 mr-0 mail p-0">
<h3 class = "m-0 p-0">
alissaseedorf@email.com
</h3>
</div>
</div>
</div>
</div>
</div>
<div class = "comment mb-0 ml-0 mr-0 p-0">
<h2 class = "m-0 p-0">
1 Comment
</h2>
</div>
<div class = "commentAuthor mb-0 ml-0 mr-0 p-0">
<h4 class = "m-0 p-0">
DAVID JOHNSON
</h4>
</div>
<div class = "commentDate mb-0 ml-0 mr-0 p-0">
<h5 class = "m-0 p-0">
04/02/2023
</h5>
</div>
<div class = "commentText mb-0 ml-0 mr-0 p-0">
<h4 class = "m-0 p-0">
Pancakes with Nutella are the best in the city.
</h4>
</div>
<div class = "leaveComment mb-0 ml-0 mr-0 p-0">
<h4 class = "m-0 p-0">
LEAVE YOUR COMMENT
</h4>
</div>
<!-- Comment Form -->
<form class = "mb-0 ml-0 mr-0 p-0 row">
<div class = "col-6 m-0 name p-0">
<input class = "m-0 nameField pl-0 pr-0 pt-0" id = "nameComment" name = "nameForComment" placeholder = "Name" type = "text" required>
</div>
<div class = "col-6 d-flex email justify-content-end m-0 p-0">
<input class = "emailField mb-0 mr-0 mt-0 pl-0 pr-0 pt-0" id = "emailComment" name = "emailForComment" placeholder = "Email" type = "email" required>
</div>
<div class = "col-12 mb-0 message ml-0 mr-0 pl-0 pr-0 pt-0">
<textarea class = "messageField" name = "messageComment" placeholder = "Comment"></textarea>
</div>
<div class = "buttonComment mb-0 ml-0 mr-0 pl-0 pr-0 pt-0">
<input class = "align-items-center d-flex justify-content-center m-0 p-0 submitComment" name = "submit" type = "submit" value = "Submit">
</div>
</form>
</div>
<div class = "col-12 col-xxl-6 d-flex justify-content-center justify-content-xxl-end mb-0 ml-0 mr-0 p-0 right">
<div class = "m-0 p-0 rightContent">
<!-- Categories -->
<div class = "categories m-0 p-0">
<div class = "heading m-0 p-0">
<h3 class = "m-0 p-0">
CATEGORIES
</h3>
</div>
<div class = "mb-0 ml-0 mr-0 p-0 text">
<h3 class = "mb-0 ml-0 mr-0 p-0 text-center textOne text-xxl-left">
Cakes
</h3>
<h3 class = "mb-0 ml-0 mr-0 p-0 text-center textTwo text-xxl-left">
Cupcakes
</h3>
<h3 class = "mb-0 ml-0 mr-0 p-0 text-center textThree text-xxl-left">
Pancakes
</h3>
<h3 class = "mb-0 ml-0 mr-0 p-0 text-center textFour text-xxl-left">
Restaurant
</h3>
</div>
</div>
<!-- Other Posts -->
<div class = "mb-0 ml-0 mr-0 p-0 posts">
<div class = "heading m-0 p-0">
<h3 class = "m-0 p-0 text-center text-xxl-left">
OTHER POSTS
</h3>
</div>
<div class = "block mb-0 ml-0 mr-0 p-0 row top">
<div class = "col-6 imgContainer m-0 p-0">
<img class = "img-fluid m-0 p-0" src = "../Images/blogInside/Restaurant.png" alt = "Restaurant">
</div>
<div class = "align-items-center col-6 d-flex mb-0 mr-0 p-0 textContainer">
<div class = "mb-0 mr-0 mt-0 pb-0 pr-0 pt-0 textArea">
<h3 class = "m-0 p-0">
Opened New Rest.
</h3>
<h4 class = "mb-0 ml-0 mr-0 p-0">
January 2023
</h4>
</div>
</div>
</div>
<div class = "block mb-0 middle ml-0 mr-0 p-0 row">
<div class = "col-6 imgContainer m-0 p-0">
<img class = "img-fluid m-0 p-0" src = "../Images/blogInside/Cake.png" alt = "Cake">
</div>
<div class = "align-items-center col-6 d-flex mb-0 mr-0 p-0 textContainer">
<div class = "mb-0 mr-0 mt-0 pb-0 pr-0 pt-0 textArea">
<h3 class = "m-0 p-0">
Taste Our Cakes
</h3>
<h4 class = "mb-0 ml-0 mr-0 p-0">
February 2023
</h4>
</div>
</div>
</div>
<div class = "block bottom mb-0 ml-0 mr-0 p-0 row">
<div class = "col-6 imgContainer m-0 p-0">
<img class = "img-fluid m-0 p-0" src = "../Images/blogInside/Cupcake.png" alt = "Cupcake">
</div>
<div class = "align-items-center col-6 d-flex mb-0 mr-0 p-0 textContainer">
<div class = "mb-0 mr-0 mt-0 pb-0 pr-0 pt-0 textArea">
<h3 class = "m-0 p-0">
Our Cupcakes Recipe
</h3>
<h4 class = "mb-0 ml-0 mr-0 p-0">
February 2023
</h4>
</div>
</div>
</div>
</div>
<!-- Tags -->
<div class = "mb-0 ml-0 mr-0 p-0 tags">
<div class = "heading m-0 p-0">
<h3 class = "m-0 p-0">
TAGS
</h3>
</div>
<div class = "mb-0 ml-0 mr-0 p-0 tagsText">
<h3 class = "m-0 p-0">
Burgers -> Cakes -> Desserts -> Drinks
</h3>
<h3 class = "mb-0 ml-0 mr-0 p-0 textBottom">
Food -> Pancakes -> Restaurants
</h3>
</div>
</div>
<!-- Follow Us -->
<div class = "follow mb-0 ml-0 mr-0 p-0">
<div class = "heading m-0 p-0">
<h3 class = "m-0 p-0">
FOLLOW US
</h3>
</div>
<div class = "d-flex iconsContainer justify-content-center justify-content-xxl-start mb-0 ml-0 mr-0 p-0">
<div class = "icons m-0 p-0">
<div class = "followImgContainer p-0">
<a href = "https://www.facebook.com/">
<img class = "img-fluid" src = "../Images/blogInside/blogInsideFb.png" alt = "Fb">
</a>
</div>
<div class = "followImgContainer p-0">
<a href = "https://twitter.com/">
<img class = "img-fluid" src = "../Images/blogInside/blogInsideTwitter.png" alt = "Twitter">
</a>
</div>
<div class = "followImgContainer p-0">
<a href = "https://www.linkedin.com/">
<img class = "img-fluid" src = "../Images/blogInside/blogInsideLinkedin.png" alt = "Linkedin">
</a>
</div>
<div class = "followImgContainer p-0">
<a href = "https://www.youtube.com/">
<img class = "img-fluid" src = "../Images/blogInside/blogInsideYT.png" alt = "YouTube">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
10
SCSS
If you need to change styling of this web template, you use SCSS files. In this documentation you can find more about colors, fonts, mixins, variables, imports, and containers on Header, About, Research, Science, Projects, News, Contact and Footer section, but if you need to make more serious changes, you are free to ask for help and support. Also, there are comments within the SCSS code for easier orientation. Notice: "Show Code" section is without media queries. For changes within media queries part, be free to ask for support.
