Skip to content

Instantly share code, notes, and snippets.

@harrisonmalone

harrisonmalone/index.html

Created March 24, 2020 05:00
Show Gist options
  • Save harrisonmalone/5e6a3666aeb1dbe3beeff78e70d943ab to your computer and use it in GitHub Desktop.
Save harrisonmalone/5e6a3666aeb1dbe3beeff78e70d943ab to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="./style.css" />
<title>Flexbox Cards</title>
</head>
<body>
<div class="container">
<div class="content">
<div class="card">
<div class="upper-card">
<div class="avatar"></div>
<div class="name">Gordon <span id="type">CHEF</span></div>
</div>
<p class="main-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio
qui quasi, facilis quas iste, modi et beatae doloremque commodi
mollitia, perferendis ipsum nisi fugiat aliquam.
</p>
<div class="btn-container">
<div class="btn">Homepage</div>
<div class="btn">Contact</div>
</div>
</div>
<div class="card">
<div class="upper-card">
<div class="avatar"></div>
<div class="name">Gordon <span id="type">CHEF</span></div>
</div>
<p class="main-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio
qui quasi, facilis quas iste, modi et beatae doloremque commodi
mollitia, perferendis ipsum nisi fugiat aliquam.
</p>
<div class="btn-container">
<div class="btn">Homepage</div>
<div class="btn">Contact</div>
</div>
</div>
<div class="card">
<div class="upper-card">
<div class="avatar"></div>
<div class="name">Gordon <span id="type">CHEF</span></div>
</div>
<p class="main-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio
qui quasi, facilis quas iste, modi et beatae doloremque commodi
mollitia, perferendis ipsum nisi fugiat aliquam.
</p>
<div class="btn-container">
<div class="btn">Homepage</div>
<div class="btn">Contact</div>
</div>
</div>
<div class="card">
<div class="upper-card">
<div class="avatar"></div>
<div class="name">Gordon <span id="type">CHEF</span></div>
</div>
<p class="main-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio
qui quasi, facilis quas iste, modi et beatae doloremque commodi
mollitia, perferendis ipsum nisi fugiat aliquam.
</p>
<div class="btn-container">
<div class="btn">Homepage</div>
<div class="btn">Contact</div>
</div>
</div>
<div class="card">
<div class="upper-card">
<div class="avatar"></div>
<div class="name">Gordon <span id="type">CHEF</span></div>
</div>
<p class="main-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio
qui quasi, facilis quas iste, modi et beatae doloremque commodi
mollitia, perferendis ipsum nisi fugiat aliquam.
</p>
<div class="btn-container">
<div class="btn">Homepage</div>
<div class="btn">Contact</div>
</div>
</div>
<div class="card">
<div class="upper-card">
<div class="avatar"></div>
<div class="name">Gordon <span id="type">CHEF</span></div>
</div>
<p class="main-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio
qui quasi, facilis quas iste, modi et beatae doloremque commodi
mollitia, perferendis ipsum nisi fugiat aliquam.
</p>
<div class="btn-container">
<div class="btn">Homepage</div>
<div class="btn">Contact</div>
</div>
</div>
</div>
</div>
</body>
</html>
Raw
style.css
body {
margin: 0px;
font-family: sans-serif;
}
.container {
max-width: 800px;
margin: 0px auto;
}
.content {
/* Your styles here */
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.card {
width: 200px;
height: 258px;
border: 1px solid black;
border-radius: 5px;
padding: 20px;
margin: 10px;
}
.upper-card {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.avatar {
background: url('https://randomuser.me/api/portraits/lego/6.jpg');
background-size: cover;
background-position: center;
height: 70px;
width: 70px;
border-radius: 50%;
border: 1px solid rgba(1, 1, 1, 0.2);
margin-right: 20px;
}
.name {
font-size: 25px;
text-align: center;
font-weight: 700;
}
#type {
display: block;
font-size: 18px;
font-weight: 550;
}
.btn {
display: inline-block;
background: dodgerblue;
padding: 6px;
color: white;
border-radius: 7px;
}
.main-text {
color: rgba(1, 1, 1, 0.8);
}
.btn-container {
display: flex;
justify-content: space-between;
margin: 0px 5px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment