changed bg color and fixed styles

shumai9 · Sep 23, 2019 · c07c4fa · c07c4fa
1 parent 10837fe
commit c07c4fa
Show file tree

Hide file tree

Showing 6 changed files with 1,091 additions and 898 deletions.
diff --git a/src/components/contact.jsx b/src/components/contact.jsx
@@ -19,15 +19,15 @@ class Contact extends React.Component {
           return <p key={j}> Tel: {text}</p>;
         })}
         <h5>Profile links:</h5>
-        {links.map((text, k) => {
-          return (
-            <div id="links" key={k}>
-              <a href={`${text}`} target="_blank">
+        <div id="links">
+          {links.map((text, k) => {
+            return (
+              <a href={`${text}`} target="_blank" rel="noreferrer" key={k}>
                 <img className="icon" src={url[k]} alt={`${name[k]}`} />
               </a>
-            </div>
-          );
-        })}
+            );
+          })}
+        </div>
       </div>
     );
   }

diff --git a/src/data/data.json b/src/data/data.json
@@ -93,7 +93,7 @@
   },
   "contact": {
     "email": [" ifilyes4@hotmail.com"],
-    "tel": ["00-297-123-401"],
+    "tel": ["+2917-123-401"],
     "links": [
       "http://github.com/shumai9",
       "https://www.linkedin.com/in/soazd1/",

diff --git a/src/style/App.css b/src/style/App.css
@@ -6,15 +6,27 @@
   --pale-dark-color: #445673;
   --text-color: #fff;
   /*background*/
-  --master-bg: linear-gradient(to left, var(--orange-color), #00ff8a, #021b2e);
-  --pale-lightgreen: #dbf9cd;
+  --first-color: #faa209b3 /*#ff9e20*/;
+  --second-color: #b24a4a; /* #00ff8a;*/
+  --third-color: #021b2e;
   --orange-color: #ff9e20; /* #fffc2b;*/
+  --master-bg: linear-gradient(
+    to left,
+    var(--first-color),
+    var(--second-color),
+    var(--third-color) /*#00ff8a, #021b2e*/
+  );
+  --pale-lightgreen: #dbf9cd;
   /*font-style*/ /*
   --title-font: 'Diplomata', cursive;*/
   --para-font: 'Philosopher';
   --esp-style: 'Petit Formal Script', cursive;
-  --footer-bg: linear-gradient(to right, var(--orange-color), #00ff8a, #021b2e);
-
+  --footer-bg: linear-gradient(
+    to right,
+    var(--first-color),
+    var(--second-color),
+    var(--third-color)
+  );
   /*font size*/
   --largefont: 35px;
   --mediumfont: 16px;
@@ -62,10 +74,11 @@
 /*Logo animation*/
 .App-logo {
   position: absolute;
-  top: -21rem;
-  left: 45%;
+  top: -40rem;
+  right: 0;
   animation: App-logo-spin infinite 10s cubic-bezier(1, -0.09, 0.44, 0.93);
-  width: 12rem;
+  width: 40rem;
+  opacity: 0.45;
 }
 @keyframes App-logo-spin {
   from {
@@ -75,12 +88,9 @@
     transform: rotateY(360deg);
   }
 }
-
 /**********************************\
 /          *** Main Content ***     \ 
 /************************************/
-.main {
-}
 aside {
   transition: transform 0.5s cubic-bezier(0, 0.52, 0, 1);
   transform: translate3d(-170vw, 0, 0);

diff --git a/src/style/contact.css b/src/style/contact.css
@@ -2,6 +2,8 @@ div .contact p,
 .contact div {
   text-align: center;
 }
-a {
+a #links {
   outline: 0;
+  display: flex;
+  width: auto;
 }
diff --git a/src/style/nav.css b/src/style/nav.css
@@ -1,6 +1,6 @@
 .nav-bar {
   position: absolute;
-  top: 84%;
+  top: 92%;
   width: 100%;
   z-index: 500;
   text-align: right;
@@ -40,13 +40,13 @@ nav a:first-child {
 .sticky {
   top: 0;
   position: fixed;
-  background: var(--master-bg);
+  background: var(--footer-bg);
   height: 50px;
   width: 100%;
   -webkit-box-shadow: 0px 2px 9px 2px rgba(0, 0, 0, 0.3);
   -moz-box-shadow: 0px 2px 9px 2px rgba(0, 0, 0, 0.3);
   box-shadow: 0px 2px 9px 2px rgba(0, 0, 0, 0.3);
 }
 .list a {
-  color: var(--pale-dark-color);
+  color: #000;
 }