Initial commit

css/main.css

@@ -0,0 +1,213 @@
+@font-face {
+	font-family: Prociono;
+	src: url('../font/Prociono.ttf');
+	font-display: swap;
+}
+
+* {
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+	font-family: Prociono;
+}
+
+.content {
+	max-width: 900px;
+	margin: 50px auto;
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	grid-gap: 10px;
+	grid-auto-rows: minmax(50px, auto);
+}
+
+section {
+	margin-bottom: 30px;
+}
+
+h4 {
+	font-size: 22px;
+	margin-bottom: 10px;
+}
+
+.main {
+	grid-column: 1;
+	grid-row: 1;
+}
+
+.main > img {
+	width: 100%;
+}
+
+.details {
+	grid-column: 2;
+	grid-row: 1;
+	margin-top: auto;
+	margin-bottom: 35px;
+	margin-left: 20px;
+	letter-spacing: 0.35em;
+	line-height: 1.6;
+}
+
+.name {
+  margin-bottom: 10px;
+}
+
+.ingredients {
+	grid-column: 1 / 3;
+	grid-row: 2;
+}
+
+.facts {
+	grid-column: 1 / 3;
+	grid-row: 3;
+}
+
+table {
+	border-collapse: collapse;
+	width: 100%;
+}
+
+tr:nth-child(odd) {
+	background-color: ButtonFace;
+}
+
+td {
+	padding-left: 10px;
+}
+
+td > .marged {
+	margin-left: 20px;
+}
+
+/*Nav*/
+
+li {
+	list-style: none;
+}
+
+.lang {
+	display: flex;
+	align-items: center;
+	padding-right: 100px;
+}
+
+.lang img {
+  width: 60px;
+	margin-left: 10px;
+}
+
+.mega-menu a {
+	display: block;
+	color: grey;
+	text-decoration: none;
+}
+
+.mega-menu a:hover {
+	background: lightgrey;
+}
+
+.mega-menu-main {
+	display: flex;
+	position: relative;
+	background: white;
+	flex-direction: row-reverse;
+}
+
+.lvl-0 > a {
+	padding: 12px 25px;
+}
+
+.lvl-0:hover > ul {
+	display: flex;
+}
+
+.mega-menu-tab {
+	display: none;
+  /*display: flex;*/
+	position: absolute;
+	top: 100%;
+	left: 0;
+	width: 100%;
+	background: white;
+}
+
+.lvl-1 {
+	flex: 1;
+	width: 100%;
+	margin: 0 15px;
+}
+
+.lvl-1 h2 {
+	margin: 0;
+	padding: 0;
+	color: white;
+}
+
+.lvl-2 {
+	padding-top: 15px;
+}
+
+.lvl-2 a {
+	padding: 8px 0;
+}
+
+@media(max-width:950px) {
+	.content {
+		max-width: 700px;
+	}
+
+	.details {
+		letter-spacing: 0.2em;
+	}
+}
+
+@media(max-width:750px) {
+	.content {
+		max-width: 600px;
+	}
+
+	.details {
+		letter-spacing: 0.1em;
+	}
+}
+
+@media(max-width:650px) {
+	.content {
+		max-width: max-content;
+		margin-left: 20px;
+		margin-right: 20px;
+	}
+
+	.main {
+		grid-column: 1 / 3;
+		grid-row: 2;
+		text-align: center;
+	}
+
+	.main > img {
+		width: 75%;
+	}
+
+	.details {
+		grid-column: 1 / 3;
+		grid-row: 1;
+		text-align: center;
+		letter-spacing: 0.35em;
+	}
+
+	.ingredients {
+		grid-row: 3;
+	}
+
+	.facts {
+		grid-column: 1 / 3;
+		grid-row: 4;
+	}
+}
+
+@media(max-width:500px) {
+
+	.details {
+		letter-spacing: 0.2em;
+	}
+}