tarasis
/
rmcg.dev
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

finished tablet, but its not responsive yet

This commit is contained in:
Robert McGovern 2022-11-03 12:44:02 +00:00
parent 011b455043
commit 3eaa430a70
2 changed files with 82 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
projects/FrontendMentor/newbie/skilled-elearning-landing-page/css/styles.css
View File

@ -201,6 +201,7 @@ body {
.card__image { .card__image {
position: relative; position: relative;
width: 56px; width: 56px;
height: 56px;
top: -23px; top: -23px;
} }
.card__header { .card__header {
@ -251,6 +252,79 @@ body {
} }
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
header {
position: relative;
overflow: hidden;
}
.banner {
display: flex;
flex-direction: row;
/* justify-content: space-between; */
align-items: center;
padding: 24px 39.5px 0px 39.5px;
}
.intro {
margin-top: 99px;
margin-left: 39.5px;
overflow: unset;
display: flex;
flex-direction: row;
flex: 1 0 50%;
/* width: 51%; */
padding-bottom: 210px;
position: relative;
}
.intro > div {
flex-basis: 56%;
}
.intro__image {
display: block;
position: absolute;
top: -291px; /*-38vw;*/
right: -404px; /*-52.5vw;*/
}
.intro__image img {
display: block;
/* margin-right: 113%; */
width: 695px;
}
.cards {
margin-top: unset;
margin-inline: 39.5px;
/* display: grid;
gap: unset;
row-gap: 2.5em;
column-gap: 1.5em;
grid-template-columns: repeat(2, 1fr); */
/* margin-top: 210px; */
flex-direction: row;
flex-wrap: wrap;
gap: 11px;
row-gap: 53px;
}
.cards > * {
/* flex-shrink: 0; */
flex-basis: 49%;
}
.card {
padding-inline: 32px 21px;
/* margin-inline-start: 32px; */
}
.cards__header {
padding: 56px 21px 139px 32px;
}
.footer {
margin-top: 88px;
padding: 36px 39.5px;
}
} }
@media screen and (min-width: 1440px) { @media screen and (min-width: 1440px) {

2
projects/FrontendMentor/newbie/skilled-elearning-landing-page/index.html
View File

@ -27,6 +27,7 @@
</div> </div>
<div class="intro"> <div class="intro">
<div>
<h1 class="intro__header">Maximize skill, minimize budget</h1> <h1 class="intro__header">Maximize skill, minimize budget</h1>
<p class="intro__body"> <p class="intro__body">
Our modern courses across a range of in-demand skills will give you the Our modern courses across a range of in-demand skills will give you the
@ -34,6 +35,7 @@
</p> </p>
<a class="btn intro__getting-started" href="">Get Started</a> <a class="btn intro__getting-started" href="">Get Started</a>
</div>
<picture class="intro__image"> <picture class="intro__image">
<source media="(min-width: 1440px)" <source media="(min-width: 1440px)"