Skip to content

Commit e17b206

Browse files
simoneas02simoneas02
committed
add aside
1 parent 54d3c5b commit e17b206

File tree

3 files changed

+93
-9
lines changed

3 files changed

+93
-9
lines changed

‎assets/css/main.css

Lines changed: 49 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,23 +16,18 @@ html, body {
1616
'aside main';
1717
}
1818

19-
.aside {
20-
border: 1px solid pink;
21-
grid-area: aside;
22-
}
23-
2419
.main {
25-
border: 1px solid pink;
2620
grid-area: main;
2721
}
2822

2923
/*header*/
3024
.header {
31-
border: 1px solid pink;
3225
grid-area: header;
3326
display: flex;
3427
padding: 0 16px;
3528
align-items: center;
29+
box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
30+
z-index: 2;
3631
}
3732

3833
.header__menu-icon {
@@ -108,4 +103,51 @@ html, body {
108103

109104
.user-info__icon-profile {
110105
border-radius: 50%;
106+
}
107+
108+
/*aside*/
109+
.aside {
110+
grid-area: aside;
111+
border-bottom: 1px solid #eeeeee;
112+
background-color: #f5f5f5;
113+
}
114+
115+
.section-list {
116+
border-bottom: 1px solid #eeeeee;
117+
}
118+
119+
.section-list__title {
120+
text-transform: uppercase;
121+
font-size: 14px;;
122+
color: #a0a0a0;
123+
padding: 8px 24px;
124+
margin: 0;
125+
}
126+
127+
.list {
128+
list-style: none;
129+
padding-left: 0;
130+
margin: 0;
131+
padding: 12px 0;
132+
}
133+
134+
.list__item {
135+
padding-left: 24px;
136+
height: 40px;
137+
display: flex;
138+
align-items: center;
139+
}
140+
141+
.list__item__img {
142+
width: 24px;
143+
height: 24px;
144+
margin-right: 27px;
145+
}
146+
147+
.list__item__text {
148+
width: 117px;
149+
margin-right: 24px;
150+
font-family: 'Roboto', sans-serif;
151+
font-size: 14px;
152+
color: #212121;
111153
}

‎assets/img/home.svg

Lines changed: 1 addition & 1 deletion
Loading

‎index.html

Lines changed: 43 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,49 @@
3030
<img class="user-info__icon-profile" src="./assets/img/profile-picture.jpg" alt="perfil" />
3131
</div>
3232
</header>
33-
<aside class="aside"></aside>
33+
<aside class="aside">
34+
<section class="section-list">
35+
<ul class="list">
36+
<li class="list__item">
37+
<img class="list__item__img" src="./assets/img/home.svg" alt="início"/>
38+
<span class="list__item__text">Início</span>
39+
</li>
40+
<li class="list__item">
41+
<img class="list__item__img" src="./assets/img/fire.svg" alt="em alta"/>
42+
<span class="list__item__text">Em alta</span>
43+
</li>
44+
<li class="list__item">
45+
<img class="list__item__img" src="./assets/img/youtube-play.svg" alt="inscições"/>
46+
<span class="list__item__text">Inscrições</span>
47+
</li>
48+
</ul>
49+
</section>
50+
<section class="section-list">
51+
<h2 class="section-list__title">Biblioteca</h2>
52+
<ul class="list">
53+
<li class="list__item">
54+
<img class="list__item__img" src="./assets/img/history.svg" alt="histórico"/>
55+
<span class="list__item__text">Histórico</span>
56+
</li>
57+
<li class="list__item">
58+
<img class="list__item__img" src="./assets/img/clock.svg" alt="assistir mais tarde"/>
59+
<span class="list__item__text">Assistir mais tarde</span>
60+
</li>
61+
<li class="list__item">
62+
<img class="list__item__img" src="./assets/img/thumb-up.svg" alt="Vídeos marcados"/>
63+
<span class="list__item__text">Vídeos marcados</span>
64+
</li>
65+
<li class="list__item">
66+
<img class="list__item__img" src="./assets/img/playlist-play.svg" alt="podcast"/>
67+
<span class="list__item__text">Podcast</span>
68+
</li>
69+
<li class="list__item">
70+
<img class="list__item__img" src="./assets/img/chevron-down.svg" alt="mostrar mais"/>
71+
<span class="list__item__text">Mostrar mais</span>
72+
</li>
73+
</ul>
74+
</section>
75+
</aside>
3476
<main class="main"></main>
3577
</div>
3678
</body>

0 commit comments

Comments
 (0)