Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!DOCTYPE html>

<html>

	<head>
		<title>Web Shop</title>
		<meta charset="utf-8">
		<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">

		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js">
			$(document).ready(function() {
				$("a.scrollto").click(function() {
					var elementClick = $(this).attr("href")
					var destination = $(elementClick).offset().top;
					jQuery("html:not(:animated),body:not(:animated)").animate({
						scrollTop: destination
					}, 800);
					return false;
				});
			});
		</script>

		<style type="text/css">

			::-webkit-scrollbar {
		    	width: 0px;
		    	background: transparent;
			}
			
			html, body {
				padding: 0;
				margin: 0;
			}

			body {
				background-color: #222222;
				overflow-x: hidden;
			}

			a {
				text-decoration: none;
				color: inherit;
			}

			.first_background {
				position: absolute;
				z-index: -1;
				filter: brightness(0.4);
			}

			.logo {
				position: absolute;
				z-index: 1;
				margin-top: -50px;
				margin-left: 25px;
			}

			.top_text1 {
				position: absolute;
				z-index: 1;
				font-family: "Roboto Thin", sans-serif;
				font-size: 21px;
				font-weight: 100;
				letter-spacing: 1px;
				color: white;
				margin-top: 35.5px;
				margin-left: 342.5px;
				transition: 0.2s;
			}

			.top_text2 {
				position: absolute;
				z-index: 1;
				font-family: "Roboto Thin", sans-serif;
				font-size: 21px;
				font-weight: 100;
				letter-spacing: 1px;
				color: white;
				margin-top: 35.5px;
				margin-left: 430px;
				transition: 0.2s;
			}

			.top_text3 {
				position: absolute;
				z-index: 1;
				font-family: "Roboto Thin", sans-serif;
				font-size: 21px;
				font-weight: 100;
				letter-spacing: 1px;
				color: white;
				margin-top: 35.5px;
				margin-left: 517.5px;
				transition: 0.2s;
			}

			.top_text4 {
				position: absolute;
				z-index: 1;
				font-family: "Roboto Thin", sans-serif;
				font-size: 21px;
				font-weight: 100;
				letter-spacing: 1px;
				color: white;
				margin-top: 35.5px;
				margin-left: 637.5px;
				transition: 0.2s;
			}

			.top_text5 {
				position: absolute;
				z-index: 1;
				font-family: "Roboto Thin", sans-serif;
				font-size: 21px;
				font-weight: 100;
				letter-spacing: 1px;
				color: white;
				margin-top: 35.5px;
				margin-left: 761px;
				transition: 0.2s;
			}

			.top_text6 {
				position: absolute;
				z-index: 1;
				font-family: "Roboto Thin", sans-serif;
				font-size: 21px;
				font-weight: 100;
				letter-spacing: 1px;
				color: white;
				margin-top: 35.5px;
				margin-left: 900px;
				transition: 0.2s;
			}

			.top_text7 {
				position: absolute;
				z-index: 1;
				font-family: "Roboto Thin", sans-serif;
				font-size: 21px;
				font-weight: 100;
				letter-spacing: 1px;
				color: white;
				margin-top: 35.5px;
				margin-left: 1020px;
				transition: 0.2s;
			}

			.top_text1::before {
				content: "";
				position: absolute;
				z-index: 1;
				width: 100%;
				height: 1px;
				bottom: 0;
				left: 0;
				background-color: #C5B299;
				transform: scaleX(0);
				transition: 0.2s;
			}

			.top_text2::before {
				content: "";
				position: absolute;
				z-index: 1;
				width: 100%;
				height: 1px;
				bottom: 0;
				left: 0;
				background-color: #C5B299;
				transform: scaleX(0);
				transition: 0.2s;
			}

			.top_text3::before {
				content: "";
				position: absolute;
				z-index: 1;
				width: 100%;
				height: 1px;
				bottom: 0;
				left: 0;
				background-color: #C5B299;
				transform: scaleX(0);
				transition: 0.2s;
			}

			.top_text4::before {
				content: "";
				position: absolute;
				z-index: 1;
				width: 100%;
				height: 1px;
				bottom: 0;
				left: 0;
				background-color: #C5B299;
				transform: scaleX(0);
				transition: 0.2s;
			}

			.top_text5::before {
				content: "";
				position: absolute;
				z-index: 1;
				width: 100%;
				height: 1px;
				bottom: 0;
				left: 0;
				background-color: #C5B299;
				transform: scaleX(0);
				transition: 0.2s;
			}

			.top_text6::before {
				content: "";
				position: absolute;
				z-index: 1;
				width: 100%;
				height: 1px;
				bottom: 0;
				left: 0;
				background-color: #C5B299;
				transform: scaleX(0);
				transition: 0.2s;
			}

			.top_text7::before {
				content: "";
				position: absolute;
				z-index: 1;
				width: 100%;
				height: 1px;
				bottom: 0;
				left: 0;
				background-color: #C5B299;
				transform: scaleX(0);
				transition: 0.2s;
			}

			.top_text1:hover:before {
				transform: scaleX(1);
			}

			.top_text2:hover:before {
				transform: scaleX(1);
			}

			.top_text3:hover:before {
				transform: scaleX(1);
			}

			.top_text4:hover:before {
				transform: scaleX(1);
			}

			.top_text5:hover:before {
				transform: scaleX(1);
			}

			.top_text6:hover:before {
				transform: scaleX(1);
			}

			.top_text7:hover:before {
				transform: scaleX(1);
			}

			.top_text1:hover {
				color: #C5B299;
			}

			.top_text2:hover {
				color: #C5B299;
			}

			.top_text3:hover {
				color: #C5B299;
			}

			.top_text4:hover {
				color: #C5B299;
			}

			.top_text5:hover {
				color: #C5B299;
			}

			.top_text6:hover {
				color: #C5B299;
			}

			.top_text7:hover {
				color: #C5B299;
			}

			.shopping_bag1 {
				position: absolute;
				z-index: 2;
				margin-top: 25px;
				margin-left: 1165px;
				transition: 0.2s;
			}

			.search1 {
				position: absolute;
				z-index: 2;
				margin-top: 30px;
				margin-left: 1225px;
				transition: 0.2s;
			}

			.shopping_bag2 {
				position: absolute;
				z-index: 1;
				margin-top: 25px;
				margin-left: 1165px;
			}

			.search2 {
				position: absolute;
				z-index: 1;
				margin-top: 30px;
				margin-left: 1225px;
			}

			.shopping_bag1:hover {
				opacity: 0;
			}

			.search1:hover {
				opacity: 0;
			}

			.start_name {
				position: absolute;
				z-index: 1;
				font-family: "Roboto Black", sans-serif;
				font-size: 40px;
				font-weight: 100;
				letter-spacing: 2px;
				color: white;
				margin-top: 240px;
				margin-left: 334px;
			}

			.start_info {
				position: absolute;
				z-index: 1;
				font-family: "Roboto Thin", sans-serif;
				font-size: 20px;
				font-weight: 100;
				letter-spacing: 0.5px;
				line-height: 17.5px;
				text-align: center;
				color: white;
				margin-top: 315px;
				margin-left: 360px;
			}

			.start_button {
				position: absolute;
				z-index: 1;
				font-family: "Roboto Medium", sans-serif;
				font-size: 17.5px;
				font-weight: 100;
				letter-spacing: 1px;
				color: white;
				margin-top: 440px;
				margin-left: 605px;
				width: 160px;
				height: 60px;
				text-align: center;
				line-height: 62.5px;
				background-color: #998675;
				color: white;
				border-radius: 10px;
				box-shadow: 0 8px 15px rgba(0,0,0,.1);
				transition: 0.2s;
			}

			.start_button:hover {
				color: white;
				background-color: #807061;
				box-shadow: 0 5px 10px rgba(0,0,0,.4);
				transform: translateY(-5px) translateX(0px);
			}

			.background_object1 {
				position: absolute;
				z-index: -1;
				background-color: white;
				width: 1366px;
				height: 385px;
				margin-top: 660px;
			}

			.confirmed_icon {
				position: absolute;
				z-index: 1;
				margin-top: 720px;
				margin-left: 230px;
			}

			.support_icon {
				position: absolute;
				z-index: 1;
				margin-top: 720px;
				margin-left: 632.5px;
			}

			.products_icon {
				position: absolute;
				z-index: 1;
				margin-top: 720px;
				margin-left: 1060px;
			}

			.confirmed_name {
				position: absolute;
				z-index: 1;
				font-family: "Roboto Medium", sans-serif;
				font-size: 40px;
				font-weight: 100;
				letter-spacing: 1px;
				color: black;
				margin-top: 850px;
				margin-left: 187.5px;
				transition: 0.2s;
			}

			.support_name {
				position: absolute;
				z-index: 1;
				font-family: "Roboto Medium", sans-serif;
				font-size: 40px;
				font-weight: 100;
				letter-spacing: 1px;
				color: black;
				margin-top: 850px;
				margin-left: 620px;
				transition: 0.2s;
			}

			.products_name {
				position: absolute;
				z-index: 1;
				font-family: "Roboto Medium", sans-serif;
				font-size: 40px;
				font-weight: 100;
				letter-spacing: 1px;
				color: black;
				margin-top: 850px;
				margin-left: 1035px;
				transition: 0.2s;
			}

			.confirmed_info {
				position: absolute;
				z-index: 1;
				font-family: "Roboto Thin", sans-serif;
				font-size: 15px;
				font-weight: 100;
				letter-spacing: 1px;
				color: black;
				text-align: center;
				line-height: 12.5px;
				margin-top: 920px;
				margin-left: 149px;
				transition: 0.2s;
			}

			.support_info {
				position: absolute;
				z-index: 1;
				font-family: "Roboto Thin", sans-serif;
				font-size: 15px;
				font-weight: 100;
				letter-spacing: 1px;
				color: black;
				text-align: center;
				line-height: 12.5px;
				margin-top: 920px;
				margin-left: 557.5px;
				transition: 0.2s;
			}

			.products_info {
				position: absolute;
				z-index: 1;
				font-family: "Roboto Thin", sans-serif;
				font-size: 15px;
				font-weight: 100;
				letter-spacing: 1px;
				color: black;
				text-align: center;
				line-height: 12.5px;
				margin-top: 920px;
				margin-left: 995px;
				transition: 0.2s;
			}

			.confirmed_line {
				position: absolute;
				z-index: 1;
				width: 100px;
				height: 1.5px;
				background-color: black;
				border: 0px solid black;
				margin-top: 990px;
				margin-left: 240px;
				transition: 0.2s;
				opacity: 0.5;
			}

			.support_line {
				position: absolute;
				z-index: 1;
				width: 100px;
				height: 1.5px;
				background-color: black;
				border: 0px solid black;
				margin-top: 990px;
				margin-left: 650px;
				transition: 0.2s;
				opacity: 0.5;
			}

			.products_line {
				position: absolute;
				z-index: 1;
				width: 100px;
				height: 1.5px;
				background-color: black;
				border: 0px solid black;
				margin-top: 990px;
				margin-left: 1072.5px;
				transition: 0.2s;
				opacity: 0.5;
			}

			.confirmed:hover img {
				opacity: 0;
			}

			.confirmed:hover .confirmed_name {
				color: #C7B199;
			}

			.confirmed:hover .confirmed_line {
				background-color: #C7B199;
				opacity: 1;
				width: 130px;
				margin-left: 225px;
			}

			.support:hover .support_name {
				color: #C7B199;
			}

			.support:hover .support_line {
				background-color: #C7B199;
				opacity: 1;
				width: 130px;
				margin-left: 635px;
			}

			.products:hover .products_name {
				color: #C7B199;
			}

			.products:hover .products_line {
				background-color: #C7B199;
				opacity: 1;
				width: 130px;
				margin-left: 1057.5px;
			}

			.background_object2 {
				position: absolute;
				z-index: -1;
				background-color: #F3F3F3;
				width: 1366px;
				height: 680px;
				margin-top: 1045px;
			}

			.object1-1 {
				position: absolute;
				z-index: 0;
				width: 300px;
				height: 250px;
				background-color: white;
				margin-top: 1110px;
				margin-left: 125px;
			}

			.object1-2 {
				position: absolute;
				z-index: 1;
				width: 300px;
				height: 0px;
				background-color: #807061;
				margin-top: 1360px;
				margin-left: 125px;
				transition: 0.3s;
			}

			.object1-3 {
				position: absolute;
				z-index: 2;
				width: 300px;
				height: 250px;
				background-color: white;
				margin-top: 1110px;
				margin-left: 125px;
				opacity: 0;
			}

			.object2-1 {
				position: absolute;
				z-index: 0;
				width: 300px;
				height: 250px;
				background-color: white;
				margin-top: 1110px;
				margin-left: 550px;
			}

			.object2-2 {
				position: absolute;
				z-index: 1;
				width: 300px;
				height: 0px;
				background-color: #807061;
				margin-top: 1360px;
				margin-left: 550px;
				transition: 0.3s;
			}

			.object2-3 {
				position: absolute;
				z-index: 2;
				width: 300px;
				height: 250px;
				background-color: white;
				margin-top: 1110px;
				margin-left: 550px;
				opacity: 0;
			}

			.object3-1 {
				position: absolute;
				z-index: 0;
				width: 300px;
				height: 250px;
				background-color: white;
				margin-top: 1110px;
				margin-left: 975px;
			}

			.object3-2 {
				position: absolute;
				z-index: 1;
				width: 300px;
				height: 0px;
				background-color: #807061;
				margin-top: 1360px;
				margin-left: 975px;
				transition: 0.3s;
			}

			.object3-3 {
				position: absolute;
				z-index: 2;
				width: 300px;
				height: 250px;
				background-color: white;
				margin-top: 1110px;
				margin-left: 975px;
				opacity: 0;
			}

			.object4-1 {
				position: absolute;
				z-index: 0;
				width: 300px;
				height: 250px;
				background-color: white;
				margin-top: 1410px;
				margin-left: 125px;
			}

			.object4-2 {
				position: absolute;
				z-index: 1;
				width: 300px;
				height: 0px;
				background-color: #807061;
				margin-top: 1660px;
				margin-left: 125px;
				transition: 0.3s;
			}

			.object4-3 {
				position: absolute;
				z-index: 2;
				width: 300px;
				height: 250px;
				background-color: white;
				margin-top: 1410px;
				margin-left: 125px;
				opacity: 0;
			}


			.object5-1 {
				position: absolute;
				z-index: 0;
				width: 300px;
				height: 250px;
				background-color: white;
				margin-top: 1410px;
				margin-left: 550px;
			}

			.object5-2 {
				position: absolute;
				z-index: 1;
				width: 300px;
				height: 0px;
				background-color: #807061;
				margin-top: 1660px;
				margin-left: 550px;
				transition: 0.3s;
			}

			.object5-3 {
				position: absolute;
				z-index: 2;
				width: 300px;
				height: 250px;
				background-color: white;
				margin-top: 1410px;
				margin-left: 550px;
				opacity: 0;
			}

			.object6-1 {
				position: absolute;
				z-index: 0;
				width: 300px;
				height: 250px;
				background-color: white;
				margin-top: 1410px;
				margin-left: 975px;
			}

			.object6-2 {
				position: absolute;
				z-index: 1;
				width: 300px;
				height: 0px;
				background-color: #807061;
				margin-top: 1660px;
				margin-left: 975px;
				transition: 0.3s;
			}

			.object6-3 {
				position: absolute;
				z-index: 2;
				width: 300px;
				height: 250px;
				background-color: white;
				margin-top: 1410px;
				margin-left: 975px;
				opacity: 0;
			}

			.object1:hover .object1-2 {
				height: 80px;
				margin-top: 1280px;
			}

			.object2:hover .object2-2 {
				height: 80px;
				margin-top: 1280px;
			}

			.object3:hover .object3-2 {
				height: 80px;
				margin-top: 1280px;
			}

			.object4:hover .object4-2 {
				height: 80px;
				margin-top: 1580px;
			}

			.object5:hover .object5-2 {
				height: 80px;
				margin-top: 1580px;
			}

			.object6:hover .object6-2 {
				height: 80px;
				margin-top: 1580px;
			}

			.product1_image {
				position: absolute;
				z-index: 0;
				margin-top: 1155px;
				margin-left: 172.5px;
			}

			.product1_name {
				position: absolute;
				z-index: 1;
				font-family: "Roboto Thin", sans-serif;
				font-size: 17.5px;
				font-weight: 100;
				letter-spacing: 0px;
				line-height: 5px;
				color: white;
				margin-top: 1302.5px;
				margin-left: 140px;
			}

			.product1_price {
				position: absolute;
				z-index: 1;
				font-family: "Roboto Thin", sans-serif;
				font-size: 17.5px;
				font-weight: 100;
				letter-spacing: 1px;
				color: white;
				margin-top: 1330px;
				margin-left: 140px;
			}

			.product1_rating {
				position: absolute;
				z-index: 1;
				font-family: "Roboto Thin", sans-serif;
				font-size: 20px;
				font-weight: 100;
				letter-spacing: 1px;
				color: white;
				margin-top: 1327.5px;
				margin-left: 355px;
			}

			.product1_star {
				position: absolute;
				z-index: 1;
				margin-top: 1331px;
				margin-left: 390px;
			}

			.product2_image {
				position: absolute;
				z-index: 0;
				margin-top: 1145px;
				margin-left: 647.5px;
			}

			.product2_name {
				position: absolute;
				z-index: 1;
				font-family: "Roboto Thin", sans-serif;
				font-size: 17.5px;
				font-weight: 100;
				letter-spacing: 0px;
				line-height: 5px;
				color: white;
				margin-top: 1302.5px;
				margin-left: 565px;
			}

			.product2_price {
				position: absolute;
				z-index: 1;
				font-family: "Roboto Thin", sans-serif;
				font-size: 17.5px;
				font-weight: 100;
				letter-spacing: 1px;
				color: white;
				margin-top: 1330px;
				margin-left: 565px;
			}

			.product2_rating {
				position: absolute;
				z-index: 1;
				font-family: "Roboto Thin", sans-serif;
				font-size: 20px;
				font-weight: 100;
				letter-spacing: 1px;
				color: white;
				margin-top: 1327.5px;
				margin-left: 780px;
			}

			.product2_star {
				position: absolute;
				z-index: 1;
				margin-top: 1331px;
				margin-left: 815px;
			}

			.product3_image {
				position: absolute;
				z-index: 0;
				margin-top: 1145px;
				margin-left: 1075px;
			}

			.product3_name {
				position: absolute;
				z-index: 1;
				font-family: "Roboto Thin", sans-serif;
				font-size: 17.5px;
				font-weight: 100;
				letter-spacing: 0px;
				line-height: 5px;
				color: white;
				margin-top: 1302.5px;
				margin-left: 987.5px;
			}

			.product3_price {
				position: absolute;
				z-index: 1;
				font-family: "Roboto Thin", sans-serif;
				font-size: 17.5px;
				font-weight: 100;
				letter-spacing: 1px;
				color: white;
				margin-top: 1330px;
				margin-left: 987.5px;
			}

			.product3_rating {
				position: absolute;
				z-index: 1;
				font-family: "Roboto Thin", sans-serif;
				font-size: 20px;
				font-weight: 100;
				letter-spacing: 1px;
				color: white;
				margin-top: 1327.5px;
				margin-left: 1204px;
			}

			.product3_star {
				position: absolute;
				z-index: 1;
				margin-top: 1331px;
				margin-left: 1240px;
			}

			.product4_image {
				position: absolute;
				z-index: 0;
				margin-top: 1455px;
				margin-left: 172.5px;
			}

			.product4_name {
				position: absolute;
				z-index: 1;
				font-family: "Roboto Thin", sans-serif;
				font-size: 17.5px;
				font-weight: 100;
				letter-spacing: 0px;
				line-height: 5px;
				color: white;
				margin-top: 1602.5px;
				margin-left: 140px;
			}

			.product4_price {
				position: absolute;
				z-index: 1;
				font-family: "Roboto Thin", sans-serif;
				font-size: 17.5px;
				font-weight: 100;
				letter-spacing: 1px;
				color: white;
				margin-top: 1630px;
				margin-left: 140px;
			}

			.product4_rating {
				position: absolute;
				z-index: 1;
				font-family: "Roboto Thin", sans-serif;
				font-size: 20px;
				font-weight: 100;
				letter-spacing: 1px;
				color: white;
				margin-top: 1627.5px;
				margin-left: 355px;
			}

			.product4_star {
				position: absolute;
				z-index: 1;
				margin-top: 1631px;
				margin-left: 390px;
			}

			.product5_image {
				position: absolute;
				z-index: 0;
				margin-top: 1445px;
				margin-left: 595px;
			}

			.product5_name {
				position: absolute;
				z-index: 1;
				font-family: "Roboto Thin", sans-serif;
				font-size: 17.5px;
				font-weight: 100;
				letter-spacing: 0px;
				line-height: 5px;
				color: white;
				margin-top: 1602.5px;
				margin-left: 565px;
			}

			.product5_price {
				position: absolute;
				z-index: 1;
				font-family: "Roboto Thin", sans-serif;
				font-size: 17.5px;
				font-weight: 100;
				letter-spacing: 1px;
				color: white;
				margin-top: 1630px;
				margin-left: 565px;
			}

			.product5_rating {
				position: absolute;
				z-index: 1;
				font-family: "Roboto Thin", sans-serif;
				font-size: 20px;
				font-weight: 100;
				letter-spacing: 1px;
				color: white;
				margin-top: 1627.5px;
				margin-left: 780px;
			}

			.product5_star {
				position: absolute;
				z-index: 1;
				margin-top: 1631px;
				margin-left: 815px;
			}

			.product6_image {
				position: absolute;
				z-index: 0;
				margin-top: 1445px;
				margin-left: 1022.5px;
			}

			.product6_name {
				position: absolute;
				z-index: 1;
				font-family: "Roboto Thin", sans-serif;
				font-size: 17.5px;
				font-weight: 100;
				letter-spacing: 0px;
				line-height: 5px;
				color: white;
				margin-top: 1602.5px;
				margin-left: 987.5px;
			}

			.product6_price {
				position: absolute;
				z-index: 1;
				font-family: "Roboto Thin", sans-serif;
				font-size: 17.5px;
				font-weight: 100;
				letter-spacing: 1px;
				color: white;
				margin-top: 1630px;
				margin-left: 987.5px;
			}

			.product6_rating {
				position: absolute;
				z-index: 1;
				font-family: "Roboto Thin", sans-serif;
				font-size: 20px;
				font-weight: 100;
				letter-spacing: 1px;
				color: white;
				margin-top: 1627.5px;
				margin-left: 1204px;
			}

			.product6_star {
				position: absolute;
				z-index: 1;
				margin-top: 1631px;
				margin-left: 1240px;
			}

			.background_object3 {
				position: absolute;
				z-index: -1;
				background: linear-gradient(to right, #000000, #4E3427);
				width: 1366px;
				height: 370px;
				margin-top: 1725px;
			}

			.peoples_image {
				position: absolute;
				z-index: 1;
				margin-top: 1780px;
				margin-left: 250px;
			}

			.storage_image {
				position: absolute;
				z-index: 1;
				margin-top: 1770px;
				margin-left: 640px;
			}

			.sales_image {
				position: absolute;
				z-index: 1;
				margin-top: 1795px;
				margin-left: 1046px;
			}

			.peoples_name {
				position: absolute;
				z-index: 1;
				font-family: "Roboto Thin", sans-serif;
				font-size: 50px;
				font-weight: 100;
				letter-spacing: 0px;
				color: white;
				margin-top: 1925px;
				margin-left: 232.5px;
			}

			.storage_name {
				position: absolute;
				z-index: 1;
				font-family: "Roboto Thin", sans-serif;
				font-size: 50px;
				font-weight: 100;
				letter-spacing: 0px;
				color: white;
				margin-top: 1925px;
				margin-left: 622.5px;
			}

			.sales_name {
				position: absolute;
				z-index: 1;
				font-family: "Roboto Thin", sans-serif;
				font-size: 50px;
				font-weight: 100;
				letter-spacing: 0px;
				color: white;
				margin-top: 1925px;
				margin-left: 1035px;
			}

			.peoples_info {
				position: absolute;
				z-index: 1;
				font-family: "Roboto Thin", sans-serif;
				font-size: 25px;
				font-weight: 100;
				letter-spacing: 0px;
				color: #B6A48E;
				margin-top: 1995px;
				margin-left: 213px;
			}

			.storage_info {
				position: absolute;
				z-index: 1;
				font-family: "Roboto Thin", sans-serif;
				font-size: 25px;
				font-weight: 100;
				letter-spacing: 0px;
				color: #B6A48E;
				margin-top: 1995px;
				margin-left: 600px;
			}

			.sales_info {
				position: absolute;
				z-index: 1;
				font-family: "Roboto Thin", sans-serif;
				font-size: 25px;
				font-weight: 100;
				letter-spacing: 0px;
				color: #B6A48E;
				margin-top: 1995px;
				margin-left: 1045px;
			}

			.peoples_line {
				position: absolute;
				z-index: 1;
				width: 90px;
				height: 1px;
				background-color: white;
				border: 0px solid white;
				margin-top: 2050px;
				margin-left: 270px;
			}

			.storage_line {
				position: absolute;
				z-index: 1;
				width: 100px;
				height: 1px;
				background-color: white;
				border: 0px solid white;
				margin-top: 2050px;
				margin-left: 657.5px;
			}

			.sales_line {
				position: absolute;
				z-index: 1;
				width: 75px;
				height: 1px;
				background-color: white;
				border: 0px solid white;
				margin-top: 2050px;
				margin-left: 1085px;
			}

		</style>
	</head>

	<body>

		<div id="block1">
			<img class="first_background" id="m1" src="First_Background.jpg" width="1366" height="660">

			<img class="logo" src="Logo.png" width="200">

			<h1 class="top_text1"><a href="#m1" class="scrollto">Home</a></h1>
			<h1 class="top_text2"><a href="#m2" class="scrollto">About</a></h1>
			<h1 class="top_text3"><a href="#m3" class="scrollto">Products</a></h1>
			<h1 class="top_text4"><a href="#m4" class="scrollto">Statistics</a></h1>
			<h1 class="top_text5"><a href="#m5" class="scrollto">Feedbacks</a></h1>
			<h1 class="top_text6"><a href="#m6" class="scrollto">Contacts</a></h1>
			<h1 class="top_text7"><a href="#m7" class="scrollto">Credits</a></h1>

			<img class="shopping_bag1" src="Shopping_Bag1.png" width="30">
			<img class="search1" src="Search1.png" width="30">

			<img class="shopping_bag2" src="Shopping_Bag2.png" width="30">
			<img class="search2" src="Search2.png" width="30">

			<h1 class="start_name">Start your shopping on Delite Shop</h1>
			<h1 class="start_info">If any electronic device suddenly breaks down and you need a new one, <p>we can only congratulate you and provide our wide range of products <p>for every look and taste</h1>
			<h1 class="start_button">ABOUT US</h1>
		</div>

		<div id="block2">
			<div class="background_object1" id="m2"></div>

			<img class="confirmed_icon" src="Confirmed.png" width="110">
			<img class="support_icon" src="Support.png" width="110">
			<img class="products_icon" src="Products.png" width="110">

			<div class="confirmed">
				<h1 class="confirmed_name">Confirmed</h1>
				<h1 class="confirmed_info">Our online store is officially tested for <p>honesty and quality of the site</h1>
				<hr class="confirmed_line">
			</div>

			<div class="support">
				<h1 class="support_name">Support</h1>
				<h1 class="support_info">Our technical support team will always <p>help to solve your any problem</h1>
				<hr class="support_line">
			</div>

			<div class="products">
				<h1 class="products_name">Products</h1>
				<h1 class="products_info">Products from our online store are <p>officially tested for quality</h1>
				<hr class="products_line">
			</div>
		</div>

		<div id="block3">
			<div class="background_object2" id="m3"></div>

			<div class="object1">
				<div class="object1-1"></div>
				<div class="object1-2"></div>
				<div class="object1-3"></div>
			</div>

			<div class="object2">
				<div class="object2-1"></div>
				<div class="object2-2"></div>
				<div class="object2-3"></div>
			</div>

			<div class="object3">
				<div class="object3-1"></div>
				<div class="object3-2"></div>
				<div class="object3-3"></div>
			</div>

			<div class="object4">
				<div class="object4-1"></div>
				<div class="object4-2"></div>
				<div class="object4-3"></div>
			</div>

			<div class="object5">
				<div class="object5-1"></div>
				<div class="object5-2"></div>
				<div class="object5-3"></div>
			</div>

			<div class="object6">
				<div class="object6-1"></div>
				<div class="object6-2"></div>
				<div class="object6-3"></div>
			</div>

			<img class="product1_image" src="Product1.jpg" width="200">
			<h1 class="product1_name">Lenovo IdeaPad 330S-15IKB</h1>
			<h1 class="product1_price">$799</h1>
			<h1 class="product1_rating">4.5</h1>
			<img class="product1_star" src="Star.png" width="17.5">

			<img class="product2_image" src="Product2.jpg" width="100">
			<h1 class="product2_name">Xiaomi Redmi Note 7 4/64GB Blue</h1>
			<h1 class="product2_price">$249</h1>
			<h1 class="product2_rating">4.5</h1>
			<img class="product2_star" src="Star.png" width="17.5">

			<img class="product3_image" src="Product3.jpg" width="100">
			<h1 class="product3_name">Xiaomi Mi Smart Band 4 Black</h1>
			<h1 class="product3_price">$40</h1>
			<h1 class="product3_rating">4.5</h1>
			<img class="product3_star" src="Star.png" width="17.5">

			<img class="product4_image" src="Product4.jpg" width="200">
			<h1 class="product4_name">Dell Inspiron 3582</h1>
			<h1 class="product4_price">$299</h1>
			<h1 class="product4_rating">4.0</h1>
			<img class="product4_star" src="Star.png" width="17.5">

			<img class="product5_image" src="Product5.jpg" width="200">
			<h1 class="product5_name">Asus X509FL-BQ053</h1>
			<h1 class="product5_price">$699</h1>
			<h1 class="product5_rating">4.5</h1>
			<img class="product5_star" src="Star.png" width="17.5">

			<img class="product6_image" src="Product6.jpg" width="200">
			<h1 class="product6_name">Asus TUF Gaming FX505GD-BQ100</h1>
			<h1 class="product6_price">$899</h1>
			<h1 class="product6_rating">4.5</h1>
			<img class="product6_star" src="Star.png" width="17.5">
		</div>

		<div id="block4">
			<div class="background_object3" id="m4"></div>

			<img class="peoples_image" src="Peoples.png" width="125">
			<img class="storage_image" src="Storage.png" width="125">
			<img class="sales_image" src="Sales.png" width="125">

			<h1 class="peoples_name">50.000+</h1>
			<h1 class="storage_name">15.000+</h1>
			<h1 class="sales_name">30.000+</h1>

			<h1 class="peoples_info">Peoples on our site</h1>
			<h1 class="storage_info">Products on storage</h1>
			<h1 class="sales_info">Products sold</h1>

			<hr class="peoples_line">
			<hr class="storage_line">
			<hr class="sales_line">
		</div>

	</body>

</html>
              
            
!

CSS

              
                
              
            
!

JS

              
                
              
            
!
999px

Console