Skip to content

Instantly share code, notes, and snippets.

@BloodCelebration

BloodCelebration/decor-landing-page.markdown

Created March 11, 2021 07:59
Show Gist options
  • Save BloodCelebration/5344ba3a8b56699c82586710cce44bf9 to your computer and use it in GitHub Desktop.
Save BloodCelebration/5344ba3a8b56699c82586710cce44bf9 to your computer and use it in GitHub Desktop.
Download ZIP
Decor landing page
Raw
decor-landing-page.markdown
Raw
index.html
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Creators is a startup that helps content creators such as videographers, photographers, monetize their creative work." />
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous" />
<title>Decor</title>
</head>
<body>
<!-- main container wrapper -->
<div class="container-fluid mainContainer">
<!-- Navigation menu section -->
<nav class="navbar navbar-expand-md navbar-dark">
<a class="navbar-brand" href="#CarMarket">Decor</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#Store">Store</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Buy">Buy</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Sell">Sell</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Contact">Contact</a>
</li>
<li class="nav-item last">
<a class="nav-link" href="#Cart">Cart 0</a>
</li>
</ul>
</div>
</nav>
<!-- legend section -->
<div class="row legend">
<!-- legend introduction text -->
<div class="col legend__text">
<header class="introText">
<h1 class="introText__heading">
Shop <span>slightly used </span>furniture <span>&</span> home decors.
</h1>
<p class="introText__link">
<a href="#Visit">Check out our collection
<i class="fas fa-arrow-right "></i></a>
</p>
</header>
</div>
</div>
<!-- footer section -->
</div>
<footer class="footer">
<p class="footer__text">
Created by
<a href="https://www.linkedin.com/in/godfredgameli/" target="_blank" rel="noopener">Godfred Gameli</a>
&copy;2021
</p>
</footer>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</html>
Raw
style.scss
@import url("https://fonts.googleapis.com/css2?family=Lato&display=swap");
$primary: #fff;
$neutral: #333333;
$font: Lato;
$size: 16px;
$normal: 400;
$bold: 800;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/*Entire HTML body*/
body {
width: 100%;
background-color: transparent;
font-family: $font;
font-size: $size;
color: $primary;
font-weight: $normal;
overflow-x: hidden;
/*main container wrapper*/
.mainContainer {
height: 1000px !important;
padding: 0 8%;
background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
url(https://res.cloudinary.com/goddy-game/image/upload/v1615409345/background_syp3re.png);
background-repeat: no-repeat;
background-size: 100% 100%;
overflow: hidden;
/*Navigation menu section*/
.navbar {
height: 100px;
background-color: transparent;
padding: 0;
.navbar-brand {
color: $primary;
font-weight: $bold;
font-size: 24px;
line-height: 29px;
margin-left: 13%;
transition: all;
transition-duration: 1s;
&:hover,
&:focus {
transform: scale(1.2);
-webkit-text-stroke: 1px $primary;
-webkit-text-stroke-color: transparent;
}
}
.navbar-collapse {
justify-content: flex-end;
.navbar-nav {
width: 70% !important;
position: relative;
.last {
position: absolute;
right: 0 !important;
}
.nav-item {
margin: 0 10px;
.nav-link {
color: $primary;
padding: 10px 0x;
font-weight: $bold;
transition: all;
transition-duration: 1s;
&:hover,
&:active,
&:focus {
border-bottom: 2px solid $primary;
transform: translateY(-5px);
}
}
}
}
}
}
/*legend section*/
.legend {
margin-top: 130px;
height: 770px;
color: $primary;
/*legend introduction text*/
.legend__text {
width: 100%;
.introText {
text-align: center;
.introText__heading {
font-size: 40px;
line-height: 54px;
margin-bottom: 30px;
font-weight: $bold;
span {
opacity: 0.8;
font-weight: $normal;
}
}
.introText__link {
a {
color: $primary;
font-weight: $bold;
padding: 10px 0;
border-bottom: 2px solid $primary;
transition: all;
transition-duration: 1s;
&:hover,
&:focus {
text-decoration: none;
filter: blur(1px);
}
}
}
}
}
}
}
/*footer section*/
.footer {
text-align: center;
height: 50px;
width: 100%;
bottom: 0 !important;
background-color: #111;
color: $primary;
display: flex;
align-items: flex-end;
justify-content: center;
.footer__text {
a {
color: red;
&:hover,
&:focus {
text-decoration: none;
}
}
}
}
}
@media screen and (max-width: 767px) {
body {
.mainContainer {
padding: 0 2%;
height: 800px !important;
.navbar {
margin-bottom: 150px;
.navbar-brand {
margin-left: 0 !important;
}
.navbar-nav {
width: 100% !important;
.last {
position: relative !important;
}
}
}
.legend {
height: 550px;
.legend__text {
padding: 0;
height: 400px !important;
.introText {
width: 100%;
text-align: center;
.introText__heading {
font-size: 32px;
}
}
}
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment