I’ve redone a website for fun with Bootstrap 4 and I was wondering if anyone had any suggestions to make it less redundant?
h1 { font-family: "Timmana", sans-serif; margin-top: 20px; } h2 { font-family: "Timmana", sans-serif; margin-top: 55px; } h3, h4 { font-family: "Timmana", sans-serif; margin-bottom: 10px; margin-top: 10px; } p { font-family: "Source Sans Pro", sans-serif; margin-bottom: 30px; } body { margin-top: 45px; } .container { max-width: 700px; } em { color: white; } .follow { padding-right: 10px; } hr { margin-top: 50px; margin-bottom: 50px; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!doctype html> <html lang="en"> <head> <title>title</title> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> <!-- Google Fonts --> <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro|Timmana" rel="stylesheet"> <!-- My CSS --> <link rel="stylesheet" href="my.css"> </head> <body> <div class="container-fluid"> <center> <img src="m.png" width="80px;"> </center> <h1 class="text-center">a title</h1> <div class="container"> <p class="text-center">Some Text</p> </div> <hr> <h2 class="text-center">Consultations</h2> <p class="text-center"> <em style="color: black">A few of my clients.</em> </p> <p class="text-center"> A client <br> A client <br> A client </p> <br> <h3 class="text-center">I'm Available For Work</h3> <div class="container"> <p class="text-center">Some text </p> </div> <center> <a href="#" class="btn btn-primary btn-lg" role="button" aria-pressed="true">Let's Start</a> </center> <br> <!-- <p class="text-center"><a href="./ovation.html">or Read Some Testimonials</a></p> --> <hr> <h2 class="text-center">Contact</h2> <h3 class="text-center">Email Me</h3> <p class="text-center"> <a href="mailto:my@email" class="btn btn-primary btn-lg" role="button" aria-pressed="true">mailto:my@email</a> </p> <br> <h3 class="text-center">Like My Work? Follow Me</h3> <p class="text-center"> <a href="#">A link</a> </p> <hr> <h2 class="text-center">Q & A</h2> <div class="container"> <h3 class="text-center">A Question</h3> <p class="text-center">An Answer</p> <h3 class="text-center">A Question</h3> <p class="text-center">An Answer</p> </div> <nav class="navbar sticky-bottom navbar-light bg-dark"> <div class="col d-flex justify-content-center"> <small> <em>2018 © me</em> </small> </button> </div> </nav> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <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.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> </body> </html>
