制作一个个人作品集展示页（build-a-personal-portfolio-webpage）

响应式网页设计5

1. 原画

https://codepen.io/freeCodeCamp/full/zNBOYG

2. 实战

3. 代码1.0

3.1 HTML

<body>
    <link
    rel="stylesheet"
    href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
    integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay"
    crossorigin="anonymous"
  />
    <link
    href="https://fonts.googleapis.com/css?family=Poppins:200i,300,400&display=swap"
    rel="stylesheet"
  />
    <link
    href="https://fonts.googleapis.com/css?family=Raleway:700&display=swap"
    rel="stylesheet"
  />
      <nav id="navbar" class="nav">
        <ul class="nav-list">
          <li><a href="#welcome-section">about</a></li>
              <li>
        <a href="#projects">Work</a>
      </li>
      <li>
        <a href="#contact">Contact</a>
      </li>
        </ul>
      </nav>
    
      <main>
      <section id="welcome-section" class="welcome-section">
        <h1>
          Hey I am Neos15
        </h1>
        <p>
          a web developer
        </p>
      </section>
        
      <section id="projects" class="projects-section">
        <h2 class="projects-section-header">
          These are some of my projects
        </h2>
        <div class="projects-grid">
          <a href="https://codepen.io/Neos15/pen/oNoWrNw" target="_blank" class="project project-tile">
      <img class="project-image" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute.jpg" alt="响应项目1">
      <p class="project-title">
          <span class="code">&lt;</span>
          Tribute Page
          <span class="code">&#47;&gt;</span>
      </p>
  </a>
   
      <a
        href="https://codepen.io/freeCodeCamp/full/qRZeGZ"
        target="_blank"
        class="project project-tile"
      >
        <img
          class="project-image"
          src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
          alt="project"
        />
        <p class="project-title">
          <span class="code">&lt;</span>
          Random Quote Machine
          <span class="code">&#47;&gt;</span>
        </p>
      </a>
      <a
        href="https://codepen.io/freeCodeCamp/full/wgGVVX"
        target="_blank"
        class="project project-tile"
      >
        <img
          class="project-image"
          src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
          alt="project"
        />
        <p class="project-title">
          <span class="code">&lt;</span>
          JavaScript Calculator
          <span class="code">&#47;&gt;</span>
        </p>
      </a>
      <a
        href="https://codepen.io/freeCodeCamp/full/mVEJag"
        target="_blank"
        class="project project-tile"
      >
        <img
          class="project-image"
          src="https://cdn.freecodecamp.org/testable-projects-fcc/images/map.jpg"
          alt="project"
        />
        <p class="project-title">
          <span class="code">&lt;</span>
          Map Data Across the Globe
          <span class="code">&#47;&gt;</span>
        </p>
      </a>
      <a
        href="https://codepen.io/freeCodeCamp/full/wGqEga"
        target="_blank"
        class="project project-tile"
      >
        <img
          class="project-image"
          src="https://cdn.freecodecamp.org/testable-projects-fcc/images/wiki.png"
          alt="project"
        />
        <p class="project-title">
          <span class="code">&lt;</span>
          Wikipedia Viewer
          <span class="code">&#47;&gt;</span>
        </p>
      </a>
      <a
        href="https://codepen.io/freeCodeCamp/full/KzXQgy"
        target="_blank"
        class="project project-tile"
      >
        <img
          class="project-image"
          src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tic-tac-toe.png"
          alt="project"
        />
        <p class="project-title">
          <span class="code">&lt;</span>
          Tic Tac Toe Game
          <span class="code">&#47;&gt;</span>
        </p>
      </a>
    </div>
  <a
      href="https://codepen.io/FreeCodeCamp/"
      class="btn btn-show-all"
      target="_blank"
     >Show all<i class="fas fa-chevron-right"></i></a>
      </section>
        
        <section id="contact" class="contact-section">
          <div class="contact-section-header">
          <h2>
            Let's work together...
          </h2>
          <p>
            How do you take your coffee?</p>
          </div>
          <div class="contact-links">
      <a
        href="https://facebook.com/freecodecamp"
        target="_blank"
        class="btn contact-details"
        ><i class="fab fa-facebook-square"></i> Facebook</a
      >
      <a
        id="profile-link"
        href="https://github.com/freecodecamp"
        target="_blank"
        class="btn contact-details"
        ><i class="fab fa-github"></i> GitHub</a
      >
      <a
        href="https://twitter.com/freecodecamp"
        target="_blank"
        class="btn contact-details"
        ><i class="fab fa-twitter"></i> Twitter</a
      >
      <a href="mailto:example@example.com" class="btn contact-details"
        ><i class="fas fa-at"></i> Send a mail</a
      >
      <a href="tel:555-555-5555" class="btn contact-details"
        ><i class="fas fa-mobile-alt"></i> Call me</a
      >
    </div>
        </section>
        <footer>
          <p>
            **This is just a fake portfolio. All the projects and contact details given are not real.</p>
          <p>
      &copy; Created for
      <a href="https://www.freecodecamp.com/" target="_blank"
        >freeCodeCamp <i class="fab fa-free-code-camp"></i
      ></a>
    </p>
        </footer>
      </main>
    </body>

3.2 css

:root {
  --main-white: #f0f0f0;
  --main-red: #be3144;
  --main-blue: #45567d;
  --main-gray: #303841;
}

* {
  margin:0;
  padding:0;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}
html {
  box-sizing:border-box;
  
  /* 1rem=16px;10px/16px=62.5%;1rem=10px;便于计算
  */
  
  font-size:62.5%;
  scroll-behabior:smooth;
}
@media (max-width: 1200px) {
  html {
    font-size:60%;
  }
}
@media (max-width: 980px) {
  html {
    font-size:58%;
  }
}
@media (max-width: 460px) {
  html {
    font-size:55%;
  }
}
body {
  font-size:1.8rem;
  color:var(--main-white);
  font-weight:400;
  line-height:1.4;
  font-family:'Poppins', sans-serif;
}
ul {
  list-style:none;
}
a {
  color:var(--main-white);
  text-decoration:none;
}
h1,h2 {
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
}
h1 {
  font-size:6rem;
  text-align:center;
}
h2 {
  font-size:4.2rem;
  text-align:center;
}
img {
  display:block;
  width:100%
}
.nav {
  background:var(--main-red);
  display:flex;
  flex-direction:row;
  justify-content:flex-end;
  position:fixed;
  width:100%;
  top:0;
  left:0;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
  z-index:10;
}
.nav-list {
  display:flex;
  margin-right:2rem;
}
.nav-list a {
  display:block;
  font-size:2.2rem;
  padding:2rem;
  text-transform: capitalize;
}
.nav-list a:hover {
  background:var(--main-blue);
}
.welcome-section {
  display:flex;
  flex-direction:column;
  height:100vh;
  width:100%;
  background-color:#000;
  background-image:linear-gradient(65deg,#3a3d40 0%, #181719 100%);
  justify-content:center;
  text-align:center;
}
.welcome-section > p {
  color:var(--main-red);
  font-size:3rem;
  font-style:italic;
  font-weight:200;
}
.projects-section {
  background:var(--main-blue);
  text-align:center;
  padding:10rem 2rem;
}
.projects-section-header {
  margin:0 auto 10rem auto;
  border-bottom:2px solid var(--main-white);
  max-width:640px;
}
.projects-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:4rem;
  width:100%;
  max-width:1280px;
  margin:0 auto;
  margin-bottom:6rem;
}
.project {
    background:var(--main-gray);
    border-shadow:1px 1px 2px rgba(0, 0, 0, 0.5);
    border-radius:1px;
  }
  .code {
    color:var(--main-gray);
    transition:color 0.3s ease-out;
  }
  .project:hover .code {
    color:#ff7f50;
  }
  .project-image {
    height:calc(100% - 6.8rem);
    object-fit:cover;
    width:100%;
  }
  .project-title {
    font-size:2rem;
    padding:2rem 0.5rem;
  }
.btn {
  padding:1rem 2rem;
  border-radius:2px;
  display:inline-block;
}
.btn-show-all {
  background:var(--main-gray);
  font-size:2rem;
  transition:background 0.3s ease-out;
}
.btn-show-all:hover {
  background:var(--main-red);
}
.btn-show-all:hover > i {
  transform:translateX(2px);
}
.btn-show-all > i {
  margin-left:10px;
  transform: translateX(0);
  transition:transform 0.3s ease-out;
}
.contact-section {
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  height:80vh;
  width:100%;
  padding:0 2rem;
  background:var(--main-gray); 
}
.contact-section-header > h2 {
  font-size:6rem;
}
.contact-section-header > p {
  font-style:italic;
}
.contact-links {
  margin-top:4rem;
  display:flex;
  justify-content:center;
  width:100%;
  max-width:980px;
  flex-wrap:wrap;
}
.contact-details {
  font-size:2.4rem;
  text-shadow:2px 2px 1px #1f1f1f;
  transition:transform 0.3s ease-out;
}
.contact-details:hover {
  transform:translateY(8px);
}
footer {
  background:var(--main-gray);
  display:flex;
  justify-content:space-evenly;
  font-weight:300;
  padding:2rem;
  border-top:4px solid var(--main-red);
}
footer > p {
  margin: 2rem;
}
footer i {
  vertical-align: middle;
}

posted @ 2022-03-18 05:48 沧浪浊兮阅读(757) 评论(0) 编辑收藏举报

刷新页面返回顶部

拼命十三郎

唤起一天明月，照我满怀冰雪，浩荡百川流

制作一个个人作品集展示页（build-a-personal-portfolio-webpage）

1. 原画

2. 实战

3. 代码1.0

3.1 HTML

3.2 css