响应式网页设计5

1. 原画

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

2. 实战

https://codepen.io/Neos15/pen/KKyyayG

3. 代码1.0

3.1 HTML

    
    
    
      
    
      

      

        

          Hey I am Neos15
        
        

          a web developer
        
      
        
      

        

          These are some of my projects
        
        

          
      
      

          <
          Tribute Page
          />
      
  
   
      
        
        

          <
          Random Quote Machine
          />
        
      
      
        
        

          <
          JavaScript Calculator
          />
        
      
      
        
        

          <
          Map Data Across the Globe
          />
        
      
      
        
        

          <
          Wikipedia Viewer
          />
        
      
      
        
        

          <
          Tic Tac Toe Game
          />
        
      
    
  Show all
      
        
        

          

          

            Let's work together...
          
          

            How do you take your coffee?
          
          

       Facebook
       GitHub
       Twitter
       Send a mail
       Call me
    
        
        
      
    

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;
}