/skill/

<section id="skills" class="skills">

<div class="skills-1">
<h1>My Skills</h1>

<li><h3>HTML</h3>
<span class="bar"><span class="html"></span></span>

</li>
<li><h3>CSS</h3>
<span class="bar"><span class="css"></span></span>
</li>
<li><h3>JavaScript</h3>
<span class="bar"><span class="javascript"></span></span>
</li>
<li><h3>PHP</h3>
<span class="bar"><span class="php"></span></span>
</li>
</div>
</section>

/contact/html

<section id="contact" class="contact">

<div class="container">
<h1 class="section-heading">Contact<span> Me</span></h1>
<p>I provide higher standard clean website for your problems on
businesses</p>
<div class="card-wrapper">
<div class="card">
<img src="./image/phone.png" alt="">
<h2>Call Me On</h2>
<a href="" style="text-decoration:
none;"><h6>+251919421910</h6></a>
</div>
<div class="card">
<img src="./image/mail.png" alt="">
<h2>Email Me At</h2>
<a href="" style="text-decoration:
none;"><h6>[email protected]</h6></a>
</div>
<div class="card">
<img src="./image/map.png" alt="">
<h2>Visit Me At</h2>
<h6>Wolaita Sodo University B27 D_Room 17</h6>
</div>

</div>
<form action="">
<div class="input-1">
<input type="text" placeholder="Your Name *" style="width:
500px;">
<input type="email" placeholder="Your Email *">

</div>
<div class="input-2">
<input type="text" placeholder="Your Subject..." >
<textarea name="" id="" cols="30" rows="10" placeholder="Your
Message..." ></textarea>
 </div>
<div class="btn-wrapper">
<button class="btn btn-primary">Send Message</button>
</div>
</form>
</div>
</section>
<footer>
<img class="footer-logo" src="./image/imagesT.png" style="border-radius: 50%;"
width="100px" height="80px" alt="">
<div class="footer-social">
<a href="#"><img
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IA
rs4c6QAAAOdJREFUSEvt1CFOQ0EQxvFfBSHoguEIxSEqMBgOQELKDUpAYlA1FXgcTbB1xRBsBQJLD1ASJCS
0VyCBl4xompLNvryXVHTVZHfn+8/
O7ExDzatRs761AxzgFm3s4hND9P7LRM4L9vGB7SWxR3SqANzjcoXQCOdVAN5wGEIvOMFP6pPkpOgbeyF4hU
FKvDjPAczRDNELPFQBKHLbCqEb7IT9jEnYrxiXrUHxQ84SkV7jrk7AKZ7KAvo4DuejvybbCnuKr7C7eC8LW
PSbRfcWe5UVeQPIarRNDZKTpfYUJSNYdSFnmq4n4BdfByoZ/9M5/QAAAABJRU5ErkJggg=="/></a>
<a href="#"><img
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IA
rs4c6QAAAZtJREFUSEvd1b1rFVEQBfBfNKAQsYqFoBiFIEIUESstlYAhYJQQIoJFLETsFUXxD9DGQrERCdj
YWAiBFDYS0gQFxRSpEhIQBbESwS9I7sA+WNbdzb4Hr8nt9s6dc+6cO3O2R5dXT5fxbT2CPvzcRLbduI9RHM
RfPMYd7MX57Hs9cPISbcciJvCphuQNzpTE17Afl/CyFc8TDGAF33AB8yUgJ/
C+hvwd3uIFPhQr2Ikf6M0AnuEevuQAL2fJVRwh740k3XRZBbEXtz5VyJ7DayzgOB7VVPAcU/
l4XqJdOIxZ9Hc4Hw9ws4pgH1bxPXXBng4JQp4nVQTbsIwDHYJH2hEsVRHE/
sWsxVoP3Q5XdOChYkKZVcQc3MXRdtBxHU+bEIxgpk3wGLLBNM1/mhDEmejjKw1J/uF01sb/
pVS5aTz4EG6nR5usIQq/uZoaI/q/dJURhOGdxC2cqwH/
hZjsV3WV5gnO4mFKOFYwwbL8GMZraWpD+9pVrCCseDwZ1RiGsSPJ9Btf8RnhpHHjj5sBt+Jb74/
WtPLG57ou0QbqWz0ZBzSqswAAAABJRU5ErkJggg=="/></a>
<a href="#"><img
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IA
rs4c6QAAAYhJREFUSEvN1T9IVmEUBvCf2dLQ0CBECkHRIgqtCqVFIf1BQXG1pUklRGgQHBXBpSFqa6ucGou
gIB1KB5GgtTWMSnQuze4rR/
n49NJ3v5vSXS6X+57nOc95zjlvg0N+Gg4Z35ETLOBySVXzuLKLUa1guyT4Ptz/
guAXnuAFPrHjWwf6cCdH8V7if1PwDbdwCjM4h+P4nL2n8B1zaK4iqolgMwy/
iMc5mU7iDZZCWSEPnuMhPmACpzF2ANFN3MZwxb+aFPTgLgZxIsr0pSrThPkO03hblKAlgi+gF6lkrw5Q8AP
pzHo9BO9xNpOfzG4PQ69GN7WiEWs4n5VvoyjBNdyL7FPsctS6DWlaE2hq2zT9s2F2IZOf4hEWKzL7inGsZu
ADGMWN8Cp9FyJ4GV30OqdFf+N+pnAlvKo8VlMXjURZjoXBKfO0xH5GOR5kCpsyg5/
hTD2D1hWBl3ASaS4+Ygud6MdQ2VVR73KtqUT1gqe4XII0ld1lkGOir+ddOCWx94cf+Z38zxX8AdXuTxk7Yc
aFAAAAAElFTkSuQmCC"/></a>
<a href="#"><img
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IA
rs4c6QAAAjNJREFUSEvF1UnITWEYB/
DfhyLCRlamQiEJkSQskFJfMmS2sTEsFBmKLJTIELKyYCF9hoxRSuykJJIyJpKyYUVW5vfRe+t0Oqd7U7fvr
ds95x2e///5/5/nPR3aPDraHF+3AYzEVszEeGqJ/
MEz3MNxvCkrUpXBBpxAL3zAA7yqkXIyJmIofmATThX3lgGm5IAvsAhvW/
QosryBYZiKJ41zZYCrWIAxeN9C8LVJvr34krJdh0cpo+tYUgcQQYN9gBRHD8zDOPzCS9zNc7ezlMMzwCCMq
AP4ii5sLEQPfS9iegk0jD2ddP+EwTiDUGA++tUB/MYR7Mgbgvn9zGgb7qBnZn4oV80sRDXFCCJL855/
E2UPYuMB7MoHluVD8X+plMHy5NWFZOjCbHAsn0/
yxXwQqwUIZjvzejxvR398KwGE1p9TOe9LvuzJayHvqiLxqgyiYbbkAwezXANT44U/
xdEA2J96YHdeOIs1zQCO5S6OM1Ful7OuV0oAwTQYFyWK9xXNPChm0DA5SjCkCpOjw+emSjmM15hdMjkA+9R
5EDoHi/UFtkOymTMqynQlPhbmo0znICStNDkuq/
hVNVow60wV9h23cLPAvBHvMQYkkqPrAIL94lSaY1u8KopJTUj311OcSyRX1wFMSiyDRWwMg9+VZKl7jeDXE
F5NyzEqJYrJxnUdBj/
MksT8TzxPjdgbo7LZMd8XcQvH+macLLKo+6L9zwfnaNX13m2fzBalb76t7Rn8BcJ+cxlsKeBhAAAAAElFTk
SuQmCC"/></a>
<a href="#"><img
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IA
rs4c6QAAAblJREFUSEvV1TtoVEEYxfFflKCFBhEhhQTxAakEBUUI0YiFdoKigkUSHynEVsEU6RIiBOxCxEI
tVXygoIWVIBLBThBMEwgqpAiIYGEQfNwPZuVy2bsvs4hT7e7MnP835zsz26HNo6PN+v5LwD5sw51wZ6VOsA
GDOIdd+IquvwWswhGcwTF05vr5AVtaBWzHeQxhcxJdxM/c94c40QxgHU4mC/
pzlf7CDJ4mz8OqGFcw1QhgP84m8YDkx/
sE3IQHWJObPIQXZYA49nAS3lHlnnzPxK5iEqdxC9GPygirophvRcAeTOBwjXS9Tv5H9WMYr1LAO+ys/
J6P6VzmY2/JzY7YjeJ6mp/GxZK1NzFSDbA6820g+R2x606LnuFCtulTiuJdHK/
xxMTaG9UA+T3h6UFEKh6lifXZJXqMaGCtERftbT1AUSCa9hK764gvpwb/aBawF2/
qiMf0K0S0/4xG36JI1vO06zM2lsCu4XIrgFO4h0jaARxFJGltARTr7rcCiGRcQh+WkkBk/
Qm25gTj80IrgBD7iC+FiuNJvp1iGzHuKVrXaA/
q9Tf+C+azV2C2XYDSAlbqBP8O8BtHxEAZRG4wGQAAAABJRU5ErkJggg=="/></a>

</div>
<div class="copyright">
Copyright 2024 &copy; By Tariku. All Right Reserved.
</div>
</footer>
<a class="back" href="#">Back To Top</a>

/css/skill-fotter//

section.skills{
background: var(--dark);
font-family: 'Lato', sans-serif;
list-style: none;
padding: 0;
margin: 0;
height: 100%;
clip-path: polygon(0 0,100% 0,100% 100%,80% 90%,0 100%);

}
section.skills .skills-1{
background: #333;
text-transform: uppercase;
width: 1000px;
height: 400px;
margin: 60px auto;
color: #fff;
padding: 20px;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25),0 10px 10px rgba(0, 0, 0, 0.22);

}
section.skills .skills-1 h1{
text-align: center ;

}
section.skills .skills-1 h3{
margin: 5px;

}
.skills-1{
margin: 20px 0;
padding: 10px ;

}
.bar{
background: #353b48 ;
display: block;
height: 20px;
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 10px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
transition: all .3s cubic-bezier(.25,.8,.25,1);
}
.bar:hover{
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);

}
.bar span{
height: 100px;
float: left;
background: linear-gradient(135deg,rgb(182, 134, 163)0%, rgba(253, 103, 103,
1)100%);
}
.html{
width: 90%;
animation: html 3s;
}
.css{
width: 78%;
animation: css 3s;
}
.javascript{
width: 65%;
animation: javascript 3s;
}
.php{
width: 45%;
animation: php 3s;
}
@keyframes html{
0%{
width: 20%;

}
100%{
width: 90%;
}
}
@keyframes css{
0%{
width: 20%;

}
100%{
width: 78%;
}
}
@keyframes javascript{
0%{
width: 20%;

}
 100%{
width: 65%;
}
}
@keyframes php{
0%{
width: 20%;

}
100%{
width: 45%;
}
}
section.contact .container .section-heading{
text-align: center;

}
section.contact .container .section-heading span{
color: var(--primary);
}
section.contact .container p{
text-align: center;
color: var(--ternary);

}
section.contact .card-wrapper{
display: grid;
grid-template-columns: repeat(3,1fr);
grid-gap: 3rem;
}
section.contact .card-wrapper .card{
text-align: center;

}
section.contact .card-wrapper .card img{
margin-bottom: 3rem;
margin-top: 6rem;

}
section.contact .card-wrapper .card h1{
font-weight: 400;
margin-bottom: 1rem ;
}
section.contact .card-wrapper .card h6{
font-size: 1rem;
color: var(--ternary);
}

section.contact .input-1{
display: grid;
grid-template-columns: repeat(2,1fr);
grid-gap: 2rem;
margin-bottom: 4rem;

}
section.contact .input-2{
display: flex;
flex-direction: column;
}
section.contact .input-2 input{
margin-bottom: 2rem;
border: 2px solid var(--ternary);
font-size: 1rem;

}
section.contact input{
padding: 0.5rem;
border: 2px solid var(--ternary);
font-size: 1rem;
}
section.contact form{
margin-top: 2rem;
}
section.contact .input-2 textarea{
padding: 0.5rem;
border: 2px solid var(--ternary);
font-size: 1rem;

}
section.contact .input-2 textarea:focus{
outline: none;
}
section.contact input:focus{
outline: none;
}
section.contact .btn-wrapper{
text-align: center;
margin-top: 2rem;
}

footer{
background: var(--light);
text-align: center;
padding: 5rem 0;
}
footer .footer-logo{
margin-bottom: 3rem;
margin: 150px;

}
footer .footer-social a{
margin-right: 1rem;
color: var(--light);
}
footer .footer-social{
margin-bottom: 2rem;
margin-right: -1rem;
}
footer .copyright{
color: var(--dark);
}
.back{
margin-bottom: 1rem;
padding: 1rem;
text-decoration: none;
 color: #3DCFD3;
}