Website’s have become the biggest thing in today’s world. Any time you want to access the internet, a website is required. Websites include web pages loaded with multimedia content and are accessed using a common domain. These websites are published on a web server.
In this article, we are going to build a front-end of the business website, which will be a fully functional responsive blog website using Twitter Bootstrap. You will also learn about how to build a slick theme for businesses, how to implement animation effects, how to use Scrolling set off animation and optimize your website for mobile devices.
Folder and Vendor Setup:
1) We are going to create a new folder and name it business_theme. This is going to have our basic structure. We’ll have our index page, our CSS folder, our JavaScript folder, our Fonts and our images folder. For the images, I’m going to grab them from the completed project.
2) We have around 22 sample images and also the images for the blog, logo, and slides. So, we are going to take all those and put them into our images folder.
3) Then we need to download bootstrap, so go to the http://getbootstrap.com/, click on Getting Started and then select the Basic Template. I’m going to select the Starter Template. Once you select the Template, right click on the template and select the View Page Source option. Once you select this option, you will be able to see the code. Copy and paste the code in your HTML file and do the same for the the css file, pasting it in your bootstrap.css file and your JSfiles and link those files in your html. Once your successfully done with this, click on index.html it will look like this:
4) After you are done with this template, we are going to add the animation file in our theme. For this, go to Google and search for the animate.css file. From the many results select the following one https://daneden.github.io/animate.css/. Click on the drop down list and select rotateOutUpLeft and click on download button and paste it in your CSS folder it will look like this:
Similarly, we are going to add the Font-Awesome file in our CSS folder. For this, we need to go to the following link http://fontawesome.io/ and download the file and paste it in your CSS Folder and remaining file add it in your fonts folder it will look like this:
5) The last thing we want in our theme is the WOW Slider, so we are going to search for wow.js file on goggle and select the following result https://github.com/matthieua/WOW, after that click on dist folder and you will be able to see wow.js file, download it and paste it in your JS folder and it will look like this:
Implementation:
1) Now, we are going to add the Navbar structure and the animated showcase in our index.html and css file.
Index.html
Business Theme
Clean Business Theme
Lorem ipsum dolor Sit Amet, consectetur adipiscing elit. Nullam porttitor sapien sit amet ante sodales interdum. Curabitur in est risus
Find Out More
Style.css
body {
padding-top: 90px;
}
.nav{
margin-top:18px;
}
.navbar{
min-height:90px;
margin-bottom:0 !important;
}
.navbar-brand{
height:auto;
padding-top:15px;
margin:0;
}
.navbar-nav{
margin:0;
padding:0;
}
.navbar-nav li{
padding-top:5px;
padding-bottom:5px;
}
.navbar-nav > li > a{
padding:20px;
font-size:18px;
font-weight: bold;
border-right:1px solid #ccc;
text-transform: uppercase;
font-family: 'Oswald', sans-serif;
}
.navbar-nav > li > a span{
margin:5px 0 0 0;
padding:0;
font-size: 14px;
display:block;
font-weight: normal;
font-family: arial;
text-transform: none;
}
.navbar-nav a:hover,.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus{
background:#0383c0 !important;
color:#fff !important;
}
.jumbotron{
margin:0 !important;
min-height:450px;
background:url(../img/bg.jpg) no-repeat;
}
h1{
text-transform: uppercase;
font-family: 'Oswald', sans-serif;
}
.jumbotron h1{
font-size:55px;
}After completing this code, you will get the following output:
2) Now, we are going to design our homepage section so our HTML and CSS file will look like this:
Index.html
Valid Code
Responsive
Animation Ready
Customizable
Take A Closer Look
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porttitor sapien sit amet ante sodales interdum. Curabitur in est risus
More InfoBusiness Theme Includes...
- Bootstrap 3 Framework
- Mobile Responsive Design
- Minimal Custom CSS Styles
- Unstyled: Add Your Own Style and Content!
- 100% Free to Use
- Open Source: Use for any project, private or commercial!
More Features Include...
- Bootstrap 3 Framework
- Mobile Responsive Design
- Minimal Custom CSS Styles
- Unstyled: Add Your Own Style and Content!
- 100% Free to Use
- Open Source: Use for any project, private or commercial!
Style.css
section{
padding:30px 0;
}
.section-gray{
background:#f4f4f4;
}
.section-primary{
background:#0383c0;
color:#fff;
padding:60px 0;
}
.section-secondary{
background:#e44d26;
color:#fff;
padding:60px 0;
}
.slogan{
text-align: center;
}
.slogan h1{
font-size:50px;
margin-bottom:25px;
}
.slogan p{
font-size:20px;
}
.slogan a{
margin-top:20px;
}
h1,h2,h3{
text-transform: uppercase;
font-family: 'Oswald', sans-serif;
}
.jumbotron h1{
font-size:55px;
}
.fa-color{
color:#0383c0;
}
.feature-list li{
list-style: none;
font-size:18px;
line-height: 2em;
}
footer{
text-align:center;
height:60px;
background:#f4f4f4;
padding-top:20px;
}
3) Now, we are going to design the inner pages of our template such as the About us, Services and Contact us. I’ve attached the code of the following pages below:
About.html
Business Theme
About Who Are We?
Welcome to our company
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas volutpat, sem quis ornare bibendum, metus odio commodo ante, sit amet finibus sapien nibh vel augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas risus nunc, tristique ac mi non, elementum venenatis elit. Nullam ornare laoreet justo, in dignissim ligula faucibus sit amet.
Suspendisse tristique diam eu ex dapibus, non finibus quam pellentesque. Fusce eleifend magna vitae sem maximus, eu luctus eros finibus. Aliquam urna leo, finibus vel turpis eget, pretium hendrerit metus. Sed a leo elementum, tempor purus at, lacinia lorem. Praesent porttitor sed ipsum at consequat. Nunc
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas risus nunc, tristique ac mi non, elementum venenatis elit. Nullam ornare laoreet justo, in dignissim ligula faucibus sit amet.
Contact Us
Meet The Team
Rebecca Smith Developer
Vestibulum suscipit in eros et dignissim. Proin tincidunt eros sollicitudin orci tempor, vel porta odio gravida. Morbi id lectus
Jeff Bridges Designer
Vestibulum suscipit in eros et dignissim. Proin tincidunt eros sollicitudin orci tempor, vel porta odio gravida. Morbi id lectus
John Jones Developer
Vestibulum suscipit in eros et dignissim. Proin tincidunt eros sollicitudin orci tempor, vel porta odio gravida. Morbi id lectus
Beth johnson SalesRep
Vestibulum suscipit in eros et dignissim. Proin tincidunt eros sollicitudin orci tempor, vel porta odio gravida. Morbi id lectus
Sara Smith Developer
Vestibulum suscipit in eros et dignissim. Proin tincidunt eros sollicitudin orci tempor, vel porta odio gravida. Morbi id lectus
John Jones Developer
Vestibulum suscipit in eros et dignissim. Proin tincidunt eros sollicitudin orci tempor, vel porta odio gravida. Morbi id lectus
Our Clients
Contact.html
Business Theme
Contact Get In Touch
Contact Us Today!
Contact Details
89 West Main st
Merrimac, MA 01860
: (555) 555-5555
: Monday - Friday: 9:00 AM to 5:00 PM
Services.html
Business Theme
Services What Do We Do?
Our Services
Lid est laborum dolo rumes fugats untras. Etharums ser quidem rerum facilis dolores nemis omnis fugats vitaes nemo minima rerums unsers sadips amets. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Want More?
Etharums ser quidem rerum facilis dolores nemis omnis fugats vitaes nemo minima rerums unsers sadips amets.
Read More
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc placerat diam quis nisl vestibulum dignissim. In hac habitasse platea dictumst. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam placerat nunc ut tellus tristique, non posuere neque iaculis. Fusce aliquet dui ut felis rhoncus, vitae molestie mauris auctor. Donec pellentesque feugiat leo a adipiscing. Pellentesque quis tristique eros, sed rutrum mauris.
Nam fringilla quis enim in eleifend. Suspendisse sed lectus mauris. Nam commodo, arcu et posuere placerat, tellus tortor dignissim eros, sit amet eleifend urna lorem sit amet nulla. Praesent sem nibh, vulputate nec congue eu, dapibus vitae augue. Suspendisse cursus urna sit amet metus porttitor, in pharetra quam feugiat. Etiam tempus euismod nulla eget pellentesque.
Nam fringilla quis enim in eleifend. Suspendisse sed lectus mauris. Nam commodo, arcu et posuere placerat, tellus tortor dignissim eros, sit amet eleifend urna lorem sit amet nulla. Praesent sem nibh, vulputate nec congue eu, dapibus vitae augue. Suspendisse cursus urna sit amet metus porttitor, in pharetra quam feugiat. Etiam tempus euismod nulla eget pellentesque.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc placerat diam quis nisl vestibulum dignissim. In hac habitasse platea dictumst. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam placerat nunc ut tellus tristique, non posuere neque iaculis. Fusce aliquet dui ut felis rhoncus, vitae molestie mauris auctor. Donec pellentesque feugiat leo a adipiscing. Pellentesque quis tristique eros, sed rutrum mauris.
Nam fringilla quis enim in eleifend. Suspendisse sed lectus mauris. Nam commodo, arcu et posuere placerat, tellus tortor dignissim eros, sit amet eleifend urna lorem sit amet nulla. Praesent sem nibh, vulputate nec congue eu, dapibus vitae augue. Suspendisse cursus urna sit amet metus porttitor, in pharetra quam feugiat. Etiam tempus euismod nulla eget pellentesque.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc placerat diam quis nisl vestibulum dignissim. In hac habitasse platea dictumst. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam placerat nunc ut tellus tristique, non posuere neque iaculis. Fusce aliquet dui ut felis rhoncus, vitae molestie mauris auctor. Donec pellentesque feugiat leo a adipiscing. Pellentesque quis tristique eros, sed rutrum mauris.
Nam fringilla quis enim in eleifend. Suspendisse sed lectus mauris. Nam commodo, arcu et posuere placerat, tellus tortor dignissim eros, sit amet eleifend urna lorem sit amet nulla. Praesent sem nibh, vulputate nec congue eu, dapibus vitae augue. Suspendisse cursus urna sit amet metus porttitor, in pharetra quam feugiat. Etiam tempus euismod nulla eget pellentesque.
Service Images
Service One
Service one description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc placerat diam quis nisl vestibulum dignissim. In hac habitasse platea dictumst.
More
Service Two
Service two description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc placerat diam quis nisl vestibulum dignissim. In hac habitasse platea dictumst.
More
Service Three
Service three description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc placerat diam quis nisl vestibulum dignissim. In hac habitasse platea dictumst.
More
3) Now the last thing to do with template is to add animation and make it responsive, so we will add the following code:
Index.html
Business Theme
Clean Business Theme
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porttitor sapien sit amet ante sodales interdum. Curabitur in est risus
Find Out More
Valid Code
Responsive
Animation Ready
Customizable
Take A Closer Look
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porttitor sapien sit amet ante sodales interdum. Curabitur in est risus
More Info
Business Theme Includes...
- Bootstrap 3 Framework
- Mobile Responsive Design
- Minimal Custom CSS Styles
- Unstyled: Add Your Own Style and Content!
- 100% Free to Use
- Open Source: Use for any project, private or commercial!
More Features Include...
- Bootstrap 3 Framework
- Mobile Responsive Design
- Minimal Custom CSS Styles
- Unstyled: Add Your Own Style and Content!
- 100% Free to Use
- Open Source: Use for any project, private or commercial!
Style.css
body {
padding-top: 90px;
}
section{
padding:30px 0;
}
.section-gray{
background:#f4f4f4;
}
.section-primary{
background:#0383c0;
color:#fff;
padding:60px 0;
}
.section-secondary{
background:#e44d26;
color:#fff;
padding:60px 0;
}
.section-title{
padding:10px;
background:#0383c0;
color:#fff;
}
.section-title small{
color:#ccc !important;
}
.slogan{
text-align: center;
}
.slogan h1{
font-size:50px;
margin-bottom:25px;
}
.slogan p{
font-size:20px;
}
.slogan a{
margin-top:20px;
}
.nav{
margin-top:18px;
}
.navbar{
min-height:90px;
margin-bottom:0 !important;
}
.navbar-brand{
height:auto;
padding-top:15px;
margin:0;
}
.navbar-nav{
margin:0;
padding:0;
}
.navbar-nav li{
padding-top:5px;
padding-bottom:5px;
}
.navbar-nav > li > a{
padding:20px;
font-size:18px;
font-weight: bold;
border-right:1px solid #ccc;
text-transform: uppercase;
font-family: 'Oswald', sans-serif;
}
.navbar-nav > li > a span{
margin:5px 0 0 0;
padding:0;
font-size: 14px;
display:block;
font-weight: normal;
font-family: arial;
text-transform: none;
}
.navbar-nav a:hover,.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus{
background:#0383c0 !important;
color:#fff !important;
}
.jumbotron{
margin:0 !important;
min-height:450px;
background:url(../img/bg.jpg) no-repeat;
}
h1,h2,h3{
text-transform: uppercase;
font-family: 'Oswald', sans-serif;
}
.jumbotron h1{
font-size:55px;
}
.fa-color{
color:#0383c0;
}
.feature-list li{
list-style: none;
font-size:18px;
line-height: 2em;
}
footer{
text-align:center;
height:60px;
background:#f4f4f4;
padding-top:20px;
}
@media(max-width:990px){
.navbar-header{
float:none;
}
.navbar-left, .navbar-right{
float:none !important;
}
.navbar-toggle{
display:block;
}
.navbar-collapse{
border-top:1px solid transparent;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top{
top:0;
border-width:0 0 1px;
}
.navbar-collapse.collapse{
display:none !important;
}
.navbar-nav{
float:none;
margin-top:7.5px;
}
.navbar-nav > li{
float:none;
}
.navbar-nav > li > a{
padding-top:10px;
padding-bottom:10px;
border-right:none;
}
.collapse.in{
display:block !important;
}
}
@media(max-width:768px){
.jumbotron{
min-height:300px;
}
.jumbotron img{
display:none;
}
}
I hope this has been helpful for you guys in understanding a how to create frontend business website using Twitter Bootstrap Goodluck!
The post Learn How to Build a Business Website Using Twitter Bootstrap appeared first on Eduonix.com | Blog.
This post first appeared on How And When Should You Use HBase NoSQL DB, please read the originial post: here
