Open aminehm16 opened 2 weeks ago
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
body { margin: 0; padding: 0; box-sizing: border-box; background: #f1f1f1; font-family: 'Montserrat', sans-serif; }
.header-logo { display: inline-block; width: 90%; padding: 10px 30px; }
.header-logo a { text-decoration: none; color: #005a48; font-size: 1.5rem; font-weight: bold; }
.nav { display: inline-block; width: 90%; }
.nav-items { display: inline-block; width: calc(70% - 100px); vertical-align: middle; text-align: center; }
.nav-item { display: inline-block;
margin: 0px 10px; }
.nav-item a { text-decoration: none; color: #005a48; font-weight: 600; }
.nav-search { display: inline-block; width: calc(30%); vertical-align: middle; text-align: center; } .nav-search__el { background: #c5c5c5; width: 40%; padding: 5px; border-radius: 20px; display: flex; justify-content: center; flex-wrap: nowrap; overflow: hidden; }
.searchIput { border: none; background: #c5c5c5; flex-basis: 60%; }
.nav-search i { flex-basis: 40%; }
.nav-search .searchIput { display: inline-block; vertical-align: middle; } / slider / .slider-container { background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.pexels.com/photos/931887/pexels-photo-931887.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'); height: 400px; display: flex; align-items: center; background-size: cover; background-repeat: no-repeat; background-position: bottom; }
.glide { width: 60%; margin: auto; }
.glide__slide { border-radius: 100%; text-align: center; padding: 20px; }
.glide__slide img { display: block; height: 180px; width: 180px; border-radius: 100%; object-fit: cover; border: #fff solid 6px; }
.glide__slide h4 { color: #fff; font-size: 0.9rem; margin: 10px; }
.glide__arrows { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; width: 100%; display: flex; justify-content: space-between; }
.glidearrow { background-color: rgba(0, 0, 0, 0.5); color: #fff; font-size: 20px; border: none; padding: 10px 15px; margin: 0 5px; border-radius: 5px; cursor: pointer; transition: all 0.3s ease; } .glidearrow:hover { background-color: #fff; color: #000; }
/ / .main-title { padding: 0px 20px; color: #005a48; } .main-section { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 350px); grid-gap: 20px; width: 98%; margin: auto; padding: 10px 0px; }
.article { grid-column-start: 1; grid-column-end: 3; display: flex; border-bottom: solid 2px #7d57579b; padding-bottom: 30px; }
.article-text h2, .article-textfooter-1 h2, .article-textfooter-2 h2 { font-size: 30px; font-weight: 700; color: #005a48; }
.article-seeMore { background-color: #7d57579b; border: none; padding: 5px 10px; border-radius: 10px; cursor: pointer; text-transform: capitalize; color: #fff; }
.comments { display: flex; width: 100%; justify-content: space-between; align-items: center; }
.comments i { cursor: pointer; }
.share { display: flex; justify-content: space-between; align-items: center; width: 30%; }
.share p { cursor: pointer; color: #005a48; } .share i { cursor: pointer; color: #005a48; }
.article-image { flex-basis: 60%; margin: 6px; }
.article-text { flex-basis: 48%; margin: 6px; }
.article-image { height: 100%; width: 100%; }
.article-image img { width: 100%; height: 100%; object-fit: cover; }
.SideBar { grid-column-start: 3; grid-column-end: 4; grid-row-start: 1; grid-row-end: 5; background-color: #dfcece; display: grid; grid-template-columns: auto; grid-template-rows: 200px 1fr 200px; } / new letter / .SideBar-newletter { padding: 2rem; }
.newletter-action { display: flex; flex-direction: column; width: 60%; align-items: center; }
.SideBar-newletter h1 { color: #5c5656; border-bottom: 2px solid #5c5656; display: inline-block; }
.SideBar-newletter .new-Btn { background-color: #005a48; padding: 10px; border: none; width: 100%; cursor: pointer; border-radius: 20px; padding: 10px 5px; color: #fff; font-size: 1rem; }
.SideBar-newletter .newletter-Input { width: 100%; border: none; background-color: #b3a5a5; margin-bottom: 10px; padding: 10px 5px; border-radius: 20px; }
.article-footer-1 { grid-column-start: 1; grid-column-end: 2; / grid-row-start: 3; grid-row-end: 5; / }
.article-image__footer-1 { height: 100%; width: 100%; }
.article-image__footer-1 img { height: 100%; width: 100%; object-fit: cover; }
.article-footer-2 { grid-column-start: 2; grid-column-end: 3; }
.article-image__footer-2 { height: 100%; width: 100%; }
.article-image__footer-2 img { height: 100%; width: 100%; object-fit: cover; }
/ sidebar items /
.recent { padding: 3rem; }
.recent__items { display: grid; grid-template-columns: repeat(2, 100px); grid-auto-rows: 200px; grid-gap: 20px; text-align: center; padding: 0; }
.recent__item h4 { margin: 10px 0px; }
.recent h1 { color: #5c5656; border-bottom: 2px solid #5c5656; display: inline-block; }
.recent h1 { margin-top: 3rem; } .recent__item { list-style: none; }
.recent__item img { height: 100px; width: 100px; border-radius: 100%; }
/ social /
.sidebar-social-media { background-color: #005a48; }
.sidebar-social-media__content { padding: 1rem 3rem; }
.sidebar-social-media__content h3 { color: #fff; font-size: 1.5rem; border-bottom: #fff solid 2px; display: inline-block; }
.sidebar-social-media__content_icon { display: flex; }
.sidebar-social-media__content_icon i { font-size: 2rem; margin-right: 30px; cursor: pointer; background-color: #fff; padding: 20px; border-radius: 100%; }
.sidebar-social-media__content_icon i:hover { background-color: #f1f1f1; animation: 3s; }.price { font-size: 1.1rem; font-weight: bold; color: #333; }
.buy-button { padding: 0.5rem 1rem; background: #333; color: #fff; border: none; border-radius: 5px; cursor: pointer; transition: background 0.3s; }
.buy-button:hover { background: #555; } .header { display: flex; align-items: center; justify-content: space-between; padding: 10px 30px; background-color: #f1f1f1; }
.header-logo { font-size: 1.5rem; font-weight: bold; color: #005a48; text-decoration: none; }
.nav { display: flex; flex-grow: 1; justify-content: space-between; }
.nav-items { display: flex; gap: 15px; }
.nav-search { display: flex; align-items: center; gap: 10px; }
.searchInput { padding: 5px; border: 1px solid #c5c5c5; border-radius: 20px; }
.auth-links { display: flex; gap: 15px; }
.auth-links a { color: #005a48; font-weight: 600; text-decoration: none; padding: 5px 15px; border-radius: 5px; transition: background-color 0.3s ease; }
.auth-links .sign-in:hover { background-color: #e3e3e3; }
.auth-links .log-in { background-color: #005a48; color: #fff; }
.auth-links .log-in:hover { background-color: #007c5c; }
/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
body { margin: 0; padding: 0; box-sizing: border-box; background: #f1f1f1; font-family: 'Montserrat', sans-serif; }
.header-logo { display: inline-block; width: 90%; padding: 10px 30px; }
.header-logo a { text-decoration: none; color: #005a48; font-size: 1.5rem; font-weight: bold; }
.nav { display: inline-block; width: 90%; }
.nav-items { display: inline-block; width: calc(70% - 100px); vertical-align: middle; text-align: center; }
.nav-item { display: inline-block;
margin: 0px 10px; }
.nav-item a { text-decoration: none; color: #005a48; font-weight: 600; }
.nav-search { display: inline-block; width: calc(30%); vertical-align: middle; text-align: center; } .nav-search__el { background: #c5c5c5; width: 40%; padding: 5px; border-radius: 20px; display: flex; justify-content: center; flex-wrap: nowrap; overflow: hidden; }
.searchIput { border: none; background: #c5c5c5; flex-basis: 60%; }
.nav-search i { flex-basis: 40%; }
.nav-search .searchIput { display: inline-block; vertical-align: middle; } / slider / .slider-container { background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.pexels.com/photos/931887/pexels-photo-931887.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'); height: 400px; display: flex; align-items: center; background-size: cover; background-repeat: no-repeat; background-position: bottom; }
.glide { width: 60%; margin: auto; }
.glide__slide { border-radius: 100%; text-align: center; padding: 20px; }
.glide__slide img { display: block; height: 180px; width: 180px; border-radius: 100%; object-fit: cover; border: #fff solid 6px; }
.glide__slide h4 { color: #fff; font-size: 0.9rem; margin: 10px; }
.glide__arrows { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; width: 100%; display: flex; justify-content: space-between; }
.glidearrow { background-color: rgba(0, 0, 0, 0.5); color: #fff; font-size: 20px; border: none; padding: 10px 15px; margin: 0 5px; border-radius: 5px; cursor: pointer; transition: all 0.3s ease; } .glidearrow:hover { background-color: #fff; color: #000; }
/ / .main-title { padding: 0px 20px; color: #005a48; } .main-section { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 350px); grid-gap: 20px; width: 98%; margin: auto; padding: 10px 0px; }
.article { grid-column-start: 1; grid-column-end: 3; display: flex; border-bottom: solid 2px #7d57579b; padding-bottom: 30px; }
.article-text h2, .article-textfooter-1 h2, .article-textfooter-2 h2 { font-size: 30px; font-weight: 700; color: #005a48; }
.article-seeMore { background-color: #7d57579b; border: none; padding: 5px 10px; border-radius: 10px; cursor: pointer; text-transform: capitalize; color: #fff; }
.comments { display: flex; width: 100%; justify-content: space-between; align-items: center; }
.comments i { cursor: pointer; }
.share { display: flex; justify-content: space-between; align-items: center; width: 30%; }
.share p { cursor: pointer; color: #005a48; } .share i { cursor: pointer; color: #005a48; }
.article-image { flex-basis: 60%; margin: 6px; }
.article-text { flex-basis: 48%; margin: 6px; }
.article-image { height: 100%; width: 100%; }
.article-image img { width: 100%; height: 100%; object-fit: cover; }
.SideBar { grid-column-start: 3; grid-column-end: 4; grid-row-start: 1; grid-row-end: 5; background-color: #dfcece; display: grid; grid-template-columns: auto; grid-template-rows: 200px 1fr 200px; } / new letter / .SideBar-newletter { padding: 2rem; }
.newletter-action { display: flex; flex-direction: column; width: 60%; align-items: center; }
.SideBar-newletter h1 { color: #5c5656; border-bottom: 2px solid #5c5656; display: inline-block; }
.SideBar-newletter .new-Btn { background-color: #005a48; padding: 10px; border: none; width: 100%; cursor: pointer; border-radius: 20px; padding: 10px 5px; color: #fff; font-size: 1rem; }
.SideBar-newletter .newletter-Input { width: 100%; border: none; background-color: #b3a5a5; margin-bottom: 10px; padding: 10px 5px; border-radius: 20px; }
.article-footer-1 { grid-column-start: 1; grid-column-end: 2; / grid-row-start: 3; grid-row-end: 5; / }
.article-image__footer-1 { height: 100%; width: 100%; }
.article-image__footer-1 img { height: 100%; width: 100%; object-fit: cover; }
.article-footer-2 { grid-column-start: 2; grid-column-end: 3; }
.article-image__footer-2 { height: 100%; width: 100%; }
.article-image__footer-2 img { height: 100%; width: 100%; object-fit: cover; }
/ sidebar items /
.recent { padding: 3rem; }
.recent__items { display: grid; grid-template-columns: repeat(2, 100px); grid-auto-rows: 200px; grid-gap: 20px; text-align: center; padding: 0; }
.recent__item h4 { margin: 10px 0px; }
.recent h1 { color: #5c5656; border-bottom: 2px solid #5c5656; display: inline-block; }
.recent h1 { margin-top: 3rem; } .recent__item { list-style: none; }
.recent__item img { height: 100px; width: 100px; border-radius: 100%; }
/ social /
.sidebar-social-media { background-color: #005a48; }
.sidebar-social-media__content { padding: 1rem 3rem; }
.sidebar-social-media__content h3 { color: #fff; font-size: 1.5rem; border-bottom: #fff solid 2px; display: inline-block; }
.sidebar-social-media__content_icon { display: flex; }
.sidebar-social-media__content_icon i { font-size: 2rem; margin-right: 30px; cursor: pointer; background-color: #fff; padding: 20px; border-radius: 100%; }
.sidebar-social-media__content_icon i:hover { background-color: #f1f1f1; animation: 3s; }.price { font-size: 1.1rem; font-weight: bold; color: #333; }
.buy-button { padding: 0.5rem 1rem; background: #333; color: #fff; border: none; border-radius: 5px; cursor: pointer; transition: background 0.3s; }
.buy-button:hover { background: #555; } .header { display: flex; align-items: center; justify-content: space-between; padding: 10px 30px; background-color: #f1f1f1; }
.header-logo { font-size: 1.5rem; font-weight: bold; color: #005a48; text-decoration: none; }
.nav { display: flex; flex-grow: 1; justify-content: space-between; }
.nav-items { display: flex; gap: 15px; }
.nav-item a { text-decoration: none; color: #005a48; font-weight: 600; }
.nav-search { display: flex; align-items: center; gap: 10px; }
.searchInput { padding: 5px; border: 1px solid #c5c5c5; border-radius: 20px; }
.auth-links { display: flex; gap: 15px; }
.auth-links a { color: #005a48; font-weight: 600; text-decoration: none; padding: 5px 15px; border-radius: 5px; transition: background-color 0.3s ease; }
.auth-links .sign-in:hover { background-color: #e3e3e3; }
.auth-links .log-in { background-color: #005a48; color: #fff; }
.auth-links .log-in:hover { background-color: #007c5c; }
/