Skip to content

Commit 12f8de6

Browse files
sahandghavidelsahandghavidel
committed
add projects
1 parent d35989c commit 12f8de6

122 files changed

Lines changed: 4017 additions & 0 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎index.js‎

Whitespace-only changes.

‎projects/Navbar-project/index.html‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Sahand Ghavidel</title>
8+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
9+
<link rel="stylesheet" href="styles.css">
10+
</head>
11+
<body>
12+
<nav>
13+
<div class="nav-main">
14+
<div class="nav-header">
15+
<img src="./logo.svg" alt="logo">
16+
<i class="fa fa-bars" aria-hidden="true"></i>
17+
</div>
18+
<ul class="menu">
19+
<li>
20+
<a href="#">Home</a>
21+
</li>
22+
<li>
23+
<a href="#">About</a>
24+
</li>
25+
<li>
26+
<a href="#">Contact</a>
27+
</li>
28+
</ul>
29+
</div>
30+
31+
</nav>
32+
<script src="index.js"></script>
33+
</body>
34+
</html>

‎projects/Navbar-project/index.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
const bar = document.querySelector(".fa-bars");
2+
const menu = document.querySelector(".menu");
3+
4+
bar.addEventListener("click", () => {
5+
menu.classList.toggle("show-menu");
6+
});

‎projects/Navbar-project/logo.svg‎

Lines changed: 2 additions & 0 deletions
Loading

‎projects/Navbar-project/styles.css‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
body {
2+
margin: 0;
3+
padding: 0;
4+
font-family: sans-serif;
5+
background: #f1f5f8;
6+
line-height: 2.2;
7+
font-size: 0.875rem;
8+
}
9+
10+
ul {
11+
list-style-type: none;
12+
}
13+
14+
a {
15+
text-decoration: none;
16+
}
17+
18+
nav {
19+
background: white;
20+
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
21+
}
22+
23+
.fa-bars {
24+
font-size: 1.5rem;
25+
color: #e94949;
26+
cursor: pointer;
27+
}
28+
29+
.fa-bars:hover {
30+
color: black;
31+
}
32+
33+
.menu a {
34+
color: grey;
35+
letter-spacing: 0.1rem;
36+
display: block;
37+
padding: 0.5rem 1rem;
38+
transition: all 0.3s linear;
39+
}
40+
41+
.menu a:hover {
42+
background: #f8a5a5;
43+
color: #e94949;
44+
padding-left: 1.5rem;
45+
}
46+
47+
.menu {
48+
height: 0;
49+
overflow: hidden;
50+
transition: all 0.3s linear;
51+
}
52+
53+
.show-menu {
54+
height: 10rem;
55+
}
56+
57+
.nav-header {
58+
display: flex;
59+
align-items: center;
60+
justify-content: space-between;
61+
padding: 1rem;
62+
}
63+
64+
@media (min-width: 800px) {
65+
.nav-main {
66+
max-width: 1170px;
67+
margin: 0 auto;
68+
display: flex;
69+
align-items: center;
70+
justify-content: space-between;
71+
padding: 1rem;
72+
}
73+
74+
.nav-header {
75+
padding: 0;
76+
}
77+
.fa-bars {
78+
display: none;
79+
}
80+
81+
.menu {
82+
height: auto;
83+
display: flex;
84+
}
85+
86+
.menu a {
87+
padding: 0;
88+
margin: 0 0.5rem;
89+
}
90+
.menu a:hover {
91+
padding: 0;
92+
background: transparent;
93+
}
94+
}

‎projects/Q&A-section/app.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
const questions = document.querySelectorAll(".question");
2+
3+
questions.forEach(function (question) {
4+
const btn = question.querySelector(".question-btn");
5+
6+
btn.addEventListener("click", function () {
7+
question.classList.toggle("show-text");
8+
});
9+
});

‎projects/Q&A-section/index.html‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Q & A</title>
7+
<!-- font-awesome -->
8+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" />
9+
10+
<link rel="stylesheet" href="styles.css" />
11+
</head>
12+
<body>
13+
<section class="questions">
14+
<!-- questions -->
15+
<div class="section-center">
16+
<!-- single question -->
17+
<article class="question">
18+
<!-- question title -->
19+
<div class="question-title">
20+
<p>do you accept all major credit cards?</p>
21+
<button type="button" class="question-btn">
22+
<span class="plus-icon">
23+
<i class="far fa-plus-square"></i>
24+
</span>
25+
<span class="minus-icon">
26+
<i class="far fa-minus-square"></i>
27+
</span>
28+
</button>
29+
</div>
30+
<!-- question text -->
31+
<div class="question-text">
32+
<p>
33+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est
34+
dolore illo dolores quia nemo doloribus quaerat, magni numquam
35+
repellat reprehenderit.
36+
</p>
37+
</div>
38+
</article>
39+
<!-- end of single question -->
40+
<!-- single question -->
41+
<article class="question">
42+
<!-- question title -->
43+
<div class="question-title">
44+
<p>do you suppport local farmers?</p>
45+
<button type="button" class="question-btn">
46+
<span class="plus-icon">
47+
<i class="far fa-plus-square"></i>
48+
</span>
49+
<span class="minus-icon">
50+
<i class="far fa-minus-square"></i>
51+
</span>
52+
</button>
53+
</div>
54+
<!-- question text -->
55+
<div class="question-text">
56+
<p>
57+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est
58+
dolore illo dolores quia nemo doloribus quaerat, magni numquam
59+
repellat reprehenderit.
60+
</p>
61+
</div>
62+
</article>
63+
<!-- end of single question -->
64+
<!-- single question -->
65+
<article class="question">
66+
<!-- question title -->
67+
<div class="question-title">
68+
<p>do you use organic ingredients?</p>
69+
<!-- button -->
70+
<button type="button" class="question-btn">
71+
<span class="plus-icon">
72+
<i class="far fa-plus-square"></i>
73+
</span>
74+
<span class="minus-icon">
75+
<i class="far fa-minus-square"></i>
76+
</span>
77+
</button>
78+
</div>
79+
<!-- question text -->
80+
<div class="question-text">
81+
<p>
82+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe, obcaecati. Esse maxime doloremque, libero, repellat quae debitis quis illo ab odio vero iste molestias accusantium expedita dolorum ipsam officia nesciunt?.
83+
</p>
84+
</div>
85+
</article>
86+
<!-- end of single question -->
87+
</section>
88+
</main>
89+
<!-- javascript -->
90+
<script src="app.js"></script>
91+
</body>
92+
</html>

‎projects/Q&A-section/styles.css‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
/*
2+
===============
3+
Fonts
4+
===============
5+
*/
6+
7+
/*
8+
===============
9+
Variables
10+
===============
11+
*/
12+
13+
:root {
14+
/* dark shades of primary color*/
15+
--clr-primary-1: hsl(205, 86%, 17%);
16+
--clr-primary-2: hsl(205, 77%, 27%);
17+
--clr-primary-3: hsl(205, 72%, 37%);
18+
--clr-primary-4: hsl(205, 63%, 48%);
19+
/* primary/main color */
20+
--clr-primary-5: #49a6e9;
21+
/* lighter shades of primary color */
22+
--clr-primary-6: hsl(205, 89%, 70%);
23+
--clr-primary-7: hsl(205, 90%, 76%);
24+
--clr-primary-8: hsl(205, 86%, 81%);
25+
--clr-primary-9: hsl(205, 90%, 88%);
26+
--clr-primary-10: hsl(205, 100%, 96%);
27+
/* darkest grey - used for headings */
28+
--clr-grey-1: hsl(209, 61%, 16%);
29+
--clr-grey-2: hsl(211, 39%, 23%);
30+
--clr-grey-3: hsl(209, 34%, 30%);
31+
--clr-grey-4: hsl(209, 28%, 39%);
32+
/* grey used for paragraphs */
33+
--clr-grey-5: hsl(210, 22%, 49%);
34+
--clr-grey-6: hsl(209, 23%, 60%);
35+
--clr-grey-7: hsl(211, 27%, 70%);
36+
--clr-grey-8: hsl(210, 31%, 80%);
37+
--clr-grey-9: hsl(212, 33%, 89%);
38+
--clr-grey-10: hsl(210, 36%, 96%);
39+
--clr-white: #fff;
40+
--clr-red-dark: hsl(360, 67%, 44%);
41+
--clr-red-light: hsl(360, 71%, 66%);
42+
--clr-green-dark: hsl(125, 67%, 44%);
43+
--clr-green-light: hsl(125, 71%, 66%);
44+
--clr-gold: #c59d5f;
45+
--clr-black: #222;
46+
--ff-primary: "Roboto", sans-serif;
47+
--ff-secondary: "Open Sans", sans-serif;
48+
--transition: all 0.3s linear;
49+
--spacing: 0.25rem;
50+
--radius: 0.5rem;
51+
--light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
52+
--dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
53+
--max-width: 1170px;
54+
--fixed-width: 620px;
55+
}
56+
/*
57+
===============
58+
Global Styles
59+
===============
60+
*/
61+
62+
body {
63+
margin: 0;
64+
padding: 0;
65+
font-family: sans-serif;
66+
background: #ebebeb;
67+
}
68+
69+
p {
70+
margin-bottom: 1.25rem;
71+
color: grey;
72+
}
73+
74+
.section-center {
75+
width: 90vw;
76+
margin: 50px auto 0;
77+
max-width: 620px;
78+
}
79+
.question {
80+
background: white;
81+
border-radius: 0.5rem;
82+
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
83+
padding: 1.5rem 1.5rem 0 1.5rem;
84+
margin-bottom: 2rem;
85+
}
86+
.question-title {
87+
display: flex;
88+
justify-content: space-between;
89+
align-items: center;
90+
text-transform: capitalize;
91+
padding-bottom: 1rem;
92+
}
93+
94+
.question-title p {
95+
letter-spacing: 0.1rem;
96+
color: yellowgreen;
97+
font-weight: bolder;
98+
}
99+
.question-btn {
100+
font-size: 1.5rem;
101+
background: transparent;
102+
border-color: transparent;
103+
cursor: pointer;
104+
color: yellowgreen;
105+
}
106+
107+
.question-text {
108+
padding: 1rem 0 1.5rem 0;
109+
border-top: 1px solid grey;
110+
}
111+
112+
/* hide text */
113+
.question-text {
114+
display: none;
115+
}
116+
.show-text .question-text {
117+
display: block;
118+
}
119+
.minus-icon {
120+
display: none;
121+
}
122+
.show-text .minus-icon {
123+
display: inline;
124+
}
125+
.show-text .plus-icon {
126+
display: none;
127+
}

‎projects/Sidebar-project/index.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Sahand Ghavidel</title>
8+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
9+
<link rel="stylesheet" href="styles.css">
10+
</head>
11+
<body>
12+
<i class="fa fa-bars" aria-hidden="true"></i>
13+
14+
<div class="sidebar">
15+
<div class="sidebar-header">
16+
<img class="logo" src="logo.svg" alt="logo">
17+
<i class="fa fa-times" aria-hidden="true"></i>
18+
</div>
19+
<ul class="menu">
20+
<li><a href="#">Home</a></li>
21+
<li><a href="#">About</a></li>
22+
<li><a href="#">Contact</a></li>
23+
</ul>
24+
</div>
25+
<script src="index.js"></script>
26+
</body>
27+
</html>

0 commit comments

Comments
 (0)