landing page complete #175
There are no files selected for viewing
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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,302 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="pl"> | ||
|
|
||
| <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>Nova Theme</title> | ||
| <link rel="stylesheet" href="./styles/index.css" /> | ||
| </head> | ||
|
|
||
| <body> | ||
| <!-- Hero Section --> | ||
| <section class="hero"> | ||
| <div class="hero__background"> | ||
| <div class="container"> | ||
| <!-- Header / Navigation --> | ||
| <header class="header text-center text-left-sm-md-lg two-column-flex-sm-md-lg"> | ||
| <div class="header__brand"> | ||
| <a class="header__logo-link" href="#"> | ||
| <img class="header__logo" src="images/logo.svg" alt="Nova Logo" /> | ||
| </a> | ||
| </div> | ||
| <div class="header__actions text-right-sm-md-lg"> | ||
| <nav class="header__nav"> | ||
| <a class="header__nav-item" href="#team">The Team</a> | ||
| <a class="header__nav-item" href="#pricing">Pricing</a> | ||
| <a class="header__nav-item" href="#features">Features</a> | ||
|
Comment on lines
+26
to
+28
Owner
There was a problem hiding this comment. W przypadku nawigacji osobiście wolę trzymać się zasady |
||
| </nav> | ||
| </div> | ||
| </header> | ||
|
|
||
| <!-- Hero Content --> | ||
| <div class="hero__content text-center text-left-sm-md-lg two-column-flex-sm-md-lg"> | ||
| <div class="hero__text"> | ||
|
Owner
There was a problem hiding this comment. Tutaj zaproponowałbym znacznik |
||
| <h1 class="hero__headline"> | ||
| Beautiful Free Nova Template | ||
| </h1> | ||
| <p class="hero__subtext"> | ||
| A top notch premium quality template for your next web project. | ||
| </p> | ||
| <a class="hero__download-link btn btn-primary" href="#">Download FREE! | ||
| </a> | ||
| </div> | ||
|
|
||
| <div class="hero__ipad-wrapper"> | ||
| <div class="hero__ipad"> | ||
|
|
||
| <img class="hero__ipad-img scale-all" src="images/screen.png" alt="App Screen" /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> | ||
|
|
||
| <!-- Features Section --> | ||
| <section class="features text-center"> | ||
| <div class="container"> | ||
| <header class="features__header"> | ||
| <h2 class="features__title">FEATURES</h2> | ||
| </header> | ||
| <div class="features__list three-column-flex-sm-md-lg"> | ||
| <article class="features__item"> | ||
|
Comment on lines
+62
to
+63
Owner
There was a problem hiding this comment. Można też zrobić |
||
| <div class="features__icon"> | ||
| <img class="features__icon-img" src="images/responsive.svg" alt="Fully responsive" /> | ||
| </div> | ||
| <h5 class="features__item-title">FULLY RESPONSIVE</h5> | ||
| <p class="features__item-description"> | ||
| Looks amazing on any device: smartphone, tablet, laptop and desktop. | ||
| </p> | ||
| </article> | ||
|
|
||
| <article class="features__item"> | ||
| <div class="features__icon"> | ||
| <img class="features__icon-img" src="images/customizable.svg" alt="Customizable" /> | ||
| </div> | ||
| <h5 class="features__item-title">CUSTOMIZABLE</h5> | ||
| <p class="features__item-description"> | ||
| Change the colors, pictures or any of the sections to suit your needs. | ||
| </p> | ||
| </article> | ||
|
|
||
| <article class="features__item"> | ||
| <div class="features__icon"> | ||
| <img class="features__icon-img" src="images/design.svg" alt="Slick and Beautiful Design" /> | ||
| </div> | ||
| <h5 class="features__item-title">SLICK AND BEAUTIFUL DESIGN</h5> | ||
| <p class="features__item-description"> | ||
| Trendy and fresh design, fits any website. | ||
| </p> | ||
| </article> | ||
| </div> | ||
| </div> | ||
| </section> | ||
|
|
||
| <!-- Logos Section --> | ||
| <section class="logos text-center"> | ||
|
Owner
There was a problem hiding this comment. Osobiście bym dał |
||
| <div class="container"> | ||
| <img class="logos__image" src="images/logos.png" alt="Partner logos" /> | ||
| </div> | ||
| </section> | ||
|
|
||
| <!-- Promo Section --> | ||
| <section class="promo"> | ||
| <div class="container"> | ||
| <div class="promo__inner two-column-flex-sm-md-lg"> | ||
| <div class="promo__media"> | ||
| <img class="promo__imac-screen scale-all" src="images/imac.png" alt="iMac Screen" /> | ||
| </div> | ||
| <div class="promo__content text-center text-left-sm-md-lg"> | ||
|
|
||
| <h2 class="promo__title">SIMPLE AND BEAUTIFUL</h2> | ||
| <p class="promo__description"> | ||
| Use Nova theme for your next web project. It is completely customizable so you can change any of | ||
| the | ||
| sections to fit your needs. | ||
| Nova Theme is Free for any kind of use, personal and commercial. Have fun and good luck! | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> | ||
|
|
||
| <!-- Pricing Section --> | ||
| <section class="pricing"> | ||
| <div class="container"> | ||
| <header class="pricing__header text-center"> | ||
| <h2 class="pricing__title">CHOOSE YOUR PRICING PLAN</h2> | ||
| <h4 class="pricing__subtitle"> | ||
| Pick any of our super affordable pricing plans | ||
| </p> | ||
| </header> | ||
|
|
||
| <div class="pricing__table text-center three-column-flex-sm-md-lg"> | ||
| <article class="pricing__plan"> | ||
| <header class="pricing__plan-header"> | ||
| <h3 class="pricing__plan-title">BASIC</h3> | ||
| <p class="pricing__plan-cost"><strong>$15</strong></p> | ||
| <h5 class="pricing__plan-period">per month</h5> | ||
| </header> | ||
| <ul class="pricing__plan-features"> | ||
| <li class="pricing__plan-feature">Up to 7 Projects</li> | ||
| <li class="pricing__plan-feature">2 Additional Developers</li> | ||
| </ul> | ||
| <div class="pricing__plan-action text-center"> | ||
| <a class="pricing__plan-btn btn btn-secondary" href="#">Get Started</a> | ||
| </div> | ||
| </article> | ||
|
|
||
| <article class="pricing__plan pricing__plan--featured"> | ||
| <header class="pricing__plan-header"> | ||
| <h3 class="pricing__plan-title">AGENCY</h3> | ||
| <p class="pricing__plan-cost"><strong>$55</strong></p> | ||
| <h5 class="pricing__plan-period">per month</h5> | ||
| </header> | ||
| <ul class="pricing__plan-features"> | ||
| <li class="pricing__plan-feature">Up to 25 Projects</li> | ||
| <li class="pricing__plan-feature">2 Additional Developers</li> | ||
| <li class="pricing__plan-feature">Unlimited Support</li> | ||
| </ul> | ||
| <div class="pricing__plan-action text-center"> | ||
| <a class="pricing__plan-btn btn btn-secondary" href="#">Get Started</a> | ||
| </div> | ||
| </article> | ||
|
|
||
| <article class="pricing__plan"> | ||
| <header class="pricing__plan-header"> | ||
| <h3 class="pricing__plan-title">PRO</h3> | ||
| <p class="pricing__plan-cost"><strong>$75</strong></p> | ||
| <h5 class="pricing__plan-period">per month</h5> | ||
| </header> | ||
| <ul class="pricing__plan-features"> | ||
| <li class="pricing__plan-feature">Up to 25 Projects</li> | ||
| <li class="pricing__plan-feature">2 Additional Developers</li> | ||
| <li class="pricing__plan-feature">Unlimited Support</li> | ||
| <li class="pricing__plan-feature">1.5GB Disk Space</li> | ||
| </ul> | ||
| <div class="pricing__plan-action text-center"> | ||
| <a class="pricing__plan-btn btn btn-secondary" href="#">Get Started</a> | ||
| </div> | ||
| </article> | ||
| </div> | ||
| </div> | ||
| </section> | ||
|
|
||
| <!-- Team Section --> | ||
| <section class="team"> | ||
| <div class="container"> | ||
| <header class="team__header text-center"> | ||
| <h2 class="team__title">THE TEAM</h2> | ||
| </header> | ||
| <div class="team__members three-column-flex-sm-md-lg"> | ||
| <article class="team__member"> | ||
| <img class="team__member-photo" src="images/cto.png" alt="CTO" /> | ||
| <div class="team__member-info"> | ||
| <h3 class="team__member-position">CTO</h3> | ||
| <h5 class="team__member-name font-bold">Johnny B Good</h5> | ||
| <p class="team__member-description"> | ||
| The brains behind the whole operation | ||
| </p> | ||
| <div class="team__member-social"> | ||
| <a href="http://www.twitter.com"> | ||
| <img class="team__social-icon" src="images/team-twitter.svg" alt="Twitter" /> | ||
| </a> | ||
| <a href="http://www.facebook.com"> | ||
| <img class="team__social-icon" src="images/team-facebook.svg" alt="Facebook" /> | ||
| </a> | ||
| <a href="https://plus.google.com/"> | ||
| <img class="team__social-icon" src="images/team-google.svg" alt="Google" /> | ||
| </a> | ||
| </div> | ||
| </div> | ||
| </article> | ||
|
|
||
| <article class="team__member"> | ||
| <img class="team__member-photo" src="images/ceo.png" alt="CEO" /> | ||
| <div class="team__member-info"> | ||
| <h3 class="team__member-position">CEO</h3> | ||
| <h5 class="team__member-name font-bold">Roll Over Beethoven</h5> | ||
| <p class="team__member-description"> | ||
| The one that puts it all together | ||
| </p> | ||
| <div class="team__member-social"> | ||
| <a href="http://www.twitter.com"> | ||
| <img class="team__social-icon" src="images/team-twitter.svg" alt="Twitter" /> | ||
| </a> | ||
| <a href="http://www.facebook.com"> | ||
| <img class="team__social-icon" src="images/team-facebook.svg" alt="Facebook" /> | ||
| </a> | ||
| <a href="https://plus.google.com/"> | ||
| <img class="team__social-icon" src="images/team-google.svg" alt="Google" /> | ||
| </a> | ||
| </div> | ||
| </div> | ||
| </article> | ||
|
|
||
| <article class="team__member"> | ||
| <img class="team__member-photo" src="images/cfo.png" alt="CFO" /> | ||
| <div class="team__member-info"> | ||
| <h3 class="team__member-position">CFO</h3> | ||
| <h5 class="team__member-name font-bold">Chuck Berry</h5> | ||
| <p class="team__member-description"> | ||
| The guy with his hand on the wallet | ||
| </p> | ||
| <div class="team__member-social"> | ||
| <a href="http://www.twitter.com"> | ||
| <img class="team__social-icon" src="images/team-twitter.svg" alt="Twitter" /> | ||
| </a> | ||
| <a href="http://www.facebook.com"> | ||
| <img class="team__social-icon" src="images/team-facebook.svg" alt="Facebook" /> | ||
| </a> | ||
| <a href="https://plus.google.com/"> | ||
| <img class="team__social-icon" src="images/team-google.svg" alt="Google" /> | ||
| </a> | ||
| </div> | ||
| </div> | ||
| </article> | ||
| </div> | ||
| </div> | ||
| </section> | ||
|
|
||
| <!-- Call To Action --> | ||
| <section class="cta section--blue"> | ||
| <div class="container"> | ||
| <header class="cta__header text-center"> | ||
| <h3 class="cta__title font-bold">Download FREE!</h3> | ||
| <p class="cta__subtitle"> | ||
| Take it for a ride for any of your projects! | ||
| </p> | ||
| </header> | ||
| <div class="cta__form-wrapper"> | ||
| <form class="cta__form" action="/" method="post"> | ||
| <input type="email" class="cta__form-input" name="email" id="newsletter-email-input" | ||
| placeholder="Enter your email" required /> | ||
| <button type="submit" class="cta__form-btn btn btn-primary">Download</button> | ||
| </form> | ||
| </div> | ||
| </div> | ||
| </section> | ||
|
|
||
| <!-- Footer --> | ||
| <footer class="footer"> | ||
| <div class="container"> | ||
| <div class="footer__content text-left text-right-sm-md-lg"> | ||
| <div class="footer__credit text-left text-center-sm-md-lg"> | ||
| <a class="footer__credit-link" href="#"> | ||
| <img class="footer__credit-logo" src="images/webscope.svg" alt="Webscope" /> | ||
| </a> | ||
| </div> | ||
| <div class="footer__social text-right"> | ||
| <a class="footer__social-link" href="#"> | ||
| <img class="footer__social-icon" src="images/twitter.svg" alt="Twitter" /> | ||
| </a> | ||
| <a class="footer__social-link" href="#"> | ||
| <img class="footer__social-icon" src="images/facebook.svg" alt="Facebook" /> | ||
| </a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </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.
Osobiście pominąłbym
div- nie jest on niezbędny, a im mniej znaczników tym jest czytelniej.