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"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <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 --> <!-- displays site properly based on user's device -->
<link <link
@ -39,9 +42,14 @@
<body> <body>
<div class="container" role="main"> <div class="container" role="main">
<img <img
src="./images/image-product-mobile.jpg"
alt="picture of perfume"
class="hero-img" 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"> <div class="content">
<h3>PERFUME</h3> <h3>PERFUME</h3>

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

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