Html & CSS webiste template task completed #185
There are no files selected for viewing
This file contains hidden or 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,2 @@ | ||
| README.md | ||
| .DS_Store |
This file contains hidden or 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,183 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="pl"> | ||
|
|
||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <link rel="preconnect" href="https://fonts.googleapis.com"> | ||
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | ||
| <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" | ||
| rel="stylesheet"> | ||
| <link rel="stylesheet" href="./styles/index.css"> | ||
| <link rel="icon" type="image/png" href="./images/favicon.png" /> | ||
| <title>Website by Artur</title> | ||
| </head> | ||
|
|
||
| <body> | ||
| <header class="header row"> | ||
| <div class="header__navbar container"> | ||
| <a href="#" class="header__logo"><img class="header__logo-img" src="./images/logo.svg" alt="logo"></a> | ||
| <nav class="header__nav"> | ||
| <ul class="header__nav-menu"> | ||
| <li><a class="header__nav-link" href="#team">The Team</a></li> | ||
| <li><a class="header__nav-link" href="#pricing">Pricing</a></li> | ||
| <li><a class="header__nav-link" href="#features">Features</a></li> | ||
| </ul> | ||
| </nav> | ||
| </div> | ||
| <div class="header__container container"> | ||
| <article class="column header__column"> | ||
| <h1 class="header__title">Beautiful Free Nova template</h1> | ||
| <p class="header__description">A top noth premium qualtiy template for your next web project.</p> | ||
|
|
||
| <button class="cta-button">Download FREE!</button> | ||
| </article> | ||
| <div class="column header__column"> | ||
| <figure class="header__hero"> | ||
| <img class="header__hero-img" src="./images/screen.png" alt="Tablet screen with website"> | ||
|
|
||
| </figure> | ||
|
|
||
| </div> | ||
| </div> | ||
| </header> | ||
| <main class="content"> | ||
| <section id="features" class="features content__row row"> | ||
| <header class="features__container container"> | ||
| <h2 class="features__title">FEATURES</h2> | ||
| </header> | ||
| <ul class="features__container container"> | ||
| <li class="column"> | ||
| <div class="features__icon"> | ||
| <img class="features__icon-img" src="./images/responsive.svg" alt="responsive icon"> | ||
|
|
||
| </div> | ||
| <h4>FULLY RESPONSIVE</h4> | ||
| <p>Looks amazing on any device: smartphone, tablet, laptop and desktop.</p> | ||
| </li> | ||
| <li class="column"> | ||
| <div class="features__icon"> | ||
| <img class="features__icon-img" src="./images/customizable.svg" alt="features icon"> | ||
| </div> | ||
| <h4>CUSTOMIZABLE</h4> | ||
| <p>Change the colors, pictures or any of the sections to suit your needs.</p> | ||
| </li> | ||
| <li class="column"> | ||
| <div class="features__icon"> | ||
| <img class="features__icon-img" src="./images/design.svg" alt="design icon"> | ||
| </div> | ||
| <h4>SLICK AND BEAUTIFUL DESIGN</h4> | ||
| <p>Trendy and fresh design, fits any website.</p> | ||
| </li> | ||
| </ul> | ||
| </section> | ||
| <aside class="logos row"> | ||
| <figure class="logos__container container"> | ||
| <img class="logos__img" src="./images/logos.png" alt="logos of companies"> | ||
| </figure> | ||
| </aside> | ||
| <section class="display row"> | ||
| <div class="display__container container"> | ||
|
Owner
There was a problem hiding this comment. Tutaj też można wrzucić |
||
| <figure class="column display__section-hero "><img class="display__section-hero-img" | ||
| src="./images/imac.png" alt="Apple desktop computer"> | ||
| </figure> | ||
| <article class="column"> | ||
| <h2 class="display__title">SIMPLE AND BEAUTIFUL</h2> | ||
| <p class="display__description">Lorem, ipsum dolor sit amet consectetur adipisicing elit. At omnis | ||
| quidem officiis quis in | ||
|
|
||
| dignissimos eligendi nesciunt doloribus repellendus dolorem, sed debitis aliquid nihil ullam est | ||
| quo vero libero, perferendis illo? Quae, expedita. Voluptatibus alias ex iste. Necessitatibus | ||
| laboriosam at vel id, excepturi molestias vero neque ratione repudiandae quidem rerum?</p> | ||
|
|
||
| </article> | ||
| </div> | ||
| </section> | ||
| <section id="pricing" class="pricing row"> | ||
| <header class="pricing__header"> | ||
| <h2 class="pricing__title">CHOOSE YOUR PRICING PLAN</h2> | ||
| <p class="pricing__caption">Pick any of our super affordable pricing plans</p> | ||
| </header> | ||
| <ul class="pricing-cards container"> | ||
| <li class="pricing-cards__card column"> | ||
| <h4 class="pricing-cards__card-title">BASIC</h4> | ||
| <span class="pricing-cards__card-price">$15</span> | ||
| <span class="pricing-cards__card-period">per month</span> | ||
| <ul class="pricing-cards__card-features"> | ||
| <li>Up to 7 projects</li> | ||
| <li>2 Additional Developers</li> | ||
| </ul> | ||
| <button class="pricing-cards__card-btn">Get Started</button> | ||
| </li> | ||
| <li class="pricing-cards__card pricing-cards__card--active column"> | ||
| <h4 class="pricing-cards__card-title">AGENCY</h4> | ||
| <span class="pricing-cards__card-price">$55</span> | ||
| <span class="pricing-cards__card-period">per month</span> | ||
| <ul class="pricing-cards__card-features"> | ||
| <li>Up to 25 Projects</li> | ||
| <li>2 Additional Developers</li> | ||
| <li>Unlimited Support</li> | ||
| </ul> | ||
| <button class="pricing-cards__card-btn">Get Started</button> | ||
| </li> | ||
| <li class="pricing-cards__card column"> | ||
| <h4 class="pricing-cards__card-title">PRO</h4> | ||
| <span class="pricing-cards__card-price">$75</span> | ||
| <span class="pricing-cards__card-period">per month</span> | ||
| <ul class="pricing-cards__card-features"> | ||
| <li>Up to 25 Projects</li> | ||
| <li>2 Additional Developers</li> | ||
| <li>Unlimited Support</li> | ||
| <li>1.5GB Disk Space</li> | ||
| </ul> | ||
| <button class="pricing-cards__card-btn">Get Started</button> | ||
| </li> | ||
| </ul> | ||
| </section> | ||
| <section id="team" class="team row"> | ||
| <header class="team__header"> | ||
| <h2 class="team__title">THE TEAM</h2> | ||
| </header> | ||
| <ul class="team-cards container"> | ||
| <li class="team-cards__card"> | ||
| <div class="team-cards__card-photo"><img src="./images/cto.png" alt="cto photo"></div> | ||
| <h4>CTO</h4> | ||
| <span class="team-cards__card-name">Johnny B Good</span> | ||
| <span class="team-cards__card-description">The brains the whole operation</span> | ||
| <span class="team-cards__card-social"> | ||
| <img class="team__cards__card-social-img" src="./images/team-twitter.svg" alt="twitter logo"> | ||
| <img class="team__cards__card-social-img" src="./images/team-facebook.svg" alt="facebook logo"> | ||
| </span> | ||
| </li> | ||
| <li class="team-cards__card"> | ||
| <div class="team-cards__card-photo"><img src="./images/ceo.png" alt="ceo photo"></div> | ||
| <h4>CEO</h4> | ||
| <span class="team-cards__card-name">Roll Over Beethoven</span> | ||
| <span class="team-cards__card-description">The one that puts it all together</span> | ||
| <span class="team-cards__card-social"> | ||
| <img class="team__cards__card-social-img" src="./images/team-twitter.svg" alt="twitter logo"> | ||
| <img class="team__cards__card-social-img" src="./images/team-facebook.svg" alt="facebook logo"> | ||
| </span> | ||
| </li> | ||
| <li class="team-cards__card"> | ||
| <div class="team-cards__card-photo"><img src="./images/cfo.png" alt="cfo photo"></div> | ||
| <h4>CFO</h4> | ||
| <span class="team-cards__card-name">Chuck Berry</span> | ||
| <span class="team-cards__card-description">The guy with his hand on the wallet</span> | ||
| <span class="team-cards__card-social"> | ||
| <img class="team__cards__card-social-img" src="./images/team-twitter.svg" alt="twitter logo"> | ||
| <img class="team__cards__card-social-img" src="./images/team-facebook.svg" alt="facebook logo"> | ||
| </span> | ||
| </li> | ||
|
|
||
| </ul> | ||
| </section> | ||
| </main> | ||
| <footer class="footer row"> | ||
| <figure class="footer__container container"> | ||
| <img class="footer__logo" src="./images/webscope.svg" alt="webscope logo"> | ||
| <figcaption> | ||
| A free template by | ||
| </figcaption> | ||
| </figure> | ||
|
|
||
| </footer> | ||
|
|
||
| </body> | ||
|
|
||
| </html> | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍