diff --git a/css/global.css b/css/global.css index f36a5cb..376f064 100644 --- a/css/global.css +++ b/css/global.css @@ -16,24 +16,30 @@ a{ display: grid; grid-template-areas: 'header header header' - 'main main sidebar' + 'main main main' 'footer footer footer'; grid-gap: 2px; - grid-template-columns: 2fr 1fr; + grid-template-columns: 1fr; } .header{ grid-area: header; width: 100%; + display: flex; + justify-content: center; + background-color: var(--primary-color); +} + +.header__content{ + width: 1450px; } .header__menu{ width: 100%; display: flex; justify-content: space-between; - background-color: var(--primary-color); align-items: center; - padding: 0.5em 2em 0.5em 3em; + padding: 0.5em 1em 0.5em 1em; } @@ -81,10 +87,12 @@ a{ width: 100%; padding: 1em; position: relative; + display: flex; + justify-content: center; } .header__title h1{ - margin-left: 1em; + width: 100%; font-weight:bold; font-style: italic; font-family: var(--second-font); @@ -93,31 +101,69 @@ a{ padding: 0.2em 0em; } +.header__options{ + display: flex; +} + +.header__options > .options__search > input{ + border: none; + font-size: 1em; + padding: 0.3em; + outline: none; + border-radius: 4px; +} + +.header__options > .options__search > button{ + font-size: 1em; + border: none; + background-color: var(--second-color); + padding: 0.3em; + cursor: pointer; + font-weight: bold; + border-radius: 4px; +} + +.header__options > .options__search > button:hover{ + box-shadow: var(--second-color) 0px 0px 20px; + transition: 0.3s; +} + .main{ grid-area: main; - height: 86vh; width: 100%; + display: flex; + justify-content: center; padding: 0.5em 0em 0em 0em; } .main .main__content{ - width: 100%; + width: 1450px; height: 100%; - box-shadow: rgba(0, 0, 0, 0.35) 0px 0px 15px; + display: flex; + justify-content: space-between; + gap: 1em; + padding: 0.5em; +} + + +.content__posts{ + width: 100%; + box-shadow: 0px 0px 15px; + } .sidebar{ grid-area: sidebar; - height: 86vh; - padding: 0.5em 0.5em 0em 0.5em; + height: 100vh; } + .sidebar__content{ height: 100%; width: 100%; - box-shadow: rgba(0, 0, 0, 0.35) 0px 0px 15px; + box-shadow: 0px 0px 15px; display: flex; flex-direction: column; align-items: center; @@ -134,7 +180,8 @@ a{ .sidebar .siderbar__title > h1{ font-size: 1.4em; font-style: italic; - font-family: var(--second-font); + font-family: var(--second-font); + color: var(--second-color); } .sidebar .sidebar__new-posts{ @@ -144,12 +191,11 @@ a{ align-items: center; overflow: auto; width: 100%; - padding: 1em 0.3em; + padding: 1em; } .footer{ - height: 10vh; grid-area: footer; background-color: var(--primary-color); border-top: 2px solid var(--second-color); @@ -160,6 +206,33 @@ a{ margin-top: 1em; } +.footer__content{ + width: 1450px; + display: flex; + justify-content: space-between; + align-items: center; + padding: 1em 0em; +} + +.footer__content > .footer__network{ + display: flex; + flex-direction: column; + gap: 0.6em; +} + +.footer__content > .footer__network > li{ + list-style: none +} + +.footer__content > .footer__network > li > a{ + font-size: 1.1em; + color: #FFF +} + +.footer__content > .footer__network > li > a:hover{ + transition: 0.3s; + color: var(--second-color) +} .btn{ @@ -176,8 +249,6 @@ a{ border: none; } -.btn--danger{} - .card{ width: 280px; @@ -218,6 +289,47 @@ a{ margin-bottom: 1em; } -.card .card__info .card__posted-by{ - +.post{ + width: 100%; + display: flex; + justify-content: center; + padding: 1em; +} + +.post > .post__content{ + width: 80%; + border: 1px solid #000; + margin: 1em 0em; + box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px; +} + +.post__image { + width: 100%; +} + +.post__image > img{ + width: 100%; +} + +.post__info{ + width: 100%; + padding: 1em; +} + + +.post__info > .post__title, .post__body, .post__by{ + margin-bottom: 0.5em; +} + +.post__tags{ + display: flex; + width: 100%; + gap: 0.5em; + padding: 0.5em 0em; + color: #0000ff; +} + + +.post__by{ + font-weight: bold; } \ No newline at end of file diff --git a/img/post.jpg b/img/post.jpg new file mode 100644 index 0000000..6693e26 Binary files /dev/null and b/img/post.jpg differ diff --git a/index.html b/index.html index 29cc88b..1c8ea57 100644 --- a/index.html +++ b/index.html @@ -15,144 +15,278 @@
-
- - +
- -
-

BlogNatuno

- +
-

Hello

-
-
+ - +
-
+ +