Skip to content

Instantly share code, notes, and snippets.

@paragchirde

paragchirde/gist:e355d2bdb07a8ab3e56450d69e9dcd97

Created June 29, 2020 07:31
Show Gist options
  • Save paragchirde/e355d2bdb07a8ab3e56450d69e9dcd97 to your computer and use it in GitHub Desktop.
Save paragchirde/e355d2bdb07a8ab3e56450d69e9dcd97 to your computer and use it in GitHub Desktop.
Download ZIP
SaaS Website Design [Test]
Raw
gistfile1.txt
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sumit Hedge</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" />
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
body{
overflow-x: hidden;
}
.navbar-light{
background-color: transparent !important;
}
.navbar-brand{
font-family: 'Anton', sans-serif;
font-size:28px;
letter-spacing: 1px;
}
.nav-link{
font-family: 'Roboto', sans-serif;
font-size: 16px !important;
font-weight: 400;
}
.landing-font{
font-family: 'Anton', sans-serif;
}
.divLine{
position: absolute;
left: auto;
top: 0;
right: 0;
}
.red-line {
left: auto;
top: 0;
right: 0;
width: 740px;
height: 508px;
margin-top: 0;
background-image: url(https://assets.website-files.com/5d216901946d4033b369b1ac/5d402c5cad57b8413f750f2a_path-3.svg);
}
.btn-cta{
font-size: 26px !important;
background: #00c6ff; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #0072ff, #2B32B2); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #0072ff, #2B32B2); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
box-shadow: -10px 10px 15px #aaaaaa;
border: 0px;
}
.bounceImg{
animation-duration: 4s;
animation-iteration-count: infinite;
animation-name: bounce;
animation-timing-function: ease-in-out;
}
/* .bounceImg:hover{
animation: none;
z-index: 99;
position: absolute;
} */
.bounceImg2{
animation-duration: 4s;
animation-iteration-count: infinite;
animation-name: bounce2;
animation-timing-function: ease-in-out;
z-index: 9;
}
@keyframes bounce{
0%{
transform: translateY(0);
}
50%{
transform: translateY(-60px);
}
100%{
transform: translateY(0);
}
}
@keyframes bounce2{
0%{
transform: translateY(0);
}
50%{
transform: translateY(-100px);
}
100%{
transform: translateY(0);
}
}
.box1{
width: 100%;
height: 200px;
background-color: #0072ff;
position: absolute;
z-index: 999;
}
.box2{
width: 100%;
height: 200px;
background-color: #73b0fa;
position: absolute;
z-index: 99;
left: -10px;
top: 10px;
}
.box3{
width: 100%;
height: 200px;
background-color: #c4dcf8;
position: absolute;
z-index: 9;
left: -20px;
top: 20px;
}
</style>
</head>
<body>
<!-- Nav -->
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand text-primary" href="#">Website Name</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link text-primary" href="#">SaaS Growth Resources</a>
</li>
<li class="nav-item">
<a class="nav-link text-primary" href="#">Learn My Process</a>
</li>
</ul>
</div>
</nav>
</div>
<!-- Red Line -->
<div class="divLine d-none d-md-block">
<div class="red-line"></div>
</div>
<!-- Landing Page -->
<div class="container animate__animated animate__zoomInUp">
<div class="row">
<!-- xs sm md lg -->
<div class="col-12 col-md-6">
<div class="container" style="margin-top: 20%">
<h1 class="landing-font">Your <span class="text-primary">SAAS</span> website is stopping you from doubling your MRR</h1>
<p>I can help you change that.</p>
<p>
I help SaaS businesses convert visitors into customers through powerful positioning and crystal-clear messaging
</p>
<p>
<!-- btn-cta is a custom button -->
<div class="d-flex justify-content-between align-items-center">
<div>
<button class="btn btn-primary btn-cta">Book a free clarity Call Now</button>
</div>
<div>Or Learn How to Do It</div>
</div>
</p>
</div>
</div>
<div class="col-12 col-md-6">
<div class="container" style="margin-top: 20%">
<!-- <div id="wave-container" class="wave-container"><div class="dot" id="d1"></div><div class="dot" id="d2"></div><div class="dot" id="d3"></div><div class="dot" id="d4"></div><div class="dot" id="d5"></div><div class="dot" id="d6"></div><div class="dot" id="d7"></div><div class="dot" id="d8"></div><div class="dot" id="d9"></div><div class="dot" id="d10"></div></div> -->
<img class="bounceImg" src="https://assets.website-files.com/5d216901946d4033b369b1ac/5d34afd0166bd83814ab5e3c_chart%201.svg" alt="">
<span class="bounceImg2" style="position: absolute;right:-10%;top: 160px;">
<img src="https://assets.website-files.com/5d216901946d4033b369b1ac/5d34b00f166bd82269ab5e78_Card%201.svg" alt="">
</span>
</div>
</div>
</div>
</div>
<!-- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#0072ff" fill-opacity="1" d="M0,192L1440,96L1440,320L0,320Z"></path></svg> -->
<!-- Shadow Box -->
<div class="container">
<div class="main" style="position: relative;margin-top: 20px;margin-bottom: 40px;">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</div>
<div class="container animate__animated animate__zoomInUp" style="margin-top: 300px;">
<h1>Hello</h1>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#000" fill-opacity="1" d="M0,192L80,197.3C160,203,320,213,480,192C640,171,800,117,960,96C1120,75,1280,85,1360,90.7L1440,96L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z"></path></svg>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment