Vue
HTML
<div id="app">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<div id="items" class="container">
<div class="header">
<div class="row">
<h2>Quem vocĂŞ conheceu?</h2>
</div>
</div>
<div class="body">
<div class="row box">
<div v-for="img in images" :key="img" class="four columns">
<div class="img-circle">
</div>
</div>
</div>
</div>
</div>
</div>
CSS
.header {
margin-top: 50px;
text-align: center;
color: #fff;
}
.box {
display: flex;
justify-content: center;
}
.body .column,.columns {
margin-left: 0;
padding: 10px;
margin: 0 auto;
}
.body {
margin-top: 10%;
text-align: center;
}
html, body{
height: 100vh;
background-color: #bd4f6c;
background-image: linear-gradient(326deg, #bd4f6c 0%, #d7816a 74%);
}
.img-circle {
width: 200px;
height: 200px;
background-color: #ccc;
border-radius: 100%;
margin: 0 auto;
flex-basis: 33.33%;
}
Vue
new Vue({
el: "#app",
data: {
images: [1,2,3,4,5]
}
})