Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added portfolio website(ZahinEkbal) #14

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Added portfolio website(ZahinEkbal) #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1972eb5
Update README.md
zahinekbal Jul 20, 2020
87d9877
Added my portfolio(ZahinEkbal)
zahinekbal Jul 21, 2020
ca288a8
Update README.md
zahinekbal Jul 21, 2020
a1e97b1
Update README.md
zahinekbal Jul 21, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions Portfolio-Websites/ZahinEkbal/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
### Title
MY portfolio websites...

# Link to my website
https://zahinekbal.github.io/my-portfolio.github.io/

## Technologies which i used in my portfolio
- HTML
- CSS
- JAVASCRIPT

# *******************************
I used little bit of text animation with the help of css....
and hover effect in all the pic..
In javascript i used toggle function which toggle display of the html elements using javascript nd pass the elements id which u want to show/hide based on the visibility..
Added media query function for fully responsiveness..

That's a lot there is not so much to say about my projects......


Binary file added Portfolio-Websites/ZahinEkbal/backpic.jpg
View file
Open in desktop
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 Portfolio-Websites/ZahinEkbal/cssicon.png
View file
Open in desktop
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 Portfolio-Websites/ZahinEkbal/emailicon.png
View file
Open in desktop
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 Portfolio-Websites/ZahinEkbal/githubicon.png
View file
Open in desktop
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 Portfolio-Websites/ZahinEkbal/htmlicon.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
242 changes: 242 additions & 0 deletions Portfolio-Websites/ZahinEkbal/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,242 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width-device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>MY WEBSITE</title>
</head>
<body>
<!--header part-->
<nav class="navbar background h-nav-resp">
<ul class="nav-list v-class-resp">
<li><a href="#Home">Home</a></li>
<li><a href="#skill">Skills</a></li>
<li><a href="#Certificates">Certificates</a></li>
<li><a href="#About">About</a></li>
<li><a href="#Contact">Contact</a></li>
</ul>
<div class="burger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</nav>
<!--end of header part-->
<section id="first" >
<div class="first container">
<div>
<h1 id="Home">Hello<span></span></h1>
<h1>My Name Is<span></span></h1>
<h1>Zahin Ekbal<span></span></h1>
<a href="#" type="button" class="ctn">portfolio</a>
</div>
</div>
</section>
<!----my skill sections-->
<section id="skill">
<div class="skill container">
<div class="skill-top">
<h1 class="section-title" id="skills">MY SKILLS</h1>
<p><b>WHAT do I need TO study?</b><br>
If you want to learn front-end you need learn HTML,CSS,<br>JAVASCRIPT andJQUERY.Those would help you
to create interactive and interesrting web pages.RECENTLY I FOUND MY INTEREST IN WEB DEVELOPEMENT.<br>THEN I STARTED LEARNING WEB
DEVELOPEMENT nd Completed Front-end part EX:- HTML,CSS,<br>JAVASCRIPT,
BOOTSTRAP,JQERY.<br>I have done front-end form Udemy,Progate,W3 schools
.Also have experience working with static website ,RESPONSIVE website,Bootstrap framework
and Right now I am learning Backend with nodeJS nd react from CODING BLOCKS<br>
SKILLS & ENDORESMENTS</p>
</div>
<div class="skill-bottom">
<div class="skill-items">
<div class="icon"><img src="htmlicon.png"></div>
<h2>HTML</h2>
<p><b>HTML</b>stands for Hyper Text Markup Language.IT is used to design web pages using Markup
language.HTML is used to manipulate text,images and other content to display it in required format.
HTML was declared by <b>TIM BERNERS-LEE in 1991</b></p>
</div>
<div class="skill-items">
<div class="icon"><img src="cssicon.png"></div>
<h2>CSS</h2>
<p><b>CSS</b>Stands for "Cascading Style Sheet." Cascading style sheets are used to format the
layout of Web pages. They can be used to define text styles, table sizes, and other aspects of
Web pages that previously could only be defined in a page's HTML.</p>
</div>
<div class="skill-items">
<div class="icon"><img src="javascripticon.png"></div>
<h2>JAVASCRIPT</h2>
<p>JavaScript is a programming language commonly used in web development. It was
originally developed by Netscape as a means to add dynamic and interactive elements
to websites.
Like server-side scripting languages, such as PHP and ASP, It can be inserted anywhere within the HTML of a webpage.</p>
</div>
<div class="skill-items">
<div class="icon"><img src="jqueryicon.png"></div>
<h2>JQUERY</h2>
<p><b>jQuery</b> is a lightweight, "write less, do more", JavaScript library. The purpose of jQuery is to
make it much easier to use JavaScript on your website. jQuery takes a lot of common tasks that
require many lines of JavaScript code to accomplish, and wraps them into methods that you can call
with a single line of code.</p>
</div>
</div>
</div>
</section>
<!----project section-->
<section id="projects">
<div class="projects container">
<div class="projects-header">
<h1 class="section-title" id="Certificates" style="text-shadow: 0 0 30px white">Certificates</h1>
</div>
<div class="all-projects"></div>
<div class="projects-item">
<div class="projects-info">
<h1 style="text-align: center;">Certificate 1</h1>
<h2 style="text-align: center;">Complete Front-end Web development</h2>
<p>Completed "Front-end Web development" from #UDEMY.It taught me<br>
*basic html to advanced html and css,<br>
*JavaScript concepts<br>
*JQERY,*Bootstrap basic.
</p>
</div>
<div class="projects-img">
<img src="udemycerti1.jpg" alt="certificate">
</div>
</div>
<div class="projects-item">
<div class="projects-info">
<h1 style="text-align: center;">Certificate 2</h1>
<h2 style="text-align: center;">Bootstrap<br> and jQuery</h2>
<p>Completed Bootstrap <br>development and Jquery development from #UDEMY.<br>It taught me,
*Bootstrap basic page<br> structure,tables,wells,Alerts,<br>Column layouts,Typography,Buttons,
Badges,Labels,Pager Pagination,Collapse panel,dynamics tabs and pills,Inputs,Carousel,
Tooltip.....etc<br>
*JQERY syntex,Id class selector,Events handlers,Toggle,Fade in out,slide up down,Animation,
Callback functions,attribute menu,Toggle class....etc.</p>
</div>
<div class="projects-img">
<img src="udemycerti2.jpg" alt="certificate">
</div>
</div>
<div class="projects-item">
<div class="projects-info">
<h1 style="text-align: center;">Certificate 3</h1>
<h2 style="text-align: center;">JQUERY for<br>Beginner</h2>
<p>
Completed Basics Of Jquery<br> for beginners from<br>#UDEMY.It taught me<br>
* Juery Basics Like What is <br>jquery and downloading Jquery,<br>Selectors,filters,Replacing contents,Hover effect,
Fading,Animate,Slide.<br>
* advanced selectors,Creating content,modifying content,Inserting content.</p>
</div>
<div class="projects-img">
<img src="udemycerti3.jpg" alt="certificate">
</div>
</div>
<div class="projects-item">
<div class="projects-info">
<h1 style="text-align: center;">Certificate 4</h1>
<h2 style="text-align: center;">CSS Flexbox</h2>
<p>Completed CSS flexbox from #UDEMY.It taught me<br>
* Flex Axis,Flex-direction,Flex-direction,Flex-Wrap,Flex-Flow,property of justify and align Content<br>
* Flex-grow,Flex-shrink,holy Grail Layout,Flexbox Prefixing,Nd creating a page with recipe cards.</p>
</div>
<div class="projects-img">
<img src="udemyflex.jpg" alt="certificate">
</div>
</div>
</div>
</section>
<!--end projects section-->
<!---start about me section-->
<section id="about">
<div class="about cont"></div>
<div class="left">
<div class="about-img">
<img src="zzz.jpg" alt="image">
</div>
</div>
<div class="right">
<h1 class="section-title" id="About">ABOUT ME</h1>
<h2>Front End Web Developer</h2>
<p class="para">I am an undergraduate Sophomore Year Student
currently undertaking a Bachelors course in Computer science and Engineering
at <b>SATHYABAMA INSTITUTE OF SCIENCE AND TECHNOLOGY</b>.
<b>I am always energetic,hardworking and eager to learn new skills.I love to learn.
And Passionate whatever I choose to do.</b>.I can also call myself hardworking because
whatever I do, I do it diligently and till that work is done,I do not stop pursuing it.
I have an experience of working on front-end website.I completed front-end form w3 school,progate,udemy.
I've worked with front-end frameworks like BOOTSTRAP.I am currently working on Backend Development
(Web development with NOdeJS,and React JS).<b>I am looking forward to building new projects.</b><br>
<b>programming languages : <br>C++,C,PYTHON,HTML,<br>
CSS,JAVA,<br>
JAVASCRIPT,JQUERY,<br>
Algo++ and Datastructure<br>
<b>Database : SQL</b>
<b>Language Known : English,Hindi,Bengali</b></p>
<a href="#" class="ctn">Download Resume</a>
</div>
</section>
<!--end about me section-->
<!--start of contact section-->
<section id="contact">
<div class="contact container">
<div><h1 class="section-title" id="Contact">CONTACT INFO</h1></div>
<div class="contact-items">
<div class="contact-item">
<div class="icon"><img src="phoneicon.png"></div>
<div class="contact-info">
<h1>PHONE</h1>
<h2>9540702942</h2>
</div>
</div>
<div class="contact-items">
<div class="contact-item">
<div class="icon"><img src="emailicon.png"></div>
<div class="contact-info">
<h1>EMAIL</h1>
<h2>[email protected]</h2>
<h2>[email protected]</h2>
</div>
</div>
<div class="contact-items">
<div class="contact-item">
<div class="icon"><img src="linkedlnicon.png"></div>
<div class="contact-info">
<h1>LINKEDLN</h1>
<h2>https://www.linkedin.com/in/
<br>zahin-ekbal-49016a16b</h2>
</div>
</div>
</div>
</div>
</section>
<!---end of contact section-->
<!---footer-->
<section id="footer">
<div class="footer container">
<h1>Any Query/Sms</h1>
<h2>Type here</h2>
<div class="form">
<input type="text" name="name" id="name" placeholder="Enter your name">
<input type="text" name="phone" id="phone" placeholder="Enter your phone">
<input type="email" name="email" id="email" placeholder="Enter your email">
</div>
<a href="#" class="ctn">Submit</a>
<h3>You can also text me here...</h3>
<div class="social-icon">
<div class="social-item">
<a href="#"><img src="https://img.icons8.com/cute-clipart/64/000000/facebook-new.png"/></a>
</div>
<div class="social-icon">
<div class="social-item">
<a href="#"><img src="instaicon.png"/></a>
</div>
<div class="social-icon">
<div class="social-item">
<a href="#"><img src="https://img.icons8.com/cute-clipart/64/000000/twitter.png"/></a>
</div>
</div>
</div>
</section>
<!---end of footer-->
<script src="resp.js"></script>
</body>
</html>
Binary file added Portfolio-Websites/ZahinEkbal/instaicon.png
View file
Open in desktop
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 Portfolio-Websites/ZahinEkbal/javascripticon.png
View file
Open in desktop
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 Portfolio-Websites/ZahinEkbal/jqueryicon.png
View file
Open in desktop
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 Portfolio-Websites/ZahinEkbal/linkedlnicon.png
View file
Open in desktop
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 Portfolio-Websites/ZahinEkbal/phoneicon.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 8 additions & 0 deletions Portfolio-Websites/ZahinEkbal/resp.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
burger = document.querySelector('.burger')
navbar = document.querySelector('.navbar')
navList = document.querySelector('.nav-list')

burger.addEventListener('click', ()=>{
navList.classList.toggle('v-class-resp');
navbar.classList.toggle('h-nav-resp');
});
Loading