Skip to content

Commit 930c559

Browse files
author
Jamshid Hasanov
committed
test
1 parent 2e1699c commit 930c559

File tree

12 files changed

+378
-353
lines changed

12 files changed

+378
-353
lines changed

‎.sass-cache/c96ee6d8f2bad3dd31f438d6fe1a8ad0422b57d2/_grid.scssc

7.5 KB
Binary file not shown.

‎.sass-cache/c96ee6d8f2bad3dd31f438d6fe1a8ad0422b57d2/_header.scssc

11.3 KB
Binary file not shown.

‎.sass-cache/c96ee6d8f2bad3dd31f438d6fe1a8ad0422b57d2/_typography.scssc

4.54 KB
Binary file not shown.

‎.sass-cache/c96ee6d8f2bad3dd31f438d6fe1a8ad0422b57d2/_utils.scssc

7.22 KB
Binary file not shown.

‎.sass-cache/c96ee6d8f2bad3dd31f438d6fe1a8ad0422b57d2/_variables.scssc

2.04 KB
Binary file not shown.

‎.sass-cache/c96ee6d8f2bad3dd31f438d6fe1a8ad0422b57d2/style.scssc

18.8 KB
Binary file not shown.

‎css/style.css

+226-349
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/style.css.map

+7-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html

+26-2
Original file line numberDiff line numberDiff line change
@@ -43,9 +43,33 @@ <h2 class="text-white">Javascript developer</h2>
4343

4444
</div>
4545
</section>
46-
<h1>kjegfrhedjvhfueijirfuvrjhgfuejhbvio rrbighjio trbhjgfji</h1>
46+
<section class="about-page">
47+
48+
<ul class="about-page__menu">
49+
<li class="about-page__menu-item active">ABOUT</li>
50+
<li class="about-page__menu-item">SKILLS</li>
51+
<li class="about-page__menu-item">SERVICE</li>
52+
<li class="about-page__menu-item">INTERVIEW</li>
53+
<li class="about-page__menu-item">AWARD</li>
54+
<li class="about-page__menu-item">EXHIBITION</li>
55+
</ul>
56+
57+
<div class="about-page__section">
58+
<div class="about-page__section-item-1 active">1</div>
59+
<div class="about-page__section-item-2">2</div>
60+
<div class="about-page__section-item-3">3</div>
61+
<div class="about-page__section-item-4">4</div>
62+
<div class="about-page__section-item-5">5</div>
63+
<div class="about-page__section-item-6">6</div>
64+
</div>
65+
66+
</section>
4767
</main>
48-
<footer></footer>
68+
<footer>
69+
70+
</footer>
71+
72+
<script src="js/about-page.js"></script>
4973
</body>
5074

5175
</html>

‎js/about-page.js

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
2+
let aboutPageMenuItems = document.querySelector('main section.about-page ul.about-page__menu');
3+
let aboutPageSections = document.querySelector('main section.about-page .about-page__section');
4+
5+
for(let i=0; i<aboutPageMenuItems.children.length; i++){
6+
aboutPageMenuItems.children[i].onclick = function(){
7+
for(let i=0; i<aboutPageMenuItems.children.length; i++){
8+
aboutPageMenuItems.children[i].classList.remove('active');
9+
aboutPageMenuItems.children[i].removeAttribute('id');
10+
}
11+
for(let i=0;i<aboutPageSections.children.length;i++){
12+
aboutPageSections.children[i].classList.remove('active');
13+
}
14+
aboutPageMenuItems.children[i].classList.add('active');
15+
aboutPageMenuItems.children[i].setAttribute('id',i);
16+
aboutPageSections.children[parseInt(aboutPageMenuItems.children[i].getAttribute('id'))].classList.add('active');
17+
console.log(aboutPageSections.children[parseInt(aboutPageMenuItems.children[i].getAttribute('id'))]);
18+
console.log(aboutPageSections.children);
19+
}
20+
21+
}
22+
23+
24+
25+
26+
27+
28+
29+
30+
31+
32+
33+
34+
35+
36+

‎sass-landing

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Subproject commit 2e1699c1282ec988a844b3759c0d153ae8253adb

‎sass/style.scss

+82-1
Original file line numberDiff line numberDiff line change
@@ -27,4 +27,85 @@ b {
2727
max-width: 1200px;
2828
padding: 0 15px;
2929
margin: auto;
30-
}
30+
}
31+
32+
33+
34+
.about-page{
35+
width: 100%;
36+
37+
&__menu{
38+
padding-left: 0;
39+
display: flex;
40+
justify-content: center;
41+
align-items: center;
42+
list-style: none;
43+
44+
&-item{
45+
color: #cacbd2;
46+
padding: 10px;
47+
border: 1px solid rgba(255,255,255,.05);
48+
background-color: #2a2c47;
49+
font-size: 14px;
50+
width: 126px;
51+
text-align: center;
52+
cursor: pointer;
53+
height: 27px;
54+
line-height: 28px;
55+
transition: $speed;
56+
font-weight: 500;
57+
font-family: hk grotesk,Sans-serif;
58+
59+
&:hover{
60+
background-color: #FFC576;
61+
color: black;
62+
// transition: $speed;
63+
}
64+
65+
&.active{
66+
background-color: #FFC576;
67+
color: black;
68+
}
69+
70+
}
71+
72+
}
73+
74+
&__section{
75+
div{
76+
display: none;
77+
}
78+
div.active{
79+
display: block;
80+
}
81+
}
82+
83+
}
84+
85+
86+
@media (max-width: 767px){
87+
.about-page{
88+
89+
width: 100%;
90+
margin: 0 auto;
91+
&__menu{
92+
display: grid;
93+
grid-template-columns: repeat(auto-fill,minmax(48%,50%));
94+
width: 100%;
95+
&-item{
96+
width: 90%;
97+
}
98+
}
99+
}
100+
}
101+
102+
103+
104+
105+
106+
107+
108+
109+
110+
111+

0 commit comments

Comments
 (0)