Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- .skills {
- background-color: #fff;
- .skills-container {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
- padding: 0 4rem;
- grid-gap: 3rem;
- .example-card {
- border-radius: 5px;
- margin-top: -10rem;
- margin-bottom: 15%;
- z-index: 6;
- padding: 0 !important;
- &__header {
- height: 10rem;
- display: flex;
- align-items: center;
- text-align: center;
- font-weight: 600 !important;
- mat-card-subtitle {
- @include respond(tab-port) {
- display: none;
- }
- }
- }
- .card-img {
- height: 30rem;
- width: 100% !important;
- margin: 0 !important;
- @include respond(tab-land) {
- height: 20rem;
- }
- }
- }
- }
- }
- <section class="skills">
- <div class="skills-container">
- <mat-card class="example-card">
- <mat-card-header class="example-card__header">
- <mat-card-title>Front End Development</mat-card-title>
- <mat-card-subtitle>HTML, CSS, Javascript, Angular</mat-card-subtitle>
- </mat-card-header>
- <img class="card-img" mat-card-image src="/assets/images/front-end.jpg" alt="front-end">
- </mat-card>
- <mat-card class="example-card">
- <mat-card-header class="example-card__header">
- <mat-card-title>Back End Development</mat-card-title>
- <mat-card-subtitle>Node.js, Express, MongoDB, Socket.io,...</mat-card-subtitle>
- </mat-card-header>
- <img class="card-img" mat-card-image src="/assets/images/nodejs.jpeg" alt="Photo of a Shiba Inu">
- </mat-card>
- <mat-card class="example-card">
- <mat-card-header class="example-card__header">
- <mat-card-title>Web Design</mat-card-title>
- <mat-card-subtitle>CSS, SCSS, Responsive design,...</mat-card-subtitle>
- </mat-card-header>
- <img class="card-img" mat-card-image src="/assets/images/responsive.jpg" alt="Photo of a Shiba Inu">
- </mat-card>
- </div>
- </section>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement