start building ETF profile page, fix ETF screener missing div and cor…

…rect scss files naming
Ro008 · Jan 30, 2021 · e7320fc · e7320fc
1 parent f0683ec
commit e7320fc
Show file tree

Hide file tree

Showing 8 changed files with 126 additions and 31 deletions.
diff --git a/ETF-profile.html b/ETF-profile.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Just EFT clon</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
+    integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w=="
+    crossorigin="anonymous" />
+  <link rel="stylesheet" href="./css/main.css">
+</head>
+
+<body>
+  <header class="header">
+    <div class="language-dropdown">
+      <div class="current-lang">
+        <span>EN</span>
+        <i class="fas fa-angle-down"></i>
+      </div>
+
+      <div class="lang-options">
+        <ul class="options-list">
+          <li class="en">English</li>
+          <li class="es">Español</li>
+        </ul>
+      </div>
+    </div>
+    <div class="top-menu-container">
+      <div class="logo">
+        <a href="./index.html">
+          <img src="./resources/images/JUS.png" alt="logo">
+        </a>
+      </div>
+      <div class="top-menu">
+        <a href="./ETF-screener.html"><span>ETF screener</span></a>
+        <a href="./strategy-builder.html"><span>Strategy builder</span></a>
+        <a href="./academy.html"><span>Academy</span></a>
+        <a href="./login.html"><span>Login</span></a>
+      </div>
+    </div>
+  </header>
+  <main class="etf-profile">
+    <div class="searchbar">
+      <input type="text" placeholder="find ETFs">
+    </div>
+
+    <div class="breadcrumbs">
+      <a href="./ETF-screener.html" class="link">ETF screener</a>
+      <span>></span>
+      <span href="" class="link">ETF profile</span>
+    </div>
+  </main>
+  <footer class="footer">
+    <a href="https://www.acontracorrientech.com/" target="_blank"> <i class="fab fa-wordpress-simple"></i> </a>
+    <a href="https://www.linkedin.com/in/rociosirvent/" target="_blank"> <i class="fab fa-linkedin-in"></i> </a>
+    <a href="https://github.com/Ro008" target="_blank"> <i class="fab fa-github"></i> </a>
+    <a href="https://twitter.com/RocioSirvent" target="_blank"> <i class="fab fa-twitter"></i> </a>
+    <a href="https://www.instagram.com/ro_syper/" target="_blank"> <i class="fab fa-instagram"></i> </a>
+  </footer>
+
+  <script type="text/javascript" src="./js/index.js"></script>
+</body>
+
+</html>
diff --git a/ETF-screener.html b/ETF-screener.html
@@ -49,39 +49,40 @@
         <span>Search results:&nbsp;</span>
         <span>123456</span>
       </div>
+    </div>
+
+    <div class="results-container">
+      <div class="assets-filter">
+        <span>All assets</span>
+        <span>Equity</span>
+        <span>Bonds</span>
+        <span>Real Estate</span>
+      </div>
 
-      <div class="results-container">
-        <div class="assets-filter">
-          <span>All assets</span>
-          <span>Equity</span>
-          <span>Bonds</span>
-          <span>Real Estate</span>
+      <div class="table-container">
+        <div class="buttons">
+          <button class="btn-chip">
+            <span>equity</span>
+            <i class="far fa-times-circle"></i>
+          </button>
+          <button class="btn-primary">Reset filters</button>
         </div>
 
-        <div class="table-container">
-          <div class="buttons">
-            <button class="btn-chip">
-              <span>equity</span>
-              <i class="far fa-times-circle"></i>
-            </button>
-            <button class="btn-primary">Reset filters</button>
+        <div class="table">
+          <div class="row">
+            <span class="row-header">ETF name</span>
+            <span class="row-header">Dividend yield % </span>
+            <span class="row-header">10Y performance</span>
           </div>
-
-          <div class="table">
-            <div class="row">
-              <span class="row-header">ETF name</span>
-              <span class="row-header">Dividend yield % </span>
-              <span class="row-header">10Y performance</span>
-            </div>
-            <div class="row">
-              <span class="row-content">SPY5</span>
-              <span class="row-content">2%</span>
-              <span class="row-content">13%</span>
-            </div>
+          <div class="row">
+            <span class="row-content">SPY5</span>
+            <span class="row-content">2%</span>
+            <span class="row-content">13%</span>
           </div>
         </div>
       </div>
     </div>
+    </div>
   </main>
 
   <footer class="footer">

diff --git a/css/main.css b/css/main.css
@@ -19,6 +19,10 @@ body,
 button {
   font-family: 'Raleway', sans-serif; }
 
+.etf-profile {
+  width: 90%;
+  margin: 0 auto; }
+
 .etf-screener {
   margin: 0 auto;
   width: 90%; }
@@ -87,6 +91,11 @@ button {
   .btn-chip:hover {
     background-color: #e6f0ec; }
 
+.link {
+  color: #11986D; }
+  .link:visited {
+    color: #11986D; }
+
 .footer {
   display: flex;
   position: fixed;
@@ -157,3 +166,7 @@ button {
 
 .language-dropdown a {
   text-decoration: none; }
+
+.breadcrumbs {
+  background-color: #e6f0ec;
+  padding: 5px 0 5px 15px; }
diff --git a/scss/components/_breadcrumbs.scss b/scss/components/_breadcrumbs.scss
@@ -0,0 +1,5 @@
+.breadcrumbs {
+  // border: 1px solid saddlebrown;
+  background-color: $light-green;
+  padding: 5px 0 5px 15px;
+}
diff --git a/scss/components/_button.scss b/scss/components/_button.scss
@@ -23,3 +23,11 @@
     background-color: $light-green;
   }
 }
+
+.link {
+  color: $brand-color;
+
+  &:visited {
+    color: $brand-color;
+  }
+}
diff --git a/scss/main.scss b/scss/main.scss
@@ -8,12 +8,14 @@
 
 // 2. pages
 @import
- 'pages/etf-screener.scss';
+ 'pages/etf-profile',
+ 'pages/etf-screener';
 
 // 3. Components
 @import
   'components/button',
   'components/footer',
   'components/header',
   'components/searchbar',
-  'components/language-dropdown';
+  'components/language-dropdown',
+  'components/breadcrumbs';
diff --git a/scss/pages/_etf-profile.scss b/scss/pages/_etf-profile.scss
@@ -0,0 +1,5 @@
+.etf-profile {
+  width: 90%;
+  // border: 1px solid hotpink;
+  margin: 0 auto;
+}
diff --git a/scss/pages/etf-screener.scss → scss/pages/_etf-screener.scss b/scss/pages/etf-screener.scss → scss/pages/_etf-screener.scss
@@ -1,12 +1,9 @@
 .etf-screener {
   margin: 0 auto;
   width: 90%;
-  // border: 1px solid blue;
 
   .results {
     display: flex;
-    // width: 50%;
-    // border: 1px solid firebrick;
     justify-content: flex-end;
 
     span:nth-child(2) {
@@ -16,7 +13,6 @@
 
   .results-container {
     display: flex;
-    // border: 1px solid aqua;
     justify-content: space-around;
     margin-top: 20px;