From 45b170bdcf9e6e5ebd5d727fba17242aab2ebf04 Mon Sep 17 00:00:00 2001 From: ys35code Date: Thu, 27 Oct 2022 15:40:14 +0100 Subject: [PATCH 1/3] html header,article - css header --- css/style.css | 10 ++++++++++ index.html | 17 ++++++++++++++++- 2 files changed, 26 insertions(+), 1 deletion(-) diff --git a/css/style.css b/css/style.css index 75e9841e..8f4a5147 100644 --- a/css/style.css +++ b/css/style.css @@ -6,3 +6,13 @@ * for example: General styles, Navigation styles, Hero styles, Footer etc. * */ + body { + display: flex; + flex-direction: column; + align-items: center; + } + + header h1 { + font-size: 3rem; + text-align: center; + } \ No newline at end of file diff --git a/index.html b/index.html index 67dfc7f5..b32e4f55 100644 --- a/index.html +++ b/index.html @@ -18,5 +18,20 @@ +
+

Bit News

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora repellendus vero facilis iure maiores modi at dolor inventore.

+
+ +
+

+ Lorem ipsum dolor sit amet consectetur. +

+

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nostrum aperiam corrupti minima.

+
+ + - + \ No newline at end of file From b2e441ed7b984383a19982a827c23672b3aa5ba3 Mon Sep 17 00:00:00 2001 From: ys35code Date: Thu, 27 Oct 2022 19:40:22 +0100 Subject: [PATCH 2/3] html - added articles and images css - styled articles and paddings --- css/style.css | 25 +++++++++++++++++++++++++ index.html | 23 ++++++++++++++++++++++- 2 files changed, 47 insertions(+), 1 deletion(-) diff --git a/css/style.css b/css/style.css index 8f4a5147..2b272798 100644 --- a/css/style.css +++ b/css/style.css @@ -12,7 +12,32 @@ align-items: center; } + main { + padding-top: 5rem; + } + + header { + background-color: goldenrod; + /* width: fit-content; */ + } + + article { + padding: 5rem 0 3rem 0 ; + } + + img { + padding-left: 10rem; + } + + a { + padding-left: 10rem; + } + header h1 { font-size: 3rem; text-align: center; + } + + article h2, article p { + padding: 0 10rem 0 10rem; } \ No newline at end of file diff --git a/index.html b/index.html index b32e4f55..0aeea883 100644 --- a/index.html +++ b/index.html @@ -22,16 +22,37 @@

Bit News

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora repellendus vero facilis iure maiores modi at dolor inventore.

+
+
+

+ Lorem ipsum dolor sit amet consectetur. +

+ picsum +

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nostrum aperiam corrupti minima.

+ Read More +
+ +
+

+ Lorem ipsum dolor sit amet consectetur. +

+ picsum +

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rerum in, necessitatibus labore totam facere, consequuntur natus inventore quaerat molestias laborum distinctio esse provident quia alias, tempore maiores incidunt temporibus obcaecati non eaque dicta voluptatem. Consectetur possimus provident molestias, quis aperiam obcaecati voluptatum in officiis voluptatem.

+ Read More +

Lorem ipsum dolor sit amet consectetur.

+ picsum

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nostrum aperiam corrupti minima.

+ Read More
+
- + Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi minima reiciendis quidem.
\ No newline at end of file From 1533de61fa25260a7df493338dde62e3977677b3 Mon Sep 17 00:00:00 2001 From: ys35code Date: Thu, 27 Oct 2022 20:27:18 +0100 Subject: [PATCH 3/3] final edition - html and css all finished. --- css/style.css | 78 ++++++++++++++++++++++++++++++++++----------------- index.html | 12 ++++---- 2 files changed, 58 insertions(+), 32 deletions(-) diff --git a/css/style.css b/css/style.css index 2b272798..8ac6b032 100644 --- a/css/style.css +++ b/css/style.css @@ -6,38 +6,64 @@ * for example: General styles, Navigation styles, Hero styles, Footer etc. * */ - body { - display: flex; - flex-direction: column; - align-items: center; - } +/* body */ +body { + display: flex; + flex-direction: column; + align-items: center; + background-color: bisque; + margin-top: 0; +} - main { - padding-top: 5rem; - } - - header { +/* header */ +header { background-color: goldenrod; - /* width: fit-content; */ - } + width: 100%; + padding-left: 13rem; +} + +header h1 { + font-size: 3rem; +} + +/* main */ +main { + padding-top: 0.5rem; +} + +article:first-child { + font-size: 1.3rem; +} - article { - padding: 5rem 0 3rem 0 ; - } +article { + padding: 1rem 0 2rem 0; +} - img { +article h2, +article p { + padding: 0 10rem 0 10rem; +} + +img { padding-left: 10rem; - } +} - a { +a { padding-left: 10rem; - } +} - header h1 { - font-size: 3rem; - text-align: center; - } +/* footer */ +footer { + padding-bottom: 2rem; + text-align: center; +} - article h2, article p { - padding: 0 10rem 0 10rem; - } \ No newline at end of file +hr { + display: block; + width: 50rem; + height: 1px; + border: 1px; + border-top: 1px solid rgb(140, 140, 141); + margin: 1em; + padding: 0.5rem; +} \ No newline at end of file diff --git a/index.html b/index.html index 0aeea883..488e540e 100644 --- a/index.html +++ b/index.html @@ -19,16 +19,16 @@
-

Bit News

+

Web3 News Blog.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora repellendus vero facilis iure maiores modi at dolor inventore.

- Lorem ipsum dolor sit amet consectetur. + Lorem ipsum dolor sit amet consectetur adipisicing

picsum -

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nostrum aperiam corrupti minima.

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt quos, odio vel repudiandae neque magni a in. Odit, ex?

Read More
@@ -50,9 +50,9 @@

Read More

- - \ No newline at end of file