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

Adaptive index page #13

Merged
merged 13 commits into from
Dec 30, 2024
Merged

Adaptive index page #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
a8e53c7
added logo in header
JulieSagan Dec 5, 2024
42b01ea
remove css rule to avoid a conflict
JulieSagan Dec 5, 2024
a66ddb6
Merge branch 'master' into 03-lection1/03-index
JulieSagan Dec 12, 2024
e2abb3f
Merge branch 'master' into 03-lection1/03-index
JulieSagan Dec 12, 2024
4cf986d
Adaptive
JulieSagan Dec 13, 2024
f3ac0e3
Added no pointer
JulieSagan Dec 13, 2024
63da779
Added a for cards and German's comments
JulieSagan Dec 21, 2024
90b5484
Merge branch 'master' into 03-lection1/03-index
JulieSagan Dec 21, 2024
613f8b3
Added avatar
JulieSagan Dec 21, 2024
8eadede
Removed flex-basis and changed media screen
JulieSagan Dec 22, 2024
55b87d5
Changed tooltip icon from svg on <i>
JulieSagan Dec 22, 2024
df5fb38
Merge branch 'master' into 03-lection1/03-index
JulieSagan Dec 23, 2024
69c95b2
Removed @media
JulieSagan Dec 25, 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
3 changes: 3 additions & 0 deletions 04-lection2/01-histogram/histogram.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
border-radius: 8px;
padding: 16px 24px 24px;
flex-direction: column;
width: 100%;
}

.histogram__header {
Expand All @@ -24,12 +25,14 @@
opacity: 0.8;
line-height: 1.5;
padding-bottom: 6px;
color: var(--black);
}

.histogram__value {
font-family: 'Inter', sans-serif;
font-size: 20px;
line-height: 1.3;
color: var(--black);
}

.histogram__link {
Expand Down
4 changes: 4 additions & 0 deletions assets/css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,10 @@
@import url('../../components/sidebar/sidebar.css');
@import url('../../components/template-description/template-description.css');
@import url('../../04-lection2/01-histogram/histogram.css');
@import url('../../05-lection3/01-tooltip/tooltip.css');
@import url('../../05-lection3/03-calendar/calendar.css');
@import url('../../05-lection3/02-modal/modal.css');
@import url('../../06-lection4/01-avatar/avatar.css');

:root {
--white: #ffffff;
Expand Down
8 changes: 6 additions & 2 deletions components/card/card.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,22 @@
padding: 30px 25px;
flex-direction: column;
align-items: center;
width: 350px;
height: 367px;
background-color: var(--white);
border-radius: 12px;
box-shadow: 0px 2px 4px 0px rgba(33, 36, 41, 0.05);
min-width: 350px;
min-height: 367px;
text-decoration: none;
}

.card__preview {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
flex-grow: 1;
pointer-events: none;
}

.card__title {
Expand All @@ -27,4 +30,5 @@
font-weight: 500;
line-height: normal;
color: var(--black);
padding-top: 20px;
}
2 changes: 1 addition & 1 deletion components/content/content.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
height: 100%;
}

.content__wrapper{
.content__wrapper {
display: flex;
flex-wrap: wrap;
justify-content: center;
Expand Down
15 changes: 6 additions & 9 deletions components/header/header.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
display: flex;
justify-content: flex-start;
align-items: center;
margin-top: 40px;
margin-top: 96px;
margin-bottom: 77px;
font-size: 3.125rem;
font-weight: 500;
Expand All @@ -21,19 +21,16 @@
padding-top: 24px;
}

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

.header__logo {
padding-top: 16px;
margin: 0 auto;
}
}

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

.header__title {
font-size: 1.75rem;
font-weight: 400;
line-height: 1.35;
}

.header__logo {
padding-top: 16px;
margin: 0 auto;
}
}
112 changes: 93 additions & 19 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,11 @@
<link rel="stylesheet" href="./assets/css/main.css">
<link rel="stylesheet" href="./04-lection2/01-histogram/histogram.css">
<title>Page</title>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<script src="https://unpkg.com/feather-icons"></script>
</head>

<body>
Expand All @@ -20,35 +25,96 @@ <h1 class="header__title">Reusable component library</h1>
<main class="content">
<div class="container">
<div class="content__wrapper">
<div class="card">
<div class="card__preview"></div>
<a href="#" class="card">
<div class="card__preview">
<div class="tooltip">
<div class="tooltip__trigger">
<i data-feather="help-circle" class="tooltip__icon"></i>
</div>

<div class="tooltip__bubble">
<span>Helper text</span>
</div>
</div>
</div>
<p class="card__title">Tooltip</p>
</div>
<div class="card">
</a>

<a href="#" class="card">
<div class="card__preview"></div>
<p class="card__title">Custom form elements</p>
</div>
</a>

<div class="card">
<div class="card__preview"></div>
<a href="#" class="card">
<div class="card__preview">
<div class="calendar">
<div class="calendar__header">
<span class="calendar__title">October 2019</span>
</div>

<div class="calendar__items">
<div class="calendar__item calendar__item_day">Mon</div>
<div class="calendar__item calendar__item_day">Tue</div>
<div class="calendar__item calendar__item_day">Wed</div>
<div class="calendar__item calendar__item_day">Thu</div>
<div class="calendar__item calendar__item_day">Fri</div>
<div class="calendar__item calendar__item_day">Sat</div>
<div class="calendar__item calendar__item_day">Sun</div>
<div class="calendar__item calendar__item_date"></div>
<div class="calendar__item calendar__item_date"></div>
<div class="calendar__item calendar__item_date"></div>
<div class="calendar__item calendar__item_date"></div>
<div class="calendar__item calendar__item_date">1</div>
<div class="calendar__item calendar__item_date">2</div>
<div class="calendar__item calendar__item_date">3</div>
<div class="calendar__item calendar__item_date">4</div>
<div class="calendar__item calendar__item_date">5</div>
<div class="calendar__item calendar__item_date">6</div>
<div class="calendar__item calendar__item_date">7</div>
<div class="calendar__item calendar__item_date">8</div>
<div class="calendar__item calendar__item_date">9</div>
<div class="calendar__item calendar__item_date">10</div>
<div class="calendar__item calendar__item_date">11</div>
<div class="calendar__item calendar__item_date">12</div>
<div class="calendar__item calendar__item_date">13</div>
<div class="calendar__item calendar__item_date">14</div>
<div class="calendar__item calendar__item_date">15</div>
<div class="calendar__item calendar__item_date">16</div>
<div class="calendar__item calendar__item_date">17</div>
<div class="calendar__item calendar__item_date calendar__item_blue">18</div>
<div class="calendar__item calendar__item_date calendar__item_light-blue">19</div>
<div class="calendar__item calendar__item_date calendar__item_light-blue">20</div>
<div class="calendar__item calendar__item_date calendar__item_light-blue">21</div>
<div class="calendar__item calendar__item_date calendar__item_light-blue">22</div>
<div class="calendar__item calendar__item_date calendar__item_blue">23</div>
<div class="calendar__item calendar__item_date">24</div>
<div class="calendar__item calendar__item_date">25</div>
<div class="calendar__item calendar__item_date">26</div>
<div class="calendar__item calendar__item_date">27</div>
<div class="calendar__item calendar__item_date">28</div>
<div class="calendar__item calendar__item_date">29</div>
<div class="calendar__item calendar__item_date">30</div>
<div class="calendar__item calendar__item_date">31</div>
</div>
</div>
</div>
<p class="card__title">Calendar</p>
</div>
</a>

<div class="card">
<a href="#" class="card">
<div class="card__preview"></div>
<p class="card__title">Modal dialog</p>
</div>
</a>

<div class="card">
<a href="#" class="card">
<div class="card__preview">
<div class="histogram">
<div class="histogram__header">
<div class="histogram__info">
<span class="histogram__title">Total orders</span>
<span class="histogram__value">50254</span>
</div>
<a href="#" class="histogram__link">View all</a>
<span class="histogram__link">View all</span>
</div>
<div class="histogram__body">
<div class="histogram__bar" style="height: 60%;"></div>
Expand All @@ -69,14 +135,18 @@ <h1 class="header__title">Reusable component library</h1>
</div>
</div>
<p class="card__title">Histogram</p>
</div>
</a>

<div class="card">
<div class="card__preview"></div>
<p class="card__title">Avatar</p>
</div>
<a href="#" class="card">
<div class="card__preview">
<div class="avatar">
<img class="avatar__img" src="./assets/images/avatar.jpg" alt="userpic photo">
</div>
</div>
<p class="card__title">Avatar</p>
</a>

</div>
</div>
</main>

<footer class="footer">
Expand All @@ -92,6 +162,10 @@ <h2 class="footer__title">About</h2>
</div>
</footer>
</div>

<script>
feather.replace();
</script>
</body>

</html>
Loading