Responsive page (CSS Flex)

Hello there! everything is good i love the way that you named your classes just focus a little bit more on Semantic HTML. for example, you could use section instead of div for content. or instead of this :

          <div class="social">
            <button id="btnFb" class="btnSocial">
              <i class="bi bi-facebook socialIcn"></i>
            </button>

            <button id="btnTw" class="btnSocial">
              <i class="bi bi-twitter socialIcn"></i>
            </button>

            <button id="btnIg" class="btnSocial">
              <i class="bi bi-instagram socialIcn"></i>
            </button>
          </div>

you could just do this :

 <aside class="social-icons">
          <img src="./images/facebook.svg" alt="facebook logo" />
          <img src="./images/twitter.svg" alt="twitter logo" />
          <img src="./images/instagram.svg" alt="instagram logo" />
        </aside>

keep things as simple as you can. please separate your CSS from HTML. use more comments in your code and practice and practice ;)

nice one. you could also add transition property for the hover effects on the button and the social icons it's more cooler that way.