Skip to content

Basic HTML and CSS Project done #186

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
TetraMeister wants to merge 11 commits into
base: master
Choose a base branch
from
Open

Basic HTML and CSS Project done #186

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
4c0c44b
Initial + Header HTML structure with CSS styling + base.css + reset.css
TetraMeister Dec 16, 2025
b4dac81
SCSS added + layout fixes hero section
TetraMeister Dec 16, 2025
0aed352
banner.css error fix
TetraMeister Dec 16, 2025
c1ff2be
HTML + Styles for Features section added
TetraMeister Dec 18, 2025
4cd8bc0
fit-content styling for main elements added
TetraMeister Dec 18, 2025
8c27b17
CSS: elements sizes adjusted
TetraMeister Dec 18, 2025
14a4103
about and clients sections added (HTML and CSS applied)
TetraMeister Dec 19, 2025
8227983
about sizing adjustment + clients bg color
TetraMeister Dec 19, 2025
6deb2e1
pricing section + team section + footer done (HTML structure and CSS …
TetraMeister Dec 20, 2025
58f8821
bg color added to pricing section
TetraMeister Dec 20, 2025
4db4a33
added Semantic HTML lists
TetraMeister Dec 22, 2025
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
308 changes: 308 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,308 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
>
<link
rel="stylesheet"
href="./styles/reset.css"
>
<link
rel="stylesheet"
href="./styles/base.css"
>
<link
rel="stylesheet"
href="./styles/card-section.css"
>
<link
rel="stylesheet"
href="./styles/banner.css"
>
<link
rel="stylesheet"
href="./styles/features.css"
>
<link
rel="stylesheet"
href="./styles/clients.css"
>
<link
rel="stylesheet"
href="./styles/about.css"
>
<link
rel="stylesheet"
href="./styles/pricing.css"
>
<link
rel="stylesheet"
href="./styles/team.css"
>
<link
rel="stylesheet"
href="./styles/foot.css"
>
<title>nova | Template</title>
</head>

<body>

<header class="row banner">
<nav class="banner__nav container">
<a
href="#"
class="banner__logo cell"
>
<img
src="./images/logo.svg"
alt="nova logo"
class="banner__logo-img"
>
</a>
<ul class="banner__list cell">
<li class="banner__list-item"><a
href="#team"
class="banner__link"
>The Team</a></li>
<li class="banner__list-item"><a
href="#pricing"
class="banner__link"
>Pricing</a></li>
<li class="banner__list-item"><a
href="#features"
class="banner__link"
>Features</a></li>
</ul>
</nav>
<section class="banner__hero container">
<article class="banner__cta cell">
<h1 class="banner__heading"><span class="no-wrap">Beautiful Free Nova</span> template</h1>
<p class="banner__text">A top notch premium quality template for your next web project.</p>
<button class="banner__download-btn">Download FREE!</button>
</article>
<div class="banner__img-container cell">
<img
src="./images/screen.png"
alt="Image of mobile app screen-shot"
class="banner__img"
>
</div>

</section>
</header>

<section
class="features row"
id="features"
>
<header class="container features__heading">
Copy link
Copy Markdown
Owner

@devmentor-pl devmentor-pl Dec 23, 2025

Choose a reason for hiding this comment

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

👍

<h2 class="cell features__title uppercase">Features</h2>
</header>
<ul class="container features__container">
<li class="cell features__card">
Copy link
Copy Markdown
Owner

@devmentor-pl devmentor-pl Dec 23, 2025

Choose a reason for hiding this comment

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

👍

<div class="features__icon-container">
<img
src="./images/responsive.svg"
alt="Phone icon"
>
</div>
<h3 class="features__name uppercase">Responsive</h3>
<p class="features__text">Looks amazing on any device: smartphone, tablet, laptop and desktop.</p>
</li>
<li class="cell features__card">
<div class="features__icon-container">
<img
src="./images/customizable.svg"
alt="Tools icon"
>
</div>
<h3 class="features__name uppercase">Customizable</h3>
<p class="features__text">Change the colors, pictures or any of the sections to suit your needs.</p>
</li>
<li class="cell features__card">
<div class="features__icon-container">
<img
src="./images/design.svg"
alt="Medal icon"
>
</div>
<h3 class="features__name uppercase"><span class="no-wrap">Slick and beautiful</span> design</h3>
<p class="features__text">Trendy and fresh design, fits any website.</p>
</li>
</ul>
</section>

<section class="row clients">
<div
class="container clients__banner"
aria-label="Banner containing Nova's clients logos"
></div>
</section>

<section class="row about">
<div class="cell about__img-container"></div>
<div class="cell about__content">
<article class="about__content-container">
<h3 class="about__title uppercase">Simple and beautiful</h3>
<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>
</article>
Copy link
Copy Markdown
Owner

@devmentor-pl devmentor-pl Dec 23, 2025

Choose a reason for hiding this comment

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

👍

</div>
</section>

<section
class="card-section row pricing"
id="pricing"
>
<header class="card-section__heading container">
<h2 class="uppercase card-section__title">Choose your pricing plan</h2>
<p class="card-section__subtitle">Pick any of our super affordable pricing plans</p>
</header>
<ul class="card-section__container container">
<li class="card-section__card cell pricing__card">
<header class="pricing__price-container">
Copy link
Copy Markdown
Owner

@devmentor-pl devmentor-pl Dec 23, 2025

Choose a reason for hiding this comment

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

👍

<h4 class="pricing__name uppercase">Basic</h4>
<span class="pricing__amount">$15</span>
<p class="pricing__period">per month</p>
</header>
<div class="pricing__features">
<ul class="pricing__features-list">
<li class="pricing__feature">Up to 7 Projects</li>
<li class="pricing__feature">2 Additional Developers</li>
</ul>
</div>
<button
type="button"
class="pricing__btn"
>Get Started</button>
</li>
<li class="card-section__card cell pricing__card">
<header class="pricing__price-container">
<h4 class="pricing__name uppercase">agency</h4>
<span class="pricing__amount">$55</span>
<p class="pricing__period">per month</p>
</header>
<div class="pricing__features">
<ul class="pricing__features-list">
<li class="pricing__feature">Up to 25 Projects</li>
<li class="pricing__feature">2 Additional Developers</li>
<li class="pricing__feature">Unlimited Support</li>
</ul>
</div>
<button
type="button"
class="pricing__btn"
>Get Started</button>
</li>
<li class="card-section__card cell pricing__card">
<header class="pricing__price-container">
<h4 class="pricing__name uppercase">pro</h4>
<span class="pricing__amount">$75</span>
<p class="pricing__period">per month</p>
</header>
<div class="pricing__features">
<ul class="pricing__features-list">
<li class="pricing__feature">Up to 25 Projects</li>
<li class="pricing__feature">2 Additional Developers</li>
<li class="pricing__feature">Unlimited Support</li>
<li class="pricing__feature">1.5GB Disk Space</li>
</ul>
</div>
<button
type="button"
class="pricing__btn"
>Get Started</button>
</li>
</ul>
</section>

<section
class="card-section row team"
id="team"
>
<header class="card-section__heading container">
<h2 class="card-section__title uppercase">The team</h2>
</header>
<ul class="card-section__container container">
<li class="card-section__card cell team__card">
Copy link
Copy Markdown
Owner

@devmentor-pl devmentor-pl Dec 23, 2025

Choose a reason for hiding this comment

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

👍

<div class="team__profile-picture cto"></div>
<div class="team__member">
<h4 class="team__role">CTO</h4>
<span class="team__name">Johnny B Good</span>
</div>
<p class="team__description">The brains behind the whole operation</p>
<div class="team__sm-container">
<a href="#"><img
src="./images/team-twitter.svg"
alt="Twitter link"
></a>
<a href="#"><img
src="./images/team-facebook.svg"
alt="Facebook link"
></a>
</div>
</li>
<li class="card-section__card cell team__card">
<div class="team__profile-picture ceo"></div>
<div class="team__member">
<h4 class="team__role">CEO</h4>
<span class="team__name">Roll Over Beethoven</span>
</div>
<p class="team__description">The one that puts it all together</p>
<div class="team__sm-container">
<a href="#"><img
src="./images/team-twitter.svg"
alt="Twitter link"
></a>
<a href="#"><img
src="./images/team-facebook.svg"
alt="Facebook link"
></a>
</div>
</li>
<li class="card-section__card cell team__card">
<div class="team__profile-picture cfo"></div>
<div class="team__member">
<h4 class="team__role">CFO</h4>
<span class="team__name">Chuck Berry</span>
</div>
<p class="team__description">The guy with his hand on the wallet</p>
<div class="team__sm-container">
<a href="#"><img
src="./images/team-twitter.svg"
alt="Twitter link"
></a>
<a href="#"><img
src="./images/team-facebook.svg"
alt="Facebook link"
></a>
</div>
</li>
</ul>
</section>

<footer class="row foot">
<div class="container foot__container">
<div class="foot__content cell">
<span class="foot__text">A free template by</span>
<a
href="#"
class="foot__link"
><img
src="./images/webscope.svg"
alt="Webscope link"
>
</a>
</div>
</div>
</footer>
</body>

</html>
33 changes: 33 additions & 0 deletions scss/about.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
.about {
display: flex;
height: 800px;
justify-content: space-between;
padding: 3em 5px;

&__img-container {
background: url(./../images/imac.png) right/contain no-repeat;
flex-basis: 50%;
}

&__content {
flex-basis: 50%;
margin-top: 2em;
display: flex;
align-items: flex-start;
justify-items: flex-start;
}

&__content-container {
max-width: 550px;
padding-left: 5em;
}

&__title {
margin-bottom: 1em;
font-size: 2em;
}

&__text {
line-height: 2;
}
}
Copy link
Copy Markdown
Owner

@devmentor-pl devmentor-pl Dec 22, 2025

Choose a reason for hiding this comment

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

👍

Loading