Skip to content

Add files via upload #1

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

Open
wants to merge 8 commits into
base: main
Choose a base branch
from
Open

Add files via upload #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
b8c5ddc
Add files via upload
Babak-BashirZadeh Jan 15, 2025
65584dd
Update index.html
Babak-BashirZadeh Jan 15, 2025
9b2401d
upload html-css week 2 homework
Babak-BashirZadeh Jan 22, 2025
e53dd6e
Update index.html
Babak-BashirZadeh Jan 22, 2025
dad9eef
for mobile mode i changed flex-direction into flex-wrap
Jan 28, 2025
e6a2276
i leave a blank between each selector for make css file more clear an…
Jan 28, 2025
229661d
moved script into head
Jan 28, 2025
04834c4
fixed button id
Jan 28, 2025
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
57 changes: 57 additions & 0 deletions html-css/week1/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Babak | Portfolio | Web developer</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
</head>
<body>
<nav>
<ul class="navbar">
<li><a href="#header"><span class="navicon"><ion-icon name="home-outline"></ion-icon></span>Home</a></li>
<li><a href="#about"><span class="navicon"><ion-icon name="planet-outline"></ion-icon></span>About</a></li>
<li><a href="#skills"><span class="navicon"><ion-icon name="barbell-outline"></ion-icon></span>Skills</a></li>
<li><a href="#portfolio"><span class="navicon"><ion-icon name="rocket-outline"></ion-icon></ion-icon></span>Portfolio</a></li>
<li><a href="#contact"><span class="navicon"><ion-icon name="paper-plane-outline"></ion-icon></span>Contact</a></li>
</ul>
Comment on lines +14 to +20
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You don't need to create a list here; you could just nest the a tags inside the nav (and reshuffle your CSS properties a bit)

</nav>
<header id="header">
<h1>Hi! I'm <span class="namespan">Babak</span></h1>
<p>I am a web developer who brings ideas to life :)</p>
</header>
<section>
<h2>About Me</h2>
<p class="about">Babak, is a web developer who always have passion for learning new methods and techs, those two with combination of creativity and efforts, make dreams come true. On the other side, he never forget to maintain a work-life balance (At least he tries)!</p>
</section>
<section id="skills">
<h2>Skills</h2>
<div class="skillitem">
<p class="item">HTML</p>
<p class="item">CSS</p>
<p class="item">JavaScript</p>
<p class="item">Agile</p>
</div>
</section>
<section id="portfolio">
<h2>Portfolio</h2>
<div class="project">
<h3>FCC Survey Form</h3>
<p>This is my first project after 2 days learning HTML and CSS. I know it could be better, have eyes on next projects ;)</p>
<a href="https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-survey-form-project/build-a-survey-form" target="_blank">View Project(s)</a>
</div>
</section>
<section id="contact">
<h2>Contact Me</h2>
<a id="button" href="babak.bashirzadeh@gmail.com/" target="blank"><i class="fa-solid fa-at"></i> My Email</a>
<a id="button" href="https://www.linkedin.com/in/babak-bashirzadeh/" target="blank"><i class="fa-brands fa-linkedin"></i> My LinkdIn</a>
<a id="button" href="https://github.com/Babak-BashirZadeh" target="blank"><i class="fa-brands fa-github"></i> My GitHub</a>
</section>
<footer>
<p>&copy; 2025 Babak Bashirzadeh. All rights reserved.</p>
</footer>
</body>
</html>
156 changes: 156 additions & 0 deletions html-css/week1/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,156 @@
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
line-height: 1.6;
color: #333;
background-color: #f4f4f9;
}

.navicon{
padding:5px;
}

nav {
background: #333;
color: #fff;
padding: 1rem 0;
position: sticky;
top: 0;
z-index: 1000;
}

.navbar {
list-style: none;
display: flex;
justify-content: center;
margin: 0;
padding: 0;
}

.navbar li {
margin: 0 15px;
}

.navbar a {
color: #fff;
text-decoration: none;
font-weight: bold;
transition: color 0.3s;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice

}

.navbar a:hover {
color: #f4a261;
}

header {
background: #264653;
color: #fff;
text-align: center;
padding: 50px 20px;
}

header h1 {
font-size: 3rem;
margin: 0;
}

.namespan {
color:red
}

header p {
font-size: 1.2rem;
}

section {
padding: 20px;
margin: 20px auto;
max-width: 800px;
background: #fff;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.about {
text-align: justify;
text-justify: inter-word;
margin: 20px;
}

section h2 {
color: #264653;
border-bottom: 2px solid #f4a261;
padding-bottom: 10px;
}

.skillitem{
display: flex;
flex-direction: row;
gap: 15px;
justify-content: center;
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
}

.item {
width: auto;
height: auto;
background-color: lightblue;
padding: 1em;
font-weight: 700;
text-align: center;
border-radius: 10px;
}

.project {
margin: 20px 0;
}

.project a {
color: #e76f51;
text-decoration: none;
font-weight: bold;
}

.project a:hover {
text-decoration: underline;
}

#button {
background-color: green;
border: none;
color: white;
padding: 10px 20px;
font-size: 1.5em;
border-radius: 10px;
font-weight: bold;
}

#button:hover {
background-color: #27ae60;
transition: background-color 0.3s;
}

footer {
text-align: center;
padding: 20px;
background: #333;
color: #fff;
margin-top: 20px;
}

@media (max-width: 600px) {
header h1 {
font-size: 2rem;
}

.navbar {
flex-wrap: wrap;
}

.navbar li {
margin: 10px 0;
}
}
Loading