Twitter Bootstrap Question posted in

Bootstrap 4 container d-flex overlaps-Twitter bootstrap

I’m developing my portfolio with Bootstrap 4 and I’m having problems with the works section. When testing in mobile size, the works section overlaps the contact section.

What’s the reason? What’s the solution? I know it has something to do with Bootstrap’s flex behavior, but I’ve done my research and can’t quite find the problem.

Thanks in advance.

/*
     * Pablo Herrero's portfolio | Made with love by Pablo Herrero | pabloherrero.me
     * Copyright 2020 Pablo Herrero | MIT License
     */


/* Fonts */

@font-face {
  font-family: 'fira_coderegular';
  src: url('fonts/firacode-regular-webfont.woff2') format('woff2'), url('fonts/firacode-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'fira_codebold';
  src: url('fonts/firacode-bold-webfont.woff2') format('woff2'), url('fonts/firacode-bold-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'fira_codemedium';
  src: url('fonts/firacode-medium-webfont.woff2') format('woff2'), url('fonts/firacode-medium-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}


/* General */

body {
  position: relative;
  font-family: 'fira_coderegular';
  letter-spacing: normal;
  overflow-y: scroll;
  background-color: #ffffff;
}

body::-webkit-scrollbar {
  display: none;
}


/* Navbar */

#navbar {
  min-height: 56px;
  background-color: transparent;
  border-bottom: none;
}

#navbar .navbar-toggler {
  color: #000000;
}

#navbar .navbar-toggler:focus {
  outline: none;
}

#h {
  font-size: 28px;
  font-family: 'fira_codebold';
  text-align: center;
  color: #000000;
  outline: none;
}

#navbar .nav-link {
  font-size: 14px;
  font-family: 'fira_codemedium';
  padding: 1rem 1.5rem;
  text-align: center;
  color: #ffffff;
  background-color: #000000;
  outline: none;
}

#navbar .nav-link:hover {
  color: #bd93f9;
  outline: none;
}

#navbar .nav-link.active {
  color: #50fa7b;
  outline: none;
}

#navbar #h:hover {
  color: #bd93f9;
  outline: none;
}

#navbar #h:active {
  color: #50fa7b;
  outline: none;
}

@media (min-width: 992px) {
  #h {
    font-size: 32px;
  }
  #navbar .nav-link {
    font-size: 16px;
    padding: 0.5rem 0rem 0.5rem 3rem;
    color: #000000;
    background-color: transparent;
  }
}


/* Header */

#header {
  width: 100%;
  height: 100vh;
}

#header .container {
  min-height: 100%;
  min-height: 100vh;
  align-items: center;
}

#header .col-sm-12 {
  text-align: center;
}

#header #headerPhoto {
  text-align: center;
  max-width: 100%;
}

#header h1 {
  margin: 50px 0px 0px 0px;
  width: 100%;
  text-align: center;
  text-transform: uppercase;
  font-family: 'fira_codebold';
  font-size: 64px;
  line-height: 3.3rem;
  letter-spacing: 0.05rem;
}

#header h2 {
  margin: 15px 0px 0px 0px;
  width: 100%;
  text-align: center;
  text-transform: uppercase;
  font-family: 'fira_codemedium';
  font-size: 32px;
  letter-spacing: 0.05rem;
}

@media (min-width: 992px) {
  #header #headerPhoto {
    max-width: 35%;
  }
  #header h1 {
    margin: 25px 0px 0px 0px;
    font-size: 72px;
    line-height: 3.3rem;
    letter-spacing: 0.05rem;
  }
  #header h2 {
    margin: 15px 0px 0px 0px;
    font-size: 36px;
    letter-spacing: 0.05rem;
  }
}


/* About */

#about {
  width: 100%;
  height: 100vh;
}

#about .container {
  min-height: 100%;
  min-height: 100vh;
  align-items: center;
}

#about .row {
  background-color: #000000;
  padding: 5vh 0vh 5vh 0vh;
  margin: 1vh 0vh 1vh 0vh;
}

#about h2 {
  width: 100%;
  text-align: left;
  margin-bottom: 30px;
  font-family: 'fira_codemedium';
  font-size: 32px;
  color: #ffffff;
  letter-spacing: 0.05rem;
}

#about p {
  width: 100%;
  text-align: left;
  font-family: 'fira_coderegular';
  font-size: 16px;
  color: #ffffff;
}

@media (min-width: 992px) {
  #about .row {
    background-color: #000000;
    padding: 15vh 10vh 15vh 10vh;
    margin: 1vh 0vh 1vh 0vh;
  }
  #about h2 {
    text-align: left;
    margin-bottom: 30px;
    font-size: 36px;
  }
  #about p {
    text-align: left;
    font-size: 18px;
  }
}


/* Works */

#works {
  width: 100%;
  height: 100vh;
}

#works .container {
  min-height: 100%;
  min-height: 100vh;
  align-items: center;
}

#works .col-sm-4 {
  height: 35vh;
  background-color: #000000;
  border: 3vh solid white;
}

#works h2 {
  width: 100%;
  text-align: center;
  margin-bottom: 30px;
  font-family: 'fira_codemedium';
  font-size: 32px;
  color: #000000;
  letter-spacing: 0.05rem;
}

#works h3 {
  width: 100%;
  padding-top: 10px;
  text-align: left;
  font-family: 'fira_codemedium';
  font-size: 26px;
  color: #ffffff;
  letter-spacing: 0.05rem;
}

#works p {
  text-align: left;
  font-family: 'fira_coderegular';
  font-size: 16px;
  color: #ffffff;
}

#works .col-sm-4 i {
  font-size: 16px;
  color: #ffffff;
}

#works hr {
  border-color: #ffffff;
}

#works a,
#works a i {
  color: #000000;
  text-decoration: unset;
}

#works h3:hover {
  color: #bd93f9;
}

#works h3:active {
  color: #50fa7b;
  outline: none;
}

#works a:hover {
  color: #bd93f9;
}

#works a:active {
  color: #50fa7b;
  outline: none;
}

@media (min-width: 992px) {
  #works h2 {
    text-align: center;
    margin-bottom: 30px;
    font-size: 36px;
  }
  #works h3 {
    text-align: left;
    font-size: 30px;
  }
  #works p {
    text-align: left;
    font-size: 18px;
  }
  #works i {
    font-size: 18px;
  }
}


/* Contact */

#contact {
  width: 100%;
  height: 100vh;
}

#contact .container {
  min-height: 100%;
  min-height: 100vh;
}

#contact h2 {
  width: 100%;
  text-align: center;
  margin-bottom: 30px;
  font-family: 'fira_codemedium';
  font-size: 32px;
  color: #000000;
  letter-spacing: 0.05rem;
}

#contactForm input,
#contactForm textarea,
#contactForm button {
  background-color: #000000;
  border-radius: 0%;
}

#contactForm input::placeholder,
#contactForm textarea::placeholder,
#contactForm button {
  color: white;
  font-size: 16px;
}

#contactForm button:hover {
  color: #bd93f9;
}

#contactForm button:active {
  color: #50fa7b;
  outline: none;
}

@media (min-width: 992px) {
  #contact h2 {
    font-size: 36px;
  }
  #contactForm input::placeholder,
  #contactForm textarea::placeholder,
  #contactForm button {
    color: white;
    font-size: 18px;
  }
}


/* Footer */

#footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  padding-bottom: 5px;
  background-color: transparent;
  color: #000000;
  text-align: center;
}

#footer #social a {
  font-size: 14px;
  color: #000000;
}

#footer #social i:hover {
  color: #bd93f9;
}

#footer #social i:active {
  color: #50fa7b;
  outline: none;
}

#footer small {
  font-size: 14px;
}

@media (min-width: 992px) {
  #footer #copy {
    float: left;
  }
  #footer #social a {
    font-size: 21px;
    float: right;
    padding: 0.5rem 0rem 0.5rem 2.5rem;
  }
  #footer small {
    font-size: 16px;
  }
}
<!DOCTYPE html>
<html lang="en">
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="I'm a developer. Here I show my evolution, my work and my passion.">
  <meta name="author" content="Pablo Herrero">

  <title>Pablo Herrero | Developer | pabloherrero.me</title>

  <!-- Bootstrap style sheet -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">

  <!-- Custom styles -->
  <link rel="stylesheet" href="css/style.css">

  <!-- Touch icons -->

</head>

<body id="top">

  <!-- Navbar -->
  <nav id="navbar" class="navbar navbar-expand-lg navbar-light fixed-top">
    <a class="navbar-brand" href="#top">
      <div id="h" class="align-self-center">H</div>
    </a>
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                    <i class="fas fa-bars"></i>
                </button>
    <div id="navbarResponsive" class="collapse navbar-collapse">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="#about">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#works">Works</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#contact">Contact</a>
        </li>
      </ul>
    </div>
  </nav>

  <!-- Header -->
  <header id="header">
    <div class="container d-flex flex-column justify-content-center align-items-center">
      <div class="row align-items-center">
        <div class="col-sm-12">
          <img src="img/pabloHerrero.jpg" alt="Pablo Herrero" id="headerPhoto">
        </div>
        <div class="col-sm-12">
          <h1>Pablo Herrero</h1>
        </div>
        <div class="col-sm-12">
          <h2>lore ipsum</h2>
        </div>
      </div>
    </div>
  </header>

  <!-- About -->
  <section id="about">
    <div class="container d-flex flex-column justify-content-center align-items-center">
      <div class="row">
        <div class="col-sm-12 align-self-center">
          <h2>Hi! I'm a developer.</h2>
        </div>
        <div class="col-sm-12 align-self-center">
          <p>I learned to code in 2019 when I started my studies on development. I'm confortable using Java, SQL, HTML5, CSS3, Bootstrap 4 and GIT, although I'm always digging deep and learning new things. I'm currently working on JDBC, Swing, Android Studio,
            JavaScript and Python, and will start soon with TypeScript, Node.js and Angular. Here you can take a look at my projects and drop me a line with the contact form if you wish.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Works -->
  <section id="works">
    <div class="container d-flex flex-column justify-content-center">
      <div>
        <h2>Works</h2>
      </div>
      <div class="row">
        <div class="col-sm-4 align-self-center">
          <a href="http://" target="_blank">
            <h3>Addicted Dev Bot</h3>
            <hr>
            <div>
              <i class="fab fa-js"></i>
              <i class="fab fa-node"></i>
            </div>
            <p>Node.js Twitter bot.</p>
          </a>
        </div>
        <div class="col-sm-4 align-self-center">
          <a href="http://" target="_blank">
            <h3>Addicted Dev Bot</h3>
            <hr>
            <div>
              <i class="fab fa-js"></i>
              <i class="fab fa-node"></i>
            </div>
            <p>Node.js Twitter bot.</p>
          </a>
        </div>
        <div class="col-sm-4 align-self-center">
          <a href="http://" target="_blank">
            <h3>Addicted Dev Bot</h3>
            <hr>
            <div>
              <i class="fab fa-js"></i>
              <i class="fab fa-node"></i>
            </div>
            <p>Node.js Twitter bot.</p>
          </a>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-4 align-self-center">
          <a href="http://" target="_blank">
            <h3>Addicted Dev Bot</h3>
            <hr>
            <div>
              <i class="fab fa-js"></i>
              <i class="fab fa-node"></i>
            </div>
            <p>Node.js Twitter bot.</p>
          </a>
        </div>
        <div class="col-sm-4 align-self-center">
          <a href="http://" target="_blank">
            <h3>Addicted Dev Bot</h3>
            <hr>
            <div>
              <i class="fab fa-js"></i>
              <i class="fab fa-node"></i>
            </div>
            <p>Node.js Twitter bot.</p>
          </a>
        </div>
        <div class="col-sm-4 align-self-center">
          <a href="http://" target="_blank">
            <h3>Addicted Dev Bot</h3>
            <hr>
            <div>
              <i class="fab fa-js"></i>
              <i class="fab fa-node"></i>
            </div>
            <p>Node.js Twitter bot.</p>
          </a>
        </div>
      </div>
      <div>
        <a href="http://" target="_blank">More on my GitHub <i class="fab fa-github"></i></a>
      </div>
    </div>
  </section>

  <!-- Contact -->
  <section id="contact">
    <div class="container d-flex flex-column justify-content-center">
      <div>
        <h2>Contact</h2>
      </div>
      <form id="contactForm" action="https://getsimpleform.com/messages?form_api_token=82ef8c01a157ab94e750cd5fa275f2ce" method="post" class="form" role="form" autocomplete="off">
        <div class="form-group">
          <input type="text" class="form-control" id="formName" aria-describedby="name" placeholder="Name" required="">
        </div>
        <div class="form-group">
          <input type="email" class="form-control" id="formMail" aria-describedby="email" placeholder="Email" required="">
        </div>
        <div class="form-group">
          <textarea class="form-control" id="formText" rows="10" placeholder="Your message" required=""></textarea>
        </div>
        <button type="submit" class="btn float-left">Submit</button>
      </form>
    </div>
  </section>

  <!-- Footer -->
  <footer id="footer">
    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-12 col-md-6 col-lg-6 align-self-center">
          <small id="copy">&copy; 2020 Pablo Herrero</small>
        </div>
        <div class="col-sm-12 col-md-6 col-lg-6 align-self-center">
          <div id="social">
            <a href="https://twitter.com/pablohs1986" target="_blank"><i class="fab fa-twitter"></i></a>
            <a href="https://dev.to/pablohs1986" target="_blank"><i class="fab fa-dev"></i></a>
            <a href="https://es.stackoverflow.com/users/149406/pablohs1986?tab=profile" target="_blank"><i class="fab fa-stack-overflow"></i></a>
            <a href="https://github.com/pablohs1986" target="_blank"><i class="fab fa-github"></i></a>
            <a href="https://www.linkedin.com/in/pabloherrero1986/" target="_blank"><i class="fab fa-linkedin"></i></a>
          </div>
        </div>
      </div>
    </div>
  </footer>

  <!-- Font Awesome -->
  <script src="https://kit.fontawesome.com/121886ca53.js" crossorigin="anonymous"></script>

  <!-- jQuery -->
  <script src="node_modules/jquery/dist/jquery.min.js"></script>

  <!-- Popper.js -->
  <script src="node_modules/@popperjs/core/dist/umd/popper.min.js"></script>

  <!-- Bootstrap js -->
  <script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

  <!-- Own script -->
  <script src="js/app.js"></script>
</body>

</html>
Tags:

2

Answers


  1. 0

    Change the height of <section id="works"> from "height:100vh" to "min-height:100vh"

    Reason:

    Work section’s height was fixed to 100vh while in mobile view all the boxes come in vertical direction and the height exceeds the 100vh. As a result it is occupying the space of next section also.

    Login or Signup to reply.
  2. 0

    By adding the overflow-hidden class simply solve this problem, but you can also write in an external CSS file!

    /*
     * Pablo Herrero's portfolio | Made with love by Pablo Herrero | pabloherrero.me
     * Copyright 2020 Pablo Herrero | MIT License
     */


/* Fonts */

@font-face {
  font-family: 'fira_coderegular';
  src: url('fonts/firacode-regular-webfont.woff2') format('woff2'), url('fonts/firacode-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'fira_codebold';
  src: url('fonts/firacode-bold-webfont.woff2') format('woff2'), url('fonts/firacode-bold-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'fira_codemedium';
  src: url('fonts/firacode-medium-webfont.woff2') format('woff2'), url('fonts/firacode-medium-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}


/* General */

body {
  position: relative;
  font-family: 'fira_coderegular';
  letter-spacing: normal;
  overflow-y: scroll;
  background-color: #ffffff;
}

body::-webkit-scrollbar {
  display: none;
}


/* Navbar */

#navbar {
  min-height: 56px;
  background-color: transparent;
  border-bottom: none;
}

#navbar .navbar-toggler {
  color: #000000;
}

#navbar .navbar-toggler:focus {
  outline: none;
}

#h {
  font-size: 28px;
  font-family: 'fira_codebold';
  text-align: center;
  color: #000000;
  outline: none;
}

#navbar .nav-link {
  font-size: 14px;
  font-family: 'fira_codemedium';
  padding: 1rem 1.5rem;
  text-align: center;
  color: #ffffff;
  background-color: #000000;
  outline: none;
}

#navbar .nav-link:hover {
  color: #bd93f9;
  outline: none;
}

#navbar .nav-link.active {
  color: #50fa7b;
  outline: none;
}

#navbar #h:hover {
  color: #bd93f9;
  outline: none;
}

#navbar #h:active {
  color: #50fa7b;
  outline: none;
}

@media (min-width: 992px) {
  #h {
    font-size: 32px;
  }
  #navbar .nav-link {
    font-size: 16px;
    padding: 0.5rem 0rem 0.5rem 3rem;
    color: #000000;
    background-color: transparent;
  }
}


/* Header */

#header {
  width: 100%;
  height: 100vh;
}

#header .container {
  min-height: 100%;
  min-height: 100vh;
  align-items: center;
}

#header .col-sm-12 {
  text-align: center;
}

#header #headerPhoto {
  text-align: center;
  max-width: 100%;
}

#header h1 {
  margin: 50px 0px 0px 0px;
  width: 100%;
  text-align: center;
  text-transform: uppercase;
  font-family: 'fira_codebold';
  font-size: 64px;
  line-height: 3.3rem;
  letter-spacing: 0.05rem;
}

#header h2 {
  margin: 15px 0px 0px 0px;
  width: 100%;
  text-align: center;
  text-transform: uppercase;
  font-family: 'fira_codemedium';
  font-size: 32px;
  letter-spacing: 0.05rem;
}

@media (min-width: 992px) {
  #header #headerPhoto {
    max-width: 35%;
  }
  #header h1 {
    margin: 25px 0px 0px 0px;
    font-size: 72px;
    line-height: 3.3rem;
    letter-spacing: 0.05rem;
  }
  #header h2 {
    margin: 15px 0px 0px 0px;
    font-size: 36px;
    letter-spacing: 0.05rem;
  }
}


/* About */

#about {
  width: 100%;
  height: 100vh;
}

#about .container {
  min-height: 100%;
  min-height: 100vh;
  align-items: center;
}

#about .row {
  background-color: #000000;
  padding: 5vh 0vh 5vh 0vh;
  margin: 1vh 0vh 1vh 0vh;
}

#about h2 {
  width: 100%;
  text-align: left;
  margin-bottom: 30px;
  font-family: 'fira_codemedium';
  font-size: 32px;
  color: #ffffff;
  letter-spacing: 0.05rem;
}

#about p {
  width: 100%;
  text-align: left;
  font-family: 'fira_coderegular';
  font-size: 16px;
  color: #ffffff;
}

@media (min-width: 992px) {
  #about .row {
    background-color: #000000;
    padding: 15vh 10vh 15vh 10vh;
    margin: 1vh 0vh 1vh 0vh;
  }
  #about h2 {
    text-align: left;
    margin-bottom: 30px;
    font-size: 36px;
  }
  #about p {
    text-align: left;
    font-size: 18px;
  }
}


/* Works */

#works {
  width: 100%;
  height: 100vh;
}

#works .container {
  min-height: 100%;
  min-height: 100vh;
  align-items: center;
}

#works .col-sm-4 {
  height: 35vh;
  background-color: #000000;
  border: 3vh solid white;
}

#works h2 {
  width: 100%;
  text-align: center;
  margin-bottom: 30px;
  font-family: 'fira_codemedium';
  font-size: 32px;
  color: #000000;
  letter-spacing: 0.05rem;
}

#works h3 {
  width: 100%;
  padding-top: 10px;
  text-align: left;
  font-family: 'fira_codemedium';
  font-size: 26px;
  color: #ffffff;
  letter-spacing: 0.05rem;
}

#works p {
  text-align: left;
  font-family: 'fira_coderegular';
  font-size: 16px;
  color: #ffffff;
}

#works .col-sm-4 i {
  font-size: 16px;
  color: #ffffff;
}

#works hr {
  border-color: #ffffff;
}

#works a,
#works a i {
  color: #000000;
  text-decoration: unset;
}

#works h3:hover {
  color: #bd93f9;
}

#works h3:active {
  color: #50fa7b;
  outline: none;
}

#works a:hover {
  color: #bd93f9;
}

#works a:active {
  color: #50fa7b;
  outline: none;
}

@media (min-width: 992px) {
  #works h2 {
    text-align: center;
    margin-bottom: 30px;
    font-size: 36px;
  }
  #works h3 {
    text-align: left;
    font-size: 30px;
  }
  #works p {
    text-align: left;
    font-size: 18px;
  }
  #works i {
    font-size: 18px;
  }
}


/* Contact */

#contact {
  width: 100%;
  height: 100vh;
}

#contact .container {
  min-height: 100%;
  min-height: 100vh;
}

#contact h2 {
  width: 100%;
  text-align: center;
  margin-bottom: 30px;
  font-family: 'fira_codemedium';
  font-size: 32px;
  color: #000000;
  letter-spacing: 0.05rem;
}

#contactForm input,
#contactForm textarea,
#contactForm button {
  background-color: #000000;
  border-radius: 0%;
}

#contactForm input::placeholder,
#contactForm textarea::placeholder,
#contactForm button {
  color: white;
  font-size: 16px;
}

#contactForm button:hover {
  color: #bd93f9;
}

#contactForm button:active {
  color: #50fa7b;
  outline: none;
}

@media (min-width: 992px) {
  #contact h2 {
    font-size: 36px;
  }
  #contactForm input::placeholder,
  #contactForm textarea::placeholder,
  #contactForm button {
    color: white;
    font-size: 18px;
  }
}


/* Footer */

#footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  padding-bottom: 5px;
  background-color: transparent;
  color: #000000;
  text-align: center;
}

#footer #social a {
  font-size: 14px;
  color: #000000;
}

#footer #social i:hover {
  color: #bd93f9;
}

#footer #social i:active {
  color: #50fa7b;
  outline: none;
}

#footer small {
  font-size: 14px;
}

@media (min-width: 992px) {
  #footer #copy {
    float: left;
  }
  #footer #social a {
    font-size: 21px;
    float: right;
    padding: 0.5rem 0rem 0.5rem 2.5rem;
  }
  #footer small {
    font-size: 16px;
  }
}
    <!DOCTYPE html>
<html lang="en">
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="I'm a developer. Here I show my evolution, my work and my passion.">
  <meta name="author" content="Pablo Herrero">

  <title>Pablo Herrero | Developer | pabloherrero.me</title>

  <!-- Bootstrap style sheet -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">

  <!-- Custom styles -->
  <link rel="stylesheet" href="css/style.css">

  <!-- Touch icons -->

</head>

<body id="top">

  <!-- Navbar -->
  <nav id="navbar" class="navbar navbar-expand-lg navbar-light fixed-top">
    <a class="navbar-brand" href="#top">
      <div id="h" class="align-self-center">H</div>
    </a>
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                    <i class="fas fa-bars"></i>
                </button>
    <div id="navbarResponsive" class="collapse navbar-collapse">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="#about">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#works">Works</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#contact">Contact</a>
        </li>
      </ul>
    </div>
  </nav>

  <!-- Header -->
  <header id="header">
    <div class="container d-flex flex-column justify-content-center align-items-center">
      <div class="row align-items-center">
        <div class="col-sm-12">
          <img src="img/pabloHerrero.jpg" alt="Pablo Herrero" id="headerPhoto">
        </div>
        <div class="col-sm-12">
          <h1>Pablo Herrero</h1>
        </div>
        <div class="col-sm-12">
          <h2>lore ipsum</h2>
        </div>
      </div>
    </div>
  </header>

  <!-- About -->
  <section id="about">
    <div class="container d-flex flex-column justify-content-center align-items-center">
      <div class="row">
        <div class="col-sm-12 align-self-center">
          <h2>Hi! I'm a developer.</h2>
        </div>
        <div class="col-sm-12 align-self-center">
          <p>I learned to code in 2019 when I started my studies on development. I'm confortable using Java, SQL, HTML5, CSS3, Bootstrap 4 and GIT, although I'm always digging deep and learning new things. I'm currently working on JDBC, Swing, Android Studio,
            JavaScript and Python, and will start soon with TypeScript, Node.js and Angular. Here you can take a look at my projects and drop me a line with the contact form if you wish.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Works -->
  <section id="works" class="overflow-hidden">
    <div class="container d-flex flex-column justify-content-center">
      <div>
        <h2>Works</h2>
      </div>
      <div class="row">
        <div class="col-sm-4 align-self-center">
          <a href="http://" target="_blank">
            <h3>Addicted Dev Bot</h3>
            <hr>
            <div>
              <i class="fab fa-js"></i>
              <i class="fab fa-node"></i>
            </div>
            <p>Node.js Twitter bot.</p>
          </a>
        </div>
        <div class="col-sm-4 align-self-center">
          <a href="http://" target="_blank">
            <h3>Addicted Dev Bot</h3>
            <hr>
            <div>
              <i class="fab fa-js"></i>
              <i class="fab fa-node"></i>
            </div>
            <p>Node.js Twitter bot.</p>
          </a>
        </div>
        <div class="col-sm-4 align-self-center">
          <a href="http://" target="_blank">
            <h3>Addicted Dev Bot</h3>
            <hr>
            <div>
              <i class="fab fa-js"></i>
              <i class="fab fa-node"></i>
            </div>
            <p>Node.js Twitter bot.</p>
          </a>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-4 align-self-center">
          <a href="http://" target="_blank">
            <h3>Addicted Dev Bot</h3>
            <hr>
            <div>
              <i class="fab fa-js"></i>
              <i class="fab fa-node"></i>
            </div>
            <p>Node.js Twitter bot.</p>
          </a>
        </div>
        <div class="col-sm-4 align-self-center">
          <a href="http://" target="_blank">
            <h3>Addicted Dev Bot</h3>
            <hr>
            <div>
              <i class="fab fa-js"></i>
              <i class="fab fa-node"></i>
            </div>
            <p>Node.js Twitter bot.</p>
          </a>
        </div>
        <div class="col-sm-4 align-self-center">
          <a href="http://" target="_blank">
            <h3>Addicted Dev Bot</h3>
            <hr>
            <div>
              <i class="fab fa-js"></i>
              <i class="fab fa-node"></i>
            </div>
            <p>Node.js Twitter bot.</p>
          </a>
        </div>
      </div>
      <div>
        <a href="http://" target="_blank">More on my GitHub <i class="fab fa-github"></i></a>
      </div>
    </div>
  </section>

  <!-- Contact -->
  <section id="contact" class="overflow-hidden">
    <div class="container d-flex flex-column justify-content-center">
      <div>
        <h2>Contact</h2>
      </div>
      <form id="contactForm" action="https://getsimpleform.com/messages?form_api_token=82ef8c01a157ab94e750cd5fa275f2ce" method="post" class="form" role="form" autocomplete="off">
        <div class="form-group">
          <input type="text" class="form-control" id="formName" aria-describedby="name" placeholder="Name" required="">
        </div>
        <div class="form-group">
          <input type="email" class="form-control" id="formMail" aria-describedby="email" placeholder="Email" required="">
        </div>
        <div class="form-group">
          <textarea class="form-control" id="formText" rows="10" placeholder="Your message" required=""></textarea>
        </div>
        <button type="submit" class="btn float-left">Submit</button>
      </form>
    </div>
  </section>

  <!-- Footer -->
  <footer id="footer">
    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-12 col-md-6 col-lg-6 align-self-center">
          <small id="copy">&copy; 2020 Pablo Herrero</small>
        </div>
        <div class="col-sm-12 col-md-6 col-lg-6 align-self-center">
          <div id="social">
            <a href="https://twitter.com/pablohs1986" target="_blank"><i class="fab fa-twitter"></i></a>
            <a href="https://dev.to/pablohs1986" target="_blank"><i class="fab fa-dev"></i></a>
            <a href="https://es.stackoverflow.com/users/149406/pablohs1986?tab=profile" target="_blank"><i class="fab fa-stack-overflow"></i></a>
            <a href="https://github.com/pablohs1986" target="_blank"><i class="fab fa-github"></i></a>
            <a href="https://www.linkedin.com/in/pabloherrero1986/" target="_blank"><i class="fab fa-linkedin"></i></a>
          </div>
        </div>
      </div>
    </div>
  </footer>

  <!-- Font Awesome -->
  <script src="https://kit.fontawesome.com/121886ca53.js" crossorigin="anonymous"></script>

  <!-- jQuery -->
  <script src="node_modules/jquery/dist/jquery.min.js"></script>

  <!-- Popper.js -->
  <script src="node_modules/@popperjs/core/dist/umd/popper.min.js"></script>

  <!-- Bootstrap js -->
  <script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

  <!-- Own script -->
  <script src="js/app.js"></script>
</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search