<div class="menu">
<img src="https://vikram-hegde.github.io/resources/images/menu.svg" alt="menu icon" />
</div>
<div class="hero"></div>
<div class="header">fashion blog</div>
<div class="content">
<div class="heading">
<h3>By Andy Pane</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt odit
provident, consectetur labore nesciunt dolores est placeat ducimus
quasi iure.
</p>
</div>
</div>
<div class="small-img small1"></div>
<div class="small-img small2"></div>
<div class="small-img small3"></div>
<div class="readmore">
<img src="https://vikram-hegde.github.io/resources/images/read more.svg" alt="" />
</div>
<div class="social">
<img src="https://vikram-hegde.github.io/resources/images/instagram.svg" alt="" />
<img src="https://vikram-hegde.github.io/resources/images/facebook.svg" alt="" />
<img src="https://vikram-hegde.github.io/resources/images/twitter.svg" alt="" />
</div>
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,500;1,400&family=DM+Serif+Display&display=swap");
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
outline: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
font-family: DM Sans, sans-serif;
}
body {
display: -ms-grid;
display: grid;
-ms-grid-columns: (1fr) [12];
grid-template-columns: repeat(12, 1fr);
max-height: 100vh;
background-color: #141414;
position: relative;
-ms-grid-rows: (1fr) [12];
grid-template-rows: repeat(12, 1fr);
overflow: hidden;
}
.menu {
position: absolute;
right: 30px;
top: 30px;
}
.hero {
-ms-grid-column: 6;
-ms-grid-column-span: 5;
grid-column: 6 / span 5;
grid-row: 1 / -1;
background: url("https://vikram-hegde.github.io/resources/images/hero.png")
no-repeat 50% 50% / cover;
}
.small1 {
-ms-grid-column: 1;
-ms-grid-column-span: 2;
grid-column: 1 / 3;
-ms-grid-row: 10;
-ms-grid-row-span: 3;
grid-row: 10 / 13;
background: url("https://vikram-hegde.github.io/resources/images/small1.png")
no-repeat 50% 50% / cover;
}
.small2 {
-ms-grid-column: 4;
-ms-grid-column-span: 2;
grid-column: 4 / 6;
-ms-grid-row: 1;
-ms-grid-row-span: 3;
grid-row: 1 / 4;
background: url("https://vikram-hegde.github.io/resources/images/small2.png")
no-repeat 50% 50% / cover;
}
.small3 {
-ms-grid-column: 11;
-ms-grid-column-span: 2;
grid-column: 11 / 13;
-ms-grid-row: 10;
-ms-grid-row-span: 3;
grid-row: 10 / 13;
background: url("https://vikram-hegde.github.io/resources/images/small3.png")
no-repeat 50% 50% / cover;
}
.content {
margin-top: 2rem;
-ms-grid-column: 3;
-ms-grid-column-span: 3;
grid-column: 3 / 6;
-ms-grid-row: 4;
-ms-grid-row-span: 2;
grid-row: 4 / 6;
color: #fff;
text-align: right;
margin-right: 1rem;
font-weight: 400;
}
.content p {
margin-top: 0.6rem;
}
.header {
-ms-grid-column: 4;
-ms-grid-column-span: 6;
grid-column: 4 / 10;
-ms-grid-row: 8;
-ms-grid-row-span: 2;
grid-row: 8 / 10;
font-family: DM Serif Display, serif;
font-size: 6rem;
color: #fff;
}
.readmore {
-ms-grid-column: 12;
-ms-grid-column-span: 1;
grid-column: 12 / 13;
grid-row: -9 / -6;
}
.readmore img {
height: 8.75rem;
width: auto;
}
.social {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-left: 1.875rem;
position: absolute;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
justify-self: space-around;
-ms-grid-column: 1;
-ms-grid-column-span: 1;
grid-column: 1 / 2;
-ms-grid-row: 3;
-ms-grid-row-span: 6;
grid-row: 3 / 9;
}
.social img {
display: block;
margin-top: 2rem;
}
@media (max-width: 1047px) {
.header {
font-size: 5rem;
}
.content p {
font-size: 0.8rem;
}
.social img {
height: 80px;
width: auto;
}
.social img:last-child {
height: 60px;
}
}
@media (max-width: 930px) {
.small1,
.small3 {
-ms-grid-row: 11;
-ms-grid-row-span: 2;
grid-row: 11 / 13;
}
.small2 {
-ms-grid-row: 1;
-ms-grid-row-span: 2;
grid-row: 1 / 3;
}
.header {
-ms-grid-column: 4;
-ms-grid-column-span: 8;
grid-column: 4 / 12;
}
.menu {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.