Skip to content

Instantly share code, notes, and snippets.

@nakimera

nakimera/company.html

Last active April 8, 2019 11:59
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 nakimera/b6eb3cc9318acdf4382c447855aa3062 to your computer and use it in GitHub Desktop.
Save nakimera/b6eb3cc9318acdf4382c447855aa3062 to your computer and use it in GitHub Desktop.
Download ZIP
This is the finished html file for my blogpost https://medium.com/p/dcaa1323bec2/edit on responsiveness using Flexbox
Raw
company.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>Document</title>
<link rel="stylesheet" href="index.css" />
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
crossorigin="anonymous"
/>
<link
href="https://fonts.googleapis.com/css?family=Hind+Madurai|Karla"
rel="stylesheet"
/>
</head>
<body>
<div class="header">
<span class="header-title">Company</span>
<br />
<span class="header-text">We specialise in something ...</span>
</div>
<div class="section">
<div class="small-div">
<i class="fas fa-building fa-10x orange"></i>
</div>
<div class="big-div">
<span class="div-title">About the company</span>
<br />
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur.
</span>
</div>
</div>
<div class="section bg-grey">
<div class="small-div">
<i class="fas fa-globe-africa orange fa-10x"></i>
</div>
<div class="big-div">
<span class="div-title">Our values</span>
<br />
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur.
</span>
</div>
</div>
<div class="section">
<div class="small-div">
<i class="fas fa-university orange fa-10x"></i>
</div>
<div class="big-div">
<span class="div-title">Our mission</span>
<br />
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur.
</span>
</div>
</div>
<div class="contact-container bg-grey ">
<span class="div-title">Contact us</span>
<div class="contact-form">
<div>
<span>Contact us and we will get back to you within 24 hours.</span>
<span>
<i class="fas fa-map-marker-alt"></i>
Kampala Uganda
</span>
<span>
<i class="fas fa-mobile-alt"></i>
+256 778 800 900
</span>
<span>
<i class="far fa-envelope"></i>
company.gmail.com
</span>
</div>
<div>
<span>
Contact
</span>
<input type="text" placeholder="email address" class="input-field">
<textarea name="" id="" cols="30" rows="10" placeholder="comment"></textarea>
<button class="contact-btn">Send</button>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment