@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
/* Importerar typsnitt från Google Fonts, Raleway och Roboto med olika varianter. */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
border: none;
outline: none;
scroll-behavior: smooth;
font-family: "Roboto", sans-serif;
}
/* Deklarerar CSS-variabler för att lätt kunna ändra färger och storlekar på text och bakgrund. */
:root {
--text-color: #FDFFF5;
--bg-color: #8C8453;
--main-color: #1B1E10;
--border-color: #677786;
--h1-front: 5.5rem;
--h2-front: 3rem;
--p-font: 1.2rem;
}
/* Inställningar för body: färg och bakgrundsbild, där bilden täcker hela bakgrunden och stannar fast vid scroll. */
body {
color: var(--text-color);
background: var(--bg-color);
background-image: url("./image/golf.png");
background-size: cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
}
/* Header är fixerat längst upp och täcker hela bredden. Innehållet placeras horisontellt med flexbox och en suddig bakgrund används. */
header {
top: 0px;
left: 0;
width: 100%;
padding: 20px 50px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 100;
margin-top: 10px;
}
/* Stil på logotypen: stor text, vit färg och fet stil. */
.logo {
font-size: 50px;
color: var(--text-color);
font-weight: 700;
text-decoration: none;
}
/* Färgar all text inuti span-element med huvudfärgen. */
span {
color: var(--main-color);
}
/* Flexbox-layout för navigeringsfältet (navbar) för horisontell placering av länkar. */
.navbar {
display: flex;
}
/* Stil på navigeringslänkarna: vit text, fet stil, padding och rundade hörn. Smooth transition vid hover. */
.navbar a {
color: var(--text-color);
font-size: var(--p-font);
font-weight: 600;
margin: 5px;
transition: all .5s ease;
padding: 10px;
border-radius: 5px;
}
/* Vid hover: bakgrunden ändras till en guldbrun färg. */
.navbar a:hover {
background: #8D7014;
}
/* Flexbox för "följ oss"-sektionen med vertikal centrering. */
.follow-oss {
display: flex;
align-items: center;
}
/* Första länken i "följ oss"-sektionen har en unik stil: guldbrun färg, fet stil, gräns och rundade hörn med mörk bakgrund. */
.follow-oss a:first-child {
color: #8D7014;
font-size: var(--p-font);
margin-right: 15px;
border: 3px solid;
padding: 7px;
border-radius: 5px;
background-color: var(--main-color);
}
/* Allmänna länkar i "följ oss"-sektionen: vit text, mellanstorlek och smooth transition vid hover. */
.follow-oss a {
vertical-align: middle;
font-size: 20px;
color: var(--text-color);
margin-right: 22px;
margin-left: 5px;
transition: all .5s ease;
font-weight: 600;
}
/* Vid hover på första länken: bakgrunden blir transparent och färgen. */
.follow-oss a:first-child:hover {
background: transparent;
color: #8C9CA3;
}
/* Vid hover på övriga länkar: textfärgen ändras till guldbrun. */
.follow-oss a:hover {
color: #8D7014;
}
/* Centrerar ett element både vertikalt och horisontellt på sidan. */
main{
font-size: 1em;
color: white;
padding: 1rem;
text-align: center;
padding-bottom: 10rem;
background: linear-gradient(to bottom,rgba(0, 0, 0, 0.699), rgba(65, 51, 23, 0.836), rgba(161, 124, 53, 0.719));
background-attachment: fixed;
}
.shop{
margin: auto;
padding: 10px;
font-size: 3.5em;
width: 34rem;
font-weight: 200;
color: white;
}
.set{
margin: auto;
margin-top: 1rem;
padding: 10px;
font-size: 2.5em;
border: 1px solid #ccc;
width: 32rem;
border-radius: 5px;
background-color: #638c53;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.klubbor{
margin: auto;
margin-top: 1rem;
padding: 10px;
font-size: 2.5em;
border: 1px solid #ccc;
width: 32rem;
border-radius: 5px;
background-color: #638c53;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.cart{
margin-bottom: -10px;
margin-left: 10px;
padding-top: 30px;
width: 30px;
}
.produkter {
display: flex;
flex-direction:row;
flex-wrap: wrap;
justify-content:center;
padding: 20px;
}
.produkter2 {
display: flex;
flex-direction:row;
flex-wrap: wrap;
justify-content:center;
padding: 20px;
}
.produkt {
background-color: #8c8453d5;
border: 1px solid #ccc;
border-radius: 5px;
margin: 10px;
padding: 15px;
text-align: center;
width: 200px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.produkt:hover{
transform:scale(1.1);
transition: all ease-in 0.2s;
}
.produkt img {
max-width: 100%;
height: auto;
}
button {
background-color: #28a745;
border: none;
color: white;
padding: 10px;
cursor: pointer;
border-radius: 5px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
button:hover {
background-color: #218838;
}
.dropbutton {
background-color: #28a745;
border: none;
color: white;
padding: 10px;
cursor: pointer;
border-radius: 5px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropcontent {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
margin-left: -1rem;
top: 2.3rem;
}
.dropcontent a {
color: rgb(255, 255, 255);
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropcontent a:hover {background-color: #218838; border-radius: 5px;}
.dropdown:hover .dropcontent {display: block;background-color: #638c53; border-radius: 5px; }
.dropdown:hover .dropbutton {background-color: #3e8e41;}
footer {
position: fixed;
text-align: center;
padding: 10px;
background-color: #333;
color: white;
bottom: 0;
width: 100%;
}<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Store</title>
<link rel="stylesheet" href="style1.css">
<link
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet">
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
</head>
<body>
<header>
<a href="#" class="logo">West Coast Golf</a>
<ul class="navbar">
<li><a href="../Startsida/index.html">Home</a></li>
<li><a href="#">Resturang</a></li>
<li><a href="../Medlem/Login.html">Medlemssektion</a></li>
<li><a href="../Boka/Boka.html">Boka</a></li>
<li><a href="../Om oss/Om oss.html">Om oss</a></li>
<li><a href="./shop.html">Shop</a></li>
</ul>
<div class="follow-oss">
<a href="#"><i class='bx bx-restaurant'></i></a>
<a href="#"><i class='bx bx-home-heart'></i></a>
<a href="#"><i class='bx bxl-instagram'></i></a>
<a href="#"><i class='bx bxl-facebook-circle'></i></a>
</div>
</header>
<main>
<div class="shop">Välkommen till våran shop</div>
<div class="set">Golf set</div>
<section class="produkter">
<div class="produkt">
<img src="./image/Golfset barn.png" alt="Produkt 1">
<h2>Golf-set Junior</h2>
<p>749 kr</p>
<button>Lägg i kundvagn</button>
<img class="cart" src="./image/shopping-cart.png" alt="shopping-cart">
</div>
<div class="produkt">
<img src="./image/Callaway golfset.png" alt="Produkt 2">
<h2>Callaway-XL</h2>
<p>3400 kr</p>
<button>Lägg i kundvagn</button>
<img class="cart" src="./image/shopping-cart.png" alt="shopping-cart">
</div>
<div class="produkt">
<img src="./image/X LZR womens set.webp" alt="Produkt 3">
<h2>X LZR Womens</h2>
<p>2200 kr</p>
<button>Lägg i kundvagn</button>
<img class="cart" src="./image/shopping-cart.png" alt="shopping-cart">
</div>
<div class="produkt">
<img src="./image/Callaway Pro mens.webp" alt="Produkt 4">
<h2>Callaway-Pro</h2>
<p>5499 kr</p>
<button>Lägg i kundvagn</button>
<img class="cart" src="./image/shopping-cart.png" alt="shopping-cart">
</div>
</section>
<div class="klubbor">Klubbor</div>
<section class="produkter2">
<div class="produkt">
<img src="./image/Drivers.png" alt="Produkt 5">
<h2>Drivers</h2>
<p>300-2500 kr</p>
<div class="dropdown">
<button class="dropbutton">Välj klubba</button>
<div class="dropcontent">
<a href="#">Taylor Made Stealth 2</a>
<a href="#">Ping G425 Max</a>
<a href="#">Callaway Paradym</a>
</div>
</div>
<img class="cart" src="./image/shopping-cart.png" alt="shopping-cart">
</div>
<div class="produkt">
<img src="./image/FAIRWAY WOODS.png" alt="Produkt 6">
<h2>Fairway woods</h2>
<p>200-2000 kr</p>
<div class="dropdown">
<button class="dropbutton">Välj klubba</button>
<div class="dropcontent">
<a href="#">Cobra Darkspeed X</a>
<a href="#">Wilson Launch Pad 2</a>
<a href="#">Srixon ZX</a>
</div>
</div>
<img class="cart" src="./image/shopping-cart.png" alt="shopping-cart">
</div>
<div class="produkt">
<img src="./image/PUTTER.png" alt="Produkt 7">
<h2>Putters</h2>
<p>250-1900 kr</p>
<div class="dropdown">
<button class="dropbutton">Välj klubba</button>
<div class="dropcontent">
<a href="#">TaylorMade Spidertour X</a>
<a href="#">Odyssey Elven Tour</a>
<a href="#">Cleveland Frontline Iso</a>
</div>
</div>
<img class="cart" src="./image/shopping-cart.png" alt="shopping-cart">
</div>
<div class="produkt">
<img src="./image/WEDGAR.webp" alt="Produkt 8">
<h2>Wedgars</h2>
<p>200-2400 kr</p>
<div class="dropdown">
<button class="dropbutton">Välj klubba</button>
<div class="dropcontent">
<a href="#">Cleveland RTX6</a>
<a href="#">Callaway Opus</a>
<a href="#">Titleist SM10</a>
</div>
</div>
<img class="cart" src="./image/shopping-cart.png" alt="shopping-cart">
</div>
</section>
</main>
<footer>
<p>Copyright © 2024</p>
<p>West Coast Golf ™</p>
</footer>
</body>
</html>我的渐变背景在 1000px 之后随着其余的 div 一起缩小，我想保持全屏，无法弄清楚。我还希望我的项目在调整大小时居中而不是粘在屏幕左侧，我该怎么做？
我尝试过使用宽度、最大/最小宽度，但随后我的弹性盒的响应就消失了，我对这一切都很陌生，所以我现在不知所措。
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
/* Importerar typsnitt från Google Fonts, Raleway och Roboto med olika varianter. */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
border: none;
outline: none;
scroll-behavior: smooth;
font-family: "Roboto", sans-serif;
}
/* Deklarerar CSS-variabler för att lätt kunna ändra färger och storlekar på text och bakgrund. */
:root {
--text-color: #FDFFF5;
--bg-color: #8C8453;
--main-color: #1B1E10;
--border-color: #677786;
--h1-front: 5.5rem;
--h2-front: 3rem;
--p-font: 1.2rem;
}
/* Inställningar för body: färg och bakgrundsbild, där bilden täcker hela bakgrunden och stannar fast vid scroll. */
body {
color: var(--text-color);
background: var(--bg-color);
background-image: url("./image/golf.png");
background-size: cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
}
/* Header är fixerat längst upp och täcker hela bredden. Innehållet placeras horisontellt med flexbox och en suddig bakgrund används. */
header {
top: 0px;
left: 0;
width: 100%;
padding: 20px 50px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 100;
margin-top: 10px;
}
/* Stil på logotypen: stor text, vit färg och fet stil. */
.logo {
font-size: 50px;
color: var(--text-color);
font-weight: 700;
text-decoration: none;
}
/* Färgar all text inuti span-element med huvudfärgen. */
span {
color: var(--main-color);
}
/* Flexbox-layout för navigeringsfältet (navbar) för horisontell placering av länkar. */
.navbar {
display: flex;
}
/* Stil på navigeringslänkarna: vit text, fet stil, padding och rundade hörn. Smooth transition vid hover. */
.navbar a {
color: var(--text-color);
font-size: var(--p-font);
font-weight: 600;
margin: 5px;
transition: all .5s ease;
padding: 10px;
border-radius: 5px;
}
/* Vid hover: bakgrunden ändras till en guldbrun färg. */
.navbar a:hover {
background: #8D7014;
}
/* Flexbox för "följ oss"-sektionen med vertikal centrering. */
.follow-oss {
display: flex;
align-items: center;
}
/* Första länken i "följ oss"-sektionen har en unik stil: guldbrun färg, fet stil, gräns och rundade hörn med mörk bakgrund. */
.follow-oss a:first-child {
color: #8D7014;
font-size: var(--p-font);
margin-right: 15px;
border: 3px solid;
padding: 7px;
border-radius: 5px;
background-color: var(--main-color);
}
/* Allmänna länkar i "följ oss"-sektionen: vit text, mellanstorlek och smooth transition vid hover. */
.follow-oss a {
vertical-align: middle;
font-size: 20px;
color: var(--text-color);
margin-right: 22px;
margin-left: 5px;
transition: all .5s ease;
font-weight: 600;
}
/* Vid hover på första länken: bakgrunden blir transparent och färgen. */
.follow-oss a:first-child:hover {
background: transparent;
color: #8C9CA3;
}
/* Vid hover på övriga länkar: textfärgen ändras till guldbrun. */
.follow-oss a:hover {
color: #8D7014;
}
/* Centrerar ett element både vertikalt och horisontellt på sidan. */
main{
font-size: 1em;
color: white;
padding: 1rem;
text-align: center;
padding-bottom: 10rem;
background: linear-gradient(to bottom,rgba(0, 0, 0, 0.699), rgba(65, 51, 23, 0.836), rgba(161, 124, 53, 0.719));
background-attachment: fixed;
}
.shop{
margin: auto;
padding: 10px;
font-size: 3.5em;
width: 34rem;
font-weight: 200;
color: white;
}
.set{
margin: auto;
margin-top: 1rem;
padding: 10px;
font-size: 2.5em;
border: 1px solid #ccc;
width: 32rem;
border-radius: 5px;
background-color: #638c53;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.klubbor{
margin: auto;
margin-top: 1rem;
padding: 10px;
font-size: 2.5em;
border: 1px solid #ccc;
width: 32rem;
border-radius: 5px;
background-color: #638c53;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.cart{
margin-bottom: -10px;
margin-left: 10px;
padding-top: 30px;
width: 30px;
}
.produkter {
display: flex;
flex-direction:row;
flex-wrap: wrap;
justify-content:center;
padding: 20px;
}
.produkter2 {
display: flex;
flex-direction:row;
flex-wrap: wrap;
justify-content:center;
padding: 20px;
}
.produkt {
background-color: #8c8453d5;
border: 1px solid #ccc;
border-radius: 5px;
margin: 10px;
padding: 15px;
text-align: center;
width: 200px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.produkt:hover{
transform:scale(1.1);
transition: all ease-in 0.2s;
}
.produkt img {
max-width: 100%;
height: auto;
}
button {
background-color: #28a745;
border: none;
color: white;
padding: 10px;
cursor: pointer;
border-radius: 5px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
button:hover {
background-color: #218838;
}
.dropbutton {
background-color: #28a745;
border: none;
color: white;
padding: 10px;
cursor: pointer;
border-radius: 5px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropcontent {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
margin-left: -1rem;
top: 2.3rem;
}
.dropcontent a {
color: rgb(255, 255, 255);
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropcontent a:hover {background-color: #218838; border-radius: 5px;}
.dropdown:hover .dropcontent {display: block;background-color: #638c53; border-radius: 5px; }
.dropdown:hover .dropbutton {background-color: #3e8e41;}
footer {
position: fixed;
text-align: center;
padding: 10px;
background-color: #333;
color: white;
bottom: 0;
width: 100%;
}
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Store</title>
<link rel="stylesheet" href="style1.css">
<link
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet">
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
</head>
<body>
<header>
<a href="#" class="logo">West Coast Golf</a>
<ul class="navbar">
<li><a href="../Startsida/index.html">Home</a></li>
<li><a href="#">Resturang</a></li>
<li><a href="../Medlem/Login.html">Medlemssektion</a></li>
<li><a href="../Boka/Boka.html">Boka</a></li>
<li><a href="../Om oss/Om oss.html">Om oss</a></li>
<li><a href="./shop.html">Shop</a></li>
</ul>
<div class="follow-oss">
<a href="#"><i class='bx bx-restaurant'></i></a>
<a href="#"><i class='bx bx-home-heart'></i></a>
<a href="#"><i class='bx bxl-instagram'></i></a>
<a href="#"><i class='bx bxl-facebook-circle'></i></a>
</div>
</header>
<main>
<div class="shop">Välkommen till våran shop</div>
<div class="set">Golf set</div>
<section class="produkter">
<div class="produkt">
<img src="./image/Golfset barn.png" alt="Produkt 1">
<h2>Golf-set Junior</h2>
<p>749 kr</p>
<button>Lägg i kundvagn</button>
<img class="cart" src="./image/shopping-cart.png" alt="shopping-cart">
</div>
<div class="produkt">
<img src="./image/Callaway golfset.png" alt="Produkt 2">
<h2>Callaway-XL</h2>
<p>3400 kr</p>
<button>Lägg i kundvagn</button>
<img class="cart" src="./image/shopping-cart.png" alt="shopping-cart">
</div>
<div class="produkt">
<img src="./image/X LZR womens set.webp" alt="Produkt 3">
<h2>X LZR Womens</h2>
<p>2200 kr</p>
<button>Lägg i kundvagn</button>
<img class="cart" src="./image/shopping-cart.png" alt="shopping-cart">
</div>
<div class="produkt">
<img src="./image/Callaway Pro mens.webp" alt="Produkt 4">
<h2>Callaway-Pro</h2>
<p>5499 kr</p>
<button>Lägg i kundvagn</button>
<img class="cart" src="./image/shopping-cart.png" alt="shopping-cart">
</div>
</section>
<div class="klubbor">Klubbor</div>
<section class="produkter2">
<div class="produkt">
<img src="./image/Drivers.png" alt="Produkt 5">
<h2>Drivers</h2>
<p>300-2500 kr</p>
<div class="dropdown">
<button class="dropbutton">Välj klubba</button>
<div class="dropcontent">
<a href="#">Taylor Made Stealth 2</a>
<a href="#">Ping G425 Max</a>
<a href="#">Callaway Paradym</a>
</div>
</div>
<img class="cart" src="./image/shopping-cart.png" alt="shopping-cart">
</div>
<div class="produkt">
<img src="./image/FAIRWAY WOODS.png" alt="Produkt 6">
<h2>Fairway woods</h2>
<p>200-2000 kr</p>
<div class="dropdown">
<button class="dropbutton">Välj klubba</button>
<div class="dropcontent">
<a href="#">Cobra Darkspeed X</a>
<a href="#">Wilson Launch Pad 2</a>
<a href="#">Srixon ZX</a>
</div>
</div>
<img class="cart" src="./image/shopping-cart.png" alt="shopping-cart">
</div>
<div class="produkt">
<img src="./image/PUTTER.png" alt="Produkt 7">
<h2>Putters</h2>
<p>250-1900 kr</p>
<div class="dropdown">
<button class="dropbutton">Välj klubba</button>
<div class="dropcontent">
<a href="#">TaylorMade Spidertour X</a>
<a href="#">Odyssey Elven Tou