CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
John Bob
John Bob

Reputation: 77

How can I replace the bootstrap to achieve the same purpose?

<!DOCTYPE html>
<html>

<head>



  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">



  <title>
    Home - Hasan's Website
  </title>
  <style>
    body,
    html {
      height: 100%;
      margin: 0;
      font-size: 16px;
      font-family: "Lato", sans-serif;
      font-weight: 400;
      line-height: 1.8em;
    }

    .jumbotron {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-image: url(image.jpg);
      background-position: 0% 25%;
      background-size: cover;
      background-repeat: no-repeat;
      border: 1px;
    }

    .navigation {
      background-color: #330;
      overflow: hidden;
      display: grid;
      grid-template-columns: auto auto auto auto auto;
    }

    .navigation a {
      font-size: 20px;
      text-decoration: none;
      color: #f2f2f2;
      text-align: center;
      float: left;
    }

    .navigation a:hover {
      background-color: #dddddd;
      color: black;
    }

    .navigation a.active {
      background-color: #4CAF50;
      color: white;
    }

    body {
      background-image: url("Engineering.jpg");
      background-repeat: no-repeat;
      background-position: center top;
      background-size: cover;
      background-color: rgba(0, 0, 0, 0.5);
    }

    h1 {
      margin: auto;
      z-index: 4;
      text-align: center;
      width: 100%;
      color: white;
      font-size: 100px;
      padding: 10px;
    }
  </style>
</head>

<body>
  <div class="navigation">
    <a class="active" href="#home">Home</a>
    <a href="#aboutMe">About Me</a>
    <a href="#careers">Careers</a>
    <a href="#contactUs">Contact Us</a>
    <a href="#webDev">Web Development</a>
  </div>

  <div class="intro">
    <div class="jumbotron">
      <h1>Computer Engineering</h1>

    </div>


  </div>





</body>

</html>

I got some help from someone and they used Bootstrap which the teacher did not allow. The bootstrap makes the words not compressed against each other. What can I do to achieve the same purpose without the bootstrap? Like I want to remove the bootstrap, but the title "Computer Engineering," then just compresses. How can remove the bootstrap, but still have the words still properly spaced out? Any help will be greatly appreciated! This is for my Grade 11 Engineering class.

Upvotes: 0

Views: 274

Answers (2)

niyasc
niyasc

Reputation: 4490

I'm not giving a straight forward solution. But, a way to find the solution in your own way.

Run the page with bootstrap styles included. Open the page a modern browser like Google Chrome. Right click on the element in which you are interested & select Inspect element from the context menu. Now, you can see the CSS properties contributing to the look & feel of the element you are inspecting.

Copy those properties to your own project. Done.

Upvotes: 1

Shreyash.K
Shreyash.K

Reputation: 1108

That is happening due to 

body, html{
line-height : 1.8em;
}

Just add line-height : 1em; in h1. It should solve the problem.

Upvotes: 0

Related Questions