Responsive Equilibrium Card -HTML/CSS only

Community feedback

• 

  Kawsar Ahmed Fahad•2,660

  @faha1999Posted about 2 years ago

  Hello, Colten Siemer Congratulations on finishing this project. It's lovely and great on the whole! Just a little tip:

  • add the below code to the body. It will center everything

  body {
      justify-content: center;
      align-items: center;
      display: flex;
      height: 100vh;
      flex-direction: column;
  }
  

  remove all margin & padding from the body

  • remove the below styles from main

  @media (min-width: 500px){
  main {
      /* margin: 100px auto; */
      /* min-width: 200px; */
  }
  }
  
  main{
  padding: 15px;
      /* overflow: scroll; */
  }
  

  • use modern CSS reset https://piccalil.li/blog/a-modern-css-reset/

  • active-state of img

  <div id="image-container">
        <a class="hover-effect" data-overlay="rgba(52,58,64,.6)" target="_blank" rel="noreferrer"><span class="hover-effect-container">
            <span class="hover-effect-icon ">
              <span class="top-icon">
                <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 576 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                  <path d="M572.52 241.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400a144 144 0 1 1 144-144 143.93 143.93 0 0 1-144 144zm0-240a95.31 95.31 0 0 0-25.31 3.79 47.85 47.85 0 0 1-66.9 66.9A95.78 95.78 0 1 0 288 160z">
                  </path>
                </svg>
              </span>
            </span>
          </span>
          <div class="p-2">
            <div class="ethereum-logo">
                  <img src="images/image-equilibrium.jpg" id="main-image" alt="Photo of Box">
           </div>
          </div>
        </a>
      </div>
  

  • hover effect

  #image-container" {
      overflow: hidden;
      position: relative;
  }
  
  
  .hover-effect {
      display: block; 
      overflow: hidden;
      position: relative;
  }
  
  .hover-effect:before {
      background-color: rgba(44,45,48,0);
      content: "";
      position: absolute;
      height: 100%;
      left: 0;
      top: 0;
      width: 100%;
  }
  
  
  .hover-effect-container {
      left: 50%;
      position: absolute;
      top: -1.25rem;
      -webkit-transform: translate(-50%,-50%);
      transform: translate(-50%,-50%);
      transition: .4s;
  }
  
  .hover-effect-icon {
      color: #fff;
      display: inline-block;
      font-size: .75rem;
      text-align: center;
  }
  

  • active-state of h3 & p span

  .section h1;hover, .firstlastname:hover{
      cursor: pointer;
      color: #25e6eb;;
  }
  

  a small transition will be more attractive.

  • Instead of using px, use relative units like rem or em to get better performance when the information on your page needs to be resized for multiple screens and devices. REM and EM apply to all sizes, not just font-size. You can code your entire page in px and then, at the very end, use the VsCode plugin px to rem to perform the automatic conversion px to rem

  I hope it will work. Happy coding.

  0