style.css
body{
background-image: url(assets/background.png);
}
h1{
margin: auto;
margin-bottom: 20px;
}
.header{
background-color: lavender;
background-size: cover;
position: relative;
max-width: 873px;
margin: auto;
margin-top: 20px;
height: 256px;
box-sizing: border-box;
padding: 50px;
border-style: outset ;
border-color: lightgray;
border-width: 5px;
border-radius: 4px;
}
.titlu{
font-family: 'Roboto Mono', monospace;
font-size: 100px;
color:#050505;
text-align: center;
text-shadow: #e0e0e0 1px 1px 0, 4px 2px 2px rgba(206,89,55,0);
}
.navbar{
display: flex;
justify-content: space-evenly;
padding: 2px;
}
@keyframes img-big{
from{transform: scale(0, 0);}
to{transform: scale(100px, 100px);}
}
.navbar li{
font-family: 'Roboto Mono', monospace;
font-size: 30px;
font-weight: 700;
text-decoration: none;
color: darkslategray;
border-style: outset ;
border-color: lightgray;
border-width: 3px;
border-radius: 4px;
}
.navbar:hover li{
animation: img-big 0.6s linear;
}
a{
text-decoration: none;
}
.wrapper{
max-width: 800px;
margin: auto;
margin-top: 10px;
background-color:lavender;
padding: 32px;
overflow: hidden;
border-style: outset ;
border-color: lightgray;
border-width: 5px;
border-radius: 4px;
}
.card{
margin-bottom:24px;
box-shadow: 10px 10px 20px 0px rgba(0,0,0,0.75);
overflow: hidden;
padding: 8px;
border-radius: 7px;
}
.card img{
height:150px;
width:200px;
object-fit: cover;
float: left;
margin-right:10px;
}
.card a{
float:right;
margin-right: 20px;
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@200&display=swap" rel="stylesheet">
<title>Best Sounding Swithches(!In MY OPINION!)</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<div class="titlu">SWITCHES</div>
<ul class="navbar" type="none">
<a href="index.html"><li>Home</li></a>
<a href="#"><li>Menu</li></a>
<a href="#"><li>Gallery</li></a>
<a href="#"><li>Contact</li></a>
</ul>
</div>
<div class="wrapper">
<div class="card">
<img src="assets/alpaca.jpeg">
<p><b>Alpacas</b> are smooth linear switches with gold plated 62g springs (bottom out). Colors are based on the SA Bliss colorway brought to us by Minterly.
Top housing is polycarbonate. Bottom housing is nylon. Stem is POM.
Standard Alpaca has solid dark gray housing with a pink stem.</p>
<a href="Alpaca.html">Find out more</a>
</div>
<div class="card">
<img src="assets/banana split.jpeg">
<p><b>Banana Split</b> switches are linear switches with a 62g spring, nylon and polycarbonate blended housing, and POM stem.</p>
<a href="BananaSplit.html">Find out more</a>
</div>
<div class="card">
<img src="assets/nkcream.jpg">
<p><b>NovelKeys Cream</b> switches are a brand new linear switch. Featuring housing and stem that is made out of self lubricating POM, this linear is a smooth and unique experience. The switch is also a first for Kailh, as it features MX style latching for the housing.</p>
<a href="nkCream.html">Find out more</a>
</div>
</div>
</body>
</html>
alpaca.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alpaca</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<h1><b>Alpaca</b></h1><a href="https://mykeyboard.eu/catalogue/alpaca-switches-10-pack_2041/">(mykeyboard.eu)</a>
<h2>Smooth & Linear</h2>
<p>Alpacas are smooth linear switches with gold plated 62g springs (bottom out). Colors are based on the SA Bliss colorway brought to us by Minterly.
Top housing is polycarbonate. Bottom housing is nylon. Stem is POM.
Standard Alpaca has solid dark gray housing with a pink stem. </p>
<h4>Disclaimer:</h4>
<p>
There is no actual V2 design of these switches. Durock and JWK have produced multiple new molds in 2020 to increase production capacity. Large orders (500K+) such as this Alpaca order had Durock use multiple molds split over a multi vendor order.
Because of this, minor changes are noticable over various switches even within a single bag of switches purchased from us. We are not mixing old and new stock so please keep in mind you can notice minor differences when ordering these switches. Durock and JWK believe there is no notice in performance different.
</p>
<a href="index.html">Back</a>
</div>
</body>
</html>
BananaSplit.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Banana Split</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<h1><b>Banana Split</b></h1><a href="https://thekey.company/products/c3-equalz-x-tkc-banana-split-switches">(thekey.company)</a>
<h2>Smooth & Linear</h2>
<p>These are the first entry into our Snack Time Switch Line: Banana Split switches are linear switches with a 62g spring, nylon and polycarbonate blended housing, and POM stem.</p>
<h4>ABOUT THE SWITCHES</h4>
<ul>
<li>Linear switch with 62g spring. These have a smooth keypress with no tactile bump.</li>
<li>Nylon and polycarbonate blended housing, with POM (polyoxymethylene) stem.</li>
<li>PCB mount.</li>
<li>Pre-lubed in factory – very light application. You can lube these switches on top of this.</li>
<li>Packaged in plastic tubs with sticker, like Tangerine and Kiwi switch containers.</li>
<li>Designed by C³Equalz and manufactured by JWK.</li>
</ul>
<a href="index.html">Back</a>
</body>
</html>
nkCream.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NovelKeys Cream</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<h1><b>NovelKeys Cream</b></h1><a href="https://kbdfans.com/products/novelkey-x-kailh-linear-cream-switch">(kbdfans.com)</a>
<h2>Linear</h2>
<p>CREAM SWITCHES
NovelKeys Cream switches are a brand new linear switch. Featuring housing and stem that is made out of self lubricating POM, this linear is a smooth and unique experience. The switch is also a first for Kailh, as it features MX style latching for the housing.</p>
<h4>NovelKeys Cream:</h4>
<ul>
<li> Linear</li>
<li> 4mm travel</li>
<li> 2mm operating</li>
<li> 55g actuation</li>
<li> 70g bottom out</li>
</ul>
<a href="index.html">Back</a>
</body>
</html>
This is what I have for now and when I hover they all do the animation. I tried to put ":hover" after ".navbar li" and if I did that it would glitch and appear and disappear over and over. I want to make it when i hover over the navbar button, the screen turns blurry and the button gets bigger.
What about this?
.navbar a:hover li{
animation: img-big 0.6s linear forwards;
}