Everyone wants to create the website which is compatible with all the devices like computer, laptops, tablets, and mobiles. So for making a website responsive the best way is to make a website using Bootstrap.
Since it is a single-page website when you click on any menu on the website it will reach you towards a specific section.
Code Implementation:
HTML Code:
In the HTML code, you have to copy the starter template from the bootstrap and just paste it into your HTML file. After that create a navbar.
Then you just have to use the grid system of bootstrap, and you will be able to create a simple and responsive website like this.
<!DOCTYPE html> < html lang = "en" >
< head >
<!-- Required meta tags -->
< meta charset = "utf-8" />
< meta name = "viewport" content=" width = device -width,
initial-scale = 1 " />
<!-- Bootstrap CSS -->
< link
href =
rel = "stylesheet"
integrity =
"sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin = "anonymous"
/>
< link rel = "stylesheet"
href = "style.css" />
< link rel = "preconnect" < link
href =
"https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap" rel = "stylesheet"
/>
< title >GFG</ title >
</ head >
< body >
< section id = "navbar" >
< nav class = "navbar navbar-expand-lg navbar-light" >
< div class = "container-fluid" >
< a class = "navbar-brand" href = "#" >
Geeks for Geeks
</ a >
< button
class = "navbar-toggler"
type = "button"
data-bs-toggle = "collapse"
data-bs-target = "#navbarSupportedContent"
aria-controls = "navbarSupportedContent"
aria-expanded = "false"
aria-label = "Toggle navigation"
>
< span class = "navbar-toggler-icon" ></ span >
</ button >
< div class = "collapse navbar-collapse" id = "navbarSupportedContent" >
< ul class = "navbar-nav m-auto" >
< li class = "nav-item" >
< a class = "nav-link active" aria-current = "page" href = "#" >Home</ a >
</ li >
< li class = "nav-item" >
< a class = "nav-link" href = "#service" >Services</ a >
</ li >
< li class = "nav-item" >
< a class = "nav-link" href = "#about" >About Us</ a >
</ li >
< li class = "nav-item" >
< a class = "nav-link" href = "#product" >Products</ a >
</ li >
< li class = "nav-item" >
< a class = "nav-link" href = "#social" >Contact Us</ a >
</ li >
</ ul >
</ div >
</ div >
</ nav >
</ section >
<!-- banner -->
< section id = "banner" >
< div class = "container-fluid" id = "banner-container" >
< div class = "row" id = "banner-row" >
< div class = "col-md-6" id = "banner-col" >
< h3 >
BEST PROFESSIONAL WEBSITE DESIGN
SOFTWARE DEVELOPMENT COMPANY
</ h3 >
< p >
The fastest way to grow your business with the leader in
Technology
</ p >
< div class = "d-grid gap-2 d-md-flex justify-content-center" >
< a class = "btn btn-primary" href = "#" role = "button" >Contact Us</ a >
</ div >
</ div >
< div class = "col-md-6" id = "banner-col2" >
< img
class = "img-responsive rounded mx-auto d-block"
src = "images/gfg.png"
alt = ""
/>
</ div >
</ div >
</ div >
</ section >
<!-- services -->
< section id = "service" >
< h1 class = "text-center" >SERVICES</ h1 >
< div class = "container-fluid" id = "service-container" >
< div class = "row" id = "banner-row" >
< div class = "col-md-4" id = "service-col1" >
< img
src = "images/gfg.png"
class = "img-fluid rounded mx-auto d-block"
alt = "..."
/>
< h3 >Website Design</ h3 >
< p >
User Experience Design.
Website Content Strategy.
Cross Browser
and Platform Testing.
</ p >
</ div >
< div class = "col-md-4" id = "service-col2" >
< img
src = "images/gfg.png"
class = "img-fluid rounded mx-auto d-block"
alt = "..."
/>
< h3 >Bulk SMS</ h3 >
< p >
1.Toll Free Number
2. IVR
3. Virtual Number
4. Political or any
Voice Broadcasting
</ p >
</ div >
< div class = "col-md-4" id = "service-col3" >
< img
src = "images/gfg.png"
class = "img-fluid rounded mx-auto d-block"
alt = "..."
/>
< h3 >Payment Gateways</ h3 >
< p >
PayU India is the flagship company of
Naspers group which is a $25
Billion internet and media conglomerate
listed on London and
Johannesburg stock exchanges respectively.
</ p >
</ div >
</ div >
</ div >
</ section >
< hr />
<!-- about Us -->
< section id = "about" >
< h1 class = "text-center" >About Us</ h1 >
< div class = "container-fluid" id = "about-container" >
< div class = "row" id = "banner-row" >
< div class = "col-md-6" id = "about-col" >
< h3 >Why Us</ h3 >
< ul >
< li >
Probuz is all about Delivering High
Quality web design and development
services, Cost effective and
reliable solutions.
</ li >
< li >SCHOOL/COLLEGE MANAGEMENT SOFTWARE
(CAMPUS PRO)</ li >
< li >
Let us take care of your Business needs.
Customer Productivity is our Priority.
</ li >
< li >Our expertise in Business includes</ li >
</ ul >
</ div >
< div class = "col-md-6" id = "banner-col2" >
< img
class = "img-responsive rounded mx-auto d-block"
src = "images/gfg.png"
alt = ""
/>
</ div >
</ div >
</ div >
</ section >
< hr />
<!-- product -->
< section id = "product" >
< h1 class = "text-center" >Our Products</ h1 >
< div class = "container-fluid" id = "product-container" >
< div class = "row" id = "banner-row" >
< div class = "col-md-6" id = "about-col" >
< img
class = "img-responsive rounded mx-auto d-block"
src = "images/gfg.png"
alt = ""
/>
</ div >
< div class = "col-md-6" id = "product-col2" >
< h3 >Product List</ h3 >
< ul >
< li >CLINIC MANAGMENT SYSTEM</ li >
< li >SCHOOL/COLLEGE MANAGEMENT
SOFTWARE (CAMPUS PRO)</ li >
< li >SERVICE MANAGEMENT SOFTWARE</ li >
< li >E-COMMERCE WEBSITE</ li >
</ ul >
</ div >
</ div >
</ div >
</ section >
< hr />
<!-- social -->
< section id = "social" >
< h1 class = "text-center" >Get In Touch</ h1 >
< div class = "d-grid gap-2 d-md-flex justify-content-center" >
< div class = "row align-items-center" id = "social-row" >
< div class = "col-md-4 social-col" >
< a href = ""
>< img
class = "img-responsive rounded mx-auto d-block"
src = "images/gfg.png"
alt = ""
/></ a >
</ div >
< div class = "col-md-4 social-col" >
< a href = ""
>< img
class = "img-responsive rounded mx-auto d-block"
src = "images/icons8-instagram-64.png"
alt = ""
/></ a >
</ div >
< div class = "col-md-4 social-col" >
< a href = ""
>< img
class = "img-responsive rounded mx-auto d-block"
src = "images/icons8-twitter-64.png"
alt = ""
/></ a >
</ div >
</ div >
</ div >
</ section >
<!-- footer -->
< section id = "footer" >
< section id = "banner" >
< div class = "container-fluid" id = "banner-container" >
< div class = "row" id = "banner-row" >
< div class = "col-md-4" id = "footer-col1" >
< h3 >My Website</ h3 >
< p >
At XYZ we believe that customers should
always get easy-to-use, best in the kind
and fast services.xyz has achieved
standards which helps customer to
achieve satisfaction and realize
value for their hard earned money.
</ p >
</ div >
< div class = "col-md-4" id = "footer-col2" >
< h3 >Contact Us</ h3 >
< p >Call Us- 1800-121-6532</ p >
< p >Email Us- support@xyz.com</ p >
</ div >
< div class = "col-md-4" id = "footer-col2" >
< h3 >Subscribe To Newsletter</ h3 >
< form >
< div class = "mb-3" >
< input
type = "email"
placeholder = "Enter Your Email"
class = "form-control"
id = "exampleInputEmail1"
aria-describedby = "emailHelp"
/>
< div id = "emailHelp" class = "form-text" >
We'll never share your email with anyone else.
</ div >
</ div >
< button type = "submit" class = "btn btn-primary" >
Submit
</ button >
</ form >
</ div >
</ div >
</ div >
</ section >
</ section >
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
< script
src =
integrity =
"sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin = "anonymous"
></ script >
</ body >
</ html >
|
CSS CODE:
So, as you all know that bootstrap is not enough good for making the website interactive, so added some CSS over here.
You can change the navbar background color according to your requirement.
*{ margin : 0 ;
padding : 0 ;
font-family : 'Roboto Condensed' , sans-serif ;
} /* navbar */ .navbar-nav{ margin-right : 0 !important ;
padding-right : 100px ;
} .navbar{ background-color : #0a193d ;
color : white !important ;
} .nav-item a{ color : white !important ;
} .nav-item{ padding-left : 2px ;
} .navbar-brand{ color : white !important ;
padding-left : 100px ;
} #navbar button{ color : white !important ;
} /* banner */ #banner-container{ background-color : #0a193d ;
color : white !important ;
padding-top : 80px ;
padding-bottom : 80px ;
} #banner-row img{ max-width : 70% ;
height : auto ;
display : block ;
padding-left : 30px ;
} #banner-row h 3 , p{
padding-left : 20px ;
padding-top : 20px ;
text-align : center ;
} #banner-row a{ background-color : white !important ;
color : black !important ;
border : none ;
margin-left : 20px ;
margin-top : 20px ;
} #banner-col{ padding-left : 20px ;
} /* service */ #service{ padding-top : 80px ;
padding-bottom : 80px ;
} #service h 1 {
padding-bottom : 70px ;
} /* about */ #about{ padding-top : 80px ;
padding-bottom : 80px ;
} #about h 1 {
padding-bottom : 70px ;
} #about-col ul{ padding-top : 50px ;
padding-left : 50px ;
} #about-col ul li{ padding-top : 15px ;
} /* product */ #product{ padding-top : 80px ;
padding-bottom : 80px ;
} #product h 1 {
padding-bottom : 70px ;
} #product-col 2 ul{
padding-top : 90px ;
} #product-col 2 ul li{
padding-top : 15px ;
} /* social */ #social{ padding-top : 80px ;
padding-bottom : 80px ;
} #social h 1 {
padding-bottom : 70px ;
} .social-col a:hover img{ transform: translateY( -10px );
} #social-row{ flex- direction : row;
} /* footer */ .mb -3 {
padding-top : 10px ;
} /* media */ @media only screen and ( max-width : 987px ){
.navbar-brand{
padding-left : 0px ;
}
} @media only screen and ( max-width : 768px ){
#banner-row img{
padding-top : 20px ;
}
.social-col{
width : 33% ;
}
} |
Output:
Supported Browser:
- Google Chrome
- Microsoft Edge
- Firefox
- Opera
- Safari
You can check out this project at the given link – https://saurabhsonewane.github.io/gfg1.github.io/