Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
176 changes: 176 additions & 0 deletions images/index.html
Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Dlaczego ten plik jest w katalogu images? Chyba przypadkowo go tam przerzuciłaś, bo domyślnie powinien być w katalogu głównym.
Jeśli miałaś problem ze ścieżkami to wystarczy wpisywać je względem tego pliku tj. np. ./images/logo.csv

Original file line number Diff line number Diff line change
@@ -0,0 +1,176 @@
<!DOCTYPE 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>Beautiful Free Nova template</title>
<link rel="stylesheet" href="style/style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap">
</head>
<body>
Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Warto ustawić margin: 0; padding: 0 dla body - wtedy nie ma takiej dziwnej ramki po bokach.

<div class="green">
<header class="top">
<img src="logo.svg" class="logo">
<nav>
<ul class="menu">
<li><a href="#">The Team</a></li>
<li>
<a href="#">Pricing</a>
</li>
<li><a href="#">Features</a></li>
<li><a class="button" href="#">DONWLOAD FREE!</a></li>
</ul>
</nav>
</header>

<section class="article">
<div class="col">
<h1 font-size:36px, font-weight: 600>Beautiful Free Nova template</h1>
<p class="header-text"> A top notch premium quality template for your next web project.</p>
<h4> Download FREE!</h4>
</div>
<div class="col">
<img src="screen.png" class="ipad-screen">
</div>
</section>

</div> <!-- ten zielony -->
<section class="black-section">
<h1> FEATURES </h1>
<div class="container2">
<div class="feature">
Comment on lines +41 to +42
Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Zwróć uwagę, że mamy tutaj "listę cech" dlatego zamiast div > div zrobiłbym ul > li - będzie to czytelniejsze

<img src="responsive.svg" alt="Icon 1" class="icon">
Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ustawiłbym kolor bliższy białemu niż niebieskiemu :)

<h3>FULLY RESPONSIVE</h3>
<p>Looks amazing on any device: smartphone, tablet, laptop and desktop.</p>
</div>
<div class="feature">
<img src="customizable.svg" alt="Icon 2" class="icon">
<h3>CUSTOMIZABLE</h3>
<p>Change the colors, pictures or any of the sections to suit your needs.</p>
</div>
<div class="feature">
<img src="design.svg" alt="Icon 3" class="icon">
<h3>SLICK AND BEAUTIFUL DESIGN</h3>
<p>Trendy and fresh design, fits any website.</p>
</div>
</div>
</section>

<section class="grey-section">
<img src="
logos.png">
</section>
<section class="white-section">
<div class="col2">
Comment on lines +64 to +65
Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Uwaga na formatowanie kodu - trzymaj odpowiednie odstępy od lewej krawędzi

<img src="imac.png" class="imac">
</div>
<div class="col2">
Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Spokojnie można wykorzystać article - staraj się ograniczać ilość div-ów

<h2 class="simple-and-beautiful">SIMPLE AND BEAUTIFUL</h2>
<div class="text-nova-theme"><p>Use Nova theme for your next web project. It is <br>
completely customizable so you can change any of <br>
the sections to fit your needs. Nova Theme is Free for <br>
any kind of use, personal and commercial. Have fun <br>
and good luck!</p></div>
</div>
</section>

<section class="grey-section">
<header>
<div>
Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ten div raczej jest zbędny :)

<h3 class="choose-your-plan">CHOOSE YOUR PRICING PLAN</h3>
</div>
</header>
<section>
<div>
<h5 class="pricing-plans">Pick any of our super affordable pricing plans</h5>
</div>
<section class="pricing">
<div class="pricing-plan">
Comment on lines +88 to +89
Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Uwaga na formatowanie.

PS. Ponieważ mamy "listę cen" to tutaj również można zastosować ul > li (każdy pakiet cenowy) zamiast. section > div

<h2>BASIC</h2>
<p class="price">$15</p>
<p>per month</p>
<ul>
<li>✔️ Up to 7 Projects</li>
<li>✔️ 2 Additional Developers</li>
<li><a class="buttonStarted" href="#">Get Started</a></li>
</ul>
</div>
<div class="pricing-plan">
<h2>AGENCY</h2>
<p class="price">$55</p>
<p>per month</p>
<ul>
<li>✔️ Up to 25 Projects</li>
<li>✔️ 2 Additional Developers</li>
<li>✔️ Unlimited Support</li>
<li><a class="buttonStarted" href="#">Get Started</a></li>
</ul>
</div>
<div class="pricing-plan">
<h2>PRO</h2>
<p class="price">$75</p>
<p>per month</p>
<ul>
<li>✔️ Up to 25 Projects</li>
<li>✔️ 2 Additional Developers</li>
<li>✔️ Unlimited Support</li>
<li>✔️ 1.5GB Disk Space</li>
<li><a class="buttonStarted" href="#">Get Started</a></li>
</ul>
</div>
</section>
</section>
</section>
<section class="white-section2">
<header>
<div>
Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ten div nic nie robi :P

<h3 class="team">THE TEAM</h3>
</div>
<section class="team1">
<div class="team2">
<img src="cto.png">
<h2 class="cto">CTO</h2>
<p class="johny">Johnny B Good</p>
<p>The brains behind the whole operation</p>
<img src="team-twitter.svg" class="social-media">
<img src="team-facebook.svg" class="social-media">
</div>
<div class="team2">
<img src="ceo.png">
<h2 class="ceo">CEO</h2>
<p class="roll">Roll Over Beethoven</p>
<p>The one that puts it all together</p>
<img src="team-twitter.svg" class="social-media">
<img src="team-facebook.svg" class="social-media">
</div>
<div class="team2">
<img src="cfo.png">
<h2 class="cfo">CFO</h2>
<p class="chuck">Chuck Berry</p>
<p>The guy with his hand on the wallet</p>
<img src="team-twitter.svg" class="social-media">
<img src="team-facebook.svg" class="social-media">
</div>
</section>
</section>
<section class="blue-section">
<header class="download-free">Download FREE!</header>
<p>Take it for a ride for any of your
Comment on lines +157 to +159
Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Uwaga na formatowanie kodu

<br> projects!</p>
<section class="email-inpt">
<div class="input-container">
<input type="email" placeholder="Enter your email">
</div> <a class="button2" href="#">DONWLOAD FREE!</a>
</section>
</section>
<section class="end-section">
<div>
<p>A free template by </p>
<img src="webscope.svg">
</div>
<br>
<img src="twitter.svg" class="end-logos">
<img src="facebook.svg" class="end-logos">
</section>
</body>
Loading