这是我的代码：
https://codepen.io/malyikaj/pen/QWKNVzN
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
/* * { border: 1px solid black; } */
html {}
* {
box-sizing: border-box;
}
.slutty-title {
text-align: font-size: 40px;
font-family: 'Dancing Script', cursive;
color: #d98695;
font-size: 40px;
font-weight: bold;
padding-left: 120px;
}
.brownie-title {
font-size: 30px;
font-weight: bold;
color: #76341e;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 440px;
font-family: arial;
margin-left: 50px;
}
.italic {
font-style: italic;
font-weight: bolder;
}
.bold {
font-weight: bold;
color: #76341e;
letter-spacing: 1.5px;
}
p {
line-height: 1.4;
padding: 0px 20px;
}
.price {
font-size: 28px;
text-align: center;
color: #d98695;
}
.card button {
border: none;
outline: 0;
padding: 12px;
color: white;
background-color: #d98695;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
}
.card button:hover {
opacity: 0.7;
}
body {
font-family: 'Montserrat', sans-serif;
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
nav {
background: #d98695;
height: 80px;
width: 100vw;
}
label.logo {
color: white;
font-size: 65px;
line-height: 80px;
padding: 0 100px;
font-weight: bold;
font-family: 'Dancing Script', cursive;
letter-spacing: 3px;
}
label.logo-2 {
margin: -100px;
line-height: 80px;
color: white;
font-size: 25px;
padding: 0px;
font-family: 'Dancing Script', cursive;
letter-spacing: 1px;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
width: 40%;
}
.card:hover {
box-shadow: 0 16px 24px 0 rgba(0, 0, 0, 0.2);
}
.container {
padding: 2px 16px;
}
nav ul {
float: right;
margin-right: 20px;
}
nav ul li {
display: inline-block;
line-height: 80px;
margin: 0 5px;
}
nav ul li a {
color: white;
font-size: 17px;
padding: 7px 13px;
border-radius: 3px;
text-decoration: none;
}
a:hover {
transition: .3s;
text-transform: none;
background: #df99a6;
}
.checkbtn {
font-size: 30px;
color: #df99a6;
float: right;
line-height: 80px;
margin-right: 40px;
cursor: pointer;
display: none;
}
#check {
display: none;
}
#page-container {
position: relative;
min-height: 100vh;
}
footer {
box-sizing: border-box;
place-items: center;
font-family: 'Poppins', sans-serif;
text-align: right;
background-color: #d98695;
color: white;
padding: 0px;
position: absolute;
bottom: 0;
height: 60px;
width: 100vw;
/* position: fixed;
z-index: 1; */
}
@media (max-width: 952px) {
label.logo {
font-size: 30px;
padding-left: 50px;
}
nav ul li a {
font-size: 16px;
}
}
@media (max-width: 858px) {
.checkbtn {
display: block;
}
ul {
position: fixed;
width: 100%;
height: 100vh;
background: #2c3e50;
top: 80px;
left: -100%;
text-align: center;
transition: all .5s;
}
nav ul li {
display: block;
margin: 50px 0;
line-height: 30px;
}
nav ul li a {
font-size: 20px;
}
a:hover,
a.active {
background: none;
color: #e18e96;
}
#check:checked~ul {
left: 0;
}
}
section {
background: url(bg1.jpg) no-repeat;
background-size: cover;
height: calc(100vh - 80px);
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title>Sweet T's Vegan Bakery</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Do+Hyeon&family=Montserrat:wght@100;400&family=Nerko+One&display=swap" rel="stylesheet">
</head>
<body>
<div>
<header>
<nav>
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<i class="fas fa-bars"></i>
</label>
<label class="logo">Sweet T's </label>
<label class="logo-2">Vegan Bakery</label>
<ul>
<li><a class="active" href="#">Home</a></li>
<li><a href="#">Order</a></li>
<li><a href="#">About</a></li>
<li><a href="#">FAQ's</a></li>
<li><a href="#">Contact </a></li>
</ul>
</nav>
</header>
<main>
<h2></h2>
<div class="card">
<img src="http://placeimg.com/440/280/any">
<alt="Denim Jeans" style="width:100%">
<div class=fonts>
<span class="slutty-title">Slutty</span>
<span class="brownie-title">Brownie</span>
<p>One layer of chocolate chip cookie, Oreo cookie center, topped with a dense layer of brownie.
<br>
<br> You may not be its <span class="italic">first</span>, but this is the first ever product by Sweet T’s. Heart shaped because it's made with love.
<br>
<br>
<span class="bold">Gluten free. Nut free. Vegan.</span>
<p class="price">$5.00</p>
</p>
<p><button>Add to Cart</button></p>
</div>
<!--
background-color: #434a52;
Slutty Brownie
Bite into a base layer of chocolate chip cookie, middle layer of Oreo Cookie, and decadent a top layer of brownie. Gluten free. Nut Free. Vegan.
You may not be its first…but this is THE first ever product from Sweet T’s. Heart shaped, because it was made with love!
Slutty Blondie
Vegan white Chocolate Blondie with vanilla Oreo style in the middle and cookie on the bottom. Blondes have more fun.Decadent.
Slutty Pumpkin Cheesecake
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Caramel Apple Pie Cookie
Sugar cookie dough baked with apple pie filling. Topped with sugar cookie lattice pie top. These are the newest homemade sweets that makes an utterly divine dessert. A great desert when you’re craving apple pie—but not the ENTIRE apple pie.
Pumpkin Cheesecake Muffin
Came for the fall and stayed a favorite. *Seasonal* #NomNom
S’Mores Cookies
Chocolate chip cookie with melted vegan marshmallow in the middle. Outrageously good.
Chocolate Chip Cookies
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Birthday? Anniversary? Work Event? Customizable orders available, just contact us.
Find us:
Uber Eats
GrubHub
Bougie Brews: 52 Main St, Yonkers, NY 10701
VeganDale Food Fest
Baked a cake for Wikipedia
Cupcake cutie boutique: 8 S 6th Ave, Mt Vernon, NY 10550 (Enjoy two dollar Tuesdays)
Vegan Grille 1201 1201 Castle Hill Ave, The Bronx, NY 10462
Pizza Gusta Super Foodtown of Throggs Neck : 2945-65 Bruckner Blvd, The Bronx, NY 10465
Plantega
Stay sweet my friends.
Instagram : sweet_teees
Phone: 914-297-9439
Email Us: sweettvegan@gmail.com
Sweet simple vegan included my sweets in their 2020 holiday gift guide.
made with all natural and wholesome ingredients.
</main>
Email Code
<a href="mailto:sweettvegan@gmail.com=?subject=Sweet%20T%20Customer%20Support">Email Us</a>
Email sign up
<input type="text" placeholder="Enter email">
<input type="submit" value="Signup">
-->
<div id="page-container">
<div id="content-wrap">
<!-- all other page content -->
</div>
<footer id="footer">
<p class=c opyright>©2021 Sweet T's Vegan Bakery</p>
</footer>
</div>
</body>
</html>我的页脚也没有扩展到视口的全长。我的产品卡一直到页面底部。有任何想法吗？