Implementing Layouts using HTML and CSS

Statement - Implement this given layout (with your own changes) - https://www.frontendmentor.io/challenges/product-preview-card-component-GO7UmttRfa

Code


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="cart.svg" type="image/x-icon">
    <title>Product Preview Card</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="card">
        <div class="left">
            <img src="switch2.jpg" alt="Nintendo Switch 2">
        </div>
        <div class="right">
            <div>
                <p class="category">Console</p>
                <h1>Nintendo Switch 2</h1>
            </div>
            <p class="description">Next-gen gaming console with enhanced graphics and performance. Grab it now at a lower than ever price.</p>
            <p id="price">$299.99 <span class="strike">$349.99</span></p>
            <button>
                <img src="cart.svg" alt="Cart Icon">
                Add to Cart
            </button>
        </div>
    </div>
</body>
</html>

@import url('https://fonts.googleapis.com/css2?family=Asimovian&display=swap');

/*import local font*/
@font-face{
    font-family: 'Noto';
    src: url('./Noto_Sans/NotoSans-VariableFont_wdth\,wght.ttf') format('truetype');
    font-display: swap;
}


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Asimovian', Arial, Helvetica, sans-serif;
}

body{
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #1d0039;
}

.card{
    display: flex;
    max-width: 600px;
    border-radius: 20px;
    overflow: hidden;
    justify-content: center;
    align-items: stretch;
}

.left{
    flex: 1;
}


.left img{
    max-width: 100%;
    height: 100%;
    object-fit: fill;
}

.right{
    flex: 1;
    padding: 20px;
    background-color: #ddd;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.category{
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: 12px;
    letter-spacing: 0.5ch;
    color: #777;
    margin-bottom: 15px;
}

.right h1{
    font-size: 2rem;
    color: #e60012;
    font-weight: bold;
}

.description{
    font-size: 1rem;
    color: #555;
    font-family: 'Noto', sans-serif;
}

#price{
    font-size: 2rem;
    font-weight: bold;
    color: #285d21;
}

.strike{
    color: #999;
    font-size: 1rem;
    text-decoration: line-through;
}

button{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    gap: 5px;
    background-color: #667fff;
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-weight: bold;
    font-size: 1rem;
    transition: background-color 0.3s ease;
}

button:hover{
    background-color: #4d5fcc;
}

New tags found this class

@font-face to introduce a new font
text-transform A property in CSS to change the text to upercase, capitalize, lowercase etc.
text-decoration Used for line through and underline
transition Used to make smooth transitions of properties from different states of an element.

For more HTML, CSS and JS challenges you can see - https://www.frontendmentor.io/challenges