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 {
position: relative;
width: 56px;
height: 56px;
top: -23px;
}
.card__header {
@ -251,6 +252,79 @@ body {
}
@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) {

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

@ -27,13 +27,15 @@
</div>
<div class="intro">
<h1 class="intro__header">Maximize skill, minimize budget</h1>
<p class="intro__body">
Our modern courses across a range of in-demand skills will give you the
knowledge you need to live the life you want.
</p>
<div>
<h1 class="intro__header">Maximize skill, minimize budget</h1>
<p class="intro__body">
Our modern courses across a range of in-demand skills will give you the
knowledge you need to live the life you want.
</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">
<source media="(min-width: 1440px)"