Skip to content

Commit

Permalink
header animations added
Browse files Browse the repository at this point in the history
  • Loading branch information
@kandyy9
kandyy9 committed Mar 13, 2024
1 parent 7d52bff commit b7e8227
Show file tree
Hide file tree
Showing 2 changed files with 80 additions and 123 deletions.
18 changes: 17 additions & 1 deletion css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,8 @@ img{
}

.header{
border-bottom: 1px solid #e7e9fc
border-bottom: 1px solid #e7e9fc;
box-shadow: 0px 2px 1px rgba(46, 47, 66, 0.08), 0px 1px 1px rgba(46, 47, 66, 0.16), 0px 1px 6px rgba(46, 47, 66, 0.08);
}

.container{
Expand All @@ -72,6 +73,7 @@ img{
}

.logo {
position: relative;
font-family: "Raleway", sans-serif;
font-size: 18px;
font-weight: 700;
Expand All @@ -96,9 +98,22 @@ img{
display: block;
padding: 24px 0;
font-weight: 500;
position: relative;
color: var(--dark-color);
transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1)
}

.link:active::after{
content: "";
width: 100%;
height: 4px;
border-radius: 2px;
position: absolute;
left: 0;
bottom: -1px;
background-color: var(--pressed-state-color);
}

.contacts-list{
display: flex;
gap: 40px;
Expand All @@ -109,6 +124,7 @@ img{
.contacts{
color: var(--main-text-color);
margin-left: auto;
transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1)
}


Expand Down
185 changes: 63 additions & 122 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,40 +130,28 @@ <h3 class="section-item-title">Mark Guerrero</h3>
<li class="social-media">
<a href="" class="social-media-link">
<svg class="social-media-icon">
<use
href="./images/icons.svg#icon-instagram"

></use>
</svg>
<use href="./images/icons.svg#icon-instagram"></use>
</svg>
</a>
</li>
<li class="social-media">
<a href="" class="social-media-link">
<svg class="social-media-icon">
<use
href="./images/icons.svg#icon-twitter"

></use>
<use href="./images/icons.svg#icon-twitter"></use>
</svg>
</a>
</li>
<li class="social-media">
<a href="" class="social-media-link">
<svg class="social-media-icon">
<use
href="./images/icons.svg#icon-facebook"

></use>
</svg>
<use href="./images/icons.svg#icon-facebook"></use>
</svg>
</a>
</li class="social-media">
</li>
<li>
<a href="" class="social-media-link">
<svg class="social-media-icon">
<use
href="./images/icons.svg#icon-linkedin"

></use>
<use href="./images/icons.svg#icon-linkedin"></use>
</svg>
</a>
</li>
Expand All @@ -187,40 +175,28 @@ <h3 class="section-item-title">Tom Ford</h3>
<li class="social-media">
<a href="" class="social-media-link">
<svg class="social-media-icon">
<use
href="./images/icons.svg#icon-instagram"

></use>
</svg>
<use href="./images/icons.svg#icon-instagram"></use>
</svg>
</a>
</li>
<li class="social-media">
<a href="" class="social-media-link">
<svg class="social-media-icon">
<use
href="./images/icons.svg#icon-twitter"

></use>
<use href="./images/icons.svg#icon-twitter"></use>
</svg>
</a>
</li>
<li class="social-media">
<a href="" class="social-media-link">
<svg class="social-media-icon">
<use
href="./images/icons.svg#icon-facebook"

></use>
</svg>
<use href="./images/icons.svg#icon-facebook"></use>
</svg>
</a>
</li class="social-media">
</li>
<li>
<a href="" class="social-media-link">
<svg class="social-media-icon">
<use
href="./images/icons.svg#icon-linkedin"

></use>
<use href="./images/icons.svg#icon-linkedin"></use>
</svg>
</a>
</li>
Expand All @@ -244,40 +220,28 @@ <h3 class="section-item-title">Camila Garcia</h3>
<li class="social-media">
<a href="" class="social-media-link">
<svg class="social-media-icon">
<use
href="./images/icons.svg#icon-instagram"

></use>
</svg>
<use href="./images/icons.svg#icon-instagram"></use>
</svg>
</a>
</li>
<li class="social-media">
<a href="" class="social-media-link">
<svg class="social-media-icon">
<use
href="./images/icons.svg#icon-twitter"

></use>
<use href="./images/icons.svg#icon-twitter"></use>
</svg>
</a>
</li>
<li class="social-media">
<a href="" class="social-media-link">
<svg class="social-media-icon">
<use
href="./images/icons.svg#icon-facebook"

></use>
</svg>
<use href="./images/icons.svg#icon-facebook"></use>
</svg>
</a>
</li class="social-media">
</li>
<li>
<a href="" class="social-media-link">
<svg class="social-media-icon">
<use
href="./images/icons.svg#icon-linkedin"

></use>
<use href="./images/icons.svg#icon-linkedin"></use>
</svg>
</a>
</li>
Expand All @@ -297,44 +261,32 @@ <h3 class="section-item-title">Camila Garcia</h3>
<h3 class="section-item-title">Daniel Wilson</h3>
<p class="section-paragraph">UI Designer</p>
<div class="social-media-container">
<ul class="social-media-list">
<li class="social-media">
<a href="" class="social-media-link">
<svg class="social-media-icon">
<use
href="./images/icons.svg#icon-instagram"

></use>
<ul class="social-media-list">
<li class="social-media">
<a href="" class="social-media-link">
<svg class="social-media-icon">
<use href="./images/icons.svg#icon-instagram"></use>
</svg>
</a>
</li>
</a>
</li>
<li class="social-media">
<a href="" class="social-media-link">
<svg class="social-media-icon">
<use
href="./images/icons.svg#icon-twitter"

></use>
<use href="./images/icons.svg#icon-twitter"></use>
</svg>
</a>
</li>
<li class="social-media">
<a href="" class="social-media-link">
<svg class="social-media-icon">
<use
href="./images/icons.svg#icon-facebook"

></use>
</svg>
<use href="./images/icons.svg#icon-facebook"></use>
</svg>
</a>
</li class="social-media">
</li>
<li>
<a href="" class="social-media-link">
<svg class="social-media-icon">
<use
href="./images/icons.svg#icon-linkedin"

></use>
<use href="./images/icons.svg#icon-linkedin"></use>
</svg>
</a>
</li>
Expand Down Expand Up @@ -445,47 +397,36 @@ <h3 class="section-item-title">Online Courses</h3>
<div class="footer-social-media">
<p>Social media</p>
<ul class="social-media-list">
<li class="social-media">
<a href="" class="social-media-link">
<svg class="social-media-icon">
<use
href="./images/icons.svg#icon-instagram"

></use>
</svg>
</a>
</li>
<li class="social-media">
<a href="" class="social-media-link">
<svg class="social-media-icon">
<use
href="./images/icons.svg#icon-twitter"

></use>
</svg>
</a>
</li>
<li class="social-media">
<a href="" class="social-media-link">
<svg class="social-media-icon">
<use
href="./images/icons.svg#icon-facebook"

></use>
</svg>
</a>
</li class="social-media">
<li>
<a href="" class="social-media-link">
<svg class="social-media-icon">
<use
href="./images/icons.svg#icon-linkedin"
></use>
</svg>
</a>
</li>
</ul>
</div>
<li class="social-media">
<a href="" class="social-media-link">
<svg class="social-media-icon">
<use href="./images/icons.svg#icon-instagram"></use>
</svg>
</a>
</li>
<li class="social-media">
<a href="" class="social-media-link">
<svg class="social-media-icon">
<use href="./images/icons.svg#icon-twitter"></use>
</svg>
</a>
</li>
<li class="social-media">
<a href="" class="social-media-link">
<svg class="social-media-icon">
<use href="./images/icons.svg#icon-facebook"></use>
</svg>
</a>
</li>
<li>
<a href="" class="social-media-link">
<svg class="social-media-icon">
<use href="./images/icons.svg#icon-linkedin"></use>
</svg>
</a>
</li>
</ul>
</div>
</div>
</footer>
</body>
Expand Down

0 comments on commit b7e8227

Please sign in to comment.