@import url(../../../node_modules/animate.css/animate.min.css);
@import url(./normalize.css);
@import url(./adaptive_480px.css);
@import url(./grid.css);
@font-face {
font-family: zHind-Regular;
src: url(../../fonts/Hind/Hind-Regular.ttf);
}
@font-face {
font-family: "zHind - Semibold";
src: url(../../fonts/Hind/Hind-SemiBold.ttf);
}
@font-face {
font-family: zHind;
src: url(../../fonts/Hind/Hind-Light.ttf);
}
@font-face {
font-family: "zOpen Sans";
src: url(../../fonts/Open_Sans/OpenSans-Light.ttf);
}
@font-face {
font-family: zRoboto;
src: url(../../fonts/Roboto/Roboto-Bold.ttf);
}
@font-face {
font-family: zMontserrat;
src: url(../../fonts/Montserrat/Montserrat-Bold.ttf);
}
#rotate180deg {
transform: rotate(90deg);
}
#rotate-90deg {
transform: rotate(-90deg);
}
.header {
background-color: #212429;
}
.header .title {
display: flex;
justify-content: space-between;
}
.header .title .page-title {
align-self: center;
transform: translate(50%, 0%);
}
.header .title .page-title .BLOG {
text-transform: uppercase;
font: 26px "zHind - Semibold";
font-size: 1.375rem;
color: #fefefe;
letter-spacing: 3.6px;
}
.header .title .menu {
padding: 20px;
}
.header .title__item:not(:nth-child(2)) {
border-left: 1px solid #3c3c3c;
border-right: 1px solid #3c3c3c;
}
.header .title .social-list {
align-self: stretch;
}
.header .title .social-list .list {
list-style: none;
height: 100%;
line-height: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
padding-inline-start: 0px;
margin-block-start: 0;
margin-block-end: 0;
padding: 0;
}
.header .title .social-list .list__item {
padding: 20px;
border-right: 1px solid #3c3c3c;
}
.header .slider {
width: 100%;
height: 580px;
/* overflow: hidden; */
position: relative;
}
.header .slider__item {
padding: 230px 0 0 10%;
width: 100%;
height: 580px;
transition: top .4s;
background-size: contain;
position: absolute;
}
.header .slider__item .sup-title {
font-family: "zHind - Semibold";
color: #fff;
}
.header .slider__item .slider-title {
font-family: zHind;
user-select: all;
letter-spacing: 5.6px;
max-width: 470px;
word-wrap: break-word;
text-shadow: 1px 2px 0 rgba(0, 0, 0, 0.44);
color: #fff;
font-size: 40px;
text-transform: uppercase;
}
.header .slider__item-2 {
/* background-size: cover; */
background: url("../../img/Slider__item-1.png") no-repeat center top;
}
.header .slider .navigation {
position: absolute;
transform: rotate(-90deg);
right: -80px;
top: 50%;
z-index: 1;
}
.header .slider .navigation .tab {
margin: 0 0 22px 0;
display: flex;
justify-content: center;
}
.header .slider .navigation .tab__item {
height: 8px;
border: 1px solid #ffffff;
width: 8px;
}
.header .slider .navigation .tab__item:not(:last-child) {
margin-right: 10px;
}
.header .slider .navigation__image {
display: inline;
cursor: pointer;
}
.header .slider .navigation .activites {
display: flex;
align-items: center;
}
.header .slider .navigation .this-article {
user-select: none;
display: inline-block;
margin: 0 20px;
line-height: 0;
letter-spacing: 2.8px;
color: #fff;
text-transform: uppercase;
font-family: "zHind - Semibold";
}
.form {
background-color: #f7f7f7;
display: flex;
padding: 28px 30px;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
.form .sign-up {
font-family: zMontserrat;
color: #212121;
letter-spacing: 4px;
text-transform: uppercase;
flex: 1 0 175px;
}
.form__input {
padding: 20px 30px;
font-family: zHind;
font-size: 15px;
border: none;
flex: 1 1 350px;
}
.form .submit-button {
flex: 1 2 280px;
align-self: stretch;
font-family: zHind;
background-color: #212121;
color: #fff;
text-transform: uppercase;
font-weight: 500;
font-size: 14px;
padding: 20px 70px;
border: 1px solid rgba(221, 221, 221, 0.15);
box-shadow: 0 0 0 rgba(232, 232, 232, 0.11);
}
.col .post {
background-color: white;
display: flex;
align-items: center;
flex-flow: nowrap column;
text-align: center;
}
.col .post .box {
width: 40px;
margin: -17px 0 40px 0;
display: flex;
box-shadow: 1px 1px 3px rgba(213, 213, 213, 0.75);
background-color: #212121;
height: 35px;
}
.col .post .box__icon {
margin: auto;
}
.col .post__body {
padding: 0 34px;
text-transform: uppercase;
}
.col .post__body .sup-title,
.col .post__body .sub-title {
font-size: 14px;
font-family: zHind;
color: #999999;
opacity: 0.9;
letter-spacing: 1.4px;
}
.col .post__body .title {
font-family: zMontserrat;
font-size: 20px;
color: #212121;
}
.col .post__body .demo-text {
margin: 28px 0 30px 0;
font-family: zHind;
text-align: justify;
font-size: 15px;
text-transform: none;
color: #464646;
letter-spacing: 1.5px;
}
.col .post .read-more {
font-family: zHind;
cursor: pointer;
font-size: 14px;
text-transform: uppercase;
letter-spacing: .8px;
line-height: 24px;
transition: .4s;
display: flex;
align-items: center;
flex-direction: column;
}
.col .post .read-more:hover {
letter-spacing: 2.8px;
}
.col .post .read-more::after,
.col .post .read-more::before {
content: "";
display: block;
transition: all .4s;
height: 2px;
background-color: #d7d7d7;
width: 0%;
}
.col .post .read-more:hover::after,
.col .post .read-more:hover::before {
width: 100%;
}
.col .post__footer {
width: 100%;
height: 60px;
border-top: 1px solid #d7d7d7;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="/media/styles/css/style.css">
<title>Document</title>
</head>
<body>
<div id="wrapper">
<header class="header">
<div class="title">
<div class="title__item menu">
<img src="./media/img/Menu_Icon.svg" alt="">
</div>
<div class="title__item page-title">
<img src="./media/img/Deco.png" alt="">
<span class="BLOG">Blog</span>
</div>
<div class="title__item social-list">
<ul class="list">
<li class="list__item">
<img src="./media/img/net.webp" alt="">
</li>
<li class="list__item">
<img src="./media/img/twitter.webp" alt="">
</li>
<li class="list__item">
<img src="./media/img/tambler.webp" alt="">
</li>
<li class="list__item">
<img src="./media/img/facebook.webp" alt="">
</li>
<li class="list__item">
<img src="./media/img/Search.webp" alt="">
</li>
</ul>
</div>
</div>
<div class="slider">
<div class="navigation">
<div class="tab">
<div class="tab__item"></div>
<div class="tab__item"></div>
<div class="tab__item"></div>
</div>
<div class="activites">
<img id="rotate-90deg" class="navigation__image" src="./media/img/arrow-1.webp" alt="">
<p class="this-article">Featured Article</p>
<img id="rotate180deg" class="navigation__image" src="./media/img/arrow-1.webp" alt="">
</div>
</div>
<div class="slider__item-1 slider__item">
</div>
<div class="slider__item-2 slider__item">
<h3 class="sup-title">Latest News</h3>
<h1 class="slider-title">BodyBuilding best for you health</h1>
</div>
<div class="slider__item-3 slider__item">
</div>
</div>
</header>
<div class="form">
<h2 class="sign-up">Signup to Newsletter
</h2>
<input placeholder="YOUR NAME" class="form__input input-1" type="text" name="" id="">
<input placeholder="YOUR EMAIL" class="form__input input-1" type="email" name="" id="">
<button class="submit-button">Subscribe Now</button>
</div>
<div class="col col-1">
<div class="text-post post">
<div class="box">
<img src="./media/img/icon-pen.webp" alt="" class="box__icon">
</div>
<div class="post__body">
<h3 class="sup-title">Travelling</h3>
<h1 class="title">Travel besT Adventure</h1>
<h3 class="sub-title date">January 25, 2016</h3>
<p class="demo-text">Lorem ipsum doloirs sit amet, csatetur adipisicin, sed does eiusmod tehampor incididunt uts laboasre et dolhvaliqua. Ut enim vem, nostrasuaations ullamco labiosi ut saaliquip exoi asea comoodo Disco choice is the have great work.</p>
</div>
<div class="read-more">Read More</div>
<div class="post__footer">
<div class="coments"></div>
<ul class="social-list">
<li class="social"></li>
<li class="social"></li>
<li class="social"></li>
<li class="social"></li>
</ul>
</div>
</div>
</div>
<div class="col col-2"></div>
<div class="col col-3"></div>
<div class="col col-4"></div>
</div>
</body>
</html>