文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >引导4容器d-flex重叠

问引导4容器d-flex重叠
EN

Stack Overflow用户
提问于 2020-10-12 12:31:45
回答 2查看 503关注 0票数 0

我正在用Bootstrap 4开发我的投资组合，而且我在works部分遇到了问题。在移动大小中测试时，works部分与联系人部分重叠。

理由是什么呢？解决办法是什么？我知道这与Bootstrap的挠性行为有关，但我已经做了研究，但找不到问题。

提前谢谢。

​

代码语言：javascript
复制
/*
     * 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;
  }
}
代码语言：javascript
复制
<!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>

​

bootstrap-4
html
css
web
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-10-12 12:43:44

将<section id="works">的高度从“高度:100 to”更改为“最小高度:100 to”。

原因：

工作段的高度固定在100 the，而在移动视图中，所有的箱子都是垂直方向的，高度超过100 the。因此，它也占据了下一节的空间。

票数 1
EN

Stack Overflow用户

发布于 2020-10-12 12:49:10

通过添加overflow-hidden类可以简单地解决这个问题，但也可以在外部CSS文件中编写！

​

代码语言：javascript
复制
/*
     * 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;
  }
}
代码语言：javascript
复制
<!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>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/64317984

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档