-2

I'm currently stuck on making a contact card for a website. I got some working prototypes with a lot of position: relative and absolute, but whenever I tried resizing the parent to make it responsive, it just breaks. The prototype was just hacked together to work, and the code was really long and bad, so I'm interested in how you would solve such a problem. I made a quick sketch to illustrate my problem. Contact card As you can see in the picture I want a circular picture in 1:1 ratio. On the right I want a small title with a different background color, a small paragraph about the person, and lastly a small footer. If you know any good frameworks that could help, feel free to recommend. Thanks!

j08691
  • 204,283
  • 31
  • 260
  • 272
Gopi
  • 231
  • 1
  • 2
  • 7
  • 1
    `border-radius: 50%` turns any square `
    ` (or whatever) into a circle. Use the image as the background image.
     – Pointy Sep 21 '17 at 19:49
  • 1
    Please include your code showing your progress so far – pucky124 Sep 21 '17 at 19:50
  • You can use percentages! You can also use the min max properties in your css. This post might help - https://stackoverflow.com/questions/12945891/responsive-css-circles – Brr Switch Sep 21 '17 at 19:51

1 Answers1

1

Here is an example. It has some pixel sizes in the CSS which you probably need to adapt if you are aiming for a different size:

.circle {
    border: 1px solid;
    border-radius: 50%;
    height: 100%;
    background: white;
    margin: -1px 10px 0 -1px;
    float: left;
}
.panel {
    box-sizing: border-box;
    border-radius: 72px 25px 25px 72px;
    border: 1px solid;
    box-shadow: 10px red;
    width: 400px;
    height: 145px;
    background: linear-gradient(0deg, #e0e0e0 50%, #ccc 50%);
}
.title {
    box-sizing: border-box;
    border-bottom: 1px solid;
    margin-left: 72px;
    height: 15%;
}
.content {
    box-sizing: border-box;
    border-bottom: 1px solid;
    margin-left: 72px;
    height: 70%;
    font-size: smaller;
    background: #eee;
}
.icon {
    width:100px; 
    height:100px;
    margin: 14%;
}
<div class="panel">
    <div class="circle"><img class="icon" src="http://www.freeiconspng.com/uploads/profile-icon-person-user-19.png"></div>
    <div class="title">
        Lorem ipsum
    </div>
    <div class="content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
    </div>
</div>
trincot
  • 317,000
  • 35
  • 244
  • 286