Create list contact -address with Flexbox

1

Hi coders,
I start this mini project : create a list contact using HTML and CSS ( add FlexBox)

This is my HTML file
<!DOCTYPE html>
<html>
    <head>
        <title>List contact</title>
        <link href="https://fonts.googleapis.com/css?family=Arimo&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="contactstyle.css">
    </head>
    <body>
        <div class="contact-list">
        <div class="contact">
            <span class="user-detail"></span>
            <h2>Linda Hart</h2>
            <p>6765 Shady Ln Dr</p>
            
        </div>
        <div class="contact">
            <span class="user-detail"></span>
            <h2>Roger Medina</h2>
            <p>2420 Paddock Way</p>
            
        </div>
        <div class="contact">
            <span class="user-detail"></span>
            <h2>Dean Sullivan</h2>
            <p>6727 Airplane Ave</p>
           
        </div>
        <div class="contact">
            <span class="user-detail"></span>
            <h2>Elizabeth Austin</h2>
            <p>6685 Blossom Hill Rd</p>
           
        </div>
    </div>
        <div class="footer-nav">
            <nav class="ft-nav">
                <ul> 
                    <li><a href="#home">Home</a></li>
                    <li><a href="#profile">Profile</a></li>
                    <li><a href="#contact">Contact</a></li>
                     
                </ul>
            </nav>
            </div>
    </body>
</html>

and that is my CSS file

*{
    box-sizing: border-box;
   
}
.contact-list{
    display: flex;
  
}

/*
.contact:after{
content: "";
display: block;
border-bottom: 1px solid rgba(171, 183, 183, 1);

}
*/
.user-detail{
    border: 50px solid gray;
    border-radius: 50%;
    margin: 5px;
}



p{
    font-size: 24px;
    color: gray;
    font-family: 'Arimo', sans-serif;
   
}

h1{
   
    font-family: 'Arimo', sans-serif;
}

.footer-nav{
    background-color: #c0392b;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}
ul{
    display: inline-flex;
}

li{
    list-style-type: none;
    font-family: 'Arimo', sans-serif;
    color: lightgray;
    margin: 10px;
    align-content: space-around;
}

a{
    text-decoration: none;
    color: lightgray;
    cursor: pointer;
    
}

My problem is that it creates a row instead of columns and then fails to put the placeholder on the left and the title and paragraph on the right.
I want such a result:

image
image806×872 97.7 KB

Forgive for my English and thanks;
CamCode

2

The contact list is in a column, you don’t need to do anything re flex because that’s how HTML renders.

Then an HTML structure something like this (I’ve just given each element a class so you can see which is which):

.contact
  img.contact-img
  div.contact-body
    h2.contact-name
    p.contact-address

.contact {
  display: flex;
  border-bottom: 1px solid grey; /* or whatever */
}

.contact:last-child {
  border-bottom: none;
}

. contact-img {
  width: 100px; /* actual img width here */;
  height: auto;
}

.contact-body {
  flex: 1; /* fill the remaining space */
}

The name and address will sit above each other, they’re block-level elements.

1 Like
3

Thanks it works!!!
But how do I put heading above my paragraph?