Uses the Random User Generator API to output some simple user profile cards.
A Pen by Ryan Mulligan on CodePen.
#profiles.profile-cards |
const profiles = document.getElementById('profiles') | |
const amount = 12; | |
const template = profile => { | |
return ` | |
<div class="profile-card"> | |
<div class="profile-card__content"> | |
<div class="profile-card__image"> | |
<img src="${profile.picture.large}" /> | |
</div> | |
<h2 class="profile-card__name">${profile.name.first} ${profile.name.last}</h2> | |
<p class="profile-card__handle">@${profile.login.username}</p> | |
</div> | |
<button class="profile-card__button">Meet ${profile.name.first}</button> | |
</div> | |
` | |
} | |
fetch(`https://randomuser.me/api/?results=${amount}`, { method: 'get' }) | |
.then(response => response.json()) | |
.then(data => data.results.forEach(result => profiles.innerHTML += template(result))) | |
.catch(error => console.log(error)); |
Uses the Random User Generator API to output some simple user profile cards.
A Pen by Ryan Mulligan on CodePen.
@import url('https://fonts.googleapis.com/css?family=Roboto|Song+Myung'); | |
:root { | |
--heading-font: 'Song Myung', serif; | |
--text-font: 'Roboto', sans-serif; | |
--base-padding: 2rem; | |
--base-border-radius: 4px; | |
} | |
* { | |
box-sizing: border-box; | |
} | |
body { | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
min-height: 100vh; | |
font-family: var(--text-font); | |
color: #2f2f2f; | |
background-color: whitesmoke; | |
} | |
h1, h2, h3, h4, h5, h6 { | |
font-family: var(--heading-font); | |
} | |
.profile-cards { | |
display: grid; | |
grid-gap: var(--base-padding); | |
padding: var(--base-padding); | |
width: 100%; | |
max-width: 1000px; | |
@media (min-width: 500px) { | |
grid-template-columns: repeat(2, 1fr); | |
} | |
@media (min-width: 750px) { | |
grid-template-columns: repeat(3, 1fr); | |
} | |
} | |
.profile-card { | |
position: relative; | |
display: flex; | |
flex-direction: column; | |
justify-content: space-between; | |
width: 100%; | |
background-color: white; | |
border-radius: var(--base-border-radius); | |
box-shadow: rgba(black, 0.1) 0 3px 6px -1px; | |
} | |
.profile-card__content { | |
padding: 1rem; | |
text-align: center; | |
} | |
.profile-card__name { | |
margin-bottom: 0.5rem; | |
font-size: 1.5em; | |
text-transform: capitalize; | |
} | |
.profile-card__handle { | |
font-size: 0.75em; | |
color: lighten(#2f2f2f, 50%); | |
} | |
.profile-card__image { | |
position: relative; | |
margin-bottom: 0.5rem; | |
img { | |
position: relative; | |
width: 100px; | |
border-radius: 100%; | |
border: 12px solid white; | |
} | |
&:before { | |
position: absolute; | |
top: -1px; | |
left: 0; | |
content: ''; | |
width: 100%; | |
height: 50%; | |
border-bottom: 1px solid #e8e8e8; | |
} | |
} | |
.profile-card__button { | |
margin: 1rem 0 0; | |
padding: 1rem; | |
width: 100%; | |
font-family: var(--text-font); | |
font-size: 0.8rem; | |
text-transform: uppercase; | |
color: white; | |
background-color: dodgerblue; | |
border: none; | |
border-bottom-left-radius: var(--base-border-radius); | |
border-bottom-right-radius: var(--base-border-radius); | |
&:hover { | |
cursor: pointer; | |
background-color: darken(dodgerblue, 10%); | |
} | |
} |