diff --git a/CSS/stylesheet.css b/CSS/stylesheet.css
new file mode 100644
index 0000000..fe53b88
--- /dev/null
+++ b/CSS/stylesheet.css
@@ -0,0 +1,1239 @@
+:root {
+    --primaryColor: #2399bbff;
+    --secondaryColor: #93B1A6;
+    --lightColor: #ffffff;
+    --bgColor-1: #171a1c;
+    --bgColor-2: #2c4856ff;
+    --padding: 6%;
+}
+
+
+* {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+}
+
+html {
+    scroll-behavior: smooth;
+    font-family: 'Poppins';
+    Color: var(--lightColor);
+}
+
+#home {
+    width: 100%;
+    height: 100%;
+    background-color: var(--bgColor-1);
+    display: flex;
+    flex-direction: column;
+}
+
+a {
+    text-decoration: none;
+
+}
+
+span {
+    color: var(--primaryColor);
+    text-decoration: none;
+    text-transform: capitalize;
+}
+
+h2 {
+    text-transform: capitalize;
+
+}
+
+nav {
+    
+    padding-left: var(--padding);
+    padding-right: var(--padding);
+    border-bottom: 1px solid;
+    border-bottom-color: #93B1A6;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+nav ul li {
+    display: inline-block;
+    margin: 15px;
+    padding: 10px;
+}
+
+nav ul li a {
+    text-decoration: none;
+    list-style: none;
+    color: var(--lightColor);
+    transition: .2s;
+    text-transform: uppercase;
+}
+
+nav ul li a:hover {
+    color: var(--primaryColor);
+    transform: scale(1.5);
+}
+
+.btn {
+    background-color: var(--primaryColor);
+    color: var(--lightColor);
+    text-decoration: none;
+    font-weight: bold;
+    padding: 10px;
+    border-radius: 20px;
+    border: 1px solid transparent;
+    transition: .3s ease-in-out;
+}
+
+.btn1 {
+    display: inline-block;
+    background-color: var(--primaryColor);
+    color: var(--lightColor);
+    text-decoration: none;
+    font-weight: bold;
+    padding: 0 20px;
+    margin: 20px 0;
+    border-radius: 20px;
+    border: 1px solid transparent;
+    transition: .3s ease-in-out;
+}
+
+.btn:hover,
+.btn1:hover {
+    background-color: transparent;
+    border: 1px solid var(--primaryColor);
+    color: var(--primaryColor);
+    transform: scalex(1.1);
+    cursor: pointer;
+}
+
+
+.boxes {
+    background-color: var(--primaryColor);
+    border-radius: 15px;
+    border: 1px solid gray;
+    box-shadow: 3px 3px 4px;
+    transition: all .3s;
+    
+
+}
+
+
+/* .boxes i{
+    color: var(--lightColor);
+    text-align: center;
+    font-size: 32px;
+    font-weight: 600;
+    padding-left: 40%;
+    padding-top: 5px;
+} */
+
+/* .boxes:hover {
+    transform: translateY(-20px);
+} */
+
+/* .boxes h2 {
+    color: #123;
+    font-size: 32PX;
+    font-weight: 600;
+    letter-spacing: 3px;
+    text-align: center;
+    text-transform: capitalize;
+} */
+
+/* .boxes p {
+    text-align: center;
+    font-size: 30px;
+    font-weight: 300;
+    letter-spacing: 1px;
+    color: var(--lightColor);
+} */
+
+.content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    line-height: 40px;
+    padding: var(--padding);
+
+}
+
+.content-text {
+    position: relative;
+
+}
+
+h1 {
+    font-size: 42px;
+    text-transform: capitalize;
+    letter-spacing: 3px;
+    margin: 20px 0;
+}
+
+
+h4 {
+    font-size: 28px;
+    margin: 10px 0;
+    color: var(--secondaryColor);
+}
+
+
+h3 {
+    font-size: 32px;
+    margin: 10px 0;
+   
+}
+
+.social-media {
+    margin-top: 10px;
+}
+
+.social-media a {
+    font-size: 28px;
+    color: var(--secondaryColor);
+    margin: 10px 5px;
+    padding: 7px;
+    transition: .3s ease-in-out;
+
+
+}
+
+.social-media a i {
+    transition: .2s;
+    padding: 3px;
+    border-radius: 50%;
+}
+
+.social-media a i:hover {
+    transform: translateY(-5%);
+    opacity: .5;
+
+}
+
+.content-image {
+    position: relative;
+    width: 50%;
+    height: 70vh;
+    /* overflow: hidden; */
+    /* bottom: 10px; */
+}
+
+.content-image img {
+    position: absolute;
+    bottom: 0;
+    height: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    transition: bottom 1s, left 1s;
+
+}
+
+.content-image:hover .shape {
+    bottom: 110px;
+
+}
+
+.content-image:hover .pic {
+    left: 55%;
+
+}
+
+.about {
+    background-color: var(--bgColor-2);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--padding);
+}
+
+.about .content-image {
+    width: 40%;
+    margin-top: 70px;
+}
+
+.about .content-text {
+    width: 40%;
+    letter-spacing: 2px;
+    line-height: 20px;
+    padding: 20px;
+    margin-top: 30px;
+
+}
+
+.about .content-text h1 {
+    margin-bottom: 30px;
+    text-transform: capitalize;
+    letter-spacing: 3px;
+}
+
+.about .content-text h5 {
+    font-size: 28px;
+    text-transform: capitalize;
+    letter-spacing: 2px;
+    line-height: 30px;
+    /* margin-bottom: 10px; */
+}
+
+.about .content-text p {
+    letter-spacing: 1px;
+    font-size: 20px;
+    margin-top: 30px;
+    line-height: 30px;
+    text-align: left;
+}
+
+.content-text .yalla {
+    font-size: 22px;
+    font-weight: 600;
+    letter-spacing: 1px;
+}
+
+.services {
+    background-color: var(--bgColor-1);
+    padding: 32px var(--padding);
+}
+
+.services .text-center,
+#contacts .hello, .statistics h1 {
+    text-align: center;
+}
+
+.services .box {
+    display: flex;
+    align-items: flex-end;
+    justify-content: flex-end;
+}
+
+.card {
+    width: 100%;
+    background-color: var(--bgColor-2);
+    border-radius: 20px;
+    padding: 10px 10px;
+    margin: 20px;
+    text-align: center;
+    box-shadow: 2px 2px 5px;
+    align-self: normal;
+
+}
+
+.card em {
+    font-size: 32px;
+    color: var(--primaryColor);
+    padding: 10px 10px;
+    margin: 10px 0;
+}
+
+.card h4 {
+    font-size: 32px;
+    font-weight: 600;
+    text-transform: uppercase;
+}
+
+.para p {
+    line-height: 35px;
+    letter-spacing: 2px;
+    font-size: 20px;
+    
+}
+
+.para .show {
+    display: inline-block;
+    font-size: 25px;
+    padding: 5px;
+    width: 80%;
+    color: var(--lightColor);
+    background-color: var(--primaryColor);
+    border: 1px solid var(--primaryColor);
+    border-radius: 20px;
+    transition: .3s;
+    margin-top: 20px;
+    align-self: flex-end;
+}
+
+.para .show:hover {
+    background-color: transparent;
+    border: 1px solid var(--primaryColor);
+    color: var(--primaryColor);
+    transform: scalex(1.1);
+}
+
+.skills {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+   padding: 20px; 
+    background-color: var(--bgColor-2);
+    /* height: 100vh; */
+}
+.content-skills h3 {
+    padding-left: 20px;
+}
+
+
+
+
+.progress{
+    font-size: 28px;
+    position: relative;
+    width: 500px;
+    height: 20px;
+    background-color:var(--lightColor);
+    margin: 15px;
+    font-weight: 600;
+    
+}
+.space{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.statistics{
+    background-color: var(--bgColor-2);
+    width: 100%;
+    padding: var(--padding);
+    /* margin: 10px; */
+    
+}
+
+.statistics .stats{
+    /* background-color: var(--bgColor-1); */
+    padding: 20px;
+    margin-left: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    /* border: 1px solid white; */
+    align-self: normal;
+}
+.statistics .stats .committ{
+    margin: 10px;
+    padding: 20px;
+    background-color: #033033;
+    border-radius: 20px;
+    text-align: center;
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+    align-items: center;
+}
+.statistics .stats .committ .boxes{
+
+    border: 1px solid white;
+    border-radius: 10px;
+    /* color: black; */
+    text-align: center;
+    font-size: 28px;
+    font-weight: 500;
+    width: fit-content;
+    text-align: center;
+    /* margin-left: 70px; */
+    padding: 10px;
+    /* float: right; */
+}
+
+.progress span{
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    background-color: var(--primaryColor);
+    transition: width .5s linear;
+}
+
+
+
+
+/* ______footer____________ */
+
+.content-footer {
+    background-color: var(--bgColor-1);
+    padding: 20px var(--padding);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.content-footer a i {
+    margin: 10px;
+    color: var(--secondaryColor);
+    font-size: 22px;
+    font-weight: 500;
+    transition: .3s ease-in-out;
+
+}
+
+.content-footer a i:hover {
+    color: var(--primaryColor);
+    transform: scaleX(1.2);
+}
+/* __________top button__________ */
+#myBtn {
+    display: none;
+    position: fixed;
+    bottom: 20px;
+    right: 30px;
+    z-index: 99;
+    font-size: 22px;
+    border: none;
+    outline: none;
+    background-color: var(--primaryColor);
+    color: white;
+    cursor: pointer;
+    padding: 15px;
+    border-radius: 15px;
+    transition: .3s ease-in-out;
+    width: 50px;
+    font-size: 25px;
+}
+
+#myBtn:hover {
+    background-color: var(--secondaryColor);
+    transform: scaleY(1.1);
+}
+
+#menu {
+    display: none;
+    position: relative;
+    appearance: none;
+    border: none;
+    background: none;
+    cursor: pointer;
+    user-select: none;
+}
+
+#menu span {
+    display: block;
+    width: 33px;
+    height: 4px;
+    background-color: var(--lightColor);
+    border-radius: 6px;
+    transform-origin: 0 0;
+    transition: .4s;
+    margin-bottom: 5px;
+}
+
+#contacts {
+    background-color: var(--bgColor-1);
+    padding: 40px;
+
+}
+
+#between {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    align-self: normal;
+    background-color: #93B1A6;
+    border-radius: 20px;
+    box-shadow: 3px 3px 7px;
+}
+
+#between .content-image {
+    margin-top: 150px;
+
+}
+
+.form {
+    display: block;
+    width: 40%;
+}
+
+.form .in {
+    display: block;
+    width: 90%;
+    padding: 15px 10px;
+    margin: 20px 0;
+    resize: none;
+    outline: none;
+    background-color:var(--bgColor-2);
+    border: none;
+    border-radius: 10px;
+    color: #ffffff;
+    box-shadow: 2px 2px 7px;
+
+}
+
+#menu.is-active span:nth-child(1) {
+    transform: translate(0, -2px) rotate(45deg);
+
+}
+
+#menu.is-active span:nth-child(2) {
+    opacity: 0;
+    transform: translateX(15px);
+}
+
+#menu.is-active span:nth-child(3) {
+    transform: translate(-3px, 3px) rotate(-45deg);
+
+}
+
+#menu.is-active span {
+    background-color: var(--primaryColor);
+}
+
+/* ________________sidbar css_________ */
+
+
+
+#fixed {
+    position: fixed;
+    top: 15%;
+    left: 0;
+    z-index: 3;
+    background-color: var(--primaryColor);
+    border-radius: 10px;
+    width: 40px;
+    display: none;
+  }
+  #fixed li{
+    margin: 5px 0px 5px 0px; 
+    padding: 5px 0px 5px 0;
+    transition: .7s ease;
+    text-decoration: none;
+    list-style: none;
+    text-align: center;
+  }
+  #fixed li a{
+    text-decoration: none;
+    list-style: none;
+    color: #000;
+    font-size: 22px;
+    cursor: pointer;
+  }
+  #fixed li a i {
+    color:var(--lightColor);
+    
+  }
+  #fixed li:hover, .activ {
+    transform: rotate(360deg);
+    background-color: #033033;
+    border-radius: 10px;
+    /* transform: translateX(10%); */
+  }
+
+  ::-webkit-scrollbar{
+      width: 10px;
+      
+  }
+  ::-webkit-scrollbar-thumb{
+    
+    background-image: linear-gradient( rgb(65, 21, 118) , rgb(5, 35, 49));
+    border-radius: 20px;
+   
+
+}
+
+  ::-webkit-scrollbar-track{
+    background-image: linear-gradient( rgb(0, 2, 4) , rgba(0, 0, 1, 0.831));
+  }
+  ::-webkit-scrollbar-corner{
+    background-color: #171a1c;
+  }
+
+/* //media query// */
+
+@media screen and (max-width : 575px) {
+
+    * {
+        padding: 0;
+        margin: 0;
+        box-sizing: border-box;
+    }
+
+    html {
+        scroll-behavior: smooth;
+        font-size: 13px;
+    }
+
+    #home {
+        height: 100%;
+
+    }
+
+    #home .content-image img {
+        display: none;
+    }
+
+    #home .content-text {
+        width: 100%;
+        text-align: center;
+    }
+
+    nav {
+        position: fixed;
+        top: 0;
+        right: 0;
+        left: 0;
+        z-index: 100;
+        height: 80px;
+        padding-top: 0;
+        border: 1px solid var(--bgColor-2);
+        background-color: var(--bgColor-1);
+    }
+
+    nav>a {
+        display: none;
+
+    }
+
+    nav ul {
+        display: none;
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100vw;
+        height: 100vh;
+        background-color: var(--bgColor-2);
+    }
+
+    nav ul li {
+        display: block;
+        text-align: center;
+        margin: 40px;
+    }
+    .social-media a i{
+        padding: 2px;
+    }
+
+    #menu {
+        display: block;
+    }
+
+    .content-text {
+        bottom: 0;
+        margin-top: 50px;
+    }
+
+    nav ul.is-active {
+        display: block;
+    }
+
+    .stats {
+        display: flex;
+        align-items: baseline;
+        justify-content: baseline;
+        flex-wrap: wrap;
+        width: 100%;
+
+    }
+
+    .stats .boxes {
+        width: 100%;
+        padding: 10px;
+        margin: 10px;
+        align-self: normal;
+
+
+
+    }
+    .boxes i{
+        padding-right: 80px;
+    }
+    
+
+    #about .content-image {
+        display: none;
+    }
+
+    #about .content-text {
+        width: 100%;
+        text-align: center;
+
+    }
+
+    .boxes {
+        padding: 0;
+    }
+
+    .box {
+        display: flex;
+        justify-content: center;
+        flex-wrap: wrap;
+        gap: 15px;
+    }
+
+    #skills .content-image img{
+        display: none;
+    }
+
+    #skills h1,
+    .content-skills {
+        width: fit-content;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+
+    }
+    .progress{
+        width: 400px;
+    }
+    .space{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    #contact {
+        width: 100%;
+        align-items: center;
+    }
+
+    #between .content-image {
+        display: none;
+    }
+
+    #between .form {
+        width: 100%;
+        margin: 10px 30px;
+
+    }
+    #fixed{
+        display: none;
+    }
+
+}
+
+@media screen and (min-width: 576px) and (max-width: 767px)
+ {
+
+    * {
+        padding: 0;
+        margin: 0;
+        box-sizing: border-box;
+    }
+
+    html {
+        scroll-behavior: smooth;
+        font-size: 13px;
+    }
+
+    #home {
+        height: 100%;
+    }
+
+    #home .content-image .shape{
+        display: none;
+    }
+
+    #home .content-text {
+        width: 100%;
+        text-align: center;
+    }
+
+    nav {
+        position: fixed;
+        top: 0;
+        right: 0;
+        left: 0;
+        z-index: 100;
+        height: 50px;
+        padding-top: 0;
+        border: 1px solid var(--bgColor-2);
+        background-color: var(--bgColor-1);
+    }
+
+    nav>a {
+        display: none;
+
+    }
+
+    nav ul {
+        display: none;
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100vw;
+        height: 100vh;
+        background-color: var(--bgColor-2);
+    }
+
+    nav ul li {
+        display: block;
+        text-align: center;
+        margin: 40px;
+    }
+
+    #menu {
+        display: block;
+    }
+
+    .content-text {
+        bottom: 0;
+    }
+
+    .stats {
+        display: flex;
+        flex-wrap: wrap;
+        width: 100%;
+
+    }
+
+    .stats .boxes {
+        width: 100%;
+        padding: 10px;
+        margin: 10px;
+
+    }
+    .boxes i{
+        padding-right: 150px;
+    }
+    .boxes .card{
+        display: flex;
+     width: 50%;   
+    }
+
+    nav ul.is-active {
+        display: block;
+    }
+
+    #about .content-image {
+        display: none;
+    }
+
+    #about .content-text {
+        width: 100%;
+        text-align: center;
+    }
+
+    .box {
+        display: flex;
+        justify-content: center;
+        flex-wrap: wrap;
+        gap: 15px;
+    }
+
+    #skills .content-image {
+        display: none;
+    }
+
+    #skills h1,
+    .content-skills {
+        width: fit-content;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+
+    }
+
+    #contact {
+        width: 100%;
+        align-items: center;
+    }
+
+    .boxes {
+        padding: 0;
+    }
+
+    #between .content-image img {
+        display: none;
+    }
+
+    #between .form {
+        width: 100%;
+        padding: 10px;
+
+    }
+    #fixed{
+        display: none;
+    }
+
+
+}
+
+@media screen and (min-width: 767px) and (max-width: 991px) {
+    *{
+        padding: 0;
+        margin: 0;
+        box-sizing: border-box;
+    }
+
+    html {
+        scroll-behavior: smooth;
+        font-size: 13px;
+    }
+
+    #home {
+        height: 100vh;
+
+    }
+
+    #home .content-image .shape{
+        display: none;
+    }
+
+    #home .content-text {
+        width: 100%;
+        text-align: center;
+    }
+
+    nav {
+        position: fixed;
+        top: 0;
+        right: 0;
+        left: 0;
+        z-index: 100;
+        height: 80px;
+        padding-top: 0;
+        border: 1px solid var(--bgColor-2);
+        background-color: var(--bgColor-1);
+    }
+
+    nav>a {
+        display: none;
+
+    }
+
+    nav ul {
+        display: none;
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100vw;
+        height: 100vh;
+        background-color: var(--bgColor-2);
+    }
+
+    nav ul li {
+        display: block;
+        text-align: center;
+        margin: 40px;
+    }
+
+    #menu {
+        display: block;
+       
+    }
+
+    .content-text {
+        bottom: 0;
+        margin-top: 50px;
+    }
+
+    nav ul.is-active {
+        display: block;
+    }
+
+    .stats {
+        display: flex;
+        flex-wrap: wrap;
+        width: 100%;
+
+    }
+
+    .stats .boxes {
+        width: 100%;
+        padding: 10px;
+        margin: 10px;
+
+
+    }
+    .boxes i{
+        padding-right: 150px;
+    }
+
+    #about .content-image img{
+        display: none;
+    }
+
+   
+
+    #about .content-text {
+        width: 100%;
+        text-align: center;
+
+
+    }
+
+    .boxes {
+        padding: 0;
+    }
+
+    .box{
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: 15px;
+    }
+
+    .skills .content-image img{
+        display: none;
+    }
+
+    #skills h1,
+    .content-skills {
+        width: fit-content;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+
+    }
+
+    #contact {
+        width: 100%;
+        align-items: center;
+    }
+
+    #between .content-image img {
+        display: none;
+    }
+
+    #between .form .in {
+        width: 100%;
+    }
+    #fixed{
+        display: none;
+    }
+
+
+}
+
+
+@media screen and (min-width: 992px) and (max-width: 1100px) {
+
+    * {
+        padding: 0;
+        margin: 0;
+        box-sizing: border-box;
+    }
+
+    html {
+        scroll-behavior: smooth;
+        font-size: 13px;
+    }
+
+    #home {
+        height: 100%;
+
+    }
+
+    #home .content-image img {
+        display: block;
+    }
+
+    #home .content-text {
+        width: 100%;
+        text-align: center;
+    }
+
+    nav {
+        position: fixed;
+        top: 0;
+        right: 0;
+        left: 0;
+        z-index: 100;
+        height: 80px;
+        padding-top: 0;
+        border: 1px solid var(--bgColor-2);
+        background-color: var(--bgColor-1);
+    }
+
+    nav>a {
+        display: none;
+
+    }
+
+    nav ul {
+        display: none;
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100vw;
+        height: 100vh;
+        background-color: var(--bgColor-2);
+    }
+    .boxes i{
+        padding-right: 180px;
+    }
+
+    nav ul li {
+        display: block;
+        text-align: center;
+        margin: 40px;
+    }
+
+    #menu {
+        display: block;
+    }
+
+    .content-text {
+        bottom: 0;
+        margin-top: 50px;
+    }
+
+    nav ul.is-active {
+        display: block;
+    }
+
+    .stats {
+
+        display: flex;
+        justify-content: center;
+        flex-wrap: wrap;
+    }
+
+    .stats .boxes {
+        width: 100%;
+        padding: 10px;
+        margin: 10px;
+
+
+    }
+
+    #about .content-image {
+        display: none;
+    }
+
+
+    #about .content-text {
+        width: 100%;
+        text-align: center;
+
+
+    }
+
+    .boxes {
+        padding: 0;
+    }
+
+    .box {
+        display: flex;
+        justify-content: center;
+        flex-wrap: wrap;
+        gap: 15px;
+    }
+
+    #skills .content-image img{
+        display: none;
+    }
+
+    #skills h1,
+    .content-skills {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        text-align: center;
+
+    }
+
+    #contact {
+        width: 100%;
+        align-items: center;
+    }
+
+    #between .content-image img {
+        display: none;
+    }
+
+    #between .form {
+        width: 100%;
+    }
+
+
+}
\ No newline at end of file
diff --git a/favicon.ico b/favicon.ico
new file mode 100644
index 0000000..860de0c
Binary files /dev/null and b/favicon.ico differ
diff --git a/images/1.png b/images/1.png
new file mode 100644
index 0000000..a605abc
Binary files /dev/null and b/images/1.png differ
diff --git a/images/2.png b/images/2.png
new file mode 100644
index 0000000..81d8701
Binary files /dev/null and b/images/2.png differ
diff --git a/images/52ov0ntklom7s7i7a1tns4l0dv.png b/images/52ov0ntklom7s7i7a1tns4l0dv.png
new file mode 100644
index 0000000..3315160
Binary files /dev/null and b/images/52ov0ntklom7s7i7a1tns4l0dv.png differ
diff --git a/images/business-wallpaper-businessman-png-image-0dbd15ce506ca48c0968a870534a8fe8.png b/images/business-wallpaper-businessman-png-image-0dbd15ce506ca48c0968a870534a8fe8.png
new file mode 100644
index 0000000..43c1e0d
Binary files /dev/null and b/images/business-wallpaper-businessman-png-image-0dbd15ce506ca48c0968a870534a8fe8.png differ
diff --git a/images/circle-magazine-shape-information-circle-9229854d5d153271a2d6622445addf03.png b/images/circle-magazine-shape-information-circle-9229854d5d153271a2d6622445addf03.png
new file mode 100644
index 0000000..35894c1
Binary files /dev/null and b/images/circle-magazine-shape-information-circle-9229854d5d153271a2d6622445addf03.png differ
diff --git a/images/coding.png b/images/coding.png
new file mode 100644
index 0000000..5e1337a
Binary files /dev/null and b/images/coding.png differ
diff --git a/images/coding1.png b/images/coding1.png
new file mode 100644
index 0000000..318a0ff
Binary files /dev/null and b/images/coding1.png differ
diff --git a/images/coding2.png b/images/coding2.png
new file mode 100644
index 0000000..f820523
Binary files /dev/null and b/images/coding2.png differ
diff --git a/images/down arrow.jpg b/images/down arrow.jpg
new file mode 100644
index 0000000..aa014fb
Binary files /dev/null and b/images/down arrow.jpg differ
diff --git a/images/rrrrr.png b/images/rrrrr.png
new file mode 100644
index 0000000..1f632ad
Binary files /dev/null and b/images/rrrrr.png differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..b9a809b
--- /dev/null
+++ b/index.html
@@ -0,0 +1,325 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Ahmed salah's website</title>
+    <link rel="stylesheet" href="./CSS/stylesheet.css">
+    <link
+        href="https://fonts.googleapis.com/css2?family=Fraunces:wght@700&family=Hanken+Grotesk:wght@500;700;800&family=Inter:wght@500&family=Montserrat:wght@500&family=Red+Hat+Display:wght@700&family=Ubuntu:wght@400;500;700&display=swap"
+        rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
+        integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
+        crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
+</head>
+
+<body>
+    <!-- _______________________________top button_______________________________ -->
+
+    <button onclick="topFunction()" id="myBtn" title="Go to top"> ^ </button>
+
+
+    <!--_______________________________ Home_______________________________ -->
+
+    <section id="home">
+        <nav>
+            <h2>ahmed <a href="#home"><span>Salah</span></a></h2>
+            <ul id="action">
+                <li><a href="#content">Home</a></li>
+                <li><a href="#services">Services</a></li>
+                <li><a href="#skills">Skills</a></li>
+                <li><a href="#about">About</a></li>
+                <li><a href="#contacts">Contact Me</a></li>
+            </ul>
+            <a href="#" class="btn"> Subscribe </a>
+            <button id="menu">
+                <span></span>
+                <span></span>
+                <span></span>
+            </button>
+        </nav>
+        <div class="content">
+            <div class="content-text">
+                <h4>Hello, My Name Is </h4>
+                <h1>Ahmed <span> salah</span></h1>
+                <div class="typing">
+                    <h3> <span>[ Frontend ] </span>Developer</h3>
+                </div>
+                
+                <a href="#about" class="btn1">About Me </a>
+                <!-- <div class="social-media">
+                    <a href="" target="_blank"><i class="fa-brands fa-square-instagram"></i></a>
+                       <a href="https://github.com/ahmed-salah93" target="_blank"><i class="fa-brands fa-github"></i></a>
+                           <a href="" target="_blank"><i class="fa-brands fa-square-whatsapp"></i></a>
+                    <a href="" target="_blank"><i class="fa-brands fa-square-facebook"></i></a>
+                    <a href="linkedin.com/in/ahmed-salah-a6a995139"><i class="fa-brands fa-linkedin"></i></a>
+                </div> -->
+                <!-- _______________________________boxes start _______________________________-->
+                <!-- <div class="stats">
+                    <div class="boxes">
+                        <i class="fa-solid fa-hand-holding-hand"></i>
+                        <h2>Pending Projects</h2>
+                        <div class="num" data-goal="5">0</div> 
+                    </div>
+                    <div class="boxes">
+                        <i class="fa-solid fa-list-check"></i>
+                        <h2>Total Projects</h2>
+                        <div class="num" data-goal="25">0</div>
+                    </div>
+                    <div class="boxes">
+                        <i class="fa-solid fa-user-graduate"></i>
+                        <h2> Experience Years </h2>
+                        <div class="num" data-goal="2">0</div>
+                    </div>
+                </div> -->
+                <!--_______________________________ end boxes _______________________________ -->
+
+            </div>
+            <div class="content-image">
+
+                <img src="images/2.png" alt="" class="shape">
+                <img src="images/business-wallpaper-businessman-png-image-0dbd15ce506ca48c0968a870534a8fe8.png" alt=""
+                    class="pic">
+            </div>
+
+        </div>
+
+    </section>
+
+    <!-- _______________________________ about me_______________________________ -->
+
+    <section class="about" id="about">
+        <div class="content-image">
+            <img src="images/coding.png" alt="">
+        </div>
+        <div class="content-text">
+            <h1>About <span>Me</span></h1>
+            <h5><span> frontend </span> Developer</h5>
+            <p> Frontend Developer, experienced in building
+                websites for small and medium-sized
+                businesses, whether you're wanting to
+                large your businness and offer your service
+                in a professional way and if you want
+                organized website and professional platform
+                to aquire new customers, <br>
+                <span class="yalla">i can help.</span> <br>
+                - Knows JavaScript , Html5, CSS3 , jQuery, SEO, OOP and Data base. <br>
+                - Know more about Bootstrap and Angular. <br>
+                -full creation and development to website and online stores from scratch to finish.
+            </p>
+        </div>
+    </section>
+
+    <!-- _______________________________ services_______________________________ -->
+
+    <section class="services" id="services">
+        <h1 class="text-center"><span>our</span> services</h2>
+            <div class="box">
+                <div class="card">
+                    <em class="fa-solid fa-desktop"></em>
+                    <h4>mobile developer</h4>
+                    <div class="para">
+                        <p> focus on developing apps for mobile devices.
+                            They're also known as Android or iOS developers if they work on one platform,
+                            but it's common for developers to work on both. Typical duties include: discussing clients'
+                            requirements and what they would like the app to do.</p>
+                        <pre>
+
+                            </pre>
+                        <a href="#" class="show">Show More</a>
+                    </div>
+
+
+                </div>
+                <div class="card">
+                    <em class="fa-solid fa-laptop-file fa-2xl"></em>
+                    <h4> Web and Ecommerce Developer</h4>
+                    <div class="para">
+                        <p>Web & eCommerce Developers design, create, and modify websites.
+                            They are responsible for website's technical aspects, such as performance and capacity,
+                            which are measures of a website speed and how much traffic the site can handle.</p>
+                        <pre>
+                                </pre>
+                        <a href="#" class="show">Show More</a>
+                    </div>
+
+
+                </div>
+
+
+                <div class="card">
+                    <em class="fa-solid fa-laptop-code"></em>
+                    <h4> frontend developer</h4>
+                    <div class="para">
+                        <p> front-end developer creates websites and applications
+                            using web languages such as HTML, CSS, and JavaScript
+                            that allow users to access and interact with the site or app.
+                        </p>
+                        <pre>
+
+
+
+
+
+
+
+                             </pre>
+                        <a href="#" class="show">Show More</a>
+                    </div>
+                </div>
+            </div>
+
+    </section>
+
+
+    <!--_____________________skills_______________________________ -->
+
+
+
+    <section class="skills" id="skills">
+        <div class="container-skills">
+            <h1><span>my</span> skills</h1> <br>
+            <div class="content-skills">
+                <!-- <i class="fa-brands fa-square-js fa-beat fa" style="color: #2399bbff;"> JavaScript </i> <br> 
+                  <i class="fa-brands fa-angular fa-beat fa-2xl" > Angular </i><br>
+                     <i class="fa-brands fa-node fa-beat fa-2xl" style="color: #2399bbff;"> Node js </i> <br>
+                    <i class="fa-brands fa-react fa-beat fa" > React native </i> <br>
+                  <i class="fa-brands fa-html5 fa-beat fa-2xl" style="color: #2399bbff;"> html 5 </i> <br>
+                <i class="fa-brands fa-bootstrap fa-beat fa" > Bootstrap </i> <br> 
+             <i class="fa-brands fa-css3-alt fa-beat fa-2xl" style="color: #2399bbff;"> CSS 3 </i> <br> -->
+               <div class="space"><h3 > HTML </h3> <br> <p>85%</p></div>
+                <div class="progress">
+                    <span style="width: 0;" data-width="90%"></span>
+                </div>
+                <div class="space"><h3 > CSS  </h3> <br> <p>95%</p></div>
+
+                <div class="progress">
+                    <span style="width: 0;" data-width="95%"></span>
+                </div>
+                <div class="space"><h3 > JavaScript </h3> <br>  <p>88%</p></div>
+
+                <div class="progress">
+                    <span style="width: 0;" data-width="85%"></span>
+                </div>
+                <div class="space"> <h3 > Bootstrap </h3> <br>  <p>90%</p></div>
+                <div class="progress">
+                    <span style="width: 0;" data-width="90%"></span>
+                </div>
+                <div class="space"><h3 > React JS </h3> <br>  <p>95%</p></div>
+                <div class="progress">
+                    <span style="width: 0;" data-width="95%"></span>
+                </div>
+            </div>
+
+        </div>
+        <div class="content-image">
+            <img src="images/coding1.png" alt="photo">
+        </div>
+    </section>
+
+    <!--___________________________ Get in touch-contacts ________________________-->
+
+
+
+    <section id="contacts">
+
+        <h1 class="hello"><i class="fa-solid fa-headset"></i> Get in <span>touch</span></h1>
+        <div id="between">
+
+            <div class="content-image">
+                <img src="images/coding2.png" alt="">
+
+            </div>
+            <div class="form">
+                <form action="https://formsubmit.co/ahmed.salah.as541@gmail.com" method="post">
+                    <input type="text" name="name" placeholder="Your Name" class="in" required>
+                    <input type="email" name="email" class="in" placeholder="Your e-mail address" required>
+                    <textarea name="Message" class="in" cols="10" rows="5"
+                        placeholder=" Type Your Message Here"></textarea>
+                    <button class="btn">Submit</button>
+                </form>
+            </div>
+
+        </div>
+
+
+
+
+
+    </section>
+
+    
+    <section class="statistics">
+        <h1>My <span>stats</span></h1>
+        
+        <div class="stats">
+            <div class="committ">
+                <h3> Total Clients </h3>
+            <div class="boxes" data-goal="12">
+                    0
+            </div>
+        </div> 
+            
+            <div class="committ"> 
+                <h3>Pending Project </h3>
+            <div class="boxes" data-goal="3">
+                0
+            </div>
+        </div>
+           
+            <div class="committ">
+                 <h3>Total Projects</h3>
+            <div class="boxes" data-goal="15">
+                0
+            </div>
+        </div>
+           
+            <div class="committ">
+                <h3> Happy clients </h3>
+            <div class="boxes" data-goal="11">
+                0
+            </div>
+        </div>
+            
+        </div>
+
+
+
+
+    </section>
+    <!--______________________________Footer_____________________ -->
+    <footer>
+
+
+        <div class="content-footer" id="contact">
+            <h2>ahmed <span>salah</span></h2> <br>
+            <p><span>Phone Number</span> +201111204305</p> <br>
+            <i class="fa-solid fa-phone"></i> <br>
+            <P><span> E-mail </span> ahmed.salah.as541@gmail.com</P> <br>
+            <i class="fa-regular fa-envelope"></i> <br>
+            <p> Copy Rights &COPY; <span>2023</span> </p> <br>
+
+
+            <ul id="fixed">
+                <li><a href="https://www.facebook.com/profile.php?id=100050085421098&mibextid=ZbWKwL" target="_blank"><i
+                            class="fa-brands fa-facebook"></i></a></li>
+                <li class="activ"><a href="linkedin.com/in/ahmed-salah-a6a995139" target="_blank"><i
+                            class="fa-brands fa-linkedin"></i></a></li>
+                <li><a href="https://github.com/ahmed-salah93" target="_blank"><i class="fa-brands fa-github"></i></a>
+                </li>
+                <li><a href="https://wa.me/1111204305" target="_blank"><i class="fa-brands fa-square-whatsapp"></i></a>
+                </li>
+            </ul>
+
+
+        </div>
+    </footer>
+    <script src="script2.js"></script>
+    <script src="script.js"></script>
+    
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..9362f34
--- /dev/null
+++ b/script.js
@@ -0,0 +1,64 @@
+
+
+
+ const menu = document.getElementById("menu");
+ const action = document.getElementById("action");
+
+ menu.addEventListener("click", () =>{
+  handle();
+    });
+ function handle(){
+  menu.classList.toggle("is-active");
+  action.classList.toggle("is-active");
+ };
+
+
+
+
+
+let nums = document.querySelectorAll(".boxes")
+let section = document.querySelector('.statistics');
+
+if (window.scrollY >= section.offsetTop - 100 ){
+
+  nums.forEach((boxes) => startCount(boxes));
+
+}
+
+
+function startCount(f){
+    let goal = f.dataset.goal;
+    let count = setInterval(() => {
+        f.textContent++;
+        if(f.textContent == goal){
+            clearInterval(count);
+        }
+    }, 800/goal)};
+
+    // ______________________________________
+
+
+
+// __________________________________
+
+let sections = document.querySelector('.skills');
+let progSpan = document.querySelectorAll('.progress span');
+
+window.onscroll = function(){
+  if(window.scrollY >= sections.offsetTop  ){
+    progSpan.forEach((span)=> {
+      span.style.width = span.dataset.width;
+    })
+  }
+};
+
+
+
+
+   
+
+
+
+
+
+
diff --git a/script2.js b/script2.js
new file mode 100644
index 0000000..1702553
--- /dev/null
+++ b/script2.js
@@ -0,0 +1,39 @@
+
+let bar = document.getElementById("fixed");
+
+window.onscroll = function(){
+ if(window.scrollY >= 100){
+   bar.style.display= "block";
+ }
+ else{
+   bar.style.display= "none";
+ }
+};
+
+
+// ___________________________________
+
+//  // Get the button
+//  let mybutton = document.getElementById("myBtn");
+        
+//  // When the user scrolls down 20px from the top of the document, show the button
+//  window.onscroll = function() {scrollFunction()};
+ 
+//  function scrollFunction() {
+//    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+//      mybutton.style.display = "block";
+//    } else {
+//      mybutton.style.display = "none";
+//    }
+//  }
+ 
+//  // When the user clicks on the button, scroll to the top of the document
+//  window.onscroll = function topFunction(){
+//    document.body.scrollTop = 0;
+//    document.documentElement.scrollTop = 0;
+//  };
+
+
+
+
+