├── first.html
├── images
    ├── alltimebroken.png
    ├── banner.png
    ├── banner2.png
    ├── evergreen.png
    ├── excited.png
    ├── icon.png
    ├── icon2.png
    ├── innocent.png
    ├── logo.png
    ├── occasional.png
    └── playboy.png
├── index.html
└── style.css


/first.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 | p{
 3 | color:blue;
 4 | width:50%;
 5 | }
 6 | h1{
 7 |  color:red;
 8 |  background-color: yellow;
 9 | }
10 | .close-friend{
11 | background-color: green;
12 | }
13 | h3{
14 | text-align:center;
15 | }
16 | </style>
17 | Look mama!! I am building website
18 | <p class="close-friend">Zuckerberg I can build website as well</p>
19 | <p>Myself I can build website as well</p>
20 | <p class="close-friend">Google I know your secret</p>
21 | 
22 | <p>paragraph</p>
23 | 
24 | <p>DOn't do something with <span class="close-friend">APple</span>. DOn't do something with APple. DOn't do something with APple. DOn't do something with APple. DOn't do something with APple. </p>
25 | 
26 | HTML ==> Hypertext Markup Language
27 | heading
28 | <h1>Elon Musk with a face mask</h1>
29 | <div class="close-friend">
30 | 	<h2>Jeff bezon you are in AWS</h2>
31 | 	<p>I like Amazon jungle</p>
32 | </div>
33 | <h3>Bill Gates</h3>
34 | <img src="https://www.programming-hero.com/assets/img/hero-header/iphone/10245.png">


--------------------------------------------------------------------------------
/images/alltimebroken.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/company-website/f7744653d23c5b736693f1356713089bd3a7a937/images/alltimebroken.png


--------------------------------------------------------------------------------
/images/banner.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/company-website/f7744653d23c5b736693f1356713089bd3a7a937/images/banner.png


--------------------------------------------------------------------------------
/images/banner2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/company-website/f7744653d23c5b736693f1356713089bd3a7a937/images/banner2.png


--------------------------------------------------------------------------------
/images/evergreen.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/company-website/f7744653d23c5b736693f1356713089bd3a7a937/images/evergreen.png


--------------------------------------------------------------------------------
/images/excited.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/company-website/f7744653d23c5b736693f1356713089bd3a7a937/images/excited.png


--------------------------------------------------------------------------------
/images/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/company-website/f7744653d23c5b736693f1356713089bd3a7a937/images/icon.png


--------------------------------------------------------------------------------
/images/icon2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/company-website/f7744653d23c5b736693f1356713089bd3a7a937/images/icon2.png


--------------------------------------------------------------------------------
/images/innocent.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/company-website/f7744653d23c5b736693f1356713089bd3a7a937/images/innocent.png


--------------------------------------------------------------------------------
/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/company-website/f7744653d23c5b736693f1356713089bd3a7a937/images/logo.png


--------------------------------------------------------------------------------
/images/occasional.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/company-website/f7744653d23c5b736693f1356713089bd3a7a937/images/occasional.png


--------------------------------------------------------------------------------
/images/playboy.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/company-website/f7744653d23c5b736693f1356713089bd3a7a937/images/playboy.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Heart Mechanic</title>
 7 |     <link rel="stylesheet" href="style.css">
 8 | </head>
 9 | <body>
10 |     <header class="text-center">
11 |         <div>
12 |             <h1>We fix <br> <span class="color-red">broken heart</span></h1>
13 |         </div>
14 |         <div>
15 |             <img src="images/banner.png" alt="">
16 |         </div>
17 |     </header>
18 |     <main>
19 |         <section>
20 |             <h2 class="text-center">Our Services</h2>
21 |             <div class="services">
22 |                 <div class="item text-center">
23 |                     <img src="images/alltimebroken.png" alt="">
24 |                     <h3 class="color-red">All time broken heart</h3>
25 |                     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet enim culpa inventore porro voluptatum. Facilis ratione omnis minus possimus dolores?</p>
26 |                 </div>
27 |                 <div class="item text-center">
28 |                     <img src="images/occasional.png" alt="">
29 |                     <h3 class="color-red">Occasional broken heart</h3>
30 |                     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet enim culpa inventore porro voluptatum. Facilis ratione omnis minus possimus dolores?</p>
31 |                 </div>
32 |                 <div class="item text-center">
33 |                     <img src="images/evergreen.png" alt="">
34 |                     <h3 class="color-red">Ever green broken heart</h3>
35 |                     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet enim culpa inventore porro voluptatum. Facilis ratione omnis minus possimus dolores?</p>
36 |                 </div>
37 |             </div>
38 |         </section>
39 |         <section>
40 |             <h2 class="text-center">Successful Customers</h2>
41 |             <div class="services">
42 |                 <div class="item text-center">
43 |                     <img src="images/innocent.png" alt="">
44 |                     <h3 class="color-red">Fixed Innocent broken heart</h3>
45 |                     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet enim culpa inventore porro voluptatum. Facilis ratione omnis minus possimus dolores?</p>
46 |                 </div>
47 |                 <div class="item text-center">
48 |                     <img src="images/excited.png" alt="">
49 |                     <h3 class="color-red">Fixed Excited broken heart</h3>
50 |                     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet enim culpa inventore porro voluptatum. Facilis ratione omnis minus possimus dolores?</p>
51 |                 </div>
52 |                 <div class="item text-center">
53 |                     <img src="images/playboy.png" alt="">
54 |                     <h3 class="color-red">Fixed Playboy broken heart</h3>
55 |                     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet enim culpa inventore porro voluptatum. Facilis ratione omnis minus possimus dolores?</p>
56 |                 </div>
57 |             </div>
58 |         </section>
59 |     </main>
60 |     <footer class="text-center">
61 |         <p>Email us: hotglue@heartmechanic.com</p>
62 |     </footer>
63 | </body>
64 | </html>


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
 1 | body{
 2 |     font-family: 'roboto', 'ariel';
 3 | }
 4 | h1{
 5 |     font-size: 70px;
 6 | }
 7 | h2{
 8 |     font-size: 50px;
 9 | }
10 | header{
11 |     display: flex;
12 |     align-items: center;
13 |     justify-content: space-evenly;
14 | }
15 | .color-red{
16 |     color:rgb(243, 57, 57);
17 | }
18 | .text-center{
19 |     text-align: center;
20 | }
21 | .services{
22 |     display: flex;
23 |     justify-content: space-evenly;
24 | }
25 | .item{
26 |     width: 25%;
27 |     padding: 20px;
28 |     border-radius: 10px;
29 |     box-shadow: 10px 10px 40px lightgray;
30 | }


--------------------------------------------------------------------------------