BigSmoke

Чтобы стили заработали на странице вы должны подключить их как обычно:

<link rel="stylesheet" type="text/css" href="css/style.min.css">

А эта строчка -

<link rel="preload" href="css/style.min.css" as="style">

не подключает стили, а говорит браузеру, что этот файл - "style.min.css" нужно начать загружать прямо сейчас, даже если браузер еще не дошел до строчки, где этот файл подключается на страницу.

Больше инфы про rel="preload" на MDN.

float: left для legend даст нужный эффект. тык

Вот так можно сделать.

display: flex; для .box

Нет.

При клике на кнопку "корзина":
- скрываем кнопку "корзина" (display: none)
- показываем блок (display: block(flex)) с инпутом и двумя кнопками, которыми можно изменять количество товара в большую или меньную сторону
- Если после клика на кнопку уменьшения количество товара его станет меньше 1, то делаем все наоборот - блоку с инпутом display: none, а кнопке "корзина" (display: block(flex))

Да вроде нормально ваш код работает (тык), размер шрифта меняется.

Наверное в вашей ситуации нужно задать родителю(блоку) два класса-микса.

Выглядить это будет так:

.button <-- это ваша кнопка
	какие-то стили
	этой кнопки        
	
.content <-- это блок, в котором она будет находится на обеих страницах
	какие-то стили
	этого блока
	
	&__contact-button
		margin 40px auto
		
	&__index-button
		margin 20px 30px

Далее в index.html вставляете эту кнопку так:

<button class="button content__index-button">a</button>

А в contact.html так

<button class="button content__contact-button">b</button>

Можно с помощью позиционирования.

body {
  width:100%;
  height:800px;
}
.box {
  width:20%;
  height:25%;
  background-color:green;
  position: relative;
}
.red {
  width:100%;
  height:50px;
  background-color:red;
}
.blue {
  width:100%;
  height:30px;
  background-color:blue;
  position: absolute;
  bottom: 0;
}

Или флексами.

body {
  width:100%;
  height:800px;
}
.box {
  width:20%;
  height:25%;
  background-color:green;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.red {
  width:100%;
  height:50px;
  background-color:red;
}
.blue {
  width:100%;
  height:30px;
  background-color:blue;
}

<button><span>BUY NOW</span></button>

button{
  border: 1px solid #ffffff;
  padding-left: 40px;
  padding-right: 40px;
  padding-top: 10px;
  padding-bottom: 10px;
  background: none;
  transform: skewX(-15deg);
}
span {
  transform: skewX(15deg);
  font-size: 18px;
  color: rgb(255, 255, 255);
  text-transform: uppercase;
  display:block;
}

Суть тут в том, что кнопку поворачиваем в одну сторону, а ее содержимое в противоположную.

<div class="container">
  <aside></aside>
  <aside></aside>
  <main></main>
  <aside></aside>
  <aside></aside>
</div>

.container {
  width:900px;
  height:200px;
  display:flex;
  flex-direction:column;
  flex-wrap:wrap;
}
aside {
  width:300px;
  height:100px;
}
main {
  width:300px;
  height:200px;
}