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

homework_online-store_card_grid #128

Open
wants to merge 8 commits into
base: main
Choose a base branch
from
Open

homework_online-store_card_grid #128

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
42330b5
homework_online-store
NataliiaSeliutina Apr 28, 2022
defee9c
Merge branch 'eleks-bootcamp:main' into main
NataliiaSeliutina Apr 28, 2022
100b305
homework-grid
NataliiaSeliutina May 8, 2022
ef36391
fixed the img
NataliiaSeliutina Jun 1, 2022
a8a15ed
Merge branch 'main' of https://github.com/eleks-bootcamp/online-store
NataliiaSeliutina Jun 2, 2022
4f09238
fix merge conflicts
NataliiaSeliutina Jun 2, 2022
4080c30
add styles
NataliiaSeliutina Jun 2, 2022
5684648
Homework_components
NataliiaSeliutina Jun 30, 2022
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
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
solution
/node_modules/
/.idea
247 changes: 247 additions & 0 deletions grid/grid.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,247 @@
.container {
display: flex;
flex-wrap: wrap;
height: 100vh;
align-items: flex-start;
}

.container-left-column {
outline: 1px solid blue;
height: 100%;
}

.container-right-column {
display: flex;
flex-wrap: wrap;
}

.container-left-column, .container-right-column>div {
outline: 1px solid red;
text-align: center;
}

.col-1 {
width: calc(100% / 12);
}

.col-2 {
width: calc(100% / 12 * 2);
}

.col-3 {
width: calc(100% / 12 * 3);
}

.col-4 {
width: calc(100% / 12 * 4);
}

.col-5 {
width: calc(100% / 12 * 5);
}

.col-6 {
width: calc(100% / 12 * 6);
}

.col-7 {
width: calc(100% / 12 * 7);
}

.col-8 {
width: calc(100% / 12 * 8);
}

.col-9 {
width: calc(100% / 12 * 9);
}

.col-10 {
width: calc(100% / 12 * 10);
}

.col-11 {
width: calc(100% / 12 * 11);
}

.col-12 {
width: calc(100% / 12 * 12);
}

@media (max-width: 575.98px) {
.col-xs-hidden {
display: none;
}
}

/* s */
@media (min-width: 576px) {
.col-s-1 {
width: calc(100% / 12);
}

.col-s-2 {
width: calc(100% / 12 * 2);
}

.col-s-3 {
width: calc(100% / 12 * 3);
}

.col-s-4 {
width: calc(100% / 12 * 4);
}

.col-s-5 {
width: calc(100% / 12 * 5);
}

.col-s-6 {
width: calc(100% / 12 * 6);
}

.col-s-7 {
width: calc(100% / 12 * 7);
}

.col-s-8 {
width: calc(100% / 12 * 8);
}

.col-s-9 {
width: calc(100% / 12 * 9);
}

.col-s-10 {
width: calc(100% / 12 * 10);
}

.col-s-11 {
width: calc(100% / 12 * 11);
}

.col-s-12 {
width: calc(100% / 12 * 12);
}
}

/* m */
@media (min-width: 768px) {
.col-m-1 {
width: calc(100% / 12 * 1);
}
.col-m-2 {
width: calc(100% / 12 * 2);
}
.col-m-3 {
width: calc(100% / 12 * 3);
}
.col-m-4 {
width: calc(100% / 12 * 4);
}
.col-m-5 {
width: calc(100% / 12 * 5);
}
.col-m-6 {
width: calc(100% / 12 * 6);
}
.col-m-7 {
width: calc(100% / 12 * 7);
}
.col-m-8 {
width: calc(100% / 12 * 8);
}
.col-m-9 {
width: calc(100% / 12 * 9);
}
.col-m-10 {
width: calc(100% / 12 * 10);
}
.col-m-11 {
width: calc(100% / 12 * 11);
}
.col-m-12 {
width: calc(100% / 12 * 12);
}

}

/* l */
@media (min-width: 992px) {
.col-l-1 {
width: calc(100% / 12 * 1);
}
.col-l-2 {
width: calc(100% / 12 * 2);
}
.col-l-3 {
width: calc(100% / 12 * 3);
}
.col-l-4 {
width: calc(100% / 12 * 4);
}
.col-l-5 {
width: calc(100% / 12 * 5);
}
.col-l-6 {
width: calc(100% / 12 * 6);
}
.col-l-7 {
width: calc(100% / 12 * 7);
}
.col-l-8 {
width: calc(100% / 12 * 8);
}
.col-l-9 {
width: calc(100% / 12 * 9);
}
.col-l-10 {
width: calc(100% / 12 * 10);
}
.col-l-11 {
width: calc(100% / 12 * 11);
}
.col-l-12 {
width: calc(100% / 12 * 12);
}
}

/* xl */
@media (min-width: 1200px) {
.col-xl-1 {
width: calc(100% / 12 * 1);
}
.col-xl-2 {
width: calc(100% / 12 * 2);
}
.col-xl-3 {
width: calc(100% / 12 * 3);
}
.col-xl-4 {
width: calc(100% / 12 * 4);
}
.col-xl-5 {
width: calc(100% / 12 * 5);
}
.col-xl-6 {
width: calc(100% / 12 * 6);
}
.col-xl-7 {
width: calc(100% / 12 * 7);
}
.col-xl-8 {
width: calc(100% / 12 * 8);
}
.col-xl-9 {
width: calc(100% / 12 * 9);
}
.col-xl-10 {
width: calc(100% / 12 * 10);
}
.col-xl-11 {
width: calc(100% / 12 * 11);
}
.col-xl-12 {
width: calc(100% / 12 * 12);
}
}
20 changes: 13 additions & 7 deletions grid/media-query-grid.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<link rel="stylesheet" href="grid.css">
<title>Grid with media queries</title>
<style>
.container {
Expand Down Expand Up @@ -246,13 +247,18 @@
<body>
<main>
<div class="container">
<div class="row">
<div class="col-12 col-s-2 col-m-6 col-l-4 col-xl-10">
col #1
</div>
<div class="col-12 col-s-10 col-m-6 col-l-8 col-xl-2">
col #2
</div>
<div class="col-xs-hidden col-s-3 container-left-column">col left</div>
<div class="col-12 col-s-9 container-right-column">
<div class="col-12">right side</div>
<div class="col-12 col-s-6 col-m-4">card 1</div>
<div class="col-12 col-s-6 col-m-4">card 2</div>
<div class="col-12 col-s-6 col-m-4">card 3</div>
<div class="col-12 col-s-6 col-m-4">card 4</div>
<div class="col-12 col-s-6 col-m-4">card 5</div>
<div class="col-12 col-s-6 col-m-4">card 6</div>
<div class="col-12 col-s-6 col-m-4">card 7</div>
<div class="col-12 col-s-6 col-m-4">card 8</div>
<div class="col-12 col-s-6 col-m-4">card 9</div>
</div>
</div>
</main>
Expand Down
Binary file added src/components/card/01-css-task/163399632.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions src/components/card/01-css-task/Star 1 (Stroke).svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
22 changes: 21 additions & 1 deletion src/components/card/01-css-task/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
<meta charset="UTF-8" />
<title>Card component</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">

<style>
.wrapper {
Expand All @@ -15,8 +16,27 @@
<body>
<main>
<div class="wrapper">
<!-- Card component -->
<div class="product-card">
<img class="card-img" src="163399632.jpg"alt="Laptop-photo">

<div class="card-rating">
<div class="card-rating-number">1.23<img src="Star 1 (Stroke).svg"alt="star"/></div>
<div class="card-price">15999</div>
</div>
<div class="card-category">
<div class="card-text">Ноутбук Acer Aspire 3 A315-57G-336G<br>(NX.HZREU.01S) Charcoal Black</div>
<div class="laptop">
<span>
laptops
</span>
</div>
</div>
<div class="card-button">
<button>ADD TO CART</button>
</div>
</div>
</div>
</main>
</body>
</html>

Loading