Skip to content

Task done #162

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
kgrzybowski wants to merge 11 commits into
base: master
Choose a base branch
from
Open

Task done #162

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
7a9c0fc
Initial commit
kgrzybowski Feb 28, 2024
cad3d11
Header section
kgrzybowski Feb 28, 2024
fe8dd7b
Features added
kgrzybowski Feb 28, 2024
9930c18
HTML Structure created
kgrzybowski Feb 28, 2024
4774789
Add reset.css file
kgrzybowski Feb 28, 2024
e39a031
Hero page created
kgrzybowski Mar 2, 2024
452099b
Hero page fixed
kgrzybowski Mar 2, 2024
ceb03f4
Features added
kgrzybowski Mar 2, 2024
a09781e
Logos + About added
kgrzybowski Mar 4, 2024
c971504
Pricing added
kgrzybowski Mar 4, 2024
5ab997c
The Team & footer added
kgrzybowski Mar 5, 2024
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
297 changes: 297 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,297 @@
<!DOCTYPE html>
<html lang="en">

<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="reset.css"
>
<link
rel="stylesheet"
href="style.css"
>
<title>Nova Theme</title>
</head>

<body>
<header class="header header--background">
<!-- navigation -->
<section class="header header--container">
<div class="header header--logo--container">
<a href="./#">
<img
class="header--logo"
src="./images/logo.svg"
alt="Nova logo"
>
</a>
</div>
<nav class="header--nav">
<ul class="nav--items">
<a href="./#team">
<li class="nav--item">The Team</li>
</a>
<a href="./#pricing">
<li class="nav--item">Pricing</li>
</a>
<a href="./#features">
<li class="nav--item">Features</li>
</a>
</ul>
</nav>
</section>
<!-- navigation -->
<!-- hero section -->
<section class="hero hero--container">
<div>
<h1 class="hero hero--heading">Beautiful Free Nova template</h1>
<p class="hero hero--description">A top notch premium quality template for your next web project.</p>
<button class="hero--btn">Download FREE!</button>
</div>
<div class="hero hero--img--background">
<img
class="hero--img"
src="./images/screen.png"
alt="Phone screen"
>
</div>
</section>
<!-- hero section -->
</header>

<main>
<!-- features -->
<section
class="features"
id="features"
>
<div class="features--box">
<h2 class="features--header">FEATURES</h2>
<div class="features--container">
<div class="row">
<div class="feature--item">
<img
class="feature--icon"
src="./images/responsive.svg"
alt="respnosive icon"
>
</div>
<div class="feature--content">
<h4 class="feature--name">FULLY RESPONSIVE</h4>
<p class="feature--description">Looks amazing on any device: smartphone, tablet, laptop and
desktop.</p>
</div>
</div>
<div class="row">
<div class="feature--item">
<img
class="feature--icon"
src="./images/customizable.svg"
alt="customizable icon"
>
</div>
<div class="feature--content">
<h4 class="feature--name">CUSTOMIZABLE</h4>
<p class="feature--description">Change the colors, pictures or any of the sections to suit your
needs.</p>
</div>
</div>
<div class="row">
<div class="feature--item">
<img
class="feature--icon"
src="./images/design.svg"
alt="medal icon"
>
</div>
<div class="feature--content">
<h4 class="feature--name">SLICK AND BEAUTIFUL DESIGN</h4>
<p class="feature--description">Trendy and fresh design, fits any website.</p>
</div>
</div>
</div>
</div>
</section>
<!-- features -->
<!-- logos -->
<aside class="logos">
<div class="logos logos--container"><img
class="logos--img"
src="./images/logos.png"
alt="companies logos"
>
</div>
</aside>
<!-- logos -->
<!-- about -->
<section class="about">
<div class="about--container">
<img
class="about--img"
src="./images/imac.png"
alt="monitor photo"
>
</div>
<div class="about--container">
<div class="about--container--background">
<h2 class="about--header">SIMPLE AND BEAUTIFUL</h2>
<p class="about--text">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>
</section>
<!-- about -->
<!-- pricing -->
<section
class="pricing"
id="pricing"
>
<div class="pricing--headers">
<h2 class="pricing--header">CHOOSE YOUR PRICING PLAN</h2>
<h4 class="pricing--subheader">Pick any of our super affordable pricing plans</h4>
</div>
<div class="pricing--table">
<div class="pricing--plan col">
<h3 class="plan--title">BASIC</h3>
<h4 class="plan--cost">$15</h4>
<h5 class="plan--time">per month</h5>
<ul class="plan--features">
<li>Up to 7 Projects</li>
<li>2 Additional Developers</li>
</ul>
<div class="center"><button class="pricing--button">Get Started</button></div>
</div>
<div class="pricing--plan col midplan">
<h3 class="plan--title">AGENCY</h3>
<h4 class="plan--cost">$55</h4>
<h5 class="plan--time">per month</h5>
<ul class="plan--features">
<li>Up to 25 Projects</li>
<li>2 Additional Developers</li>
<li>Unlimited Support</li>
</ul>
<div class="center"><button class="pricing--button">Get Started</button></div>
</div>
<div class="pricing--plan col">
<h3 class="plan--title">PRO</h3>
<h4 class="plan--cost">$75</h4>
<h5 class="plan--time">per month</h5>
<ul class="plan--features">
<li>Up to 25 Projects</li>
<li>2 Additional Developers</li>
<li>Unlimited Support</li>
<li>1.5GB Disk Space</li>
</ul>
<div class="center"><button class="pricing--button">Get Started</button></div>
</div>
</div>
</section>
<!-- pricing -->
<!-- the team -->
<section
class="team"
id="team"
>
<h2 class="team--header">THE TEAM</h2>
<div class="team--container">
<div class="team--member">
<img
class="team--photo"
src="./images/cto.png"
alt="cto picture"
>
<div class="team--member--text">
<h4 class="team--function">CTO</h4>
<h5 class="team--name">Johnny B Good</h5>
<p class="team--description">The brains behind the whole operation</p>
<img
src="./images/team-twitter.svg"
alt="twitter icon"
>
<img
src="./images/team-facebook.svg"
alt="facebook icon"
>
</div>
</div>
<div class="team--member">
<img
class="team--photo"
src="./images/ceo.png"
alt="ceo picture"
>
<div class="team--member--text">
<h4 class="team--function">CEO</h4>
<h5 class="team--name">Roll Over Beethoven</h5>
<p class="team--description">The one that puts it all together</p>
<img
src="./images/team-twitter.svg"
alt="twitter icon"
>
<img
src="./images/team-facebook.svg"
alt="facebook icon"
>
</div>
</div>
<div class="team--member">
<img
class="team--photo"
src="./images/cfo.png"
alt="cfo picture"
>
<div class="team--member--text">
<h4 class="team--function">CFO</h4>
<h5 class="team--name">Chuck Berry</h5>
<p class="team--description">The guy with his hand on the wallet</p>
<img
src="./images/team-twitter.svg"
alt="twitter icon"
>
<img
src="./images/team-facebook.svg"
alt="facebook icon"
>
</div>
</div>
</div>
</section>
<!-- the team -->
<!-- footer -->
<footer class="footer">
<div class="footer--container">
<span class="footer--text">A free template by</span>
<a href="#"><img
class="footer--logo"
src="./images/webscope.svg"
alt="webscope logo"
></a>
</div>
</footer>
<!-- footer -->
</main>

</body>

</html>
Loading