Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@ahmed-salah93
ahmed-salah93 authored Oct 26, 2023
1 parent 548538d commit 4a93bb7
Show file tree
Hide file tree
Showing 15 changed files with 1,667 additions and 0 deletions.
1,239 changes: 1,239 additions & 0 deletions CSS/stylesheet.css
View file

Large diffs are not rendered by default.

Binary file added favicon.ico
View file
Binary file not shown.
Binary file added images/1.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/2.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/52ov0ntklom7s7i7a1tns4l0dv.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...s/business-wallpaper-businessman-png-image-0dbd15ce506ca48c0968a870534a8fe8.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...s/circle-magazine-shape-information-circle-9229854d5d153271a2d6622445addf03.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/coding.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/coding1.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/coding2.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/down arrow.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/rrrrr.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
325 changes: 325 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -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/[email protected]" 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> [email protected]</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>
64 changes: 64 additions & 0 deletions script.js
View file
Original file line number Diff line number Diff line change
@@ -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;
})
}
};











Loading

0 comments on commit 4a93bb7

Please sign in to comment.