Build a contemporary website with bootstrap | Serie 3 (English Video Tutorial)

rdvn(61)

Published in

#utopian-io

Words

313

Reading

2 min

Listen

Play

rdvn (2).jpg

Details

Tutorial about: Build a contemporary website with bootstrap | Serie 3 (English Video Tutorial)

Video Language : English Language

Githup link: Bootstrap github

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. Bootstrap more information.

What We Can Learn?

In this video tutorial we can learn about how to create a contemporary website with bootstrap codes. In this lesson we are going to look at how to create three column and icon in column .Also , i will give them value and i will design them too . I will add icons and i will carry them top of my columns text. I'm going to do step by step. If you want to learn how to build website with bootstrap you can follow me.

We Learn About

How to edit navbar.
How to create column.
How to create icons with fontawesome .
How to edit icons size .
How to edit bootstrap codes .

Requirements

1- Atom Program
2- Bootstrap code knowledge.
3- Basic CSS code knowledge.
4- Basic HTML code knowledge.

My Operating System

Difficulty

Intermediate level

Description

In this video going to be showing you how to create a contemporary website with bootstrap codes.You are going to see of part how I created it. I will use atom program with this project . Firstly I'll call bootstrap codes from official website then I will start a project. I hope you like it. Let's go to the project!
I explained for this project with Bootstrap in video.

Video Tutorial - English Language - 720p

Background image source

Curriculum

BOOTSTRAP REPOSITORY

Github Repository

Bootstrap Github view.

Project's Codes.

<!doctype html>
<html lang="en">
  <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
            
            <nav class="manuel-nav">
              <div id="logo">Photography</div>
              <ul id="links">

                  <li>Life Photo</li>
                  <li>Animal Photo</li>
                  <li>Nature Photo</li>
                </ul>
              </nav>


              <div id="container">
          <h1>Rdvn Photograpy</h1>
          <button type="button" class="btn btn-danger">See All Photo</button>
          </div>

          <div class="container">
            <div id="IconRow" class="row text-center">
              <div class="col-md-4">
                <i class="fa fa-camera-retro fa-4x" aria-hidden="true"></i>
                <h2>Nature</h2>
              </div>
              <div class="col-md-4">
                <i class="fa fa-anchor fa-4x"></i>
                <h2>Animal</h2>
              </div>
              <div class="col-md-4">
                <i class="fa fa-bug fa-4x"></i>
                <h2>Life</h2>
              </div>
            </div>
          </div>


    
    
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

html, body {

  height: 100%;
  width:  100%;
}

.text-center {
  text-align: center;
}

.btn-danger {

      border-radius: 0;
      font-size: 15px;
}


#container {

  background: url('../images/img1.jpg');
  background-size: cover;
  background-position: center;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-top: -70px;
  position: relative;
  z-index: -50;

}

#container > h1 {

  color: azure;
  margin-top: -30px;
}

#IconRow {
padding: 60px 0;

}

.manuel-nav {

  background: transparent;
  height: 70px;
  width: 100%;
  z-index: 99999999;
}
.manuel-nav #logo {
color: red;
padding: 20px 0 0 25px;
font-size: 24px;
}

.manuel-nav #links,#logo {
display: inline-block;
}

.manuel-nav #links {

list-style: none;
padding: 0;
position: absolute;
top: 0;
right: 0;
padding: 20px 25px 0 0;
}
.manuel-nav #links > li {
display: inline-block;
color: red;
padding-right: 20px;
}