Created
November 8, 2018 07:53
-
-
Save benznest/21a5a7f2acbce4815433cd77f91c0b8e to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@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; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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