Responsive NFT landing page using Html and Css

Auction Css

Second, Create a Css file with the name of style.css and paste the code given below, in your Css file. Remember, the box styling has been done inside the video only so first check the video then rest of the part copy from here and paste it.

Note*: Click on the Css Code then press ctrl + A to select the whole Css Code, then ctrl + C to copy.

.auction .title {
          display: flex;
          justify-content: space-between;
          align-items: flex-end;
          margin-bottom: 50px;
        }
        .auction .title .titlebold {
          margin: 0;
          font-family: "Poppins";
          font-style: normal;
          color: #FFFFFF;
          font-weight: 500;
          font-size: 48px;
          line-height: 72px;
        }
        .auction .title .titleslim {
          margin: 0;
          font-family: "Poppins";
          font-style: normal;
          color: #D7D7D7;
          font-weight: 600;
          font-size: 18px;
          line-height: 36px;
          letter-spacing: -1px;
        }
        .auction .nft {
          display: grid;
          grid-template-columns: auto auto auto auto;
          grid-row-gap: 20px;
          grid-column-gap: 20px;
          justify-content: space-between;
        }
        
        .started {
          margin-top: 100px;
          display: flex;
          flex-direction: column;
        }
        .started-boldtext {
          margin: 0;
          align-self: center;
          font-family: "Poppins";
          font-style: normal;
          color: #FFFFFF;
          font-weight: 500;
          font-size: 40px;
          line-height: 72px;
        }
        .started-slimtext {
          margin: 0;
          align-self: center;
          font-family: "Poppins";
          font-style: normal;
          font-weight: 400;
          font-size: 20px;
          line-height: 36px;
          letter-spacing: 0.5px;
          color: #E2E2E2;
        }
        .started-items {
          padding: 60px 80px;
          position: relative;
          display: grid;
          grid-template-columns: auto auto auto auto;
          grid-column-gap: 20px;
          grid-row-gap: 20px;
          justify-content: space-between;
        }
        .started-items:before {
          content: "";
          position: absolute;
          width: 100%;
          height: 100px;
          top: 80px;
          filter: blur(80px);
          background: linear-gradient(93.51deg, #9B51E0 2.84%, #3081ED 99.18%);
        }
        .started-items .itemwrapper p {
          width: 100px;
          margin: 0;
          margin-top: 10px;
          text-align: center;
          font-family: "Poppins";
          font-style: normal;
          font-weight: 400;
          font-size: 12px;
          color: #FFFFFF;
        }
        .started-items-item {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100px;
          height: 100px;
          border-radius: 18px;
          background-color: red;
          background: rgba(255, 255, 255, 0.095);
          box-shadow: inset 2.01px -2.01px 20px rgba(214, 214, 214, 0.17), inset -3.01333px 3.01333px 3.01333px rgba(255, 255, 255, 0.39);
          backdrop-filter: blur(74.4293px);
        }
        
        .discover-title {
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
        .discover-title p {
          font-family: "Poppins";
          font-style: normal;
          font-weight: 500;
          font-size: 36px;
          letter-spacing: -1px;
          color: #FFFFFF;
        }
        .discover-items {
          display: grid;
          grid-template-columns: auto auto auto auto;
          grid-row-gap: 20px;
          grid-column-gap: 20px;
          justify-content: space-between;
        }
        .discover-loadbtn {
          cursor: pointer;
          margin-top: 20px;
          align-self: center;
          width: 161px;
          height: 40px;
          border: 1px solid #D7D7D7;
          border-radius: 10px;
          background-color: transparent;
          font-family: "Poppins";
          font-style: normal;
          font-weight: 500;
          font-size: 12px;
          letter-spacing: 1.5px;
          color: #BCBCBC;
        }
        
        .footer-main {
          max-width: 40%;
          font-family: "Poppins";
          font-style: normal;
          font-weight: 500;
          font-size: 30px;
          line-height: 40px;
          color: #FFFFFF;
        }
        .footer-navigate {
          display: flex;
        }
        .footer-navigate .nav {
          margin-left: 60px;
        }
        .footer-navigate .nav h5 {
          margin: 0;
          font-family: "Poppins";
          font-style: normal;
          font-weight: 400;
          font-size: 20px;
          line-height: 30px;
          color: #FFFFFF;
        }
        .footer-navigate .nav p {
          font-family: "Poppins";
          font-style: normal;
          font-weight: 400;
          font-size: 12px;
          line-height: 18px;
          letter-spacing: 0.03em;
          color: #D7D7D7;
        }
        
        .footer2 p {
          font-family: "Poppins";
          font-style: normal;
          font-weight: 400;
          font-size: 12px;
          line-height: 36px;
          color: #828282;
        }
        
        .item {
          display: flex;
          flex-direction: column;
          justify-self: center;
        }
        .item-img {
          object-fit: cover;
          flex-shrink: 0;
          width: 200px;
          height: 220px;
          border-radius: 10px;
          transition: 0.3s;
          cursor: pointer;
        }
        .item-img:hover {
          transform: scale(1.05);
        }
        .item-title {
          display: flex;
          align-items: center;
          justify-content: space-between;
          border-bottom: 1px solid white;
          font-family: "Poppins";
          font-style: normal;
          font-weight: 600;
          font-size: 12px;
          line-height: 24px;
          color: #FFFFFF;
        }
        .item-date {
          font-family: "Poppins";
          font-style: normal;
          font-weight: 400;
          font-size: 12px;
          line-height: 24px;
          color: #BCBCBC;
        }
        
        .filters {
          display: flex;
          align-items: center;
        }
        .filters .filter {
          display: flex;
          align-items: center;
          margin-right: 30px;
          font-family: "Poppins";
          font-style: normal;
          font-weight: 500;
          font-size: 12px;
          color: #FFFFFF;
        }
        .filters .filter svg {
          margin-right: 5px;
          margin-left: 5px;
        }
        .filters .filterbtn {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100px;
          height: 30px;
          background: linear-gradient(93.51deg, #9B51E0 2.84%, #3081ED 99.18%);
          border: none;
          border-radius: 10px;
          font-family: "Poppins";
          font-style: normal;
          font-weight: 500;
          font-size: 12px;
          color: #FFFFFF;
        }
        .filters .filterbtn svg {
          margin-right: 5px;
        }
        
        @media screen and (max-width: 1500px) {
          .landingpage {
            max-width: 1200px;
          }
        }
        @media screen and (max-width: 1040px) {
          .box {
            flex-direction: column;
          }
          .box .infobox {
            max-height: 450px;
            max-width: none;
            margin-bottom: 50px;
          }
          .box .display {
            display: none;
            max-height: none;
            max-width: none;
          }
        
          .auction .nft {
            grid-template-columns: auto auto;
            justify-content: space-around;
          }
        
          .discover-items {
            grid-template-columns: auto auto auto;
            justify-content: space-around;
          }
        
          .footer {
            flex-direction: column;
          }
          .footer-main {
            max-width: 80%;
            margin-bottom: 50px;
            text-align: center;
          }
          .footer-navigate .nav:first-child {
            margin: 0;
          }
        }
        @media screen and (max-width: 925px) {
          .navlinkwrap {
            display: none;
          }
        
          .buttonwrap {
            display: none;
          }
        
          .hamburger {
            display: flex !important;
            align-items: center;
          }
        
          .started-slimtext {
            text-align: center;
          }
        }
        @media screen and (max-width: 825px) {
          .started-items {
            display: grid;
            grid-template-columns: auto auto;
            justify-content: space-evenly;
            padding: 50px 0;
          }
          .started-items:before {
            height: 200px;
            top: 90px;
            filter: blur(120px);
          }
        
          .discover-items {
            grid-template-columns: auto auto;
            justify-content: space-around;
          }
        }
        @media screen and (max-width: 700px) {
          .box {
            flex-direction: column;
          }
          .box .infobox {
            max-height: none;
            max-width: none;
            margin-bottom: 50px;
          }
          .box .display {
            display: block;
            max-height: none;
            max-width: none;
          }
        
          .discover-title {
            justify-content: center;
          }
          .discover-title .filters {
            display: none;
          }
        
          .auction .title {
            justify-content: center;
          }
          .auction .title .titleslim {
            display: none;
          }
        }
        @media screen and (max-width: 600px) {
          .landingpage {
            padding: 0 20px;
          }
        
          .box .infobox-boldtext {
            font-size: 45px;
            line-height: 50px;
          }
          .box .infobox-slimtext {
            font-size: 12px;
            line-height: 16px;
          }
        
          .discover-items {
            grid-template-columns: auto;
            justify-content: space-around;
          }
        
          .auction .nft {
            grid-template-columns: auto;
            justify-content: space-around;
          }
        
          .footer-main {
            font-size: 20px;
            line-height: 30px;
            max-width: 100%;
            margin-bottom: 50px;
            text-align: center;
          }
        
          .footer-navigate {
            justify-content: space-between;
            width: 100%;
          }
          .footer-navigate .nav {
            margin-left: 20px;
          }
          .footer-navigate .nav h5 {
            font-size: 15px;
            line-height: 30px;
          }
          .footer-navigate .nav p {
            font-size: 10px;
            line-height: 18px;
          }
        }
        @media screen and (max-width: 480px) {
          .landingpage .box .infobox-boldtext {
            font-size: 32px;
            line-height: 1.4em;
            text-align: center;
          }
          .landingpage .box .infobox-slimtext {
            text-align: center;
          }
          .landingpage .box .infobox-btnwrapper {
            justify-content: center;
          }
        }
        @keyframes leftslide {
          from {
            transform: translateX(-700px);
          }
          to {
            transform: translateX(0px);
          }
        }
        @keyframes rightslide {
          from {
            transform: translateX(550px);
          }
          to {
            transform: translateX(0px);
          }
        }

Frequently Asked Questions

Q 1: Can I use this Source Code without giving credits ?

Ans: Yes, you can use but if your bring this projects, then should give us a credit at footer, because it takes alot time make all thess kinds of projects now if you ask that I want to bring it online but I will not give any credits to the developers & the provider then it is very wrong.

Q 2: Actually I want to bring this project online but I don't want to give credits ?

Ans: Ok, we have problem but also you cannot claim that it is made by you.
It is not all about flex you should increase you knowledge.

Q 3: If I am bringing this project online and not giving credits & claiming it is developed by me then ?

Ans: Ok, 1-3 times you will be warned and your that site will be suspended.
Still if you continue, then it can become to a legal things.