~The Code for Transitions and Mixins~
7/29/2024
Click Here to get back to Main Tutoral Page
The Code for the transitions. This will allow a smooth transition to occur when we hover our mouse over the social media icons.
The _config file
$primary-color:#320001;
$secondary-color:#e8854c;
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
@mixin transition-ease {
transition: all 0.5s ease-in-out;
}
The main.scss file
@import"config";
body {
background: $primary-color;
color:set-text-color($primary-color);
height: 100vh;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1;
}
h1, h2, h3 {
font-weight: 400;
padding: 8px;
}
a{
color:set-text-color($primary-color);
text-decoration: none;
}
header {
position: fixed;
z-index: 2;
width: 100%;
padding: 1rem;
}
.nav ul li{
display: inline-flex;
justify-content: space-between;
top: 0px;
color: white;
padding: 10px 20px;
}
main {
height: 100%;
width: 100%;
padding-top: 100px;
.social-icons {
position: fixed;
bottom: 3rem;
left: 1rem;
a {
padding: 0.4rem;
@include transition-ease;
&:hover {
color: $secondary-color;
}
}
}
}
footer {
font-size: 1rem;
position: fixed;
bottom: 0.2rem;
left: 1rem;
text-align: left;
padding: 1rem;
color:set-text-color($primary-color);
}
Click Here to get back to Main Tutoral Page