Skip to content
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

Jump to bottom

add task solution #4808

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

add task solution #4808

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e8847cb
add task solution
JPodgrodzki Oct 26, 2024
100cfac
add second task solution
JPodgrodzki Oct 27, 2024
a7d5f1d
hover effect on card added
JPodgrodzki Nov 2, 2024
dbbec39
img fixed
JPodgrodzki Nov 15, 2024
1c9e39d
files for different blocks added
JPodgrodzki Nov 15, 2024
039f3ea
fixed classes
JPodgrodzki Nov 15, 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
6 changes: 3 additions & 3 deletions readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ Create HTML page with catalog. Develop semantic page structure as shown on [the
- add `data-qa="card-hover"` (not just `hover`) to the link `Buy` inside the first card
- nav links color is not `black` any more (nav links should have `#060b35` color)
- add class `is-active` to the first link (`Apple`) in navigation
- use `<main>` tag for cards container
- use `<main>` tag for cards container
- use grid for cards with different number of columns:
- 1 for the smaller screens
- 2 starting at `488px`
Expand All @@ -30,8 +30,8 @@ Make all the changes smooth on hover (during 300ms):
## Checklist

❗️ Replace `<your_account>` with your Github username and copy the links to `Pull Request` description:
- [DEMO LINK](https://<your_account>.github.io/layout_catalog/)
- [TEST REPORT LINK](https://<your_account>.github.io/layout_catalog/report/html_report/)
- [DEMO LINK](https://JPodgrodzki.github.io/layout_catalog/)
- [TEST REPORT LINK](https://JPodgrodzki.github.io/layout_catalog/report/html_report/)

❗️ Copy this `Checklist` to the `Pull Request` description after links, and put `- [x]` before each point after you checked it.

Expand Down
340 changes: 339 additions & 1 deletion src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,344 @@
</head>

<body>
<h1>Catalog</h1>
<header class="header">
<a
href="index.html"
class="header__logo"
>
<img
src="images/logo.png"
alt="Moyo logo"
class="header__logo-image"
/>
</a>
<nav class="nav">
<ul class="nav__list">
<li class="nav__item">
<a
href="#"
class="nav__link nav__link--active is-active"
Copy link

Choose a reason for hiding this comment

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

you don't need nav__link--active modifier because you can use is-active instead

Copy link

Choose a reason for hiding this comment

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

Suggested change
class="nav__link nav__link--active is-active"
class="nav__link is-active"

>
apple
</a>
</li>
<li class="nav__item">
<a
href="#"
class="nav__link"
>
samsung
</a>
</li>
<li class="nav__item">
<a
href="#"
class="nav__link"
>
smartphones
</a>
</li>
<li class="nav__item">
<a
href="#"
class="nav__link nav__link--hover"
Copy link

Choose a reason for hiding this comment

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

Co robi ta klasa --hover i czemu inne elementy jej nie maja? Pewnie zapomniałes usunac czy cos

data-qa="nav-hover"
>
laptops & computers
</a>
</li>
<li class="nav__item">
<a
href="#"
class="nav__link"
>
gadgets
</a>
</li>
<li class="nav__item">
<a
href="#"
class="nav__link"
>
tablets
</a>
</li>
<li class="nav__item">
<a
href="#"
class="nav__link"
>
photo
</a>
</li>
<li class="nav__item">
<a
href="#"
class="nav__link"
>
video
</a>
</li>
</ul>
</nav>
</header>
<main class="container">
<div
class="card"
data-qa="card"
>
<div class="card__image"></div>
<div class="card__name">
APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
</div>
<div class="card__code">Product code: 195434</div>
<div class="card__review">
<div class="stars">
<div class="stars__group">
<div class="stars__group-star"></div>
<div class="stars__group-star"></div>
<div class="stars__group-star"></div>
<div class="stars__group-star"></div>
<div class="stars__group-star"></div>
</div>
<p class="stars__text">Reviews: 5</p>
</div>
</div>
<div class="card__price">
<p class="card__price-text">Price:</p>
<p class="card__price-sum">$2,199</p>
</div>
<button
class="card__buy"
data-qa="card-hover"
>
<span class="card__buy-text">BUY</span>
Copy link

Choose a reason for hiding this comment

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

you don't use card__buy-text class and you don't need span inside button

</button>
</div>
<div
class="card"
data-qa="card"
>
<div class="card__image"></div>
<div class="card__name">
APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
</div>
<div class="card__code">Product code: 195434</div>
<div class="card__review">
<div class="stars">
<div class="stars__group">
<div class="stars__group-star"></div>
<div class="stars__group-star"></div>
<div class="stars__group-star"></div>
<div class="stars__group-star"></div>
<div class="stars__group-star"></div>
</div>
<p class="stars__text">Reviews: 5</p>
</div>
</div>
<div class="card__price">
<p class="card__price-text">Price:</p>
<p class="card__price-sum">$2,199</p>
</div>
<button
class="card__buy"
data-qa="card-hover"
>
<span class="card__buy-text">BUY</span>
</button>
</div>
<div
class="card"
data-qa="card"
>
<div class="card__image"></div>
<div class="card__name">
APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
</div>
<div class="card__code">Product code: 195434</div>
<div class="card__review">
<div class="stars">
<div class="stars__group">
<div class="stars__group-star"></div>
<div class="stars__group-star"></div>
<div class="stars__group-star"></div>
<div class="stars__group-star"></div>
<div class="stars__group-star"></div>
</div>
<p class="stars__text">Reviews: 5</p>
</div>
</div>
<div class="card__price">
<p class="card__price-text">Price:</p>
<p class="card__price-sum">$2,199</p>
</div>
<button
class="card__buy"
data-qa="hover"
>
<span class="card__buy-text">BUY</span>
</button>
</div>
<div
class="card"
data-qa="card"
>
<div class="card__image"></div>
<div class="card__name">
APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
</div>
<div class="card__code">Product code: 195434</div>
<div class="card__review">
<div class="stars">
<div class="stars__group">
<div class="stars__group-star"></div>
<div class="stars__group-star"></div>
<div class="stars__group-star"></div>
<div class="stars__group-star"></div>
<div class="stars__group-star"></div>
</div>
<p class="stars__text">Reviews: 5</p>
</div>
</div>
<div class="card__price">
<p class="card__price-text">Price:</p>
<p class="card__price-sum">$2,199</p>
</div>
<button
class="card__buy"
data-qa="hover"
>
<span class="card__buy-text">BUY</span>
</button>
</div>
<div
class="card"
data-qa="card"
>
<div class="card__image"></div>
<div class="card__name">
APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
</div>
<div class="card__code">Product code: 195434</div>
<div class="card__review">
<div class="stars">
<div class="stars__group">
<div class="stars__group-star"></div>
<div class="stars__group-star"></div>
<div class="stars__group-star"></div>
<div class="stars__group-star"></div>
<div class="stars__group-star"></div>
</div>
<p class="stars__text">Reviews: 5</p>
</div>
</div>
<div class="card__price">
<p class="card__price-text">Price:</p>
<p class="card__price-sum">$2,199</p>
</div>
<button
class="card__buy"
data-qa="hover"
>
<span class="card__buy-text">BUY</span>
</button>
</div>
<div
class="card"
data-qa="card"
>
<div class="card__image"></div>
<div class="card__name">
APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
</div>
<div class="card__code">Product code: 195434</div>
<div class="card__review">
<div class="stars">
<div class="stars__group">
<div class="stars__group-star"></div>
<div class="stars__group-star"></div>
<div class="stars__group-star"></div>
<div class="stars__group-star"></div>
<div class="stars__group-star"></div>
</div>
<p class="stars__text">Reviews: 5</p>
</div>
</div>
<div class="card__price">
<p class="card__price-text">Price:</p>
<p class="card__price-sum">$2,199</p>
</div>
<button
class="card__buy"
data-qa="hover"
>
<span class="card__buy-text">BUY</span>
</button>
</div>
<div
class="card"
data-qa="card"
>
<div class="card__image"></div>
<div class="card__name">
APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
</div>
<div class="card__code">Product code: 195434</div>
<div class="card__review">
<div class="stars">
<div class="stars__group">
<div class="stars__group-star"></div>
<div class="stars__group-star"></div>
<div class="stars__group-star"></div>
<div class="stars__group-star"></div>
<div class="stars__group-star"></div>
</div>
<p class="stars__text">Reviews: 5</p>
</div>
</div>
<div class="card__price">
<p class="card__price-text">Price:</p>
<p class="card__price-sum">$2,199</p>
</div>
<button
class="card__buy"
data-qa="hover"
>
<span class="card__buy-text">BUY</span>
</button>
</div>
<div
class="card"
data-qa="card"
>
<div class="card__image"></div>
<div class="card__name">
APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
</div>
<div class="card__code">Product code: 195434</div>
<div class="card__review">
<div class="stars">
<div class="stars__group">
<div class="stars__group-star"></div>
<div class="stars__group-star"></div>
<div class="stars__group-star"></div>
<div class="stars__group-star"></div>
<div class="stars__group-star"></div>
</div>
<p class="stars__text">Reviews: 5</p>
</div>
</div>
<div class="card__price">
<p class="card__price-text">Price:</p>
<p class="card__price-sum">$2,199</p>
</div>
<button
class="card__buy"
data-qa="hover"
>
<span class="card__buy-text">BUY</span>
</button>
</div>
</main>
</body>
</html>
Loading
Loading