NETLIFY https://65f93ab20358e584a6588f09--teal-crumble-c3b2e2.netlify.app/
Build a Sample Page Using Bootstrap Welcome to the Bootstrap Simple Project! For this project, you'll be creating a web page fully on Bootstrap to show off your work. We will test your HTML knowledge and then it will be up to you to use CSS to style your own page and make it unique.
You’ll build a personal web page using Bootstrap, which should look similar to this one:
What You’ll Use HTML Bootstrap We'll start you off with a few CSS styles that you can build on that should help get things started.
What You’ll Learn You will further your Bootstrap skills, feel more comfortable writing Bootstrap code in a real-world scenario, and have the option of using this project as your real portfolio page.
Live Demo Check out this link to see a working version of this project.(https://aditya0367.github.io/Bootstrap-Simple-Login-Page/) Setup Open this project’s directory in a text editor to complete this project. A text editor like Atom or Vscode Text will do the job. You will make changes to the src/index.html file to satisfy the requirements.
Tasks Complete the following tasks to finish this project.
Create the Navigation Bar At the top of our page, we'll want to create a navbar. Here is a sample navbar to help you get set up. Also feel free to check out Twitter Bootstrap's documentation on navbars. MENU
Name in Navbar Change the contents of the tag that has the navbar-brand CSS class to include your name instead of "Brand". MENU
Menu in Navbar Change the contents of the tags that are within the
vailable in the page (under "Who I am", "What I do", etc) or come up with original content for yourself. MENU
Using Bootstrap's Grid System Let's display some elements side-by-side using the Grid System. To do so, under our carousel, let's create three nested
Creating the Marketing Columns Inside of .row, add three div elements with the col-md-4 CSS class. Each of these elements should have a: - span tag with the glyphicon class, plus another class indicating which icon you'd like to use (ie. "glyphicon-music", or "glyphicon-camera", etc). - h2 tag with a skill in it (ie. "HTML & CSS", or "JavaScript", or "Design", etc). - p tag describing why you enjoy using each skill (ie. "I enjoy making the web come to life with Angular", etc). MENU
Create the Footer Under .marketing, let's create a footer element. Our footer needs to have a div inside it with the container CSS class. You'll see the footer stick to the bottom of the page, which happens because of some styling code we made available. MENU
The Elements Inside our Footer Inside our footer container, let's create two elements: an h3 tag with a title inviting your visitors to get in touch with you, and a p tag describing how your visitors can get in touch. MENU
Cleaning Things Up Let's remove the .header, .tagline, .skills and .contact elements as the same information should all be part of the carousel, marketing and footer elements now.
Next Steps Now that you’re done, we highly encourage you to open the src/main.css file and customize things as much as you’d like!
You should also make your completed project available online so you can share your progress with others! One way of doing this is by using GitHub Pages.
To deploy your /src directory to GitHub Pages, be sure to commit all of your changes and make a new branch called gh-pages. Once you are checked into the gh-pages branch, run the following command:
git subtree push --prefix src origin gh-pages This will push the src folder up to GitHub on the gh-pages branch. After that, you should be able to open up http://username.github.io/BootstrapPortfolioProject, where username is your GitHub username.