html - 如何在网格中制作粘性导航

Question

我第一次使用网格并希望使导航栏具有粘性。我用了：

position: sticky; top: 0; 

但什么也没发生。下一个：

position: fixed; 

但后来一切都被宠坏了

当页面滚动时，我希望导航栏位于相同的位置。我尝试了事件 jquery，但结果是一样的。

  * {
  margin: 0;
  padding: 0;
  font-family: 'Andika New Basic', sans-serif;
  box-sizing: border-box;
}

body {
  background-color: #dedede;
}

.grid-container {
  display: grid;
  grid-template-areas: 'menu header' 'menu portfolio' 'menu about' 'menu contact' 'menu footer';
  width: 80%;
  margin: 0 auto;
  grid-template-columns: 300px 1fr;
  grid-template-rows: 160px auto auto auto 100px;
  grid-gap: 20px;
}


/* Nagłówek i filtr */

.header {
  grid-area: header;
  border-bottom: 5px solid #cecece;
  padding: 10px 0;
}

.header h1 {
  font-size: 40px;
  text-align: left;
  font-weight: bold;
}


/* Filtr */

.header ul {
  font-size: 15px;
  text-align: left;
  margin-top: 30px;
}

.header ul li {
  display: inline-block;
  list-style-type: none;
  padding: 5px 10px;
  user-select: none;
}

.header i {
  margin-right: 5px;
}

.header span {
  margin-right: 10px;
}


/* hover do filtra */

.header ul li:hover:not(:first-child) {
  cursor: pointer;
  color: #000;
  background-color: #cecece;
}

.active {
  color: #fff;
  background-color: #000;
}

.header ul:first-of-type('li') {
  color: red;
}


/* Koniec nagłówka i filtra */


/* Boczne menu z profileheader */

.nav-bar {
  grid-area: menu;
  background-color: #fff;
}


/* zdjęcie profilowe */

#profile-picture {
  height: 100%;
  width: 100px;
  height: 100px;
  margin: 20px 20px 30px 20px;
}

#profile-picture img {
  object-fit: cover;
  border-radius: 4px;
}

.nav-bar h2 {
  font-size: 25px;
  margin-left: 20px;
}


/* Boczne menu */

.nav-bar ul {
  list-style-type: none;
  font-size: 20px;
  margin-top: 15px;
  user-select: none;
}

.nav-bar ul a {
  text-decoration: none;
  color: #000;
  display: block;
  padding: 10px 20px;
}

.nav-bar ul a i {
  margin-right: 10px;
}

.nav-bar ul a:hover {
  background-color: #cecece;
}

#social-media {
  margin: 10px 0 20px 20px;
  font-size: 20px;
}

#social-media a {
  text-decoration: none;
  color: #000;
}

#social-media a:hover {
  opacity: 0.5;
}

.nav-bar
/* koniec nawigacji */

.main {
  grid-area: portfolio;
}

.main {
  display: grid;
  grid-template-areas: 'project project project' 'project project project' 'project-footer project-footer project-footer';
  width: 100%;
  margin: 0 auto;
  grid-gap: 20px;
  grid-template-rows: 400px 400px;
  border-bottom: 3px solid #cecece;
}

.image-container {
  height: 250px;
  background-image: url('file:///C:/Users/Dell/Desktop/Portfolio/img/avatar.jpg');
  background-size: cover;
  margin-bottom: 10px;
}

.project-footer {
  margin: 0 auto;
  grid-area: 'project-footer';
  grid-column: 1 / 4;
  margin-bottom: 30px;
}

.image-button {
  display: inline-block;
  width: 40px;
  text-align: center;
  padding: 10px;
  font-size: 12px;
}

.image-button:hover {
  background-color: #000;
  color: #fff;
  cursor: pointer;
}

.project-footer .active:hover {
  color: #000;
  background-color: #cecece;
}

.about {
  grid-area: about;
}

.about {
  display: grid;
  grid-template-areas: 'about about' 'about about' 'about-me about-me';
  width: 100%;
  margin: 0 auto;
  grid-gap: 20px;
}

.about-image {
  background-image: url('file:///C:/Users/Dell/Desktop/Portfolio/img/avatar.jpg');
  background-size: cover;
  margin-bottom: 10px;
  height: 400px;
}

.about-me {
  grid-area: 'about-me';
  grid-column: 1 / 3;
  margin-bottom: 20px;
  padding: 10px;
}

.skills {
  margin: auto;
  text-align: center;
}

.skills ul {
  list-style-type: none;
  padding: 20px;
}

.skills ul h4 {
  font-size: 20px;
}

.skills ul li {
  margin-bottom: 10px;
}

.about-me p {
  margin-bottom: 50px;
}

.about-me a {
  text-decoration: none;
  color: #000;
  padding: 15px;
  background-color: #cecece;
}

.about-me a:hover {
  background-color: #bebebe;
}

.about-me a i {
  margin-right: 10px;
}

.contact {
  grid-area: contact;
  background-color: #bebebe;
  padding: 15px;
  width: 100%;
  display: grid;
  grid-template-areas: 'contact-header contact-header contact-header' 'contact-button contact-button contact-button' 'contact-hr contact-hr contact-hr' 'contact-main contact-main contact-main';
  width: 100%;
  margin: 0 auto;
  grid-template-columns: 33%;
  grid-gap: 20px 0px;
}

.contact h3 {
  grid-area: contact-header;
  grid-column: 1 / 4;
  margin-bottom: 10px;
}

.contact a {
  background-color: #333;
  color: #fefefe;
  text-decoration: none;
  font-size: 15px;
  text-align: center;
  padding: 15px;
}

.contact:nth-child(5) a:nth-child(3) {
  background-color: rgb(34, 151, 87);
}

.contact a i {
  display: block;
  font-size: 30px;
  margin-bottom: 5px;
}

.contact hr {
  grid-area: contact-hr;
  grid-column: 1/4;
  color: #fefefe;
  background-color: #fefefe;
  height: 1px;
  border: none;
  margin-top: 20px;
}

.contact form {
  grid-area: contact-main;
  grid-column: 1/4;
}

.contact input,
.contact textarea {
  width: 100%;
  margin-bottom: 10px;
  border: none;
  outline: none;
  resize: none;
  padding: 10px;
}

.contact button {
  border: none;
  background-color: #000;
  color: #fff;
  padding: 10px 20px;
  font-size: 14px;
}

.contact button:hover {
  cursor: pointer;
  background-color: #dedede;
  color: #000;
}

.contact button i {
  margin-right: 10px;
}

.footer {
  grid-area: footer;
  text-align: center;
  background-color: #333;
  color: #cecece;
  padding: 20px;
}

.footer a {
  color: #cecece;
}


/* Extra small devices (phones, 600px and down) */

@media only screen and (max-width: 600px) {
  .example {
    background: red;
  }
}


/* Small devices (portrait tablets and large phones, 600px and up) */

@media only screen and (min-width: 600px) {
  .example {
    background: green;
  }
}


/* Medium devices (landscape tablets, 768px and up) */

@media only screen and (min-width: 768px) {
  .example {
    background: blue;
  }
}


/* Large devices (laptops/desktops, 992px and up) */

@media only screen and (min-width: 992px) {
  .grid-container {
    margin: 0;
    width: 99%;
  }
}


/* Extra large devices (large laptops and desktops, 1200px and up) */

@media only screen and (min-width: 1200px) {
  .example {
    background: pink;
  }
}

<div class="grid-container">
  <div class="header">
    <header>
      <h1>My Portfolio</h1>
    </header>
    <ul>
      <span>Filter:</span>
      <li class="active">ALL</li>
      <li><i class="fab fa-sketch"></i> Design</li>
      <li><i class="far fa-image"></i>Graphics</li>
      <li><i class="fas fa-paint-brush"></i>Art</li>
    </ul>
  </div>
  <div class="nav-bar">
    <div id="profile-picture">
      <img src="img/avatar.jpg" alt="Profile Image" width="100%" height="100%">
    </div>
    <h2>Portfolio</h2>
    <nav>
      <ul>
        <li><a href="#"><i class="fas fa-th-large"></i>Portfolio</a></li>
        <li><a href="#"><i class="fas fa-user"></i>About</a></li>
        <li><a href="#"><i class="fas fa-envelope"></i>Contact</a></li>
        <li><a href="#"><i class="fas fa-briefcase"></i>CV</a></li>
      </ul>
    </nav>
    <div id="social-media">
      <a href="#"><i class="fab fa-facebook-square"></i></a>
      <a href="#"><i class="fab fa-instagram"></i></a>
      <a href="#"><i class="fab fa-pinterest-p"></i></a>
    </div>
  </div>
  <div class="main">
    <div class="project">
      <div class="image-container"></div>
      <h3>Lorem Ipsum</h3>
      <p>
        Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.
      </p>
    </div>
    <div class="project">
      <div class="image-container"></div>
      <h3>Lorem Ipsum</h3>
      <p>
        Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.
      </p>
    </div>
    <div class="project">
      <div class="image-container"></div>
      <h3>Lorem Ipsum</h3>
      <p>
        Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.
      </p>
    </div>
    <div class="project">
      <div class="image-container"></div>
      <h3>Lorem Ipsum</h3>
      <p>
        Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.
      </p>
    </div>
    <div class="project">
      <div class="image-container"></div>
      <h3>Lorem Ipsum</h3>
      <p>
        Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.
      </p>
    </div>
    <div class="project">
      <div class="image-container"></div>
      <h3>Lorem Ipsum</h3>
      <p>
        Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.
      </p>
    </div>
    <div class="project-footer">
      <div class="image-button">&#8810</div>
      <div class="image-button active">1</div>
      <div class="image-button">2</div>
      <div class="image-button">3</div>
      <div class="image-button">4</div>
      <div class="image-button">&#8811</div>
    </div>
  </div>
  <div class="about">
    <div class="about-image"></div>
    <div class="skills">
      <ul>
        <li>
          <h3>Web Design Skills</h3>
        </li>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript - beginner</li>
      </ul>
      <ul>
        <li>
          <h3>Skills/Knowledge</h3>
        </li>
        <li>Java - beginner</li>
        <li>Photoshop - beginner</li>
        <li>English - B2/C1</li>
      </ul>
    </div>
    <div class="skills">
      <ul>
        <li>
          <h3>Experience</h3>
        </li>
        <li>ADAPT SYSTEM - internship</li>
        <li>RADIO PARK FM - internship</li>
        <li>Graphic/Web Design studies</li>
      </ul>
      <ul>
        <li>
          <h3>Certificates</h3>
        </li>
        <li>CISCO</li>
        <li>IT Technician</li>
        <li>Udemy Courses</li>
      </ul>
    </div>
    <div class="about-image"></div>
    <div class="about-me">
      <h4>About Me</h4>

      <p>Just me, myself and I, exploring the universe of unknownment. I have a heart of love and an interest of lorem ipsum and mauris neque quam blog. I want to share my world with you. Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum,
        porta lectus vitae, ultricies congue gravida diam non fringilla. Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>

      <a href="#"><i class="fas fa-download"></i>Download Resume</a>
      <a href="#"><i class="fas fa-eye"></i>Watch CV</a>
    </div>
  </div>
  <div class="contact">
    <h3>Contact Me</h3>
    <a href="mailto: [e-mail]">
      <i class="fas fa-envelope"></i> [e-mail]
    </a>
    <a href="#">
      <i class="fas fa-map-marker-alt"></i> Wroc&#322;aw, PL
    </a>
    <a href="tel: [phone]">
      <i class="fas fa-phone-alt"></i> 511 179 660
    </a>
    <hr>
    <form>
      <label for="name">Name</label><br>
      <input type="text" id="name" placeholder="Jakub Bujak"><br>

      <label for="email">Email</label><br>
      <input type="email" id="email" placeholder="[e-mail]"><br>

      <label for="message">Message</label><br>
      <textarea id="message" rows="4" cols="50" placeholder="Some text..."></textarea>

      <button><i class="fab fa-telegram-plane"></i> Send Message</button>
    </form>
  </div>
  <!--<div class="contact">               
                <h3>Contact Me</h3>
                
            </div>-->

  <div class="footer">
    Wszelkie prawa zastrzeżone &copy; 2021 <a href="index.html">Portfolio</a><br> Projekt i wykonanie: <a href="https://www.facebook.com/kuba.bujak.182/" target="_blank">Jakub Bujak</a>
  </div>
</div>

标签： htmlcsscss-grid

Answer 1

好的，我希望这是您想要的：

第一个：我为你的导航栏应该贴在顶部的部分添加了一个包装器。这只是实际的导航栏而不是个人资料图像。为此，我添加了这一行（参见 HTML 中的注释参考：第 18 行）：<div class="nav-sticky">

第二：我通过在导航栏末尾添加这一行来关闭包装器（参见 HTML 注释参考：第 33 行）：</div>

第三：我为包装器添加了一条 CSS 行，使其具有粘性：.nav-sticky { position: sticky; top: 0; }（CSS 行：355 - 360）。

现在导航栏将滚动直到它到达屏幕顶部并保持在那里。如果您希望配置文件图像也贴在顶部，您只需将包装器的开始标签移动到图像标签上方，使其包含在包装器中。

* {
  margin: 0;
  padding: 0;
  font-family: 'Andika New Basic', sans-serif;
  box-sizing: border-box;
}

body {
  background-color: #dedede;
}

.grid-container {
  display: grid;
  grid-template-areas: 'menu header' 'menu portfolio' 'menu about' 'menu contact' 'menu footer';
  width: 80%;
  margin: 0 auto;
  grid-template-columns: 300px 1fr;
  grid-template-rows: 160px auto auto auto 100px;
  grid-gap: 20px;
}


/* Nagłówek i filtr */

.header {
  grid-area: header;
  border-bottom: 5px solid #cecece;
  padding: 10px 0;
}

.header h1 {
  font-size: 40px;
  text-align: left;
  font-weight: bold;
}


/* Filtr */

.header ul {
  font-size: 15px;
  text-align: left;
  margin-top: 30px;
}

.header ul li {
  display: inline-block;
  list-style-type: none;
  padding: 5px 10px;
  user-select: none;
}

.header i {
  margin-right: 5px;
}

.header span {
  margin-right: 10px;
}


/* hover do filtra */

.header ul li:hover:not(:first-child) {
  cursor: pointer;
  color: #000;
  background-color: #cecece;
}

.active {
  color: #fff;
  background-color: #000;
}

.header ul:first-of-type('li') {
  color: red;
}


/* Koniec nagłówka i filtra */


/* Boczne menu z profileheader */

.nav-bar {
  grid-area: menu;
  background-color: #fff;
}


/* zdjęcie profilowe */

#profile-picture {
  height: 100%;
  width: 100px;
  height: 100px;
  margin: 20px 20px 30px 20px;
}

#profile-picture img {
  object-fit: cover;
  border-radius: 4px;
}

.nav-bar h2 {
  font-size: 25px;
  margin-left: 20px;
}


/* Boczne menu */

.nav-bar ul {
  list-style-type: none;
  font-size: 20px;
  margin-top: 15px;
  user-select: none;
}

.nav-bar ul a {
  text-decoration: none;
  color: #000;
  display: block;
  padding: 10px 20px;
}

.nav-bar ul a i {
  margin-right: 10px;
}

.nav-bar ul a:hover {
  background-color: #cecece;
}

#social-media {
  margin: 10px 0 20px 20px;
  font-size: 20px;
}

#social-media a {
  text-decoration: none;
  color: #000;
}

#social-media a:hover {
  opacity: 0.5;
}

.nav-bar
/* koniec nawigacji */

.main {
  grid-area: portfolio;
}

.main {
  display: grid;
  grid-template-areas: 'project project project' 'project project project' 'project-footer project-footer project-footer';
  width: 100%;
  margin: 0 auto;
  grid-gap: 20px;
  grid-template-rows: 400px 400px;
  border-bottom: 3px solid #cecece;
}

.image-container {
  height: 250px;
  background-image: url('file:///C:/Users/Dell/Desktop/Portfolio/img/avatar.jpg');
  background-size: cover;
  margin-bottom: 10px;
}

.project-footer {
  margin: 0 auto;
  grid-area: 'project-footer';
  grid-column: 1 / 4;
  margin-bottom: 30px;
}

.image-button {
  display: inline-block;
  width: 40px;
  text-align: center;
  padding: 10px;
  font-size: 12px;
}

.image-button:hover {
  background-color: #000;
  color: #fff;
  cursor: pointer;
}

.project-footer .active:hover {
  color: #000;
  background-color: #cecece;
}

.about {
  grid-area: about;
}

.about {
  display: grid;
  grid-template-areas: 'about about' 'about about' 'about-me about-me';
  width: 100%;
  margin: 0 auto;
  grid-gap: 20px;
}

.about-image {
  background-image: url('file:///C:/Users/Dell/Desktop/Portfolio/img/avatar.jpg');
  background-size: cover;
  margin-bottom: 10px;
  height: 400px;
}

.about-me {
  grid-area: 'about-me';
  grid-column: 1 / 3;
  margin-bottom: 20px;
  padding: 10px;
}

.skills {
  margin: auto;
  text-align: center;
}

.skills ul {
  list-style-type: none;
  padding: 20px;
}

.skills ul h4 {
  font-size: 20px;
}

.skills ul li {
  margin-bottom: 10px;
}

.about-me p {
  margin-bottom: 50px;
}

.about-me a {
  text-decoration: none;
  color: #000;
  padding: 15px;
  background-color: #cecece;
}

.about-me a:hover {
  background-color: #bebebe;
}

.about-me a i {
  margin-right: 10px;
}

.contact {
  grid-area: contact;
  background-color: #bebebe;
  padding: 15px;
  width: 100%;
  display: grid;
  grid-template-areas: 'contact-header contact-header contact-header' 'contact-button contact-button contact-button' 'contact-hr contact-hr contact-hr' 'contact-main contact-main contact-main';
  width: 100%;
  margin: 0 auto;
  grid-template-columns: 33%;
  grid-gap: 20px 0px;
}

.contact h3 {
  grid-area: contact-header;
  grid-column: 1 / 4;
  margin-bottom: 10px;
}

.contact a {
  background-color: #333;
  color: #fefefe;
  text-decoration: none;
  font-size: 15px;
  text-align: center;
  padding: 15px;
}

.contact:nth-child(5) a:nth-child(3) {
  background-color: rgb(34, 151, 87);
}

.contact a i {
  display: block;
  font-size: 30px;
  margin-bottom: 5px;
}

.contact hr {
  grid-area: contact-hr;
  grid-column: 1/4;
  color: #fefefe;
  background-color: #fefefe;
  height: 1px;
  border: none;
  margin-top: 20px;
}

.contact form {
  grid-area: contact-main;
  grid-column: 1/4;
}

.contact input,
.contact textarea {
  width: 100%;
  margin-bottom: 10px;
  border: none;
  outline: none;
  resize: none;
  padding: 10px;
}

.contact button {
  border: none;
  background-color: #000;
  color: #fff;
  padding: 10px 20px;
  font-size: 14px;
}

.contact button:hover {
  cursor: pointer;
  background-color: #dedede;
  color: #000;
}

.contact button i {
  margin-right: 10px;
}

.footer {
  grid-area: footer;
  text-align: center;
  background-color: #333;
  color: #cecece;
  padding: 20px;
}

.footer a {
  color: #cecece;
}

/* Adding css for the sticky wrapper */

.nav-sticky {
  position: sticky;
  top: 0;
}


/* Extra small devices (phones, 600px and down) */

@media only screen and (max-width: 600px) {
  .example {
    background: red;
  }
}


/* Small devices (portrait tablets and large phones, 600px and up) */

@media only screen and (min-width: 600px) {
  .example {
    background: green;
  }
}


/* Medium devices (landscape tablets, 768px and up) */

@media only screen and (min-width: 768px) {
  .example {
    background: blue;
  }
}


/* Large devices (laptops/desktops, 992px and up) */

@media only screen and (min-width: 992px) {
  .grid-container {
    margin: 0;
    width: 99%;
  }
}


/* Extra large devices (large laptops and desktops, 1200px and up) */

@media only screen and (min-width: 1200px) {
  .example {
    background: pink;
  }
}

<div class="grid-container">
  <div class="header">
    <header>
      <h1>My Portfolio</h1>
    </header>
    <ul>
      <span>Filter:</span>
      <li class="active">ALL</li>
      <li><i class="fab fa-sketch"></i> Design</li>
      <li><i class="far fa-image"></i>Graphics</li>
      <li><i class="fas fa-paint-brush"></i>Art</li>
    </ul>
  </div>
  <div class="nav-bar">
    <div id="profile-picture">
      <img src="img/avatar.jpg" alt="Profile Image" width="100%" height="100%">
    </div>
    <div class="nav-sticky"> <!-- Added: Wrapper open -->
      <h2>Portfolio</h2>
      <nav>
        <ul>
          <li><a href="#"><i class="fas fa-th-large"></i>Portfolio</a></li>
          <li><a href="#"><i class="fas fa-user"></i>About</a></li>
          <li><a href="#"><i class="fas fa-envelope"></i>Contact</a></li>
          <li><a href="#"><i class="fas fa-briefcase"></i>CV</a></li>
        </ul>
      </nav>
      <div id="social-media">
        <a href="#"><i class="fab fa-facebook-square"></i></a>
        <a href="#"><i class="fab fa-instagram"></i></a>
        <a href="#"><i class="fab fa-pinterest-p"></i></a>
      </div>
    </div> <!-- Added: Sticky Wrapper close -->
  </div>
  <div class="main">
    <div class="project">
      <div class="image-container"></div>
      <h3>Lorem Ipsum</h3>
      <p>
        Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.
      </p>
    </div>
    <div class="project">
      <div class="image-container"></div>
      <h3>Lorem Ipsum</h3>
      <p>
        Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.
      </p>
    </div>
    <div class="project">
      <div class="image-container"></div>
      <h3>Lorem Ipsum</h3>
      <p>
        Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.
      </p>
    </div>
    <div class="project">
      <div class="image-container"></div>
      <h3>Lorem Ipsum</h3>
      <p>
        Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.
      </p>
    </div>
    <div class="project">
      <div class="image-container"></div>
      <h3>Lorem Ipsum</h3>
      <p>
        Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.
      </p>
    </div>
    <div class="project">
      <div class="image-container"></div>
      <h3>Lorem Ipsum</h3>
      <p>
        Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.
      </p>
    </div>
    <div class="project-footer">
      <div class="image-button">&#8810</div>
      <div class="image-button active">1</div>
      <div class="image-button">2</div>
      <div class="image-button">3</div>
      <div class="image-button">4</div>
      <div class="image-button">&#8811</div>
    </div>
  </div>
  <div class="about">
    <div class="about-image"></div>
    <div class="skills">
      <ul>
        <li>
          <h3>Web Design Skills</h3>
        </li>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript - beginner</li>
      </ul>
      <ul>
        <li>
          <h3>Skills/Knowledge</h3>
        </li>
        <li>Java - beginner</li>
        <li>Photoshop - beginner</li>
        <li>English - B2/C1</li>
      </ul>
    </div>
    <div class="skills">
      <ul>
        <li>
          <h3>Experience</h3>
        </li>
        <li>ADAPT SYSTEM - internship</li>
        <li>RADIO PARK FM - internship</li>
        <li>Graphic/Web Design studies</li>
      </ul>
      <ul>
        <li>
          <h3>Certificates</h3>
        </li>
        <li>CISCO</li>
        <li>IT Technician</li>
        <li>Udemy Courses</li>
      </ul>
    </div>
    <div class="about-image"></div>
    <div class="about-me">
      <h4>About Me</h4>

      <p>Just me, myself and I, exploring the universe of unknownment. I have a heart of love and an interest of lorem ipsum and mauris neque quam blog. I want to share my world with you. Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum,
        porta lectus vitae, ultricies congue gravida diam non fringilla. Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>

      <a href="#"><i class="fas fa-download"></i>Download Resume</a>
      <a href="#"><i class="fas fa-eye"></i>Watch CV</a>
    </div>
  </div>
  <div class="contact">
    <h3>Contact Me</h3>
    <a href="mailto: [e-mail]">
      <i class="fas fa-envelope"></i> [e-mail]
    </a>
    <a href="#">
      <i class="fas fa-map-marker-alt"></i> Wroc&#322;aw, PL
    </a>
    <a href="tel: [phone]">
      <i class="fas fa-phone-alt"></i> 511 179 660
    </a>
    <hr>
    <form>
      <label for="name">Name</label><br>
      <input type="text" id="name" placeholder="Jakub Bujak"><br>

      <label for="email">Email</label><br>
      <input type="email" id="email" placeholder="[e-mail]"><br>

      <label for="message">Message</label><br>
      <textarea id="message" rows="4" cols="50" placeholder="Some text..."></textarea>

      <button><i class="fab fa-telegram-plane"></i> Send Message</button>
    </form>
  </div>
  <!--<div class="contact">               
                <h3>Contact Me</h3>
                
            </div>-->

  <div class="footer">
    Wszelkie prawa zastrzeżone &copy; 2021 <a href="index.html">Portfolio</a><br> Projekt i wykonanie: <a href="https://www.facebook.com/kuba.bujak.182/" target="_blank">Jakub Bujak</a>
  </div>
</div>