update html

css/reset.css

@@ -0,0 +1,51 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+* {
+  box-sizing: border-box;
+}
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, button, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}

css/style.css

@@ -0,0 +1,296 @@
+/* From the :root element you can easily change the colors of the design, its size and so on. */
+:root {
+
+  /* You can change the font family in the whole design here. (You need to add the font family to the codes.) */
+  --font_family: 'Google Sans', sans-serif;
+
+  /* You can change the font size here, is proportional to all texts. */
+  --font_size: 16px;
+
+  /* You can change the background color by typing the color code. (If you do not enter a background-image image, the background-color will be active.) */
+  --background_color: #000;
+  --background_image: url("../img/wallpaper.jpg");
+
+  /* You can change the frame thickness and color of the picture by typing the number of pixels and the color code. */
+  --image_border_color: #000;
+  --image_border_px: 3px;
+
+  /* You can change the width and size of the picture by typing the number of pixels. */
+  --image_width: 140px;
+  --image_height: 140px;
+
+  /* You can change the colors of the title and description section by typing the color codes. */
+  --title_color: #fff;
+  --description_color: #ffffff;
+
+  /* You can change the colors of social media icons by changing the color code. */
+  --svg_color: #fff;
+
+  /* You can change the background, text color and active color of the menu by changing the color codes. */
+  --menu_background_color: #0e0e0e;
+  --menu_text_color: #fff;
+  --menu_active_text_color: #f1c40f;
+
+  /* You can change the button's background, text color and active color by changing the color codes. */
+  --button_background_color: #0e0e0e;
+  --button_text_color: #fff;
+  --button_text_hover_color: #f1c40f;
+
+  /* You can change the background, text color and active color of the text field by changing the color codes. */
+  --textarea_background_color: #0e0e0e;
+  --textarea_text_color: #fff;
+  --textarea_link_text_color: #f1c40f;
+
+  /* You can change the background, text color and active color of the footer area by changing the color codes. */
+  --footer_background_color: #0e0e0e;
+  --footer_text_color: #fff;
+  --footer_link_text_color: #f1c40f;
+}
+
+/* Basic Codes */
+
+body {
+  font: var(--font_size) var(--font_family);
+  font-weight: 400;
+  line-height: 1.5;
+  background: var(--background_color) var(--background_image) no-repeat center;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+}
+
+.flex_column_center {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+}
+
+.flex_row_center {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+}
+
+.flex_no_wrap_row_center {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: center;
+  align-items: center;
+}
+
+/* Logo, Title and Description Codes */
+
+.header_img {
+  padding-top: 1em;
+}
+
+.header_img img {
+  height: var(--image_height);
+  width: var(--image_width);
+  border: var(--image_border_px) solid var(--image_border_color);
+  border-radius: 50%;
+  margin-bottom: 0.5em;
+}
+
+.header_text h1 {
+  color: var(--title_color);
+  font-size: 2em;
+  font-family: var(--font_family_bold);
+  font-weight: bold;
+}
+
+.header_text h2 {
+  color: var(--description_color);
+  font-size: 1.5em;
+  border-bottom: 0;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  border: 2px solid #000000;
+  border-radius: 10px;
+  margin: 0;
+  padding: 10px 0;
+}
+
+/* Social Media Icons Codes */
+
+.header_svg_list {
+  padding-top: 1em;
+}
+
+.header_svg_item {
+  width: 2.1em;
+  height: 2.1em;
+  cursor: pointer;
+}
+
+.header_svg_item:hover {
+  transform: scale(1.10);
+  transition: 0.10s ease;
+}
+
+.header_svg_item + .header_svg_item {
+  margin-left: 1em;
+}
+
+.header_svg_item svg {
+  fill: var(--svg_color);
+}
+
+/* Menu Codes */
+
+#header_nav_menu_item_1 {
+  color: var(--menu_active_text_color);
+}
+
+
+.header_nav_menu_list {
+  padding-top: 1em;
+  margin-left: 1em;
+  margin-right: 1em;
+}
+
+.header_nav_menu_item {
+  color: var(--menu_text_color);
+  background-color: var(--menu_background_color);
+  text-align: center;
+  list-style-type: none;
+  cursor: pointer;
+  padding: 0.5em;
+  border-radius: 0.3em;
+  cursor: pointer;
+  transition: 0.10s ease;
+  font-size: 1.1em;
+}
+
+.header_nav_menu_item + .header_nav_menu_item {
+  margin-left: 0.4em;
+}
+
+/* Menu Container Codes */
+
+main {
+  margin-bottom: auto;
+}
+
+#main_section_container_2, #main_section_container_3 {
+ display: none;
+}
+
+.main_a_item {
+  margin-top: 1em;
+  text-decoration: none;
+}
+
+.main_text_item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--button_text_color);
+  background-color: var(--button_background_color);
+  width: 25em;
+  margin-top: 1em;
+  padding: 0.8em;
+  border-radius: 8px;
+  min-height: 3.7em;
+  text-align: center;
+  font-weight: bold;
+}
+
+.main_button_item {
+  color: var(--button_text_color);
+  background-color: var(--button_background_color);
+  width: 41em;
+  border-radius: 8px;
+  min-height: 3.7em;
+  text-align: center;
+  cursor: pointer;
+}
+
+.main_small_button_list {
+  display: flex;
+  flex-direction: row;
+}
+
+.main_small_a_item {
+  margin-top: 1em;
+  text-decoration: none;
+}
+
+.main_small_a_item + .main_small_a_item {
+  margin-left: 10px;
+}
+
+.main_small_button_item:hover,
+.main_button_item:hover {
+  color: var(--button_text_hover_color);
+  transform: scale(1.02);
+  transition: 0.10s ease;
+}
+
+.main_small_button_item {
+  color: var(--button_text_color);
+  background-color: var(--button_background_color);
+  width: calc(41em / 2 - 5px);
+  border-radius: 1em;
+  min-height: 3.7em;
+  text-align: center;
+  cursor: pointer;
+}
+
+/* Footer Codes */
+
+.footer_div_item {
+  color: var(--footer_text_color);
+  background: var(--footer_background_color);
+  padding: 1em;
+  margin-top: 1.5em;
+}
+
+.footer_a_item {
+  color: var(--footer_link_text_color);
+  text-decoration: none;
+}
+
+/* Responsive Codes */
+
+@media (max-width: 768px) { 
+  .main_text_item {
+    width: 92vw;
+  }
+
+  .main_small_button_item {
+    width: calc(92vw / 2 - 5px);;
+  }
+
+  .main_button_item {
+    width: 92vw;
+  }
+
+  .header_h_item {
+    width: 92vw;
+    text-align: center;
+  }
+
+}
+.video-container {
+  position: relative;
+  padding-bottom: 56.25%;
+}
+
+.video-container iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.video {
+  aspect-ratio: 16 / 9;
+  width: 100%;
+}