Personal Profile Card

Community feedback

• 

  Abhik•4,840

  @abhik-bPosted almost 4 years ago

  Happy New year Sahil 🎊, Good job on this challenge 👌 , it is responsive and seems cool to me

  ** Just Some Opinions **

  • reducing the border-radius of card to something like 16px can make it look nice
  • please use media-queries that can help you with responsiveness
  • for small screens reduce the card's width
  • for the profile pic of Victor , what I did was :

  <div class="card__top"> //for top pattern
          <div class="card__profile"> //for white circle
            <img
              src="./images/image-victor.jpg"
              alt="profile-img"
              class="profile_img"
            />
          </div>
        </div>
  

  and my css would include this :

  .card__top {
    width: 100%;
    height: 140px;
  
    position: relative;
    background-image: url("./images/bg-pattern-card.svg");
    background-size: contain;
  
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
  }
  
  .card__profile {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: white;
    padding: 5px;
    position: absolute;
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%);
  }
  .card__profile img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
  

  Hope this helps 🤞

  ** Happy Coding 😇 and Keep Contributing 🚀**

  1
• 

  Arihant Jain•175

  @jarihant701Posted almost 4 years ago

  Hello Sahil, great effort you put there well I guess I can solve some of your issues you are facing there

  1. First I can see you have not use the prescribed font as specified in the style-guide. You can do that by going to fonts.google.com and search for the prescribed font and linking it using the link tag and using font-family attribute. You can learn more about this by searching 'How to link google fonts' over the internet.
  2. Second you can some attributes to body such as defining its height and width to 100vw and 100vh also add overflow:hidden to it so that the extra circle svg is not visible to the user. Also you should read the style-guide given thoroughly you can use all the prescribed fonts and colors in your design.

  1
• 

  Mehmet•285

  @memsbdmPosted almost 4 years ago

  Hi,

  first use border-radius:50% on your picture to do a circle. You can use border: 2px solid white on it after.

  Use overflow:hidden.

  Don't forget to include the font in your html file in the header.

  It should solve some problems !

  1