From bbbe1eb2bea4f7628a19558f91256daefb17e860 Mon Sep 17 00:00:00 2001 From: Dimple Yuen Date: Mon, 23 Mar 2015 21:09:25 +0800 Subject: [PATCH 1/3] Version 1: Get It Done --- css/custom.css | 260 ++++++++++++++++++++++++++++++++++++++++++- index.html | 294 +++++++++++++++++++++++++++++++++++++++++-------- 2 files changed, 507 insertions(+), 47 deletions(-) diff --git a/css/custom.css b/css/custom.css index 6e7ce8b..fb26853 100644 --- a/css/custom.css +++ b/css/custom.css @@ -1 +1,259 @@ -/* You can include your custom styling here */ \ No newline at end of file +body { + background-color: #F1F1F1; +} + +.custom-header { + border-bottom: 2px solid #D9D9D9; + background-color: white; +} + +/*how to get the border ON TOP of header border?*/ +.navbar-left li:hover, .navbar-left a:hover { + border-bottom: 2px solid red; + color: #FF470C !important; +} + +.navbar-btn { + margin: 8px; +} + +.navbar-right li:nth-child(n+4){ + border-right: 1px solid #D9D9D9; +} + +.navbar-right li:nth-child(6){ + border-right: none; +} + +.btn { + font-size: 0.7em; +} + +.btn-danger, .btn-danger:hover { + background-color: #FF470C; + text-transform: uppercase; + text-align: left; +} + +.left-channel { + float: left; +} + +.right-caret { + float: right; +} + +.sidebar .btn { + text-transform: uppercase; +} + +.sidebar { + background-color: white; + border-right: 1px solid #D9D9D9; + padding-bottom: 0px; + width: 350px; +} + +.latest-articles { + padding-left: 25px; + margin: 0px; + position: relative; + left: -15px; + border-bottom: 1px solid #D9D9D9; +} + +.latest-articles ul li { + padding: 10px 5px; + border-top: 1px solid #D9D9D9; +} + +/*::-webkit-scrollbar { + display: none; +}*/ + +.latest-articles img { + float: left; + margin: 5px; + padding-bottom: 10px; +} + +.latest-articles li a { + color: gray; +} + +.latest-articles li a:hover { + background-color: transparent !important; + font-style: none; + text-decoration: none; + color: #FF470C; +} + +.sidebar-bottom-links { + margin: 13px 0; +} + +.main { + padding: 20px; + background-color: white; + border: 1px solid #CCCCCC; + margin-top: 20px; +} + +.tnw-tag { + margin-top: 20px; + margin-bottom: 0px; +} + +.tnw-tag a { + text-decoration: underline; +} + +img .center-block { + display: block; + margin-left: auto; + margin-right: auto; +} + +.title-font { + font-family: 'Source Sans Pro',sans-serif; +} + +.article-info { + color: #BAB9B7; + font-style: italic; + font-family: 'FF Tisa',Georgia,serif; + /*font-weight: bold;*/ +} + +#author { + text-transform: uppercase; + font-style: normal; + font-family: 'Source Sans Pro'; + font-weight: bold; +} + +a { + color: #FF470C; +} + +p { + font-family: Georgia; + font-size: 1.1em; + line-height: 25px; + color: gray; +} + + a:hover { + text-decoration: none; +} + +/*.dropdown-menu { + background-color: #383838; +}*/ + +.social-menu { + padding: 0 0 0 10px; + margin: 0; + width: 470px; + background-color: #383838; +} + +#social { + width: 150px; + padding: 40px 20px; + margin: 0; + border-right: 1px solid #434343; + border-bottom: 1px solid #434343; +} + +#social:nth-child(3n) { + border-right: none; +} + +#social a { + color: white; +} + +#social a:hover { + background-color: transparent; + color: #FF470C; +} + +#news { + margin-top: 5px; + padding: 0px; + color: white; +} + +#subscribe { + padding-bottom: 15px; +} + +#search { + background-color: white; + padding: 10px; + padding-bottom: 0px; +} + +.form-group { + text-align: left; + color: white; +} + +.dropdown li { + text-align: center; + padding: 20px; +} + +.form-control { + width: 250px; +} + +#login { + padding-top: 5px; + padding-bottom: 0px; +} + +.btn-login { + background-color: transparent; + width: 250px; + color: white; + font-size: 14px; + border: 1px solid white; +} + +.login-menu { + background-color: #383838; +} + +.no-account li { + padding: 5px; + color: white; + background-color: #313131; +} + +.no-account .btn-danger { + width: 250px; + text-align: center; + font-size: 14px; +} + +.all-channels { + width: 100%; +} + +.search-area { + padding: 8px 8px 0 0; +} + +.social-like-buttons { + padding-top: 2px; +} + +#actual-search-bar { + width: 155px; +} + +#btn-go { + height:34px; +} diff --git a/index.html b/index.html index ce15d9c..32ded00 100644 --- a/index.html +++ b/index.html @@ -10,73 +10,275 @@ The Next Web - + - - - +
-
- - - + + + +
+ + +
+
+ + + +
+
+
+ + +
+
+ +
+
+ +
+
+
+ + +
+ + +
+ + +
+
+ About + Goodies + Advertise + Privacy + POS +
+
+
-
-

News Content

+ + + + + + +
+ + +
+ +
+ By Ben Woods - 20 Nov'14 +

Square officially launches its Register software platform worldwide

+

Square has today annouced that its point-of-sale (POS) software Square Register is now available globally, having previously been restricted to users in the US, Canada and Japan. Announced at The Financial... Keep reading →

+
+
+ + +
+ +
+ By Jory Mackay - 20 Nov'14 +

The weird science of first impressions

+

Square has today annouced that its point-of-sale (POS) software Square Register is now available globally, having previously been restricted to users in the US, Canada and Japan. Announced at The Financial... Keep reading →

+
+ + +
+ By Paul Sawers - 20 Nov'14 +

Adidas now lets Americans print photos on their sneakers too

+

Square has today annouced that its point-of-sale (POS) software Square Register is now available globally, having previously been restricted to users in the US, Canada and Japan. Announced at The Financial... Keep reading →

+
+
+ From c66cc0b21a2a855c377f0b5852894d16a6123a2f Mon Sep 17 00:00:00 2001 From: Dimple Yuen Date: Mon, 23 Mar 2015 22:27:32 +0800 Subject: [PATCH 2/3] Version 2: Tidy Up --- css/custom.css | 235 +++++++++++++++++++++++++------------------------ index.html | 183 +++++++++++++++++++++----------------- 2 files changed, 221 insertions(+), 197 deletions(-) diff --git a/css/custom.css b/css/custom.css index fb26853..d9261c6 100644 --- a/css/custom.css +++ b/css/custom.css @@ -13,38 +13,88 @@ body { color: #FF470C !important; } +.title-font { + font-family: 'Source Sans Pro',sans-serif; +} + .navbar-btn { margin: 8px; } -.navbar-right li:nth-child(n+4){ +.navbar-right > li:nth-child(n+4){ border-right: 1px solid #D9D9D9; } -.navbar-right li:nth-child(6){ +.navbar-right > li:nth-child(6){ border-right: none; } -.btn { +.btn-small-font { font-size: 0.7em; } -.btn-danger, .btn-danger:hover { - background-color: #FF470C; - text-transform: uppercase; +.social-menu { + padding: 0 0 0 10px; + margin: 0; + width: 470px; + background-color: #383838; + text-align: center; + color: white; +} + +.social-links { + width: 150px; + padding: 40px 20px; + margin: 0; + border-right: 1px solid #434343; + border-bottom: 1px solid #434343; +} + +.social-links:nth-child(3n) { + border-right: none; +} + +.social-links a { + color: white !important; + text-align: center; +} + +.social-links a:hover { + background-color: transparent !important; + color: #FF470C !important; +} + +.news { + padding-top: 15px !important; + padding-bottom: 0px !important; + color: white; +} + +.subscribe { + padding-top: 4px !important; +} + +.checkbox { + padding: 4px !important; text-align: left; } -.left-channel { - float: left; +.searchbar-wrapper { + padding: 8px 8px 0 0; } -.right-caret { - float: right; +.social-like-buttons { + padding-top: 2px; } -.sidebar .btn { - text-transform: uppercase; +#search-menu { + background-color: white; + padding: 10px; + padding-bottom: 0px; +} + +#searchbar { + width: 155px; } .sidebar { @@ -52,36 +102,57 @@ body { border-right: 1px solid #D9D9D9; padding-bottom: 0px; width: 350px; + padding: 0px; +} + +.sidebar-buttons-top { + padding: 20px 20px 0 20px; +} + +.sidebar .btn { + text-transform: uppercase; } -.latest-articles { +.btn-channel, .btn-channel:hover { + background-color: #FF470C; + text-align: left; +} + +.channel-title { + float: left; +} + +.channel-caret { + float: right; +} + +.all-channels-dropdown { + width: 100%; +} + +.sidebar-articles { padding-left: 25px; margin: 0px; - position: relative; - left: -15px; border-bottom: 1px solid #D9D9D9; + list-style-type: none; } -.latest-articles ul li { +.sidebar-ul li { padding: 10px 5px; border-top: 1px solid #D9D9D9; } -/*::-webkit-scrollbar { - display: none; -}*/ - -.latest-articles img { +.sidebar-articles img { float: left; margin: 5px; padding-bottom: 10px; } -.latest-articles li a { +.sidebar-articles li a { color: gray; } -.latest-articles li a:hover { +.sidebar-articles li a:hover { background-color: transparent !important; font-style: none; text-decoration: none; @@ -89,14 +160,14 @@ body { } .sidebar-bottom-links { - margin: 13px 0; + margin: 16px 0; } -.main { - padding: 20px; - background-color: white; - border: 1px solid #CCCCCC; - margin-top: 20px; +.sidebar-bottom-links li { + list-style-type: none; + display: inline-block; + /*padding-left: px;*/ + padding-right: 10px; } .tnw-tag { @@ -108,14 +179,17 @@ body { text-decoration: underline; } -img .center-block { - display: block; - margin-left: auto; - margin-right: auto; +.main { + padding: 20px; + background-color: white; + border: 1px solid #CCCCCC; + margin-top: 20px; } -.title-font { - font-family: 'Source Sans Pro',sans-serif; +img .center-block { +/* display: block; + margin-left: auto; + margin-right: auto;*/ } .article-info { @@ -136,6 +210,10 @@ a { color: #FF470C; } +a:hover { + text-decoration: none; +} + p { font-family: Georgia; font-size: 1.1em; @@ -143,77 +221,24 @@ p { color: gray; } - a:hover { - text-decoration: none; -} - -/*.dropdown-menu { - background-color: #383838; -}*/ - -.social-menu { - padding: 0 0 0 10px; - margin: 0; - width: 470px; +.login-menu { background-color: #383838; } -#social { - width: 150px; - padding: 40px 20px; - margin: 0; - border-right: 1px solid #434343; - border-bottom: 1px solid #434343; -} - -#social:nth-child(3n) { - border-right: none; -} - -#social a { - color: white; -} - -#social a:hover { - background-color: transparent; - color: #FF470C; -} - -#news { - margin-top: 5px; - padding: 0px; - color: white; -} - -#subscribe { - padding-bottom: 15px; -} - -#search { - background-color: white; +.login-menu li { + text-align: center; padding: 10px; - padding-bottom: 0px; } -.form-group { +.login-dropdown { text-align: left; color: white; } -.dropdown li { - text-align: center; - padding: 20px; -} - .form-control { width: 250px; } -#login { - padding-top: 5px; - padding-bottom: 0px; -} - .btn-login { background-color: transparent; width: 250px; @@ -222,38 +247,14 @@ p { border: 1px solid white; } -.login-menu { - background-color: #383838; -} - .no-account li { padding: 5px; color: white; background-color: #313131; } -.no-account .btn-danger { +.btn-create { width: 250px; text-align: center; font-size: 14px; } - -.all-channels { - width: 100%; -} - -.search-area { - padding: 8px 8px 0 0; -} - -.social-like-buttons { - padding-top: 2px; -} - -#actual-search-bar { - width: 155px; -} - -#btn-go { - height:34px; -} diff --git a/index.html b/index.html index 32ded00..dc15787 100644 --- a/index.html +++ b/index.html @@ -30,21 +30,23 @@
- + +
- +
-
-
- - - +
+
+
+ + + +
-
-
+
- -
-
- -
-
- + +
+
+ +
+
+ +

-
+
-
- +
- About - Goodies - Advertise - Privacy - POS +
  • About
    • +
  • Goodies
    • +
  • Advertise
    • +
  • Privacy
    • +
  • ToS
    • - + - +
    From 26c2a2fd4ac49ce31ef25dd46b6615f72cd71dbe Mon Sep 17 00:00:00 2001 From: Dimple Yuen Date: Tue, 24 Mar 2015 11:51:14 +0800 Subject: [PATCH 3/3] Final TNW Clone --- css/custom.css | 7 ++++++- index.html | 4 ++-- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/css/custom.css b/css/custom.css index d9261c6..a1b7728 100644 --- a/css/custom.css +++ b/css/custom.css @@ -7,9 +7,14 @@ body { background-color: white; } +.left-links { + position: absolute; + left: 100px; +} + /*how to get the border ON TOP of header border?*/ .navbar-left li:hover, .navbar-left a:hover { - border-bottom: 2px solid red; + border-bottom: 1px solid red; color: #FF470C !important; } diff --git a/index.html b/index.html index dc15787..ec0431c 100644 --- a/index.html +++ b/index.html @@ -34,7 +34,7 @@