Hello Visitors, Today, we will learn to create a simple responsive webpage using Bootstrap and HTML & CSS. There are many source codes available based on CSS animation, Bootstrap, and javascript in this blog. Please make sure to check those projects as well apart from this one. In this project, I have used a bootstrap responsive grid and the latest HTML and CSS properties to make this webpage. You can use this webpage as an agency website, portfolio website, and so on. For a clear understanding, I will recommend you follow the video below.
I hope you have watched the whole video.in this project [ Simple Website from Scratch using Bootstrap
], there are six different sections. They are Home, About, Team, Services, Contact, and a simple footer. In the footer section, you can put your company trademark text or logo. The logo is on the left of the homepage, and there are six menu items on the right side. I have used simple text in the logo area, but you can put a png image in there. I have made the navigation bar sticky by using some custom jquery codes. Initially, the navbar background color will remain transparent, but when we scroll down the page, the navbar background color will be changed to black RGB color. I have used CSS transition to make the animation smooth. There will be a header text, some random text, and a learn more call-to-action button in the homepage section. Instead of the image slider, I have used a text slider on the homepage. This means the text will slide after some interval, but the image will remain still.
Then comes the about area of the website. In this section, there will be an image, a header text, and some random text. I have included a section header in each segment from the services section. We will have a header text signifying what the section is about and paragraph text in the section header. In the services section, there will be three service boxes. Each contains a font-awesome icon, a services name, and some text. I have used a Bootstrap column grid to make the service box responsive. If you want six boxes, just copy the first three and change the text and icons there. I have taken six boxes in the portfolio area, each with an image, a header text, and some text in a paragraph tag. I have given nice hover animation to each image used in the portfolio area. I have used the same strategy as the portfolio area in the team section, but instead of six, I used three columns. I used the name as a header text, some text as a description, and font-awesome icons as their social media profile links underneath the person's images. For the contact section, I have used a form snippet from Bootstrap and customized it. Lastly, a footer div with copyright text in there.
You may also like:
I have included the source code of this website in the code box provided below. If you want the images as well, then please click the download button and collect the code.
Responsive Website Design From Scratch using Bootstrap [ Source Code ]
For creating this website, you have to make an HTML file, CSS file, and js file. However, you can include the js part in the bottom part of the HTML file. After creating those files, paste the code you downloaded and modify it according to your needs.
ADD HTML
ADD CSS:
That's all. You have successfully created a website of your own. Please share the articles of this blog and follow us on our social media profiles. Thanks for stopping by.
Post a Comment
Please Do not Enter any spam link in the comment box