Creating Home Page in ASP.NET with Bootstrap Styling
In this 4th tutorial on dynamic web application development, we will learn how to create a static home page in ASP.NET. We will create the static home page in asp.net & also do its styling using bootstrap framework.
Watch the video tutorial at the end of this video to understand more about how to create master page & apply custom styling. Use the code given below.
Download all Images for this project – CLICK HERE
Home Page Code –
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 | <%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="homepage.aspx.cs" Inherits="WebApplication3.homepage" %> <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"> <section> <img src="imgs/home-bg.jpg" class="img-fluid"/> </section> <section> <div class="container"> <div class="row"> <div class="col-12"> <center> <h2>Our Features</h2> <p><b>Our 3 Primary Features -</b></p> </center> </div> </div> <div class="row"> <div class="col-md-4"> <center> <img width="150px" src="imgs/digital-inventory.png"/> <h4>Digital Book Inventory</h4> <p class="text-justify">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor. reprehenderit</p> </center> </div> <div class="col-md-4"> <center> <img width="150px" src="imgs/search-online.png"/> <h4>Search Books</h4> <p class="text-justify">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor. reprehenderit</p> </center> </div> <div class="col-md-4"> <center> <img width="150px" src="imgs/defaulters-list.png"/> <h4>Defaulter List</h4> <p class="text-justify">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor. reprehenderit</p> </center> </div> </div> </div> </section> <section> <img src="imgs/in-homepage-banner.jpg" class="img-fluid"/> </section> <section> <div class="container"> <div class="row"> <div class="col-12"> <center> <h2>Our Process</h2> <p><b>We have a Simple 3 Step Process</b></p> </center> </div> </div> <div class="row"> <div class="col-md-4"> <center> <img width="150px" src="imgs/sign-up.png" /> <h4>Sign Up</h4> <p class="text-justify">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor. reprehenderit</p> </center> </div> <div class="col-md-4"> <center> <img width="150px" src="imgs/search-online.png"/> <h4>Search Books</h4> <p class="text-justify">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor. reprehenderit</p> </center> </div> <div class="col-md-4"> <center> <img width="150px" src="imgs/library.png"/> <h4>Visit Us</h4> <p class="text-justify">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor. reprehenderit</p> </center> </div> </div> </div> </section> </asp:Content> |
CSS Style (customstylesheet.css)-
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | .footerlinks { color: #ffffff; text-decoration: none !important; } .footerlinks:hover { color: #ffd800; } #footer1 { background: #762b00; } #footer2 { background: #531f00; } |