Skip to content

Instantly share code, notes, and snippets.

@john92paul

john92paul/responsive-landing-page-ui-design-for-interior-design-firm.html

Created August 18, 2020 15:30
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save john92paul/60dd1de4cea1279eef09750c823e0a21 to your computer and use it in GitHub Desktop.
Save john92paul/60dd1de4cea1279eef09750c823e0a21 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
responsive-landing-page-ui-design-for-interior-design-firm.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- General -->
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Demo | Responsive Landing Page UI Design for Interior Design Firm</title>
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<!-- Loading Necessary Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@200;300;400;500;700&family=Merriweather:wght@500;600;700;900&display=swap" rel="stylesheet">
</head>
<style>
/* General Css */
html{width: 100vw;height: 100vh;overflow: hidden;font-family:"Noto Sans JP", sans-serif;color: #363636;background-color: #fff;}
body{margin: 0}
a{text-decoration: none;color: #363636}
.center {margin: 0; position: absolute; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);text-align: center;}
/* Css for scroll bar */
::-webkit-scrollbar {width: 8px;height: 8px;border-radius: 8px;}
::-webkit-scrollbar-button {display: none;}
::-webkit-scrollbar-corner, ::-webkit-scrollbar-track {background: #e1e1e1;}
::-webkit-scrollbar-thumb {background: #757575;border-radius: 8px;}
/* Body Css */
.main-body{display: inline-flex;width: 100%;}
.left-nav-bar{width: 200px;height: 100vh;background-color: #36384c;}
.brand-text{color: #e2afa9;text-align: center;padding: 24px 0;margin: 0;height: 24px;cursor: pointer;}
.menu-options-box-wrapper{position: relative;height: calc(100vh - 128px);}
.menu-options-box{width: 100%;text-align: center;color: #e9ebff;font-weight: 500;font-size: 15px;font-family: 'Open Sans', sans-serif;cursor: pointer;}
.menu-text:hover{color: #e2afa9;}
.social-box{height: 56px;text-align: center;}
.social-icon{width: 24px;height: 24px;padding: 13px 8px;cursor: pointer;}
.social-icon:hover{fill: #fff;}
.social-icon:hover .fb-icon{fill: #fff;}
.content-body{width: calc(100% - 296px);padding: 24px 48px;height: calc(100vh - 48px);}
.top-nav-bar{width: 100%;height: 70px;}
.hamburger-icon{display: none;}
.top-nav-title{font-family: 'Merriweather', serif;margin: 0;display: inline-block;padding: 24px 16px;text-transform: uppercase;}
.top-nav-phone{margin: 0;display: inline-block;float: right;padding: 24px 16px;font-weight: 600;color: #363636;font-size: 14px;}
.main-grid{display:grid;grid-template-columns: 1fr 1fr;padding:30px 0 0 0;}
.grid-item{width: 100%;}
.info-box{padding: 12px;width: calc(100% - 24px);margin-bottom: 32px;}
.pre-title{margin: 0;}
.title{font-family: 'Merriweather', serif;font-size: 42px;margin: 0;font-weight: 800;margin: 16px 0;}
.sub-title{font-style: italic;font-family: 'Merriweather', serif;font-size: 18px;margin: 0;}
.mini-gallery-box{display:grid;grid-template-columns: 1fr 1fr 1fr;}
.mini-grid-image{width: calc(100% - 24px);margin: 12px;}
.explore-button{background-color: #36384c;display: inline-block;color: #fff;font-size: 12px;padding: 12px 48px;border-radius: 3px;margin-left: 12px;font-family: 'Roboto', sans-serif;font-weight: 500;letter-spacing: 0.5px;cursor: pointer;}
.explore-button:hover{background-color: #262838;}
.main-image-box{padding: 16px;width: calc(100% - 32px);}
.main-img{width: 100%;}
.image-title-box p{text-align: center;font-size: 14px;font-family: 'Merriweather', serif;}
/* Small to medium tablet */
@media only screen and (max-width: 1050px){
.left-nav-bar{display: none;}
.hamburger-icon{display: inline-block;padding: 22px 0px;vertical-align: top;}
.content-body {width: calc(100% - 48px);padding: 24px;height: calc(100vh - 48px);}
.main-grid{grid-template-columns: 2fr 3fr;padding-top: 12px;}
.mini-gallery-box {grid-template-columns: 1fr 1fr;}
.grid-image-3{display: none;}
}
/* Portrait Devices */
@media only screen and (max-width: 800px){
.main-grid{padding-top: 8px;}
.content-body {width: calc(100% - 24px);padding: 12px;height: calc(100vh - 24px);}
.main-grid{grid-template-columns: 1fr;}
.info-box{margin-bottom: 16px;}
.title{margin: 12px 0;}
.mini-gallery-box {grid-template-columns: 1fr 1fr 1fr;}
.grid-image-3{display: unset;}
.main-image-box{margin-top: 24px;}
}
/* Very Small Devices */
@media only screen and (max-width: 340px){
.top-nav-phone{display: none;}
}
</style>
<body>
<!-- Page Body -->
<div class="main-body">
<!-- Nav-bar -->
<div class="left-nav-bar">
<p class="brand-text">GeoDesign</p>
<div class="menu-options-box-wrapper">
<div class="menu-options-box center">
<p class="menu-text">Home</p>
<p class="menu-text">Furnitures</p>
<p class="menu-text">Designs</p>
</div>
</div>
<div class="social-box">
<svg class="social-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48px" height="48px"><path class="fb-icon" fill="#e2afa9" d="M29,3c-5.523,0-10,4.477-10,10v5h-6v8h6v19h8V26h7l1-8h-8v-4c0-2.209,1.791-4,4-4h4V3.322 C33.091,3.125,30.921,2.996,29,3L29,3z"/></svg>
<svg class="social-icon" fill="#e2afa9" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48px" height="48px"><path d="M 24 4.300781 C 23.101563 4.699219 22.199219 5 21.199219 5.101563 C 22.199219 4.5 23 3.5 23.398438 2.398438 C 22.398438 3 21.398438 3.398438 20.300781 3.601563 C 19.300781 2.601563 18 2 16.601563 2 C 13.898438 2 11.699219 4.199219 11.699219 6.898438 C 11.699219 7.300781 11.699219 7.699219 11.800781 8 C 7.699219 7.800781 4.101563 5.898438 1.699219 2.898438 C 1.199219 3.601563 1 4.5 1 5.398438 C 1 7.101563 1.898438 8.601563 3.199219 9.5 C 2.398438 9.398438 1.601563 9.199219 1 8.898438 C 1 8.898438 1 8.898438 1 9 C 1 11.398438 2.699219 13.398438 4.898438 13.800781 C 4.5 13.898438 4.101563 14 3.601563 14 C 3.300781 14 3 14 2.699219 13.898438 C 3.300781 15.898438 5.101563 17.300781 7.300781 17.300781 C 5.601563 18.601563 3.5 19.398438 1.199219 19.398438 C 0.800781 19.398438 0.398438 19.398438 0 19.300781 C 2.199219 20.699219 4.800781 21.5 7.5 21.5 C 16.601563 21.5 21.5 14 21.5 7.5 C 21.5 7.300781 21.5 7.101563 21.5 6.898438 C 22.5 6.199219 23.300781 5.300781 24 4.300781"/></svg>
<svg class="social-icon" fill="#e2afa9" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" width="26px" height="26px"><path d="M 13 0.1875 C 5.925781 0.1875 0.1875 5.925781 0.1875 13 C 0.1875 18.421875 3.558594 23.046875 8.316406 24.917969 C 8.296875 24.480469 8.296875 22.210938 9.875 15.441406 C 10.085938 13.183594 9.792969 12.382813 9.792969 11.445313 C 9.792969 9.316406 10.898438 8.867188 11.546875 8.867188 C 12.46875 8.867188 13.738281 9.21875 13.738281 10.703125 C 13.738281 12.402344 12.351563 12.851563 12.351563 12.851563 C 12.351563 12.851563 12.253906 13.285156 12.136719 14.492188 C 12.023438 15.703125 12.507813 17.015625 14.480469 17.015625 C 17.644531 17.015625 18.132813 12.621094 18.132813 11.410156 C 18.132813 9.742188 16.910156 6.351563 13.109375 6.351563 C 8.042969 6.351563 7.171875 10.890625 7.171875 12.101563 C 7.171875 12.621094 7.3125 13.535156 7.410156 13.925781 C 8.367188 14.082031 8.269531 15.390625 7.859375 15.761719 C 7.40625 16.171875 5.066406 16.660156 5.066406 11.527344 C 5.066406 6.640625 9.421875 4.121094 13.246094 4.121094 C 16.886719 4.121094 20.847656 6.632813 20.847656 11.46875 C 20.847656 15.789063 17.746094 19.1875 14.484375 19.1875 C 12.527344 19.1875 11.488281 17.574219 11.488281 17.574219 C 11.488281 19.085938 8.714844 24.273438 8.359375 24.933594 C 9.800781 25.492188 11.363281 25.8125 13 25.8125 C 20.078125 25.8125 25.8125 20.078125 25.8125 13 C 25.8125 5.921875 20.074219 0.1875 13 0.1875 Z"/></svg>
</div>
</div>
<!-- Content Body -->
<div class="content-body">
<div class="top-nav-bar">
<svg class="hamburger-icon" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M4 15h16v-2H4v2zm0 4h16v-2H4v2zm0-8h16V9H4v2zm0-6v2h16V5H4z"/></svg>
<p class="top-nav-title">All Designs</p>
<p class="top-nav-phone">+1 (484)-322-1256</p>
</div>
<div class="main-grid">
<div class="grid-item">
<div class="info-box">
<p class="pre-title">Based on the latest Trends and Designs</p>
<h2 class="title">GeoDesign</h2>
<p class="sub-title">Crafted to Perfection</p>
</div>
<div class="mini-gallery-box">
<img class="mini-grid-image grid-image-1" src="https://s7.gifyu.com/images/demo-image-gallery-3-1.jpg">
<img class="mini-grid-image grid-image-2" src="https://s7.gifyu.com/images/demo-image-gallery-3-2.jpg">
<img class="mini-grid-image grid-image-3" src="https://s7.gifyu.com/images/demo-image-gallery-3-3.jpg">
</div>
<p class="explore-button">EXPLORE</p>
</div>
<div class="grid-item main-image-box">
<img class="main-img" src="https://s7.gifyu.com/images/demo-image-3.jpg">
<div class="image-title-box">
<p>The Pink-Black Furniture Combo</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment