smig/frontendmentor
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

fixes
All checks were successful
Build and Deploy Docker Image / build (push) Successful in 21s
Details

Browse source
This commit is contained in:
Mike 2025-01-03 17:59:38 -05:00
parent 3181c127a9
commit 12e4e98389
2 changed files with 24 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
product-preview-card-component-main/index.html
View file

@ -2,7 +2,10 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, minimum-scale=1"
/>
<!-- displays site properly based on user's device -->
<link
@ -39,9 +42,14 @@
<body>
<div class="container" role="main">
<img
src="./images/image-product-mobile.jpg"
alt="picture of perfume"
class="hero-img"
src="./images/image-product-mobile.jpg"
srcset="
./images/image-product-desktop.jpg 800w,
./images/image-product-mobile.jpg 600w
"
sizes=" (max-width: 650px) 600px, 800px"
alt="picture of perfume"
/>
<div class="content">
<h3>PERFUME</h3>

15
product-preview-card-component-main/styles.css
View file

@ -2,6 +2,7 @@
margin: 0;
padding: 0;
background-color: hsl(30, 38%, 92%);
font-size: 18px;
}
html,
@ -52,6 +53,8 @@ p {
.hero-img {
border-radius: 0.5em 0.5em 0 0;
max-width: 100%;
height: auto;
}
.price {
@ -102,13 +105,21 @@ span {
margin-right: 10px;
}
@media only screen and (min-width: 768px) {
@media only screen and (min-width: 800px) {
.container {
display: flex;
flex-direction: row;
justify-content: center;
width: 60vw;
align-self: center;
}
.content {
width: 35%;
width: 50%;
border-radius: 0 0.5em 0.5em 0;
}
.hero-img {
width: 50%;
border-radius: 0.5rem 0 0 0.5em;
object-fit: cover;
}
}