Skip to content

Task done #168

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

Task done #168

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7fc25cd
Initial Commit
marazmlab Aug 4, 2024
ba25bfe
details fix
marazmlab Aug 4, 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
194 changes: 194 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,194 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<section class="Main"> <!-- SECTION ------------------------------------------>
<header class="Main__header">
Copy link
Copy Markdown
Owner

@devmentor-pl devmentor-pl Aug 5, 2024

Choose a reason for hiding this comment

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

Jeśli to BEM to nie zaczynamy od wielkiej litery - wszystko z małej

<div class="Main__header_box">
<img class="Main__header_box_logo" src="images/logo.svg" alt="logo NOVA">
</div>
<ul class="Main__header__menu">
<li class="Main__header__menu__item">
<a class="Main__header__menu__item__link" href="#">The team</a>
</li>
<li class="Main__header__menu__item">
Copy link
Copy Markdown
Owner

@devmentor-pl devmentor-pl Aug 5, 2024

Choose a reason for hiding this comment

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

Jeśli to BEM to nie możemy w nieskończoność robić ... _ ... _ ... _ mamy tylko 2 zagłębienia tj. BLOCK__ELEMENT--MODIFIER - koniec ;P

<a class="Main__header__menu__item__link" href="#">Pricing</a>
</li>
<li class="Main__header__menu__item">
<a class="Main__header__menu__item__link" href="#">Features</a>
</li>
</ul>
</header>
<section class="Main__content">
<div class="Main__content__left">
Copy link
Copy Markdown
Owner

@devmentor-pl devmentor-pl Aug 5, 2024

Choose a reason for hiding this comment

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

Można też wstatwić article zamiast div

<h1 class="Main__content__left__title">Beautiful Free Nova <br> template</h1>
<p class="Main__content__left__text">A top notch premium quality <br> template for your next web <br> project</p>
<button class="Main__content__left_btn btn">Download FREE!</button>
</div>
<div class="Main__content__right">
<img class="Main__content__right_img" src="images/screen.png" alt="graphic with zmockup">
</div>
</section>
</section>

<section class="Features"> <!-- SECTION ------------------------------------------>
<header class="Features__header">
<h2 class="Features__header__title">FEATURES</h2>
</header>
<div class="Features__header__box">
<div class="Features__header__box__card">
Comment on lines +44 to +45
Copy link
Copy Markdown
Owner

@devmentor-pl devmentor-pl Aug 5, 2024

Choose a reason for hiding this comment

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

Można też zrobić ul > li bo to lista "cech"

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

<section class="Brands"> <!-- SECTION ------------------------------------------>
<div class="Brands__box">
<img class="Brands__box__img" src="images/logos.png" alt="vertical list of supported brands">
</div>
</section>

<section class="Advert"> <!-- SECTION ------------------------------------------>
<div class="Advert__card">
<img class="Advert__card__img" src="images/imac.png" alt="picture of mac computer">
</div>
<div class="Advert__card">
<h2 class="Advert__card__title">SIMPLE AND BEUTIFUL</h2>
<p class="Advert__card__text">
Use Nova theme for your next web projects. 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>
</section>

<section class="Price"> <!-- SECTION ------------------------------------------>
<div class="Price__header">
<h2 class="Price__header__title">CHOOSE YOUR PRICING PLAN</h2>
<P class="Price__header__text">Pick any of our super affordable pricings</P>
</div>
<div class="Price__box">
<div class="Price__box__card">
Copy link
Copy Markdown
Owner

@devmentor-pl devmentor-pl Aug 5, 2024

Choose a reason for hiding this comment

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

Każdy z pakietów może też być article bo to jedna spójna całość

<h3 class="Price__box__card__title">BASIC</h3>
<p class="Price__box__card__price">$15</p>
<p class="Price__box__card__month">per month</p>
<p class="Price__box__card__text">
Up to 7 Projects <br>
2 Additional Developers <br>
</p>
Comment on lines +101 to +104
Copy link
Copy Markdown
Owner

@devmentor-pl devmentor-pl Aug 5, 2024

Choose a reason for hiding this comment

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

Tutaj zdecydowanie użyłbym ul > li - mamy listę cechy danego pakietu

<button class="Price__box__card__btn btn">Get started</button>
</div>
<div class="Price__box__card">
<h3 class="Price__box__card__title">AGENCY</h3>
<p class="Price__box__card__price">$55</p>
<p class="Price__box__card__month">per month</p>
<p class="Price__box__card__text">
Up to 25 Projects <br>
2 Additional Developers <br>
Unlimited Support
</p>
<button class="Price__box__card__btn btn">Get started</button>
</div>
<div class="Price__box__card">
<h3 class="Price__box__card__title">PRO</h3>
<p class="Price__box__card__price">$75</p>
<p class="Price__box__card__month">per month</p>
<p class="Price__box__card__text">
Up to 7 Projects <br>
2 Additional Developers <br>
Unlimited Support <br>
1.5GB Disk Space
</p>
<button class="Price__box__card__btn btn">Get started</button>
</div>
</div>
</section>

<section class="Team"> <!-- SECTION ------------------------------------------>
<div class="Team__header">
<h2 class="Team__header__title">THE TEAM</h2>
</div>
<div class="Team__box">
<div class="Team__box__card">
<img class="Team__box__card__img" src="images/cto.png" alt="picture of cto">
<h3 class="Team__box__card__title">CTO</h3>
<p class="Team__box__card__name">Johnny B Good</p>
<p class="Team__box__card__text">The brain behind the whole operation</p>

<div class="Team__box__card__social">
<a class="Team__box__card__social__link" href="#">
<img class="Team__box__card__social__link__twitter" src="images/team-twitter.svg" alt="twitter button">
</a>
<a class="Team__box__card__social__link" href="#">
<img class="Team__box__card__social__link__facebook" src="images/team-facebook.svg" alt="facebook button">
</a>
</div>
</div>

<div class="Team__box__card">
<img class="Team__box__card__img" src="images/ceo.png" alt="picture of cto">
<h3 class="Team__box__card__title">CEO</h3>
<p class="Team__box__card__name">Roll Over Beethoven </p>
<p class="Team__box__card__text">The one that puts it all together</p>

<div class="Team__box__card__social">
<a class="Team__box__card__social__link" href="">
<img class="Team__box__card__social__link__twitter" src="images/team-twitter.svg" alt="twitter button">
</a>
<a class="Team__box__card__social__link" href="">
<img class="Team__box__card__social__link__facebook" src="images/team-facebook.svg" alt="facebook button">
</a>
</div>
</div>
<div class="Team__box__card">
<img class="Team__box__card__img" src="images/cfo.png" alt="picture of cto">
<h3 class="Team__box__card__title">CFO</h3>
<p class="Team__box__card__name">Johnny B Good</p>
<p class="Team__box__card__text">The guy with his hand on the wallet</p>

<div class="Team__box__card__social">
<a class="Team__box__card__social__link" href="#">
<img class="Team__box__card__social__link__twitter" src="images/team-twitter.svg" alt="twitter button">
</a>
<a class="Team__box__card__social__link" href="#">
<img class="Team__box__card__social__link__facebook" src="images/team-facebook.svg" alt="facebook button">
</a>
</div>
</div>
</div>
</section>

<footer class="Footer">
<p class="Footer__text">A free template by</p>
<a class="Footer__link" href="#">
<img class="Footer__link__img" src="images/webscope.svg" alt="webscope logo">
</a>
</footer>
</body>
</html>
89 changes: 89 additions & 0 deletions reset.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {margin: 0; padding: 0; border: 0; font-size: 100%; font-weight: normal; vertical-align: baseline; background: transparent;}

main, article, aside, figure, footer, header, nav, section, details, summary {display: block;}

html {box-sizing: border-box;}

*, *:before, *:after {box-sizing: inherit;}

img {max-width: 100%;}

ul {list-style: none;} /* we'll restore bullets as needed for content */

blockquote, q {quotes: none;}

blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}

a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;}

del {text-decoration: line-through;}

abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}

table {border-collapse: separate; border-spacing: 0; text-align: left;}
th {font-weight: bold; vertical-align: bottom;}
td {font-weight: normal; vertical-align: top;}
td img {vertical-align: top;}

hr {display: block; height: 1px; border: 0; border-top: 1px solid #999; margin: 1rem 0; padding: 0;}

input, select {vertical-align: middle;}

pre {white-space: pre-line;}

input[type="radio"] {vertical-align: text-bottom;}
input[type="checkbox"] {vertical-align: bottom;}

small {font-size: .8rem;}

strong {font-weight: bold;}

sub, sup {font-size: .8rem; line-height: 0; position: relative;}
sup {top: -0.5rem;}
sub {bottom: -0.25rem;}

pre, code, kbd, samp {font-family: monospace, sans-serif;}

label, input[type=button], input[type=submit], input[type=file], button {cursor: pointer;}

button, input, select, textarea {margin: 0;}

ins {background-color: var(--highlight-color); color: #000; text-decoration: none;}
mark {background-color: var(--highlight-color); color: #000; font-style: italic; font-weight: bold;}

blockquote {padding: 2rem; border-left: 1px solid #333;}

.clearfix:after {content: ""; display: table; clear: both;} /* https://css-tricks.com/snippets/css/clear-fix/ */

h1, h2, h3, h4, h5, h6 {text-wrap: balance}

p {text-wrap: pretty;}

@media (prefers-reduced-motion: no-preference) {
:has(:target) {
scroll-behavior: smooth;
}
}

/* ———— END THE GENERIC RESETS ———— */

:root {
--font-system: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; /* https://css-tricks.com/snippets/css/system-font-stack */
--text-color: #333;
--featured-color: #03f;
--featured-color-hover: #69f;
--highlight-color: #fcd700;
}

body {font-size: 16px; font-family: var(--font-system); color: var(--text-color);}

a {color: var(--featured-color);}
a:hover {color: var(--featured-color-hover);}

@media screen and (max-width: 480px) {

}

@media print {

}
Loading