-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
2 changed files
with
151 additions
and
0 deletions.
There are no files selected for viewing
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,75 @@ | ||
| body{ | ||
| margin: 0; | ||
| background:grey; | ||
| color: #fff; | ||
| font-family: Arial, Helvetica, sans-serif; | ||
| font-size: 1.1em; | ||
| text-align: center; | ||
| line-height: 1.5; | ||
| } | ||
| h2{ | ||
| margin: 0; | ||
| padding: 1em; | ||
|
|
||
| } | ||
| p{ | ||
| margin:0; | ||
| paddign:1em; | ||
| } | ||
| img{ | ||
| display: block; | ||
| width: 100%; | ||
| height: auto; | ||
| } | ||
|
|
||
| .bg{ | ||
| position: absolute; | ||
| background-image: url("https://static.pexels.com/photos/248515/pexels-photo-248515.png"); | ||
| background-position:center ; | ||
| background-repeat: no-repeat; | ||
| background-size: cover; | ||
| height: 450px; | ||
| width: 100%; | ||
| z-index: -1; | ||
| opacity: 0.7; | ||
| } | ||
| #headerid{ | ||
| text-align: center; | ||
| min-height: 450px; | ||
| color:#fff; | ||
| } | ||
| #headerid h1{ | ||
| padding-top: 100px; | ||
| padding-bottom: 0; | ||
| } | ||
| #headerid p{ | ||
| color: violet; | ||
| } | ||
| .btn{ | ||
| background: #fff; | ||
| color:#333; | ||
| cursor: pointer; | ||
| } | ||
| #section-a{ | ||
| background:royalblue; | ||
| color:#333; | ||
| padding-bottom:2em; | ||
| } | ||
| #section-b{ | ||
| display: grid; | ||
| padding: 2em; | ||
|
|
||
| } | ||
| #section-b ul{ | ||
| list-style-type: none; | ||
| margin: 0; | ||
| padding: 0; | ||
| display: flex; | ||
| justify-content: space-around; | ||
| } | ||
| #section-b li{ | ||
| background: white; | ||
| color: #333; | ||
| width:31%; | ||
| margin-bottom: 1em; | ||
| } |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| <head> | ||
|
|
||
| <title>document</title> | ||
| <link rel="stylesheet" href="website.css"> | ||
| <style> | ||
| label{ | ||
|
|
||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <header id="headerid"> | ||
| <div class="bg"></div> | ||
| <h1 class="content">welcome to acme web solution</h1> | ||
| <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod, quia veritatis pariatur voluptatem accusantium aut, quisquam illum hic autem nostrum vel esse eligendi necessitatibus repudiandae alias. Atque nisi quibusdam debitis!</p> | ||
| <a class="btn" href="section-c">readmore</a> | ||
| </header> | ||
| <main> | ||
| <section id="section-a"> | ||
| <div class="content-wrap"> | ||
| <h2>web & application development</h2> | ||
| </div> | ||
| <div class="content-text"></div> | ||
| <div><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nam voluptates facilis dolores ex nisi labore illo dolor. Error, natus, illum consequuntur ad accusamus fugiat officiis animi optio obcaecati saepe autem.</p> | ||
| </div> | ||
| </section> | ||
| <section id="section-b"> | ||
| <ul> | ||
| <li> | ||
| <div class="card"> | ||
| <img src="https://static.pexels.com/photos/574077/pexels-photo-574077.jpeg" alt="alternate text"> | ||
| <div class="card-content"> | ||
|
|
||
| <h3 class="card-title"> | ||
| web development | ||
| </h3> | ||
| <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident at iusto optio qui laudantium quae sunt consequuntur odit minima ad non voluptatem nesciunt natus, fugit labore earum ipsum deserunt suscipit?</p> | ||
|
|
||
| </div> | ||
| </div> | ||
| </li> | ||
| <li> | ||
| <div class="card"> | ||
| <img src="https://static.pexels.com/photos/265087/pexels-photo-265087.jpeg" alt="alternate text"> | ||
| <div class="card-content"> | ||
|
|
||
| <h3 class="card-title"> | ||
| tech markiting | ||
| </h3> | ||
| <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident at iusto optio qui laudantium quae sunt consequuntur odit minima ad non voluptatem nesciunt natus, fugit labore earum ipsum deserunt suscipit?</p> | ||
|
|
||
| </div> | ||
| </div> | ||
| </li> | ||
| <li> | ||
| <div class="card"> | ||
| <img src="https://static.pexels.com/photos/261628/pexels-photo-261628.jpeg" alt="alternate text"> | ||
| <div class="card-content"> | ||
|
|
||
| <h3 class="card-title"> | ||
| mobile application | ||
| </h3> | ||
| <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident at iusto optio qui laudantium quae sunt consequuntur odit minima ad non voluptatem nesciunt natus, fugit labore earum ipsum deserunt suscipit?</p> | ||
|
|
||
| </div> | ||
| </div> | ||
| </li> | ||
|
|
||
| </ul> | ||
| </section> | ||
|
|
||
| <section></section> | ||
| <section></section> | ||
| </main> | ||
| <footer></footer> | ||
| </body> |