Skip to content

Commit

Permalink
fix responsive for team section
Browse files Browse the repository at this point in the history
  • Loading branch information
@ronaldaug
ronaldaug committed Jul 30, 2021
1 parent e15efc1 commit 204d011
Show file tree
Hide file tree
Showing 2 changed files with 97 additions and 78 deletions.
173 changes: 96 additions & 77 deletions gramateria/develop/js/config/sectionBlocks.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -453,90 +453,109 @@ export default [
attributes:{
class:'fa fa-th'
},
content:`<div class="container my-5">
<div class="row">
<div class="col-12">
<h1 class="text-center">OUR AMAZING TEAM</h1>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="box p-3 shadow bg-white rounded my-3">
<div class="row">
<div class="col-4">
<img src="https://res.cloudinary.com/dpnea22ek/image/upload/v1627660134/user1.png" alt="" width="100%">
</div>
<div class="col-8">
<h4>Peter J. Lamy</h4>
<p class="my-2"><small>Software Developer</small></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing tristique hendrerit laoreet.</p>
<div class="social-icons">
<a href="#" class="me-2"><span class="fa fa-facebook"></span></a><a href="#" class="me-2"><span class="fa fa-instagram"></span></a><a href="#" class="me-2"><span class="fa fa-twitter"></span></a><a href="#" class="me-2"><span class="fa fa-linkedin"></span></a>
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="box p-3 shadow bg-white rounded my-3">
<div class="row">
<div class="col-4">
<img src="https://res.cloudinary.com/dpnea22ek/image/upload/v1627660145/user4.png" alt="" width="100%">
</div>
<div class="col-8">
<h4>June D. Smith</h4>
<p class="my-2"><small>Product Manager</small></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing tristique hendrerit laoreet.</p>
<div class="social-icons">
<a href="#" class="me-2"><span class="fa fa-facebook"></span></a><a href="#" class="me-2"><span class="fa fa-instagram"></span></a><a href="#" class="me-2"><span class="fa fa-twitter"></span></a><a href="#" class="me-2"><span class="fa fa-linkedin"></span></a>
</div>
content:`<section id="team">
<div class="container">
<div class="row">
<div class="col-12">
<h1 class="text-center">OUR AMAZING TEAM</h1>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="box p-3 shadow bg-white rounded my-3">
<div class="row">
<div class="col-4">
<img src="https://res.cloudinary.com/dpnea22ek/image/upload/v1627660134/user3.png" alt="" width="100%">
<div class="row">
<div class="col-md-6">
<div class="box p-3 shadow bg-white rounded my-3">
<div class="row">
<div class="col-md-4">
<img src="https://res.cloudinary.com/dpnea22ek/image/upload/v1627660134/user1.png" alt=""
width="100%">
</div>
<div class="col-md-8">
<h4>Peter J. Lamy</h4>
<p class="my-2"><small>Software Developer</small></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing tristique hendrerit laoreet.</p>
<div class="social-icons">
<a href="#" class="me-2"><span class="fa fa-facebook"></span></a><a href="#"
class="me-2"><span class="fa fa-instagram"></span></a><a href="#" class="me-2"><span
class="fa fa-twitter"></span></a><a href="#" class="me-2"><span
class="fa fa-linkedin"></span></a>
</div>
</div>
</div>
</div>
</div>
<div class="col-8">
<h4>Dianna C. Avila</h4>
<p class="my-2"><small>Graphic Designer</small></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing tristique hendrerit laoreet.</p>
<div class="social-icons">
<a href="#" class="me-2"><span class="fa fa-facebook"></span></a><a href="#" class="me-2"><span class="fa fa-instagram"></span></a><a href="#" class="me-2"><span class="fa fa-twitter"></span></a><a href="#" class="me-2"><span class="fa fa-linkedin"></span></a>
</div>
<div class="col-md-6">
<div class="box p-3 shadow bg-white rounded my-3">
<div class="row">
<div class="col-md-4">
<img src="https://res.cloudinary.com/dpnea22ek/image/upload/v1627660145/user4.png" alt=""
width="100%">
</div>
<div class="col-md-8">
<h4>June D. Smith</h4>
<p class="my-2"><small>Product Manager</small></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing tristique hendrerit laoreet.</p>
<div class="social-icons">
<a href="#" class="me-2"><span class="fa fa-facebook"></span></a><a href="#"
class="me-2"><span class="fa fa-instagram"></span></a><a href="#" class="me-2"><span
class="fa fa-twitter"></span></a><a href="#" class="me-2"><span
class="fa fa-linkedin"></span></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="box p-3 shadow bg-white rounded my-3">
<div class="row">
<div class="col-4">
<img src="https://res.cloudinary.com/dpnea22ek/image/upload/v1627660147/user2.png" alt="" width="100%">
<div class="col-md-6">
<div class="box p-3 shadow bg-white rounded my-3">
<div class="row">
<div class="col-md-4">
<img src="https://res.cloudinary.com/dpnea22ek/image/upload/v1627660134/user3.png" alt=""
width="100%">
</div>
<div class="col-md-8">
<h4>Dianna C. Avila</h4>
<p class="my-2"><small>Graphic Designer</small></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing tristique hendrerit laoreet.</p>
<div class="social-icons">
<a href="#" class="me-2"><span class="fa fa-facebook"></span></a><a href="#"
class="me-2"><span class="fa fa-instagram"></span></a><a href="#" class="me-2"><span
class="fa fa-twitter"></span></a><a href="#" class="me-2"><span
class="fa fa-linkedin"></span></a>
</div>
</div>
</div>
</div>
</div>
<div class="col-8">
<h4>Robert C. Young</h4>
<p class="my-2"><small>Web Designer</small></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing tristique hendrerit laoreet.</p>
<div class="social-icons">
<a href="#" class="me-2"><span class="fa fa-facebook"></span></a><a href="#" class="me-2"><span class="fa fa-instagram"></span></a><a href="#" class="me-2"><span class="fa fa-twitter"></span></a><a href="#" class="me-2"><span class="fa fa-linkedin"></span></a>
</div>
<div class="col-md-6">
<div class="box p-3 shadow bg-white rounded my-3">
<div class="row">
<div class="col-md-4">
<img src="https://res.cloudinary.com/dpnea22ek/image/upload/v1627660147/user2.png" alt=""
width="100%">
</div>
<div class="col-md-8">
<h4>Robert C. Young</h4>
<p class="my-2"><small>Web Designer</small></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing tristique hendrerit laoreet.</p>
<div class="social-icons">
<a href="#" class="me-2"><span class="fa fa-facebook"></span></a><a href="#"
class="me-2"><span class="fa fa-instagram"></span></a><a href="#" class="me-2"><span
class="fa fa-twitter"></span></a><a href="#" class="me-2"><span
class="fa fa-linkedin"></span></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>`
</div>
</section>`
},
{
id: 'section-footer',
Expand Down
2 changes: 1 addition & 1 deletion gramateria/dist/gram.min.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -762,7 +762,7 @@ __webpack_require__.r(__webpack_exports__);
attributes: {
"class": 'fa fa-th'
},
content: "<div class=\"container my-5\">\n <div class=\"row\">\n <div class=\"col-12\">\n <h1 class=\"text-center\">OUR AMAZING TEAM</h1>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-6\">\n \n <div class=\"box p-3 shadow bg-white rounded my-3\">\n <div class=\"row\">\n <div class=\"col-4\">\n <img src=\"https://res.cloudinary.com/dpnea22ek/image/upload/v1627660134/user1.png\" alt=\"\" width=\"100%\">\n </div>\n <div class=\"col-8\">\n <h4>Peter J. Lamy</h4>\n <p class=\"my-2\"><small>Software Developer</small></p>\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing tristique hendrerit laoreet.</p>\n <div class=\"social-icons\">\n <a href=\"#\" class=\"me-2\"><span class=\"fa fa-facebook\"></span></a><a href=\"#\" class=\"me-2\"><span class=\"fa fa-instagram\"></span></a><a href=\"#\" class=\"me-2\"><span class=\"fa fa-twitter\"></span></a><a href=\"#\" class=\"me-2\"><span class=\"fa fa-linkedin\"></span></a>\n </div>\n </div>\n </div>\n </div>\n \n </div>\n <div class=\"col-6\">\n \n <div class=\"box p-3 shadow bg-white rounded my-3\">\n <div class=\"row\">\n <div class=\"col-4\">\n <img src=\"https://res.cloudinary.com/dpnea22ek/image/upload/v1627660145/user4.png\" alt=\"\" width=\"100%\">\n </div>\n <div class=\"col-8\">\n <h4>June D. Smith</h4>\n <p class=\"my-2\"><small>Product Manager</small></p>\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing tristique hendrerit laoreet.</p>\n <div class=\"social-icons\">\n <a href=\"#\" class=\"me-2\"><span class=\"fa fa-facebook\"></span></a><a href=\"#\" class=\"me-2\"><span class=\"fa fa-instagram\"></span></a><a href=\"#\" class=\"me-2\"><span class=\"fa fa-twitter\"></span></a><a href=\"#\" class=\"me-2\"><span class=\"fa fa-linkedin\"></span></a>\n </div>\n </div>\n </div>\n </div>\n \n </div>\n <div class=\"col-6\">\n \n <div class=\"box p-3 shadow bg-white rounded my-3\">\n <div class=\"row\">\n <div class=\"col-4\">\n <img src=\"https://res.cloudinary.com/dpnea22ek/image/upload/v1627660134/user3.png\" alt=\"\" width=\"100%\">\n </div>\n <div class=\"col-8\">\n <h4>Dianna C. Avila</h4>\n <p class=\"my-2\"><small>Graphic Designer</small></p>\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing tristique hendrerit laoreet.</p>\n <div class=\"social-icons\">\n <a href=\"#\" class=\"me-2\"><span class=\"fa fa-facebook\"></span></a><a href=\"#\" class=\"me-2\"><span class=\"fa fa-instagram\"></span></a><a href=\"#\" class=\"me-2\"><span class=\"fa fa-twitter\"></span></a><a href=\"#\" class=\"me-2\"><span class=\"fa fa-linkedin\"></span></a>\n </div>\n </div>\n </div>\n </div>\n \n </div>\n <div class=\"col-6\">\n \n <div class=\"box p-3 shadow bg-white rounded my-3\">\n <div class=\"row\">\n <div class=\"col-4\">\n <img src=\"https://res.cloudinary.com/dpnea22ek/image/upload/v1627660147/user2.png\" alt=\"\" width=\"100%\">\n </div>\n <div class=\"col-8\">\n <h4>Robert C. Young</h4>\n <p class=\"my-2\"><small>Web Designer</small></p>\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing tristique hendrerit laoreet.</p>\n <div class=\"social-icons\">\n <a href=\"#\" class=\"me-2\"><span class=\"fa fa-facebook\"></span></a><a href=\"#\" class=\"me-2\"><span class=\"fa fa-instagram\"></span></a><a href=\"#\" class=\"me-2\"><span class=\"fa fa-twitter\"></span></a><a href=\"#\" class=\"me-2\"><span class=\"fa fa-linkedin\"></span></a>\n </div>\n </div>\n </div>\n </div>\n \n </div>\n </div>"
content: "<section id=\"team\">\n <div class=\"container\">\n <div class=\"row\">\n <div class=\"col-12\">\n <h1 class=\"text-center\">OUR AMAZING TEAM</h1>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-md-6\">\n\n <div class=\"box p-3 shadow bg-white rounded my-3\">\n <div class=\"row\">\n <div class=\"col-md-4\">\n <img src=\"https://res.cloudinary.com/dpnea22ek/image/upload/v1627660134/user1.png\" alt=\"\"\n width=\"100%\">\n </div>\n <div class=\"col-md-8\">\n <h4>Peter J. Lamy</h4>\n <p class=\"my-2\"><small>Software Developer</small></p>\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing tristique hendrerit laoreet.</p>\n <div class=\"social-icons\">\n <a href=\"#\" class=\"me-2\"><span class=\"fa fa-facebook\"></span></a><a href=\"#\"\n class=\"me-2\"><span class=\"fa fa-instagram\"></span></a><a href=\"#\" class=\"me-2\"><span\n class=\"fa fa-twitter\"></span></a><a href=\"#\" class=\"me-2\"><span\n class=\"fa fa-linkedin\"></span></a>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n <div class=\"col-md-6\">\n\n <div class=\"box p-3 shadow bg-white rounded my-3\">\n <div class=\"row\">\n <div class=\"col-md-4\">\n <img src=\"https://res.cloudinary.com/dpnea22ek/image/upload/v1627660145/user4.png\" alt=\"\"\n width=\"100%\">\n </div>\n <div class=\"col-md-8\">\n <h4>June D. Smith</h4>\n <p class=\"my-2\"><small>Product Manager</small></p>\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing tristique hendrerit laoreet.</p>\n <div class=\"social-icons\">\n <a href=\"#\" class=\"me-2\"><span class=\"fa fa-facebook\"></span></a><a href=\"#\"\n class=\"me-2\"><span class=\"fa fa-instagram\"></span></a><a href=\"#\" class=\"me-2\"><span\n class=\"fa fa-twitter\"></span></a><a href=\"#\" class=\"me-2\"><span\n class=\"fa fa-linkedin\"></span></a>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n <div class=\"col-md-6\">\n\n <div class=\"box p-3 shadow bg-white rounded my-3\">\n <div class=\"row\">\n <div class=\"col-md-4\">\n <img src=\"https://res.cloudinary.com/dpnea22ek/image/upload/v1627660134/user3.png\" alt=\"\"\n width=\"100%\">\n </div>\n <div class=\"col-md-8\">\n <h4>Dianna C. Avila</h4>\n <p class=\"my-2\"><small>Graphic Designer</small></p>\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing tristique hendrerit laoreet.</p>\n <div class=\"social-icons\">\n <a href=\"#\" class=\"me-2\"><span class=\"fa fa-facebook\"></span></a><a href=\"#\"\n class=\"me-2\"><span class=\"fa fa-instagram\"></span></a><a href=\"#\" class=\"me-2\"><span\n class=\"fa fa-twitter\"></span></a><a href=\"#\" class=\"me-2\"><span\n class=\"fa fa-linkedin\"></span></a>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n <div class=\"col-md-6\">\n\n <div class=\"box p-3 shadow bg-white rounded my-3\">\n <div class=\"row\">\n <div class=\"col-md-4\">\n <img src=\"https://res.cloudinary.com/dpnea22ek/image/upload/v1627660147/user2.png\" alt=\"\"\n width=\"100%\">\n </div>\n <div class=\"col-md-8\">\n <h4>Robert C. Young</h4>\n <p class=\"my-2\"><small>Web Designer</small></p>\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing tristique hendrerit laoreet.</p>\n <div class=\"social-icons\">\n <a href=\"#\" class=\"me-2\"><span class=\"fa fa-facebook\"></span></a><a href=\"#\"\n class=\"me-2\"><span class=\"fa fa-instagram\"></span></a><a href=\"#\" class=\"me-2\"><span\n class=\"fa fa-twitter\"></span></a><a href=\"#\" class=\"me-2\"><span\n class=\"fa fa-linkedin\"></span></a>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n </div>\n</section>"
}, {
id: 'section-footer',
label: 'Footer',
Expand Down

0 comments on commit 204d011

Please sign in to comment.