Home Explore Help
Sign In
Emmanuil
/
project_LEO_Shop
Watch 1
Star 0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

header

Emmanuil 4 years ago
commit
efd5cfc8f1
5 changed files with 354 additions and 0 deletions
Unified View Show Diff Stats
  1. 70 0
      en/index.html
  2. 0 0
      js/index.js
  3. 53 0
      ru/index.html
  4. 124 0
      style/reset.css
  5. 107 0
      style/style.css

+ 70 - 0
en/index.html
View File 

@@ -0,0 +1,70 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+  <head>
 
+    <meta charset="UTF-8" />
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+    <title>LEO Shop</title>
 
+    <link rel="stylesheet" href="/style/reset.css" />
 
+    <link
 
+      href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;600&display=swap"
 
+      rel="stylesheet"
 
+    />
 
+    <link rel="stylesheet" href="/style/style.css" />
 
+  </head>
 
+  <body>
 
+    <header class="header">
 
+      <div class="header-background">
 
+        <div class="container">
 
+          <div class="header-login">
 
+            <div class="language-currency">
 
+              <span>Language:</span>
 
+              <select id="language">
 
+                <option value="english">English</option>
 
+                <option value="russian">Russian</option>
 
+              </select>
 
+
 
+              <span>Currency:</span>
 
+              <select id="currency">
 
+                <option value="usd">USD</option>
 
+                <option value="uah">UAH</option>
 
+              </select>
 
+            </div>
 
+
 
+            <div class="login">
 
+              <ul class="list-login">
 
+                <li><a href="#">Account</a></li>
 
+                <li><a href="#">Wishlist</a></li>
 
+                <li><a href="#">Checkout</a></li>
 
+                <li><a href="#">Log In</a></li>
 
+                <li><a href="#">Sign Up</a></li>
 
+              </ul>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+
 
+      <div class="container">
 
+        <div class="logo-menu">
 
+          <div class="title">LEO Shop</div>
 
+
 
+          <ul class="menu">
 
+            <li><a href="#">Home</a></li>
 
+            <li><a href="#">women</a></li>
 
+            <li><a href="#">men</a></li>
 
+            <li><a href="#">other</a></li>
 
+            <li><a href="#">purchase</a></li>
 
+          </ul>
 
+
 
+          <input id="search" type="search" placeholder="Search.." />
 
+
 
+          <div class="buy">
 
+            <div class="icon"></div>
 
+            <div class="cart">cart (0)</div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </header>
 
+
 
+    <script src="/js/index.js"></script>
 
+  </body>
 
+</html>

+ 0 - 0
js/index.js
View File


+ 53 - 0
ru/index.html
View File 

@@ -0,0 +1,53 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+  <head>
 
+    <meta charset="UTF-8" />
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+    <title>LEO Shop</title>
 
+    <link rel="stylesheet" href="/style/reset.css" />
 
+    <link
 
+      href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;600&display=swap"
 
+      rel="stylesheet"
 
+    />
 
+    <link rel="stylesheet" href="/style/style.css" />
 
+  </head>
 
+  <body>
 
+    <header class="header">
 
+      <div class="container">
 
+        <div class="header-login">
 
+          <div class="language-currency">
 
+            <span>Язык:</span>
 
+            <select id="language">
 
+              <option value="russian"
 
+                ><a href="../ru/index.html"></a>Русский</option
 
+              >
 
+              <option value="english"
 
+                ><a href="../ru/index.html">English</a></option
 
+              >
 
+            </select>
 
+
 
+            <span>Фалюта:</span>
 
+            <select id="currency">
 
+              <option value="uah">UAH</option>
 
+              <option value="usd">USD</option>
 
+            </select>
 
+          </div>
 
+
 
+          <div class="login">
 
+            <ul class="list-login">
 
+              <li><a href="#">Account</a></li>
 
+              <li><a href="#">Wishlist</a></li>
 
+              <li><a href="#">Checkout</a></li>
 
+              <li><a href="#">Log In</a></li>
 
+              <li><a href="#">Sign Up</a></li>
 
+            </ul>
 
+          </div>
 
+        </div>
 
+
 
+        <div class="logo-menu"></div>
 
+      </div>
 
+    </header>
 
+
 
+    <script src="/js/index.js"></script>
 
+  </body>
 
+</html>

+ 124 - 0
style/reset.css
View File 

@@ -0,0 +1,124 @@
 
+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,
 
+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;
 
+}

+ 107 - 0
style/style.css
View File 

@@ -0,0 +1,107 @@
 
+*,
 
+*::before,
 
+*::after {
 
+  box-sizing: border-box;
 
+}
 
+
 
+body {
 
+  font-size: 13px;
 
+  font-family: "Open Sans", sans-serif;
 
+}
 
+
 
+a {
 
+  color: black;
 
+  text-decoration: none;
 
+}
 
+
 
+.container {
 
+  padding: 0 190px;
 
+  width: 100%;
 
+}
 
+
 
+.header-background {
 
+  background: #4cb1ca;
 
+  padding: 17px 0;
 
+}
 
+
 
+.header-login {
 
+  display: flex;
 
+  justify-content: space-between;
 
+  align-items: center;
 
+}
 
+
 
+.language-currency > span {
 
+  opacity: 0.8;
 
+  color: white;
 
+  padding-right: 5px;
 
+}
 
+
 
+#language,
 
+#currency {
 
+  background: #4cb1ca;
 
+  border: none;
 
+  color: white;
 
+  font-family: "Open Sans", sans-serif;
 
+  cursor: pointer;
 
+}
 
+
 
+#language {
 
+  margin-right: 20px;
 
+  position: relative;
 
+}
 
+
 
+#language > li:last-child {
 
+  position: absolute;
 
+  display: none;
 
+  margin-top: 5px;
 
+}
 
+
 
+.list-login > li {
 
+  display: inline;
 
+}
 
+
 
+.list-login > li > a {
 
+  color: white;
 
+}
 
+
 
+.list-login > li > a:hover {
 
+  color: #000000;
 
+  transition: all 0.5s;
 
+}
 
+
 
+.list-login > li:not(:last-child) {
 
+  border-right: 1px solid white;
 
+  padding: 0 15px;
 
+}
 
+
 
+.list-login > li:last-child {
 
+  padding-left: 15px;
 
+}
 
+
 
+.logo-menu {
 
+  font-size: 14px;
 
+  padding: 40px 0;
 
+  font-weight: bold;
 
+  text-transform: uppercase;
 
+  display: flex;
 
+  justify-content: space-between;
 
+  align-items: center;
 
+}
 
+
 
+.title {
 
+  font-size: 36px;
 
+}
 
+
 
+.menu > li {
 
+  display: inline;
 
+}
 
+
 
+.menu > li:not(:first-child) {
 
+  padding-left: 25px;
 
+}
 
+
 
+#search {
 
+    padding: 10px 115px 10px 10px;
 
+    font-size: 13px;
 
+    border: 1px solid #c6c6c6;
 
+}