diff --git a/src/sections/Learn/LearnPage-Sections/books.js b/src/sections/Learn/LearnPage-Sections/books.js index 505656ce493e..c95e3414a899 100644 --- a/src/sections/Learn/LearnPage-Sections/books.js +++ b/src/sections/Learn/LearnPage-Sections/books.js @@ -9,27 +9,25 @@ import styled from "styled-components"; const BooksListWrapper = styled.div` Button:hover { box-shadow: 0 2px 10px ${props => props.theme.whiteFourToBlackFour}; - } .book-heading { text-align: center; - margin: 5rem 0 + margin: 2.5rem 5vw; color: ${props => props.theme.text}; transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); } .books-card { display: flex; - margin: 1rem auto; + margin: 1rem auto 2rem auto; + padding: 1rem 0; min-height: 15.5rem; max-width: 50.5rem; transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); - .books-image { height: 12rem; margin: auto; text-align: center; filter: brightness(0.9); - img { max-width: 18rem; height: inherit; @@ -69,12 +67,10 @@ const BooksListWrapper = styled.div` } } } - .see-more-button { margin: 4rem 0 0; text-align: center; } - @media screen and (max-width: 600px) { .books-card { display: block; @@ -158,5 +154,4 @@ const BooksSection = () => { ); }; - -export default BooksSection; +export default BooksSection; \ No newline at end of file diff --git a/src/sections/Learn/learnpage.style.js b/src/sections/Learn/learnpage.style.js index 885d745e6569..b6d1553fb112 100644 --- a/src/sections/Learn/learnpage.style.js +++ b/src/sections/Learn/learnpage.style.js @@ -2,7 +2,7 @@ import styled from "styled-components"; export const LearnPageWrapper = styled.div` .page-header-section { - height: 35rem; + height: 20rem; text-align: center; background: rgb(71,126,150); background: linear-gradient(250deg, rgba(71,126,150,1) 0%, rgba(0,179,159,1) 35%, rgba(60,73,79,1) 100%); @@ -12,11 +12,15 @@ export const LearnPageWrapper = styled.div` justify-content: center; h1 { color: white; + margin-left: 5vw; + margin-right: 5vw; } h3 { margin-top: 1rem; margin-left: 5rem; margin-right: 5rem; + padding-left: 1.2rem; + padding-right: 1.2rem; color: white; font-size: 1.5rem; font-weight: 300; @@ -27,19 +31,16 @@ export const LearnPageWrapper = styled.div` } } } - .join-community{ width: 100%; max-width: 100%; height: 28rem; background-position: bottom; - @media screen and (min-width: 1800px) { height: 34rem; background-position-y: -56vw; } } - .join-community_text-and_button{ p{ max-width: 22rem;