html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
crossorigin="anonymous"
/>
<link rel="stylesheet" href="utilities.css" />
<link rel="stylesheet" href="style.css" />
<title>Loruki | Cloud hosting</title>
</head>
<body>
<!-- navbar -->
<div class="navbar">
<div class="container flex">
<h1 class="logo">Loruki</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="features.html">Features</a></li>
<li><a href="docs.html">Docs</a></li>
</ul>
</nav>
</div>
</div>
<!-- showcase -->
<section class="showcase">
<div class="container grid">
<div class="showcase-text">
<h1>Easier Deployment</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt quas expedita, recusandae nemo dolorem vel sed cupiditate a, amet placeat rerum nisi nihil voluptate labore error aliquam eos minima! Nostrum?</p>
<a href="features.html" class="btn btn-outline">Read more</a>
</div>
<div class="showcase-form card">
<h2>Request a demo</h2>
<form action="">
<div class="form-control">
<input type="text" name="name" placeholder="Name" required>
</div>
<div class="form-control">
<input type="text" name="company" placeholder="Company Name" required>
</div>
<div class="form-control">
<input type="text" name="email" placeholder="Email" required>
</div>
<input type="submit" value="Send" class="btn btn-primary">
</form>
</div>
</div>
</section>
<!-- Stats -->
<section class="stats">
<div class="container">
<h3 class="stats-heading text-center my-1">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus sunt quam nulla assumenda beatae est maxime porro magnam vitae, provident earum molestias, omnis velit, placeat tenetur eveniet corporis repudiandae exercitationem!
</h3>
<div class="grid grid-3 text-center my-4">
<div>
<i class="fas fa-server fa-3x"></i>
<h3>10,349,405</h3>
<p class="text-scondary">Deployments</p>
</div>
<div>
<i class="fas fa-upload fa-3x"></i>
<h3>987 TB</h3>
<p class="text-scondary">Published</p>
</div>
<div>
<i class="fas fa-project-diagram fa-3x"></i>
<h3>2,343,265</h3>
<p class="text-scondary">Projects</p>
</div>
</div>
</div>
</section>
<!-- CLI -->
<section class="cli">
<div class="container grid">
<img src="images/cli.png" alt="">
<div class="card">
<h3>Easy to use, cross platform CLI</h3>
</div>
<div class="card">
<h3>Deploy in seconds</h3>
</div>
</div>
</section>
<!-- Cloud -->
<section class="cloud bg-primary my-2 py-2">
<div class="container grid">
<div class="text-center">
<h2 class="lg">Extreme Cloud Hosting</h2>
<p class="lead my-1">Cloud Hosting like you've never seen. Fast, efficient and scalable</p>
<a href="features.html" class="btn btn-dark">Read More</a>
</div>
<img src="images/cloud.png" alt="">
</div>
</section>
<section class="languages">
<h2 class="md text-center my-2">
Supported Languages
</h2>
<div class="container flex">
<div class="card">
<h4>Node.js</h4>
<img src="images/logos/node.png" alt="">
</div>
<div class="card">
<h4>C#</h4>
<img src="images/logos/csharp.png" alt="">
</div>
<div class="card">
<h4>Scala</h4>
<img src="images/logos/scala.png" alt="">
</div>
<div class="card">
<h4>Ruby</h4>
<img src="images/logos/ruby.png" alt="">
</div>
<div class="card">
<h4>PHP</h4>
<img src="images/logos/php.png" alt="">
</div>
<div class="card">
<h4>Clojure</h4>
<img src="images/logos/clojure.png" alt="">
</div>
<div class="card">
<h4>Python</h4>
<img src="images/logos/python.png" alt="">
</div>
<div class="card">
<h4>Go</h4>
<img src="images/logos/go.png" alt="">
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer bg-dark py-5">
<div class="container grid grid-3">
<div>
<h1>Loruki</h1>
<p>Copyright © 2020</p>
</div>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="features.html">Features</a></li>
<li><a href="docs.html">Docs</a></li>
</ul>
</nav>
<div class="social">
<a href="#"><i class="fab fa-github fa-2x"></i></a>
<a href="#"><i class="fab fa-facebook fa-2x"></i></a>
<a href="#"><i class="fab fa-instagram fa-2x"></i></a>
<a href="#"><i class="fab fa-twitter fa-2x"></i></a>
</div>
</div>
</footer>
</body>
</html>
CSS - style.css
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap");
:root {
--primary-color: #047aed;
--secondary-color: #1c3fa8;
--dark-color: #002240;
--light-color: #f4f4f4;
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: "Lato", sans-serif;
color: #333;
line-height: 1.6;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
color: #333;
}
h1,
h2 {
font-weight: 300;
line-height: 1.2;
margin: 10px 0;
}
p {
margin: 10px 0;
}
img {
width: 100%;
}
/* navbar */
.navbar {
background-color: var(--primary-color);
color: white;
height: 70px;
}
.navbar ul {
display: flex;
}
.navbar a {
color: #fff;
padding: 10px;
margin: 0 5px;
}
.navbar a:hover {
border-bottom: 2px #fff solid;
}
.navbar .flex {
justify-content: space-between;
}
/* Showcase */
.showcase {
height: 400px;
background-color: var(--primary-color);
color: #fff;
position: relative;
}
.showcase h1 {
font-size: 40px;
}
.showcase p {
margin: 20px 0;
}
.showcase .grid {
overflow: visible;
grid-template-columns: 55% 45%;
gap: 30px;
}
.showcase-form {
position: relative;
top: 60px;
height: 350px;
width: 400px;
padding: 40px;
z-index: 100;
justify-self: flex-end;
}
.showcase-form .form-control {
margin: 30px 0;
}
.showcase-form input[type="text"],
.showcase-form input[type="email"] {
border: 0;
border-bottom: 1px solid #b4becb;
width: 100%;
padding: 3px;
font-size: 16px;
}
.showcase-form input:focus {
outline: none;
}
.showcase::before,
.showcase::after {
content: "";
position: absolute;
height: 100px;
bottom: -70px;
right: 0;
left: 0;
background: #fff;
transform: skewY(-3deg);
-webkit-transform: skewY(-3deg);
-moz-transform: skewY(-3deg);
-ms-transform: skewY(-3deg);
}
/* stats */
.stats {
padding-top: 100px;
}
.stats-heading {
max-width: 500px;
margin: auto;
}
.stats .grid h3 {
font-size: 35px;
}
.stats .grid p {
font-size: 20px;
font-weight: bold;
}
/* CLI */
.cli .grid {
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
}
.cli .grid > *:first-child {
grid-column: 1 / span 2;
grid-row: 1 / span 2;
}
/* Cloud */
.cloud .grid {
grid-template-columns: 4fr 3fr;
}
/* Languages */
.languages .flex {
flex-wrap: wrap;
}
.languages .card {
text-align: center;
margin: 18px 10px 40px;
transition: transform 0.2s ease-in;
}
.languages .card h4 {
font-size: 20px;
margin-bottom: 10px;
}
.languages .card:hover {
transform: translateY(-15px);
}
/* Footer */
.footer .social a {
margin: 0 10px;
}
/* Tablets and under */
@media (max-width: 768px) {
.grid,
.showcase .grid,
.stats .grid,
.cli .grid,
.cloud .grid {
grid-template-columns: 1fr;
grid-template-rows: 1fr;
}
.showcase {
height: auto;
}
.showcase-text {
text-align: center;
margin-top: 40px;
}
.showcase-form {
justify-self: center;
margin: auto;
}
.cli .grid > *:first-child {
grid-column: 1;
grid-row: 1;
}
}
/* Mobile */
@media (max-width: 500px) {
.navbar {
height: 110px;
}
.navbar .flex {
flex-direction: column;
}
.navbar ul {
padding: 10px;
background-color: rgba(0, 0, 0, 0.1);
}
}
utilities.css
/* Utilities */
.container {
max-width: 1100px;
margin: 0 auto;
overflow: auto;
padding: 0 40px;
}
.card {
background-color: #fff;
color: #333;
border-radius: 10px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
padding: 20px;
margin: 10px;
}
.btn {
display: inline-block;
padding: 10px 30px;
cursor: pointer;
background: var(--primary-color);
color: #fff;
border: none;
border-radius: 5px;
}
.btn-outline {
background-color: transparent;
border: 1px #fff solid;
}
.btn:hover {
transform: scale(0.9);
}
/* Background and colored buttons */
.bg-primary,
.btn-primary {
background-color: var(--primary-color);
color: #fff;
}
.bg-secondary,
.btn-secondary {
background-color: var(--secondary-color);
color: #fff;
}
.bg-dark,
.btn-dark {
background-color: var(--dark-color);
color: #fff;
}
.bg-light,
.btn-light {
background-color: var(--light-color);
color: #333;
}
.bg-primary a,
.btn-primary a,
.bg-secondary a,
.btn-secondary a,
.bg-dark a,
.btn-dark a {
color: #fff;
}
/* Text sizes */
.lead {
font-size: 20px;
}
.sm {
font-size: 1rem;
}
.md {
font-size: 2rem;
}
.lg {
font-size: 3rem;
}
.xl {
font-size: 4rem;
}
.text-center {
text-align: center;
}
.flex {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
justify-content: center;
align-items: center;
height: 100%;
}
.grid-3 {
grid-template-columns: repeat(3, 1fr);
}
/* Margin */
.my-1 {
margin: 1rem 0;
}
.my-2 {
margin: 1.5rem 0;
}
.my-3 {
margin: 2rem 0;
}
.my-4 {
margin: 3rem 0;
}
.my-5 {
margin: 4rem 0;
}
.m-1 {
margin: 1rem;
}
.m-2 {
margin: 1.5rem;
}
.m-3 {
margin: 2rem;
}
.m-4 {
margin: 3rem;
}
.m-5 {
margin: 4rem;
}
/* Padding */
.py-1 {
padding: 1rem 0;
}
.py-2 {
padding: 1.5rem 0;
}
.py-3 {
padding: 2rem 0;
}
.py-4 {
padding: 3rem 0;
}
.py-5 {
padding: 4rem 0;
}
.p-1 {
padding: 1rem;
}
.p-2 {
padding: 1.5rem;
}
.p-3 {
padding: 2rem;
}
.p-4 {
padding: 3rem;
}
.p-5 {
padding: 4rem;
}
