Skip to content

Instantly share code, notes, and snippets.

@benznest

benznest/custom.css

Created November 8, 2018 07:53
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 benznest/21a5a7f2acbce4815433cd77f91c0b8e to your computer and use it in GitHub Desktop.
Save benznest/21a5a7f2acbce4815433cd77f91c0b8e to your computer and use it in GitHub Desktop.
Download ZIP
Raw
custom.css
@import url('https://fonts.googleapis.com/css?family=Dancing+Script|Indie+Flower');
body{
background: #DCEBFC;
font-family: 'Indie Flower', cursive;
}
.container{
background: #FFF;
padding: 1.5rem
}
h1,h2,h3{
color:#4F85D7;
}
.footer{
font-family: 'Dancing Script', cursive;
}
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hello</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/custom.css" />
</head>
<body>
<div class="container">
<div class="row">
<h1>Hello World</h1>
</div> <!-- Close Row 1 -->
<div class="row">
<div class="col">
<img src="img/banner/banner2.jpg" class="img-fluid rounded">
</div>
</div> <!-- Close Row 2 -->
<div class="row pt-4">
<div class="col-md-4 col-12">
<img src="img/staffs/staff1.jpg" class="img-fluid rounded" />
<h1 class="text-center">CEO</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio odit illum autem porro! Quisquam
voluptatibus nesciunt impedit, suscipit corporis, minus culpa molestiae necessitatibus blanditiis,
repellat mollitia beatae hic voluptatum deleniti.</p>
</div>
<div class="col-md-4 col-6">
<img src="img/staffs/staff2.jpg" class="img-fluid rounded" />
<h1 class="text-center">CTO</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio odit illum autem porro! Quisquam
voluptatibus nesciunt impedit, suscipit corporis, minus culpa molestiae necessitatibus blanditiis,
repellat mollitia beatae hic voluptatum deleniti.</p>
</div>
<div class="col-md-4 col-6">
<img src="img/staffs/staff3.jpg" class="img-fluid rounded" />
<h1 class="text-center">CFO</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio odit illum autem porro! Quisquam
voluptatibus nesciunt impedit, suscipit corporis, minus culpa molestiae necessitatibus blanditiis,
repellat mollitia beatae hic voluptatum deleniti.</p>
</div>
</div> <!-- Close Row 3 -->
<!-- Start Row 4 -->
<div class="row">
<div class="col-md-6 col-12">
<div class="row">
<div class="col-4">
<img src="img/life/life2.jpg" class="img-fluid img-thumbnail" />
</div>
<div class="col-8">
<h3>Service</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio odit illum autem porro!
Quisquam
voluptatibus nesciunt impedit</p>
</div>
</div>
<div class="row">
<div class="col-4">
<img src="img/life/life3.jpg" class="img-fluid img-thumbnail" />
</div>
<div class="col-8">
<h3>Subscription</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio odit illum autem porro!
Quisquam
voluptatibus nesciunt impedit</p>
</div>
</div>
<div class="row">
<div class="col-4">
<img src="img/life/life4.jpg" class="img-fluid img-thumbnail" />
</div>
<div class="col-8">
<h3>More</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio odit illum autem porro!
Quisquam
voluptatibus nesciunt impedit</p>
</div>
</div>
</div>
<div class="col-md-6 col-12">
<img src="img/content/office12.jpg" class="img-fluid rounded" />
<h1>About</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio odit illum autem porro! Quisquam
voluptatibus nesciunt impedit, suscipit corporis, minus culpa molestiae necessitatibus blanditiis,
repellat mollitia beatae hic voluptatum deleniti.</p>
</div>
</div>
<!-- Close Row 4 -->
<div class="row">
<div class="col-md-3 mt-2">
<img src="img/life/life.jpg" class="img-fluid rounded" />
</div>
<div class="col-md-3 mt-2">
<img src="img/life/life2.jpg" class="img-fluid rounded" />
</div>
<div class="col-md-3 mt-2">
<img src="img/life/life3.jpg" class="img-fluid rounded" />
</div>
<div class="col-md-3 mt-2">
<img src="img/life/life4.jpg" class="img-fluid rounded" />
</div>
<div class="col-md-3 mt-2">
<img src="img/life/life5.jpg" class="img-fluid rounded" />
</div>
<div class="col-md-3 mt-2">
<img src="img/life/life6.jpg" class="img-fluid rounded" />
</div>
<div class="col-md-3 mt-2">
<img src="img/life/life7.jpg" class="img-fluid rounded" />
</div>
<div class="col-md-3 mt-2">
<img src="img/life/life8.jpg" class="img-fluid rounded" />
</div>
</div>
<!-- Close Row 5 -->
<div class="row footer p-5">
<div class="col-12">
<h2 class="text-center">Nothing in life is to be feared,
it is only to be understood.
Now is the time to understand more,
so that we may fear less.</h2>
</div>
</div> <!-- Close Row 6 -->
</div> <!-- Close container -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment