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

some final tweaking so it looks better between sizes

This commit is contained in:
Robert McGovern 2022-11-08 23:06:08 +00:00
parent 3f09aa4445
commit 297bed46bb
2 changed files with 20 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -174,6 +174,11 @@ body {
}
.hero_img {
}
main {
margin-inline: auto;
}
.cards {
display: flex;
flex-direction: column;
@ -181,6 +186,10 @@ body {
margin-top: -1.125rem;
margin-inline: 1rem;
gap: 2.375rem;
justify-content: center;
max-width: 70rem;
}
.card {
border-radius: 0.625rem;
@ -252,7 +261,7 @@ body {
background: var(--col-purple-to-pink-hover);
}
@media screen and (min-width: 768px) {
@media screen and (min-width: 48rem) {
header {
position: relative;
overflow: hidden;
@ -317,7 +326,8 @@ body {
}
}
@media screen and (min-width: 1440px) {
@media screen and (min-width: 90rem) {
/* 1440px */
:root {
--fs-heading-m: 2rem;
--lh-heading-m: 2.5rem;

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

@ -38,40 +38,21 @@
</div>
<picture class="intro__image">
<source media="(min-width: 1440px)"
srcset="assets/image-hero-desktop@2x.webp 2x, assets/image-hero-desktop.webp" type="image/webp">
<source media="(min-width: 1440px)" srcset="assets/image-hero-desktop@2x.png 2x, assets/image-hero-desktop.png">
<source media="(min-width: 768px)" srcset="assets/image-hero-tablet@2x.webp 2x, assets/image-hero-tablet.webp"
<source media="(min-width: 90rem)" srcset="assets/image-hero-desktop@2x.webp 2x, assets/image-hero-desktop.webp"
type="image/webp">
<source media="(min-width: 768px)" srcset="assets/image-hero-tablet@2x.png 2x, assets/image-hero-tablet.png">
<source media="(max-width: 767px)" srcset="assets/image-hero-mobile@2x.webp 2x, assets/image-hero-mobile.webp"
<source media="(min-width: 90rem)" srcset="assets/image-hero-desktop@2x.png 2x, assets/image-hero-desktop.png">
<source media="(min-width: 48rem)" srcset="assets/image-hero-tablet@2x.webp 2x, assets/image-hero-tablet.webp"
type="image/webp">
<source media="(max-width: 767px)" srcset="assets/image-hero-mobile@2x.png 2x, assets/image-hero-mobile.png">
<source media="(min-width: 48rem)" srcset="assets/image-hero-tablet@2x.png 2x, assets/image-hero-tablet.png">
<source media="(max-width: 47.9375rem)"
srcset="assets/image-hero-mobile@2x.webp 2x, assets/image-hero-mobile.webp" type="image/webp">
<source media="(max-width: 47.9375rem)"
srcset="assets/image-hero-mobile@2x.png 2x, assets/image-hero-mobile.png">
<!-- // fallback in different sizes, as well as regular src. -->
<!-- mobile image 435x409, page 327x301
x2 870x818
tablet: 695x723, on page 640.71x640
x2 1390x1446
desktop: 1046x938, page 991.63x936.92
x2 2092x1876 -->
<!-- either widths, or pixel density 327-->
<!-- <img src="assets/logo-dark.svg" srcset="
assets/image-hero-mobile.png 435w,
assets/image-hero-tablet.png 695w,
assets/image-hero-desktop.png 1046w" sizes="
(max-width: 767px) 87vw,
(max-width: 1439px) 83vw,
(max-width: 2000px) 870px,
1000px"
alt="Woman blowing onto a mug. Top right of her is a box indicating 29k Members. On the bottom right is a box indicating 1,451 Course Hours."
class=""> -->
<img class="hero_img" src="assets/image-hero-mobile.png"
srcset="assets/image-hero-mobile.png, assets/image-hero-mobile@2x.png 2x"
alt="Woman blowing onto a mug. Top right of her is a box indicating 29k Members. On the bottom right is a box indicating 1,451 Course Hours.">
</picture>
</div>