Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@StormX404
StormX404 authored Dec 8, 2023
1 parent 9d7979e commit 52e42c3
Show file tree
Hide file tree
Showing 13 changed files with 816 additions and 607 deletions.
Binary file added images/CV.pdf
View file
Binary file not shown.
Binary file added images/header2.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 modified images/logo.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/project.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/project2.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/project3.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/project4.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/project5.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/project6.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.
411 changes: 211 additions & 200 deletions index.html
View file

Large diffs are not rendered by default.

183 changes: 183 additions & 0 deletions index2.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,183 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="stylesheet" href="style.css">
<title>Islam Mahfouz</title>
</head>
<body>

<header>
<a href="#" class="logo">Islam</a>
<nav class="navigation">
<a href="#services">Services</a>
<a href="#projects">Projects</a>
<a href="#contact">Contact</a>
</nav>
</header>


<section class="main">
<div>
<h2>Hello, I'm Islam<br><span>Content Creator</span></h2>
<h3>I build life changing courses</h3>
<a href="#projects" class="main-btn">View my work</a>
<div class="social-icons">
<a href="#"><i class="fab fa-linkedin"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
</div>
</div>
</section>

<section class="cards" id="services">
<h2 class="title">Services</h2>
<div class="content">
<div class="card">
<div class="icon">
<i class="fas fa-edit"></i>
</div>
<div class="info">
<h3>Script Writing</h3>
<p>Research and write scripts for different topics that can then be directly recorded for video production</p>
</div>
</div>
<div class="card">
<div class="icon">
<i class="fas fa-video"></i>
</div>
<div class="info">
<h3>Video Production</h3>
<p>Record and shoot videos taking into consideration proper settings, followed by production & post-production work</p>
</div>
</div>
<div class="card">
<div class="icon">
<i class="fas fa-graduation-cap"></i>
</div>
<div class="info">
<h3>Curriculum Development</h3>
<p>Develop complete curriculums for various technical topics to produce digital transformative courses</p>
</div>
</div>
</div>
</section>

<section class="projects" id="projects">
<h2 class="title">Projects</h2>
<div class="content">
<div class="project-card">
<div class="project-image">
<img src="images/work1.jpg" />
</div>
<div class="project-info">
<p class="project-category">Script Writing & Video Production</p>
<strong class="project-title">
<span>Dev Books</span>
<a href="#" class="more-details">More details</a>
</strong>
</div>
</div>
<div class="project-card">
<div class="project-image">
<img src="images/work2.jpg" />
</div>
<div class="project-info">
<p class="project-category">Script Writing & Video Production</p>
<strong class="project-title">
<span>Dev Books</span>
<a href="#" class="more-details">More details</a>
</strong>
</div>
</div>
<div class="project-card">
<div class="project-image">
<img src="images/work3.jpg" />
</div>
<div class="project-info">
<p class="project-category">Script Writing & Video Production</p>
<strong class="project-title">
<span>Dev Books</span>
<a href="#" class="more-details">More details</a>
</strong>
</div>
</div>
<div class="project-card">
<div class="project-image">
<img src="images/work4.jpg" />
</div>
<div class="project-info">
<p class="project-category">Script Writing & Video Production</p>
<strong class="project-title">
<span>Dev Books</span>
<a href="#" class="more-details">More details</a>
</strong>
</div>
</div>
<div class="project-card">
<div class="project-image">
<img src="images/work5.jpg" />
</div>
<div class="project-info">
<p class="project-category">Script Writing & Video Production</p>
<strong class="project-title">
<span>Dev Books</span>
<a href="#" class="more-details">More details</a>
</strong>
</div>
</div>
<div class="project-card">
<div class="project-image">
<img src="images/work6.jpg" />
</div>
<div class="project-info">
<p class="project-category">Script Writing & Video Production</p>
<strong class="project-title">
<span>Internet</span>
<a href="#" class="more-details">More details</a>
</strong>
</div>
</div>
</div>
</section>

<section class="cards contact" id="contact">
<h2 class="title">Let's work together</h2>
<div class="content">
<div class="card">
<div class="icon">
<i class="fas fa-phone"></i>
</div>
<div class="info">
<h3>Phone</h3>
<p>+20122222222</p>
</div>
</div>
<div class="card">
<div class="icon">
<i class="fas fa-envelope"></i>
</div>
<div class="info">
<h3>Email</h3>
<p>[email protected]</p>
</div>
</div>
</div>
</section>

<footer class="footer">
<p class="footer-title">Copyrights @ <span>Islam Mahfouz</span></p>
<div class="social-icons">
<a href="#"><i class="fab fa-linkedin"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
</div>
</footer>

</body>
</html>
57 changes: 32 additions & 25 deletions script.js
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,33 @@
function scrollToElement(elementSelector, instance = 0) {
// Select all elements that match the given selector
const elements = document.querySelectorAll(elementSelector);
// Check if there are elements matching the selector and if the requested instance exists
if (elements.length > instance) {
// Scroll to the specified instance of the element
elements[instance].scrollIntoView({ behavior: 'smooth' });
}
}

const link1 = document.getElementById("link1");
const link2 = document.getElementById("link2");
const link3 = document.getElementById("link3");

link1.addEventListener('click', () => {
scrollToElement('.header');
});

link2.addEventListener('click', () => {
// Scroll to the second element with "header" class
scrollToElement('.header', 1);
});

link3.addEventListener('click', () => {
scrollToElement('.column');
function scrollToElement(elementSelector, instance = 0) {
// Select all elements that match the given selector
const elements = document.querySelectorAll(elementSelector);
// Check if there are elements matching the selector and if the requested instance exists
if (elements.length > instance) {
// Scroll to the specified instance of the element
elements[instance].scrollIntoView({ behavior: 'smooth' });
}
}

const link1 = document.getElementById("link1");
const link2 = document.getElementById("link2");
const link3 = document.getElementById("link3");
const link4 = document.getElementById("link4");


link1.addEventListener('click', () => {
scrollToElement('.header');
});

link2.addEventListener('click', () => {
// Scroll to the second element with "header" class
scrollToElement('.header', 1);
});

link2.addEventListener('click', () => {
// Scroll to the second element with "header" class
scrollToElement('.header', 2);
});

link3.addEventListener('click', () => {
scrollToElement('.column');
});
Loading

0 comments on commit 52e42c3

Please sign in to comment.