From 9a04f3696f0f8076851c6e71bcdac925fdd08ee4 Mon Sep 17 00:00:00 2001 From: nkfab Date: Thu, 21 Mar 2019 15:39:19 +0200 Subject: [PATCH 1/2] feat(stats): show reading stats - Add a profile-view-stats.html page - Add Read stats [Finishes #164800406] --- ui/pages/profile-view-stats.html | 189 +++++++++++++++++++++++++++++++ 1 file changed, 189 insertions(+) create mode 100644 ui/pages/profile-view-stats.html diff --git a/ui/pages/profile-view-stats.html b/ui/pages/profile-view-stats.html new file mode 100644 index 0000000..ed516b7 --- /dev/null +++ b/ui/pages/profile-view-stats.html @@ -0,0 +1,189 @@ + + + + + + + + + + Authors Haven + + + + +
+
+
+
+
+ +

Jane Doe

+
+
+
+
+
+
+ Followers + 57 K +
+
+ Following + 2 K +
+
+ Wrote + 16 +
+
+ Read + 30 +
+
+
+
+ +
+ +
+
Bio:
+
+ Mauris vel pretium dolor, et hendrerit leo. Donec condimentum eget nisl et lobortis. + Etiam id imperdiet urna. Sed eget neque facilisis, feugiat ligula dictum, tempus + lectus. Donec nec magna nibh. Nullam molestie nisi nisl, aliquet congue purus tempor + ut. Praesent ut quam vel mauris accumsan tincidunt. In et mi non libero ultricies +
+
+
+
+
+
+

ARTICLES

+ +
+
+
+

+ Automobile Industry Trends +

+

+ New cars to watch in 2019 are ultricies vitae risus ut aliquam. Quisque at maximus + justo, eu luctus lorem. Nullam mollis felis ligula, sit amet luctus sem luctus non + New cars to watch in 2019 are ultricies vitae risus ut aliquam. Quisque at maximus + justo, eu luctus lorem. Nullam mollis felis ligula, sit amet luctus sem luctus non +

+
+ 5 min + 200 + 15k +
+
+
+
+
+
+

+ Automobile Industry Trends +

+

+ New cars to watch in 2019 are ultricies vitae risus ut aliquam. Quisque at maximus + justo, eu luctus lorem. Nullam mollis felis ligula, sit amet luctus sem luctus non + New cars to watch in 2019 are ultricies vitae risus ut aliquam. Quisque at maximus + justo, eu luctus lorem. Nullam mollis felis ligula, sit amet luctus sem luctus non +

+
+ 5 min + 200 + 15k +
+
+
+
+
+
+

+ Automobile Industry Trends +

+

+ New cars to watch in 2019 are ultricies vitae risus ut aliquam. Quisque at maximus + justo, eu luctus lorem. Nullam mollis felis ligula, sit amet luctus sem luctus non + New cars to watch in 2019 are ultricies vitae risus ut aliquam. Quisque at maximus + justo, eu luctus lorem. Nullam mollis felis ligula, sit amet luctus sem luctus non +

+
+ 5 min + 200 + 15k +
+
+
+
+
+
+

+ Automobile Industry Trends +

+

+ New cars to watch in 2019 are ultricies vitae risus ut aliquam. Quisque at maximus + justo, eu luctus lorem. Nullam mollis felis ligula, sit amet luctus sem luctus non + New cars to watch in 2019 are ultricies vitae risus ut aliquam. Quisque at maximus + justo, eu luctus lorem. Nullam mollis felis ligula, sit amet luctus sem luctus non +

+
+ 5 min + 200 + 15k +
+
+
+
+ More Articles... +
+
+
+
+
+ +
+ + + \ No newline at end of file From 2d676b6d835ea3649ee2e94f8f57fa9a7527a613 Mon Sep 17 00:00:00 2001 From: nkfab Date: Thu, 21 Mar 2019 15:39:19 +0200 Subject: [PATCH 2/2] feat(stats): show reading stats - Add a profile-view-stats.html page - Add Read stats [Finishes #164800406] --- ui/css/style.css | 1159 ++++++++++++++++++++---------- ui/pages/profile-view-stats.html | 189 +++++ 2 files changed, 955 insertions(+), 393 deletions(-) create mode 100644 ui/pages/profile-view-stats.html diff --git a/ui/css/style.css b/ui/css/style.css index cd2c6bc..984bfc9 100644 --- a/ui/css/style.css +++ b/ui/css/style.css @@ -10,151 +10,191 @@ text-align: center; line-height: 50px; color: white; - font-size: 22px; } + font-size: 22px; +} .go-top-btn:hover { - background-color: #1a237e; } + background-color: #1a237e; +} @font-face { font-family: 'Roboto-Medium'; - src: url("../fonts/roboto/Roboto-Medium.ttf"); } + src: url('../fonts/roboto/Roboto-Medium.ttf'); +} @font-face { font-family: 'Roboto-Regular'; - src: url("../fonts/roboto/Roboto-Regular.ttf"); } + src: url('../fonts/roboto/Roboto-Regular.ttf'); +} @font-face { font-family: 'Roboto-Light'; - src: url("../fonts/roboto/Roboto-Light.ttf"); } + src: url('../fonts/roboto/Roboto-Light.ttf'); +} * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; - box-sizing: border-box; } + box-sizing: border-box; +} html, body { margin: 0; - padding: 0; } + padding: 0; +} body { - font-family: Roboto-Regular; } + font-family: Roboto-Regular; +} button { border: 0; outline: none; - cursor: pointer; } + cursor: pointer; +} a { text-decoration: none; - color: #000; } + color: #000; +} .fa { - color: inherit; } + color: inherit; +} .bg-primary { - background-color: #3f51b5; } + background-color: #3f51b5; +} .bg-primary-light { - background-color: #e8eaf6; } + background-color: #e8eaf6; +} .bg-white { - background-color: white; } + background-color: white; +} .color-primary { - color: #3f51b5; } + color: #3f51b5; +} .color-primary-light { - color: #3f51b5; } + color: #3f51b5; +} .color-red { - color: #e74c3c; } + color: #e74c3c; +} .color-green { - color: #2ecc71; } + color: #2ecc71; +} .color-yellow { - color: #f1c40f; } + color: #f1c40f; +} .color-white { - color: white; } + color: white; +} .color-gray { - color: rgba(0, 0, 0, 0.3); } + color: rgba(0, 0, 0, 0.3); +} /* Grid system of 12 columns */ .row { display: flex; - flex-wrap: wrap; } + flex-wrap: wrap; +} .container { - padding: 0 10%; } + padding: 0 10%; +} .main-content { padding-top: 65px; - padding-bottom: 20px; } + padding-bottom: 20px; +} .content-margin { - margin: 40px 0; } + margin: 40px 0; +} .content-margin-top { - margin-top: 40px; } + margin-top: 40px; +} .content-padding { - padding: 40px 0; } + padding: 40px 0; +} .content-padding-h { - padding: 0 40px; } + padding: 0 40px; +} .col-1, .col-1-mob { - width: 8.33%; } + width: 8.33%; +} .col-2, .col-2-mob { - width: 16.66%; } + width: 16.66%; +} .col-3, .col-3-mob { - width: 25%; } + width: 25%; +} .col-4, .col-4-mob { - width: 33.33%; } + width: 33.33%; +} .col-5, .col-5-mob { - width: 44.66%; } + width: 44.66%; +} .col-6, .col-6-mob { - width: 50%; } + width: 50%; +} .col-7, .col-7-mob { - width: 58.33%; } + width: 58.33%; +} .col-8, .col-8-mob { - width: 66.66%; } + width: 66.66%; +} .col-9, .col-9-mob { - width: 75%; } + width: 75%; +} .col-10, .col-10-mob { - width: 83.33%; } + width: 83.33%; +} .col-11, .col-11-mob { - width: 91.66%; } + width: 91.66%; +} .col-12, .col-12-mob { - width: 100%; } + width: 100%; +} .col-1, .col-1-mob, @@ -180,34 +220,42 @@ a { .col-11-mob, .col-12, .col-12-mob { - padding: 10px 15px; } + padding: 10px 15px; +} .is-column { display: flex; - flex-direction: column; } + flex-direction: column; +} .is-row { display: flex; - flex-direction: row; } + flex-direction: row; +} .flex { - display: flex; } + display: flex; +} .content-center { display: flex; - justify-content: center; } + justify-content: center; +} .content-right { display: flex; - justify-content: flex-end; } + justify-content: flex-end; +} .items-center { display: flex; - align-items: center; } + align-items: center; +} .items-left { display: flex; - align-items: flex-start; } + align-items: flex-start; +} .box { background-color: #fff; @@ -218,59 +266,75 @@ a { -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; - -o-border-radius: 6px; } + -o-border-radius: 6px; +} .mr-5 { - margin-right: 5px; } + margin-right: 5px; +} .ml-5 { - margin-left: 5px; } + margin-left: 5px; +} .mt-5 { - margin-top: 5px; } + margin-top: 5px; +} .mb-5 { - margin-bottom: 5px; } + margin-bottom: 5px; +} .mr-10 { - margin-right: 10px; } + margin-right: 10px; +} .ml-10 { - margin-left: 10px; } + margin-left: 10px; +} .mt-10 { - margin-top: 10px; } + margin-top: 10px; +} .mb-10 { - margin-bottom: 10px; } + margin-bottom: 10px; +} .mr-20 { - margin-right: 20px; } + margin-right: 20px; +} .ml-20 { - margin-left: 20px; } + margin-left: 20px; +} .mt-20 { - margin-top: 20px; } + margin-top: 20px; +} .mb-20 { - margin-bottom: 20px; } + margin-bottom: 20px; +} .pagination { display: flex; justify-content: center; align-items: center; - padding: 10px; } + padding: 10px; +} .pagination span { margin: 0 15px; - cursor: pointer; } + cursor: pointer; +} .pagination .pages { margin: 0 20px; text-decoration: none; list-style: none; - padding: 0; } + padding: 0; +} .pagination .pages .page { display: inline-block; @@ -279,7 +343,8 @@ a { padding: 5px; height: 30px; width: 30px; - margin: 0 5px; } + margin: 0 5px; +} .pagination .current { border: 2px solid #3f51b5; @@ -287,7 +352,8 @@ a { -webkit-border-radius: 50px; -moz-border-radius: 50px; -ms-border-radius: 50px; - -o-border-radius: 50px; } + -o-border-radius: 50px; +} /* ##Device = Laptops, Desktops @@ -295,17 +361,21 @@ a { @media screen and (min-width: 769px) { .is-tablet, .is-mobile { - display: none !important; } } + display: none !important; + } +} /* ##Device = Tablets and Mobile */ @media screen and (max-width: 768px) { .is-desktop { - display: none !important; } + display: none !important; + } .is-tablet, .is-mobile { - display: block; } + display: block; + } .col-1, .col-2, .col-3, @@ -318,24 +388,32 @@ a { .col-10, .col-11, .col-12 { - width: 100%; } + width: 100%; + } .main-content { - padding-top: 50px; } + padding-top: 50px; + } .container { - padding: 0 5%; } } + padding: 0 5%; + } +} @media screen and (max-width: 320px) { .container { - padding: 0 15px; } } + padding: 0 15px; + } +} .middle-content { display: flex; justify-content: center; align-items: center; - height: calc(100vh - 65px); } + height: calc(100vh - 65px); +} .width-100 { - width: 100%; } + width: 100%; +} .go-top-btn { position: fixed; @@ -349,15 +427,18 @@ a { text-align: center; line-height: 50px; color: white; - font-size: 22px; } + font-size: 22px; +} .go-top-btn:hover { - background-color: #1a237e; } + background-color: #1a237e; +} textarea { width: 100%; font-size: 1rem; - line-height: 1.4rem; } + line-height: 1.4rem; +} input[type='text'], input[type='password'], @@ -366,13 +447,16 @@ input[type='email'] { border: 0; width: 100%; font-size: inherit; - color: inherit; } + color: inherit; +} input:focus { - outline: none; } + outline: none; +} input::placeholder { - color: rgba(0, 0, 0, 0.3); } + color: rgba(0, 0, 0, 0.3); +} .input { border-bottom: 1px solid rgba(0, 0, 0, 0.4); @@ -382,48 +466,60 @@ input::placeholder { color: rgba(0, 0, 0, 0.8); font-size: 1.2rem; margin-bottom: 10px; - background-color: transparent; } + background-color: transparent; +} .input input[type='text'], .input input[type='password'], .input input[type='email'] { - background-color: transparent; } + background-color: transparent; +} .input .fa { - margin-bottom: 0.2; } + margin-bottom: 0.2; +} .input.medium { - font-size: 1.5rem; } + font-size: 1.5rem; +} .input.large { - font-size: 2rem; } + font-size: 2rem; +} .input.primary { color: #3f51b5; - border-bottom: 1px solid #3f51b5; } + border-bottom: 1px solid #3f51b5; +} .input.primary-border { - border-bottom: 1px solid #3f51b5; } + border-bottom: 1px solid #3f51b5; +} .input.primary input::placeholder { - color: #3f51b5; } + color: #3f51b5; +} .input.white { color: #fff; - border-bottom: 1px solid #fff; } + border-bottom: 1px solid #fff; +} .input.white input::placeholder { - color: #fff; } + color: #fff; +} .button { padding: 10px 20px; min-width: 100px; - cursor: pointer; } + cursor: pointer; +} a.button { display: inline-block; padding: 0px 20px; - text-align: center; } + text-align: center; +} .button.primary { background-color: #3f51b5; @@ -433,10 +529,12 @@ a.button { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; - -o-border-radius: 10px; } + -o-border-radius: 10px; +} .button.primary:hover { - background-color: #1a237e; } + background-color: #1a237e; +} .button.secondary { border: 1px solid #3f51b5; @@ -447,20 +545,25 @@ a.button { -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; - background-color: #fff; } + background-color: #fff; +} .button.secondary:hover { - background-color: #e8eaf6; } + background-color: #e8eaf6; +} .to-center { - text-align: center; } + text-align: center; +} .icon-group { padding-top: 30px; display: flex; - justify-content: space-between; } - .icon-group img { - width: 40px; } + justify-content: space-between; +} +.icon-group img { + width: 40px; +} .centered-form { line-height: 2.5rem; @@ -468,36 +571,47 @@ a.button { border-radius: 10px; width: 450px; max-width: 100vw !important; - margin: 0 15px; } - .centered-form .input { - margin-bottom: 30px; - font-size: 1rem; } - .centered-form .button #form-link span, - .centered-form .button #form-link a { - padding: 5px; } - .centered-form button { - width: 100%; } + margin: 0 15px; +} +.centered-form .input { + margin-bottom: 30px; + font-size: 1rem; +} +.centered-form .button #form-link span, +.centered-form .button #form-link a { + padding: 5px; +} +.centered-form button { + width: 100%; +} .align-center { - text-align: center; } + text-align: center; +} .align-right { - text-align: right; } + text-align: right; +} .title-1 { - font-size: 1.8rem; } + font-size: 1.8rem; +} .title-2 { - font-size: 1.5rem; } + font-size: 1.5rem; +} .title-3 { - font-size: 1.2rem; } + font-size: 1.2rem; +} .hover-primary:hover { - color: #3f51b5; } + color: #3f51b5; +} .underlined { - text-decoration: underline; } + text-decoration: underline; +} .top-navbar { align-items: center; @@ -509,14 +623,17 @@ a.button { top: 0; left: 0; right: 0; - z-index: 9999; } + z-index: 9999; +} .nav-button { background: transparent; - position: relative; } + position: relative; +} .brand-logo { - height: 50px; } + height: 50px; +} .top-navbar__avatar { height: 35px; @@ -525,14 +642,17 @@ a.button { -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; - -o-border-radius: 50%; } + -o-border-radius: 50%; +} .navbar-dropdown { - display: block; } + display: block; +} .navbar-dropdown:focus .dropdown, .navbar-dropdown:focus-within .dropdown { - display: block; } + display: block; +} .dropdown { position: absolute; @@ -542,7 +662,8 @@ a.button { padding: 0; box-shadow: 0 1px 5px 0px rgba(0, 0, 0, 0.2); display: none; - transition-duration: 0.5s; } + transition-duration: 0.5s; +} .dropdown::after { content: ' '; @@ -553,7 +674,8 @@ a.button { height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; - border-bottom: 11px solid #fff; } + border-bottom: 11px solid #fff; +} .dropdown li { color: #3f51b5; @@ -565,31 +687,37 @@ a.button { position: relative; text-decoration: none; transition-duration: 0.5s; - font-size: 14px; } + font-size: 14px; +} .dropdown li a, .dropdown li a:link { - color: #3f51b5; } + color: #3f51b5; +} .dropdown li.separator { height: 1px; background-color: rgba(0, 0, 0, 0.2); - padding: 0; } + padding: 0; +} .dropdown li:hover { - background-color: #e8eaf6; } + background-color: #e8eaf6; +} .toggle-menu { position: relative; padding: 0; margin: 0; - background-color: transparent; } + background-color: transparent; +} .hamburger, .hamburger::before, .hamburger::after { height: 5px; - width: 40px; } + width: 40px; +} .hamburger { top: 0; @@ -604,7 +732,8 @@ a.button { -moz-transition: 0.5s; -ms-transition: 0.5s; -o-transition: 0.5s; - -webkit-transition: 0.5s; } + -webkit-transition: 0.5s; +} .hamburger::before, .hamburger::after { @@ -617,19 +746,23 @@ a.button { -webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s; - -o-transition: 0.5s; } + -o-transition: 0.5s; +} .hamburger::before { - top: -13px; } + top: -13px; +} .hamburger::after { - top: 13px; } + top: 13px; +} .toggle-menu:focus .hamburger, .toggle-menu:focus-within .hamburger, .hamburger.active { background-color: rgba(0, 0, 0, 0); - box-shadow: 0 0 0 rgba(0, 0, 0, 0); } + box-shadow: 0 0 0 rgba(0, 0, 0, 0); +} .toggle-menu:focus .hamburger::before, .toggle-menu:focus-within .hamburger::before, @@ -639,7 +772,8 @@ a.button { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); - -o-transform: rotate(45deg); } + -o-transform: rotate(45deg); +} .toggle-menu:focus .hamburger::after, .toggle-menu:focus-within .hamburger::after, @@ -649,7 +783,8 @@ a.button { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); - -o-transform: rotate(135deg); } + -o-transform: rotate(135deg); +} .hamburger-nav { position: fixed; @@ -659,12 +794,14 @@ a.button { bottom: 0; top: 50px; opacity: 0; - overflow: hidden; } + overflow: hidden; +} .hamburger-nav ul { list-style: none; margin: 0; - padding: 0; } + padding: 0; +} .hamburger-nav li { color: #fff; @@ -675,25 +812,31 @@ a.button { transition-duration: 0.5s; font-size: 1rem; white-space: nowrap; - overflow: hidden; } + overflow: hidden; +} .hamburger-nav li:hover { - background-color: #fff; } + background-color: #fff; +} .hamburger-nav li:hover a { - color: #3f51b5; } + color: #3f51b5; +} .hamburger-nav li a, .hamburger-nav li a:link { - color: #fff; } + color: #fff; +} .hamburger-nav li.separator { height: 1px; background-color: rgba(0, 0, 0, 0.2); - padding: 0; } + padding: 0; +} .hamburger-nav li:hover { - background-color: #e8eaf6; } + background-color: #e8eaf6; +} .toggle-menu:focus .hamburger-nav { transform: translateX(-130px, 0, 0); @@ -705,18 +848,23 @@ a.button { -o-transform: translateX(-130px, 0, 0); animation: toggle-menu 2s; -webkit-animation: toggle-menu 2s; - opacity: 1; } + opacity: 1; +} @keyframes toggle-menu { 0% { width: 0; - opacity: 0; } + opacity: 0; + } 10% { width: 10%; - opacity: 0; } + opacity: 0; + } 100% { width: 200px; - opacity: 1; } } + opacity: 1; + } +} .nav-search { width: 30px; @@ -725,27 +873,35 @@ a.button { transition-duration: 0.5s; border-bottom: 1px solid transparent; color: #fff; - margin-bottom: 0; } + margin-bottom: 0; +} .nav-search:hover, .nav-search:focus-within { width: 200px; - border-bottom: 1px solid #fff; } + border-bottom: 1px solid #fff; +} .nav-search img { height: 20px; width: 20px; - cursor: pointer; } + cursor: pointer; +} @media screen and (max-width: 768px) { .top-navbar { - height: 50px; } + height: 50px; + } .brand-logo { - height: 40px; } } + height: 40px; + } +} @media screen and (max-width: 768px) and (max-width: 500px) { .nav-search { - margin-right: 15px; } } + margin-right: 15px; + } +} /* Pages */ .article-text { @@ -754,7 +910,8 @@ a.button { border: 0; resize: none; overflow: hidden; - font-size: 0.8rem; } + font-size: 0.8rem; +} .article-actions { position: fixed; @@ -770,7 +927,8 @@ a.button { -o-transform: translateX(-50%); display: flex; align-items: center; - flex-direction: column; } + flex-direction: column; +} .article-icon { font-family: Roboto-Medium; @@ -780,21 +938,26 @@ a.button { display: flex; text-align: center; justify-content: center; - cursor: pointer; } + cursor: pointer; +} .article-icon.margin-top { - margin-top: 30px; } + margin-top: 30px; +} .article-icon .fa { - font-size: 20px; } + font-size: 20px; +} .save-article-btn { - position: relative; } + position: relative; +} .save-article-btn:active .options, .save-article-btn:hover .options { display: block; - height: auto; } + height: auto; +} .save-article-btn .options { position: absolute; @@ -806,13 +969,15 @@ a.button { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; - -o-transition: all 1s ease; } + -o-transition: all 1s ease; +} .save-article-btn .options ul { list-style: none; text-decoration: none; padding: 0; - margin: 0 0 10px 0; } + margin: 0 0 10px 0; +} .save-article-btn .options ul li { display: block; @@ -824,19 +989,24 @@ a.button { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; - -o-border-radius: 5px; } + -o-border-radius: 5px; +} .save-article-btn .options ul li:hover a { - color: #3f51b5; } + color: #3f51b5; +} @media screen and (max-width: 768px) { .article-actions { - left: 10vw; } } + left: 10vw; + } +} .article-view-title { font-size: 2rem; text-align: center; - padding: 0 15px; } + padding: 0 15px; +} .article-image { width: 100%; @@ -845,25 +1015,30 @@ a.button { display: flex; flex-direction: column; justify-content: center; - align-items: center; } + align-items: center; +} .article-image img { height: 40px; - margin-bottom: 5px; } + margin-bottom: 5px; +} .article-image span { - font-size: 1rem; } + font-size: 1rem; +} .article-content { text-align: justify; line-height: 1.3rem; font-size: 0.9rem; - color: rgba(0, 0, 0, 0.8); } + color: rgba(0, 0, 0, 0.8); +} .article-date { margin: 20px 0; font-size: 0.6rem; - color: rgba(0, 0, 0, 0.3); } + color: rgba(0, 0, 0, 0.3); +} .article-side-actions { position: fixed; @@ -879,78 +1054,96 @@ a.button { -o-transform: translateX(-50%); display: flex; align-items: center; - flex-direction: column; } + flex-direction: column; +} .view-favorites { display: flex; - flex-direction: column; } + flex-direction: column; +} .view-stars { - display: flex; } + display: flex; +} .star-1 { - font-size: 1.5rem; } + font-size: 1.5rem; +} .star-2 { - font-size: 1.5rem; } + font-size: 1.5rem; +} .articles-filter { font-size: 18px; - margin: 20px 0 40px 0; } + margin: 20px 0 40px 0; +} .articles-filter label { margin-right: 20px; color: rgba(0, 0, 0, 0.6); - cursor: pointer; } + cursor: pointer; +} .filter-by { display: inline-block; width: auto; visibility: hidden; - margin-bottom: 10px; } + margin-bottom: 10px; +} .filter-by:checked + label, .filter-by:hover + label { - color: #3f51b5; } + color: #3f51b5; +} .my-articles-tab { padding: 10px 15px; border-top: 1px solid rgba(0, 0, 0, 0.3); - color: rgba(0, 0, 0, 0.5); } + color: rgba(0, 0, 0, 0.5); +} .my-articles-tab span { margin-right: 30px; - cursor: pointer; } + cursor: pointer; +} .my-articles-tab span.active, .my-articles-tab span:hover { - color: #3f51b5; } + color: #3f51b5; +} .my-articles { - margin: 20px 0; } + margin: 20px 0; +} .my-article { display: flex; flex-direction: column; - margin-bottom: 20px; } + margin-bottom: 20px; +} .my-article__title { margin: 0; display: flex; justify-content: space-between; position: relative; - font-size: 1.3rem; } + font-size: 1.3rem; +} .my-article__title a { - cursor: pointer; } + cursor: pointer; +} .my-article-delete { cursor: pointer; font-size: 1rem; - color: rgba(0, 0, 0, 0.5); } + color: rgba(0, 0, 0, 0.5); +} .my-article-delete:hover { - color: #e74c3c; } + color: #e74c3c; +} .my-article-modal { position: fixed; @@ -963,7 +1156,8 @@ a.button { align-items: center; z-index: 999999; background-color: rgba(0, 0, 0, 0.5); - overflow: hidden; } + overflow: hidden; +} .my-article-modal__wrap { padding: 10px; @@ -975,27 +1169,33 @@ a.button { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; - -o-border-radius: 5px; } + -o-border-radius: 5px; +} .my-article-modal__title { font-size: 1.3rem; text-align: center; - padding: 10px; } + padding: 10px; +} .my-article-modal__content { - font-size: 1rem; } + font-size: 1rem; +} .my-article-modal__actions { font-size: 1.3rem; - display: flex; } + display: flex; +} .my-article-modal__actions .button { flex: 1; - margin: 10px; } + margin: 10px; +} .my-article-delete:focus + .my-article-modal, .my-article-delete:focus-within + .my-article-modal { - display: flex; } + display: flex; +} .my-article__text { padding: 5px 100px 5px 0; @@ -1003,11 +1203,13 @@ a.button { text-overflow: ellipsis; font-family: Roboto-Light; margin: 0; - font-size: 1rem; } + font-size: 1rem; +} .my-article__meta { color: rgba(0, 0, 0, 0.3); - font-size: 0.6rem; } + font-size: 0.6rem; +} .article-card { height: 20vh; @@ -1015,7 +1217,8 @@ a.button { max-height: 200px; overflow: hidden; display: flex; - margin: 30px 0; } + margin: 30px 0; +} .article-card__image { background-origin: center; @@ -1028,69 +1231,92 @@ a.button { -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; - cursor: pointer; } + cursor: pointer; +} .article-card__content { display: flex; flex: 7; padding: 5px 0 5px 10px; - flex-direction: column; } + flex-direction: column; +} .article-card__content-title { margin: 0; - cursor: pointer; } + cursor: pointer; + font-family: Roboto-Light; +} .article-card__content-text { flex: 1; - overflow: hidden; text-overflow: ellipsis; + overflow: hidden; + /* white-space: nowrap; */ + line-height: 1.2rem; + height: 2.5rem; font-size: 1rem; - padding-bottom: 2px; - margin: 5px 0; - font-family: Roboto-Light; } + padding-bottom: 0.2; + margin: 0.5 0; + font-family: Roboto-Light; +} .article-card__content-meta { display: flex; height: 20px; font-size: 0.8rem; - color: rgba(0, 0, 0, 0.6); } + color: rgba(0, 0, 0, 0.6); +} .article-card__content-meta span { - margin-right: 20px; } + margin-right: 20px; +} @media screen and (max-width: 768px) { .article-card { - max-height: 100px; } } + max-height: 100px; + } +} .to-center { - text-align: center; } + text-align: center; +} .icon-group { padding-top: 30px; display: flex; - justify-content: space-between; } - .icon-group img { - width: 40px; } + justify-content: space-between; +} +.icon-group img { + width: 40px; +} .login-form { line-height: 2.5rem; padding: 50px; border-radius: 10px; width: 450px; - max-width: 100vw; } - .login-form .input { - margin-bottom: 30px; - font-size: 1rem; } - .login-form a { - color: #3f51b5; } - .login-form a:hover { - color: #2785d8; } - .login-form #form-link span, .login-form #form-link a { - padding: 5px; } - .login-form button { - width: 100%; } - .login-form #forget-psswd { - margin-top: -20px; } + max-width: 100vw; +} +.login-form .input { + margin-bottom: 30px; + font-size: 1rem; +} +.login-form a { + color: #3f51b5; +} +.login-form a:hover { + color: #2785d8; +} +.login-form #form-link span, +.login-form #form-link a { + padding: 5px; +} +.login-form button { + width: 100%; +} +.login-form #forget-psswd { + margin-top: -20px; +} #card { height: 528px; @@ -1102,52 +1328,73 @@ a.button { transform-style: preserve-3d; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; - margin: 0 15px; } - #card #login { - transform: rotateY(180deg); } - #card #signup, #card #login { - backface-visibility: hidden; - -webkit-backface-visibility: hidden; - -moz-backface-visibility: hidden; - position: absolute; } + margin: 0 15px; +} +#card #login { + transform: rotateY(180deg); +} +#card #signup, +#card #login { + backface-visibility: hidden; + -webkit-backface-visibility: hidden; + -moz-backface-visibility: hidden; + position: absolute; +} @media screen and (max-width: 768px) { .login-form { - max-width: 91.5vw !important; } } + max-width: 91.5vw !important; + } +} html { - scroll-behavior: smooth; } + scroll-behavior: smooth; +} @keyframes articleSlide { 0% { - left: 100%; } + left: 100%; + } 10% { - left: 100%; } + left: 100%; + } 10% { - left: 0%; } + left: 0%; + } 20% { - left: 0; } + left: 0; + } 25% { - left: -100%; } + left: -100%; + } 40% { - left: -100%; } + left: -100%; + } 45% { - left: -200%; } + left: -200%; + } 60% { - left: -200%; } + left: -200%; + } 65% { - left: -300%; } + left: -300%; + } 80% { - left: -300%; } + left: -300%; + } 85% { - left: -400%; } + left: -400%; + } 100% { - left: -400%; } } + left: -400%; + } +} .slide-area { background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../images/slide_one.jpg); box-shadow: 2px 0 4px rgba(0, 0, 0, 0.4); - overflow: hidden; } + overflow: hidden; +} .slides { min-height: 60vh; @@ -1157,7 +1404,8 @@ html { -webkit-animation: 20s articleSlide infinite; position: relative; text-align: left; - overflow: hidden; } + overflow: hidden; +} .slide-block { display: flex; @@ -1166,7 +1414,8 @@ html { padding: 20px; position: relative; text-align: center; - color: white; } + color: white; +} .slide-image { position: absolute; @@ -1177,38 +1426,46 @@ html { width: 100%; height: 100%; object-fit: cover; - filter: brightness(50%); } + filter: brightness(50%); +} .centered { - position: relative; } + position: relative; +} p { - text-align: left; } + text-align: left; +} .main-article-container { - width: 100%; } + width: 100%; +} .article-container { background: white; margin: 50px; display: flex; - flex-direction: column; } + flex-direction: column; +} .home-article-card { width: 100%; - margin-top: 20px; } + margin-top: 20px; +} .main-article-container img { width: 100%; height: 100%; - border-radius: 5%; } + border-radius: 5%; +} .home-article-text { width: 60%; height: 138px; padding-left: 10px; overflow: hidden; - height: 100%; } + height: 100%; +} .home-article-title { font-size: 1.2rem; @@ -1216,7 +1473,8 @@ p { font-style: normal; font-weight: bold; color: #000000; - margin-bottom: auto; } + margin-bottom: auto; +} .home-article-content { font-family: Roboto-Light; @@ -1227,7 +1485,8 @@ p { font-size: 1rem; color: #000000; white-space: wrap; - overflow: hidden; } + overflow: hidden; +} .article-thumbnail { position: relative; @@ -1236,37 +1495,48 @@ p { padding-top: 10px; font-family: Roboto-Light; font-size: 0.8rem; - font-style: normal; } + font-style: normal; +} .article-time { - padding-right: 20px; } + padding-right: 20px; +} .article-views { - padding-right: 20px; } + padding-right: 20px; +} .home-article-image { - width: 40%; } + width: 40%; +} @media screen and (max-width: 768px) { .col-6 { width: 100%; - margin: auto; } + margin: auto; + } .home-article-title { - font-size: 1rem; } + font-size: 1rem; + } .home-article-content { - font-size: 0.8rem; } + font-size: 0.8rem; + } .article-thumbnail { position: relative; padding-right: auto; padding-top: 10px; font-size: 0.7rem; - font-style: normal; } + font-style: normal; + } .article-time { - padding-right: 5px; } + padding-right: 5px; + } .article-views { - padding-right: 5px; } + padding-right: 5px; + } i { - padding-right: 0px; } + padding-right: 0px; + } .slides { min-height: 30vh; display: flex; @@ -1275,10 +1545,13 @@ p { -webkit-animation: 20s articleSlide infinite; position: relative; text-align: left; - overflow: hidden; } + overflow: hidden; + } .home-article-card { width: 100%; - margin-top: 10px; } } + margin-top: 10px; + } +} .top-navbar { align-items: center; @@ -1290,14 +1563,17 @@ p { top: 0; left: 0; right: 0; - z-index: 9999; } + z-index: 9999; +} .nav-button { background: transparent; - position: relative; } + position: relative; +} .brand-logo { - height: 50px; } + height: 50px; +} .top-navbar__avatar { height: 35px; @@ -1306,14 +1582,17 @@ p { -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; - -o-border-radius: 50%; } + -o-border-radius: 50%; +} .navbar-dropdown { - display: block; } + display: block; +} .navbar-dropdown:focus .dropdown, .navbar-dropdown:focus-within .dropdown { - display: block; } + display: block; +} .dropdown { position: absolute; @@ -1323,7 +1602,8 @@ p { padding: 0; box-shadow: 0 1px 5px 0px rgba(0, 0, 0, 0.2); display: none; - transition-duration: 0.5s; } + transition-duration: 0.5s; +} .dropdown::after { content: ' '; @@ -1334,7 +1614,8 @@ p { height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; - border-bottom: 11px solid #fff; } + border-bottom: 11px solid #fff; +} .dropdown li { color: #3f51b5; @@ -1346,31 +1627,37 @@ p { position: relative; text-decoration: none; transition-duration: 0.5s; - font-size: 14px; } + font-size: 14px; +} .dropdown li a, .dropdown li a:link { - color: #3f51b5; } + color: #3f51b5; +} .dropdown li.separator { height: 1px; background-color: rgba(0, 0, 0, 0.2); - padding: 0; } + padding: 0; +} .dropdown li:hover { - background-color: #e8eaf6; } + background-color: #e8eaf6; +} .toggle-menu { position: relative; padding: 0; margin: 0; - background-color: transparent; } + background-color: transparent; +} .hamburger, .hamburger::before, .hamburger::after { height: 5px; - width: 40px; } + width: 40px; +} .hamburger { top: 0; @@ -1385,7 +1672,8 @@ p { -moz-transition: 0.5s; -ms-transition: 0.5s; -o-transition: 0.5s; - -webkit-transition: 0.5s; } + -webkit-transition: 0.5s; +} .hamburger::before, .hamburger::after { @@ -1398,19 +1686,23 @@ p { -webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s; - -o-transition: 0.5s; } + -o-transition: 0.5s; +} .hamburger::before { - top: -13px; } + top: -13px; +} .hamburger::after { - top: 13px; } + top: 13px; +} .toggle-menu:focus .hamburger, .toggle-menu:focus-within .hamburger, .hamburger.active { background-color: rgba(0, 0, 0, 0); - box-shadow: 0 0 0 rgba(0, 0, 0, 0); } + box-shadow: 0 0 0 rgba(0, 0, 0, 0); +} .toggle-menu:focus .hamburger::before, .toggle-menu:focus-within .hamburger::before, @@ -1420,7 +1712,8 @@ p { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); - -o-transform: rotate(45deg); } + -o-transform: rotate(45deg); +} .toggle-menu:focus .hamburger::after, .toggle-menu:focus-within .hamburger::after, @@ -1430,7 +1723,8 @@ p { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); - -o-transform: rotate(135deg); } + -o-transform: rotate(135deg); +} .hamburger-nav { position: fixed; @@ -1440,12 +1734,14 @@ p { bottom: 0; top: 50px; opacity: 0; - overflow: hidden; } + overflow: hidden; +} .hamburger-nav ul { list-style: none; margin: 0; - padding: 0; } + padding: 0; +} .hamburger-nav li { color: #fff; @@ -1456,25 +1752,31 @@ p { transition-duration: 0.5s; font-size: 1rem; white-space: nowrap; - overflow: hidden; } + overflow: hidden; +} .hamburger-nav li:hover { - background-color: #fff; } + background-color: #fff; +} .hamburger-nav li:hover a { - color: #3f51b5; } + color: #3f51b5; +} .hamburger-nav li a, .hamburger-nav li a:link { - color: #fff; } + color: #fff; +} .hamburger-nav li.separator { height: 1px; background-color: rgba(0, 0, 0, 0.2); - padding: 0; } + padding: 0; +} .hamburger-nav li:hover { - background-color: #e8eaf6; } + background-color: #e8eaf6; +} .toggle-menu:focus .hamburger-nav { transform: translateX(-130px, 0, 0); @@ -1486,18 +1788,23 @@ p { -o-transform: translateX(-130px, 0, 0); animation: toggle-menu 2s; -webkit-animation: toggle-menu 2s; - opacity: 1; } + opacity: 1; +} @keyframes toggle-menu { 0% { width: 0; - opacity: 0; } + opacity: 0; + } 10% { width: 10%; - opacity: 0; } + opacity: 0; + } 100% { width: 200px; - opacity: 1; } } + opacity: 1; + } +} .nav-search { width: 30px; @@ -1506,57 +1813,76 @@ p { transition-duration: 0.5s; border-bottom: 1px solid transparent; color: #fff; - margin-bottom: 0; } + margin-bottom: 0; +} .nav-search:hover, .nav-search:focus-within { width: 200px; - border-bottom: 1px solid #fff; } + border-bottom: 1px solid #fff; +} .nav-search img { height: 20px; width: 20px; - cursor: pointer; } + cursor: pointer; +} @media screen and (max-width: 768px) { .top-navbar { - height: 50px; } + height: 50px; + } .brand-logo { - height: 40px; } } + height: 40px; + } +} @media screen and (max-width: 768px) and (max-width: 500px) { .nav-search { - margin-right: 15px; } } + margin-right: 15px; + } +} .to-center { - text-align: center; } + text-align: center; +} .icon-group { padding-top: 30px; display: flex; - justify-content: space-between; } - .icon-group img { - width: 40px; } + justify-content: space-between; +} +.icon-group img { + width: 40px; +} .login-form { line-height: 2.5rem; padding: 50px; border-radius: 10px; width: 450px; - max-width: 100vw; } - .login-form .input { - margin-bottom: 30px; - font-size: 1rem; } - .login-form a { - color: #3f51b5; } - .login-form a:hover { - color: #2785d8; } - .login-form #form-link span, .login-form #form-link a { - padding: 5px; } - .login-form button { - width: 100%; } - .login-form #forget-psswd { - margin-top: -20px; } + max-width: 100vw; +} +.login-form .input { + margin-bottom: 30px; + font-size: 1rem; +} +.login-form a { + color: #3f51b5; +} +.login-form a:hover { + color: #2785d8; +} +.login-form #form-link span, +.login-form #form-link a { + padding: 5px; +} +.login-form button { + width: 100%; +} +.login-form #forget-psswd { + margin-top: -20px; +} #card { height: 528px; @@ -1568,27 +1894,34 @@ p { transform-style: preserve-3d; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; - margin: 0 15px; } - #card #login { - transform: rotateY(180deg); } - #card #signup, #card #login { - backface-visibility: hidden; - -webkit-backface-visibility: hidden; - -moz-backface-visibility: hidden; - position: absolute; } + margin: 0 15px; +} +#card #login { + transform: rotateY(180deg); +} +#card #signup, +#card #login { + backface-visibility: hidden; + -webkit-backface-visibility: hidden; + -moz-backface-visibility: hidden; + position: absolute; +} @media screen and (max-width: 768px) { .login-form { - max-width: 91.5vw !important; } } + max-width: 91.5vw !important; + } +} .profile-view { width: 80%; - border: 1px solid #C4C4C4; + border: 1px solid #c4c4c4; box-sizing: border-box; backdrop-filter: blur(4px); border-radius: 5px; padding: 0 auto; - margin: 0 auto; } + margin: 0 auto; +} .profile-cover { height: 193px; @@ -1598,7 +1931,8 @@ p { background-size: cover; background-repeat: no-repeat; background-position: center; - position: relative; } + position: relative; +} .profile-avatar-wrapper { position: absolute; @@ -1606,32 +1940,37 @@ p { left: 20px; display: flex; align-items: center; - flex-direction: column; } + flex-direction: column; +} .profile-avatar-wrapper > p { - font-family: Roboto; + font-family: Roboto-Regular; + font-weight: bolder; font-style: normal; - font-weight: bold; line-height: normal; font-size: 20px; - margin-bottom: -10px; } + margin-bottom: -10px; +} .profile-avatar { width: 100px; display: inline-block; - border: 1px solid #C4C4C4; + border: 1px solid #c4c4c4; border-radius: 50%; box-sizing: border-box; - margin-bottom: -15px; } + margin-bottom: -15px; +} .profile-avatar.edit { - margin-bottom: 19px; } + margin-bottom: 19px; +} .profile-avatar-wrapper > label { position: absolute; left: 80.49%; top: 12.5%; - bottom: 12.5%; } + bottom: 12.5%; +} .profile-meta { display: flex; @@ -1640,138 +1979,172 @@ p { padding-left: 150px; width: 500px; max-width: 100%; - flex-wrap: wrap; } + flex-wrap: wrap; +} .profile-meta > div { display: flex; flex-direction: column; - align-items: center; } + align-items: center; +} .profile-meta__text { color: #3f51b5; - margin-bottom: 5px; } + margin-bottom: 5px; + font-size: 0.9rem; +} .profile-meta__button { - margin-right: 10px; } + margin-right: 10px; +} .profile-bio { position: relative; width: 95%; height: 128px; padding-top: 50px; - margin: 0 auto; } + margin: 0 auto; +} .profile-bio > div { display: flex; - flex-direction: column; } + flex-direction: column; +} .bio-header { color: #3f51b5; - margin-bottom: 5px; } + margin-bottom: 5px; + font-family: Roboto-Light; + font-weight: bolder; +} .bio-text { - font-family: Roboto; + font-family: Roboto-Light; font-style: normal; font-weight: 300; line-height: normal; font-size: 14px; text-align: justify; color: #696969; - padding-top: 15px; } + padding-top: 15px; +} .article-card.profile { - height: 12vh; } + height: 12vh; +} .fa-cog { - color: #faf9f9; } + color: #faf9f9; +} .hide { - display: none; } + display: none; +} .profile-form { display: flex; flex-direction: column; width: 70%; - border: 0px solid #C4C4C4; + border: 0px solid #c4c4c4; box-sizing: border-box; backdrop-filter: blur(4px); bottom: 20px; border-radius: 5px; margin: 0 auto; - margin-top: 100px; } + margin-top: 100px; +} .profile-form .small-input { display: flex; flex-direction: row; margin: 0 auto; - width: 100%; } + width: 100%; +} .profile-form .single-input { width: 90%; height: auto; - border: 1px solid #C4C4C4; + border: 1px solid #c4c4c4; margin: 0 auto; border-radius: 3px; - margin: 5px 20px; } + margin: 5px 20px; +} .profile-form .large-input { width: 94%; height: 193px; - border: 1px solid #C4C4C4; + border: 1px solid #c4c4c4; margin-top: 40px; margin: 20px; - border-radius: 5px; } + border-radius: 5px; +} -[type="date"] { - color: #C4C4C4; - padding: 0 0.3em; } +[type='date'] { + color: #c4c4c4; + padding: 0 0.3em; +} -.profile-form .single-input input[type="date"] { +.profile-form .single-input input[type='date'] { width: 100%; - border: 0px solid #C4C4C4; + border: 0px solid #c4c4c4; font-size: 16px; height: 30px; position: relative; margin: 0 auto; - border-radius: 3px; } + border-radius: 3px; +} .profile-form .single-input select { width: 100%; - border: 0px solid #C4C4C4; + border: 0px solid #c4c4c4; font-size: 16px; height: 30px; position: relative; margin: 0 auto; border-radius: 3px; - color: #C4C4C4; } + color: #c4c4c4; +} textarea::placeholder { - color: rgba(0, 0, 0, 0.3); } + color: rgba(0, 0, 0, 0.3); +} @media screen and (max-width: 960px) { .profile-view { - width: 100%; } + width: 100%; + } .profile-avatar-wrapper { - bottom: -60px; } + bottom: -60px; + } .profile-avatar { width: 70px; height: 70px; - bottom: -35px; } + bottom: -35px; + } .profile-meta { - padding-left: 100px; } + padding-left: 100px; + } .bio-text { - bottom: -60px; } + bottom: -60px; + } .profile-form .small-input { - flex-direction: column; } + flex-direction: column; + } .profile-form .large-input { - width: 90%; } + width: 90%; + } .profile-form { - width: 100%; } + width: 100%; + } .article-card.profile { - height: auto; } } + height: auto; + } +} @media screen and (max-width: 768px) { .profile-meta__button { position: absolute; top: 230px; - right: 5%; } } + right: 5%; + } +} diff --git a/ui/pages/profile-view-stats.html b/ui/pages/profile-view-stats.html new file mode 100644 index 0000000..8521655 --- /dev/null +++ b/ui/pages/profile-view-stats.html @@ -0,0 +1,189 @@ + + + + + + + + + + Authors Haven + + + + +
+
+
+
+
+ +

Jane Doe

+
+
+
+
+
+
+ Followers + 57 K +
+
+ Following + 2 K +
+
+ Published + 16 +
+
+ Read + 30 +
+
+
+
+ +
+ +
+
Bio:
+
+ Mauris vel pretium dolor, et hendrerit leo. Donec condimentum eget nisl et lobortis. + Etiam id imperdiet urna. Sed eget neque facilisis, feugiat ligula dictum, tempus + lectus. Donec nec magna nibh. Nullam molestie nisi nisl, aliquet congue purus tempor + ut. Praesent ut quam vel mauris accumsan tincidunt. In et mi non libero ultricies +
+
+
+
+
+
+

ARTICLES

+ +
+
+
+

+ Automobile Industry Trends +

+

+ New cars to watch in 2019 are ultricies vitae risus ut aliquam. Quisque at maximus + justo, eu luctus lorem. Nullam mollis felis ligula, sit amet luctus sem luctus non + New cars to watch in 2019 are ultricies vitae risus ut aliquam. Quisque at maximus + justo, eu luctus lorem. Nullam mollis felis ligula, sit amet luctus sem luctus non +

+
+ 5 min + 200 + 15k +
+
+
+
+
+
+

+ Automobile Industry Trends +

+

+ New cars to watch in 2019 are ultricies vitae risus ut aliquam. Quisque at maximus + justo, eu luctus lorem. Nullam mollis felis ligula, sit amet luctus sem luctus non + New cars to watch in 2019 are ultricies vitae risus ut aliquam. Quisque at maximus + justo, eu luctus lorem. Nullam mollis felis ligula, sit amet luctus sem luctus non +

+
+ 5 min + 200 + 15k +
+
+
+
+
+
+

+ Automobile Industry Trends +

+

+ New cars to watch in 2019 are ultricies vitae risus ut aliquam. Quisque at maximus + justo, eu luctus lorem. Nullam mollis felis ligula, sit amet luctus sem luctus non + New cars to watch in 2019 are ultricies vitae risus ut aliquam. Quisque at maximus + justo, eu luctus lorem. Nullam mollis felis ligula, sit amet luctus sem luctus non +

+
+ 5 min + 200 + 15k +
+
+
+
+
+
+

+ Automobile Industry Trends +

+

+ New cars to watch in 2019 are ultricies vitae risus ut aliquam. Quisque at maximus + justo, eu luctus lorem. Nullam mollis felis ligula, sit amet luctus sem luctus non + New cars to watch in 2019 are ultricies vitae risus ut aliquam. Quisque at maximus + justo, eu luctus lorem. Nullam mollis felis ligula, sit amet luctus sem luctus non +

+
+ 5 min + 200 + 15k +
+
+
+
+ More Articles... +
+
+
+
+
+ +
+ + + \ No newline at end of file