Skip to content

Commit 6b56c0f

Browse files
ZakaCodingZakaCoding
committed
update on social media interaction
1 parent b285848 commit 6b56c0f

File tree

2 files changed

+106
-19
lines changed

2 files changed

+106
-19
lines changed

‎css/main.css‎

Lines changed: 56 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -76,8 +76,11 @@ h1#element {
7676
.menu {
7777
margin-top: 100px;
7878
padding-left: 20px;
79+
font-family: 'Segoe UI Black';
80+
}
81+
.menu p {
82+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
7983
}
80-
8184
.menu a {
8285
text-decoration: none;
8386

@@ -93,6 +96,38 @@ h1#element {
9396
z-index: 999;
9497
}
9598

99+
.form-group-menu {
100+
display: block;
101+
}
102+
.input-menu {
103+
width: 250px;
104+
height: 50px;
105+
margin: 5px auto;
106+
padding: 10px;
107+
box-sizing: border-box;
108+
background-color: #eaeaea;
109+
border: 0px;
110+
}
111+
.btn-menu {
112+
font-family: 'Segoe UI Black';
113+
width: 100px;
114+
margin-top: 5px;
115+
padding: 10px 0px 10px 0px;
116+
cursor: pointer;
117+
background-color: #eaeaea;
118+
border: 0px;
119+
transition: .2s ease-in;
120+
}
121+
.btn-menu:hover {
122+
background-color: black;
123+
color: white;
124+
}
125+
126+
.spacer {
127+
width: 100%;
128+
margin: 50px auto;
129+
}
130+
96131
/* Footer */
97132
footer {
98133
font-family: 'Segoe UI';
@@ -106,20 +141,32 @@ footer > p {
106141
text-align: center;
107142
font-size: 1em;
108143
}
144+
.social-media-menu {
145+
width: 100%;
146+
margin-bottom: 50px;
147+
display: flex;
148+
justify-content: left;
149+
}
150+
.social-media-menu a {
151+
font-size: 1.8em !important;
152+
color: #000;
153+
cursor: pointer;
154+
margin: auto 7px;
155+
}
109156

110157
.social-media {
111158
width: 100%;
112-
margin: auto;
159+
margin-bottom: 10px;
113160
display: flex;
114161
justify-content: center;
115162
}
116163
.social-media a {
117-
font-size: 2em !important;
118-
color: #000000;
164+
font-size: 1.8em !important;
165+
color: #000;
119166
cursor: pointer;
120-
margin: auto 10px;
121-
transition: 0.2s ease;
122-
}
123-
.social-media a:hover {
124-
color: #7e7e7e;
167+
margin: auto 7px;
125168
}
169+
.icon-deactive {
170+
color: #7e7e77 !important;
171+
transition: 170ms ease-in-out;
172+
}

‎index.html‎

Lines changed: 50 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -18,18 +18,19 @@
1818
<body>
1919
<!-- navigation menu -->
2020
<!-- hamburger menu -->
21-
<button type="button" id="hamburger" class="hamburger hamburger--elastic">
21+
<button type="button" name="menu button" id="hamburger" class="hamburger hamburger--elastic">
2222
<span class="hamburger-box">
2323
<span class="hamburger-inner"></span>
2424
</span>
2525
</button>
2626

2727
<!-- menu with pure css ! -->
2828
<div class="menuToggle">
29-
<ul class="menu">
30-
<!-- <a href="#"></a> -->
31-
Nothing happen here :(
32-
</ul>
29+
<div class="menu">
30+
<h5>
31+
There is nothing here
32+
</h5>
33+
</div>
3334
</div>
3435

3536
<!-- main -->
@@ -45,20 +46,19 @@ <h1 id="element"></h1>
4546
<!-- social media -->
4647
<div class="social-media">
4748
<a href="https://twitter.com/zaka_coding">
48-
<i class="fab fa-twitter"></i>
49+
<i id="twitter" class="fab fa-twitter social-media-icon"></i>
4950
</a>
5051
<a href="https://instagram.com/youn8e_">
51-
<i class="fab fa-instagram"></i>
52+
<i id="instagram" class="fab fa-instagram social-media-icon"></i>
5253
</a>
5354
<a href="https://www.linkedin.com/in/zaka-n-693018111/">
54-
<i class="fab fa-linkedin-in"></i>
55+
<i id="linkedin" class="fab fa-linkedin-in social-media-icon"></i>
5556
</a>
5657
</div>
5758
</div>
5859
<!-- Describe -->
5960
<p>
60-
Copyright &copy; 2021 All Right Reserved. Develop with &#10084;&#65039; by Zaka.
61-
<br><small>PHP | HTML5 | CSS3 | JavaScript | Full-Stack Developer</small>
61+
Copyright &copy; 2021 - Develop with &#10084;&#65039; by Zaka.
6262
</p>
6363
</footer>
6464
</body>
@@ -92,5 +92,45 @@ <h1 id="element"></h1>
9292
// Toggle class "menu-active"
9393
menu.classList.toggle("menu-active");
9494
});
95+
96+
// social media icon hover
97+
// animation when cursor hover
98+
var twitter = document.getElementById("twitter");
99+
var ig = document.getElementById("instagram");
100+
var linkedin = document.getElementById("linkedin");
101+
var socialMedia = document.querySelector(".social-media-icon");
102+
103+
twitter.addEventListener("mouseenter", function() {
104+
ig.classList.add("icon-deactive");
105+
linkedin.classList.add("icon-deactive");
106+
});
107+
108+
twitter.addEventListener("mouseout", function() {
109+
ig.classList.remove("icon-deactive");
110+
linkedin.classList.remove("icon-deactive");
111+
});
112+
113+
// Instagram
114+
ig.addEventListener("mouseenter", function() {
115+
twitter.classList.add("icon-deactive");
116+
linkedin.classList.add("icon-deactive");
117+
});
118+
119+
ig.addEventListener("mouseout", function() {
120+
twitter.classList.remove("icon-deactive");
121+
linkedin.classList.remove("icon-deactive");
122+
});
123+
124+
// linkedin
125+
linkedin.addEventListener("mouseenter", function() {
126+
ig.classList.add("icon-deactive");
127+
twitter.classList.add("icon-deactive");
128+
});
129+
130+
linkedin.addEventListener("mouseout", function() {
131+
ig.classList.remove("icon-deactive");
132+
twitter.classList.remove("icon-deactive");
133+
});
134+
95135
</script>
96136
</html>

0 commit comments

Comments
 (0)