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

Faq section #29

Merged
merged 2 commits into from
Jan 1, 2024
Merged

Faq section #29

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cac10c2
issue #6 addinng skills section
aarushisingh2004 Dec 30, 2023
3701122
adding faq section #6 issue
aarushisingh2004 Dec 30, 2023
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
96 changes: 95 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<title>Your Name - Portfolio</title>
</head>
<body>
Expand All @@ -14,6 +16,10 @@
<li><a href="#about">About Me</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
<!-- added the skills and FAQ section -->
<li><a href="#Skills">Skills</a></li>
<li><a href="#Testimonials">Testimonials</a></li>
<li><a href="#FAQ">FAQ</a></li>
</ul>
</div>
</nav>
Expand Down Expand Up @@ -66,8 +72,96 @@ <h3>Project 3</h3>
</div>
</section>

<!-- Skills section -->
<section class="skills">
<div class="container">
<h2>Skills</h2>

<div class="skill-category">
<h3>Frontend Development</h3>
<div class="skills-list">
<div class="skill">
<div class="skill-icon">
<i class="fab fa-html5"></i>
</div>
<span>HTML5</span>
</div>
<div class="skill">
<div class="skill-icon">
<i class="fab fa-css3-alt"></i>
</div>
<span>CSS3</span>
</div>
<div class="skill">
<div class="skill-icon">
<i class="fab fa-js"></i>
</div>
<span>JavaScript</span>
</div>
<div class="skill">
<div class="skill-icon">
<i class="fab fa-react"></i>
</div>
<span>React.js</span>
</div>
<!-- Add more skills with similar structure -->
</div>
</div>

<div class="skill-category">
<h3>Backend Development</h3>
<div class="skills-list">
<div class="skill">
<div class="skill-icon">
<i class="fab fa-node"></i>
</div>
<span>Node.js</span>
</div>
<div class="skill">
<div class="skill-icon">
<i class="fas fa-database"></i>
</div>
<span>MongoDB</span>
</div>
<!-- Add more skills with similar structure -->
</div>

</section>


<!-- FAQ section -->

<section class="faq">
<div class="container">
<h2>Frequently Asked Questions</h2>

<details>
<summary>In which year do I study?</summary>
<p>I study currently in 2nd year.</p>
</details>

<details>
<summary>Am I a member of any of the college societies?</summary>
<p>Yes , I am the member of __name of societies__</p>
</details>
<details>
<summary>What are my hobbies?</summary>
<p>I have various hobbies , I like to __name of hobbies__</p>
</details>


</div>
</section>









<section id="contact" class="contact">
<section id="contact" class="contact">
<div class="container">
<h1>Contact Me</h1>

Expand Down
232 changes: 232 additions & 0 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,3 +99,235 @@ footer {
text-align: center;
padding: 10px 0;
}

/* style given to skill section */
/* Icon library - Add a link to Font Awesome or any other icon library */
/* Example: Font Awesome */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');

/* Skills section styling */
.skills {
padding: 50px 0;
text-align: center;
}

.container {
width: 80%;
margin: 0 auto;
}

h2 {
color: #0277bd; /* Darker blue for headers */
}

.skill-category {
margin-top: 40px;
}

.skill-category h3 {
color: #01579b; /* Dark blue for category headers */
}

.skills-list {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 20px;
margin-top: 20px;
}

.skill {
background-color: #ffffff;
padding: 15px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease-in-out;
}

.skill:hover {
transform: translateY(-5px);
}

.skill i {
font-size: 40px;
color: #0277bd;
margin-bottom: 10px;
display: block;
}

.skill span {
color: #01579b;
font-weight: bold;
}

/* design of skills section */


@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');


.skills {
background-color: #e0f7fa;
padding: 50px 0;
}

.container {
width: 80%;
margin: 0 auto;
}

h2 {
color: #0277bd;
font-size: 2em;
margin-bottom: 20px;
}

.skill-category {
margin-top: 40px;
}

.skill-category h3 {
color: #01579b;
font-size: 1.5em;
margin-bottom: 15px;
}

.skills-list {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: flex-start;
}

.skill {
background-color: #ffffff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease-in-out;
width: 200px;
margin-bottom: 20px;
}

.skill:hover {
transform: translateY(-5px);
}

.skill-icon {
font-size: 40px;
color: #0277bd;
margin-bottom: 10px;
}

.skill span {
color: #01579b;
font-weight: bold;
display: block;
}

/* style of FAQ section */

/* FAQ section styling */
.faq {
background-color: #f5f5f5;
padding: 50px 0;
text-align: center;
}

.container {
width: 80%;
margin: 0 auto;
}

h2 {
color: #333;
font-size: 2em;
margin-bottom: 30px;
}

.faq-item {
margin-bottom: 20px;
}

.question {
background-color: #0277bd;
color: #fff;
border: none;
border-radius: 5px;
padding: 15px 20px;
font-size: 1em;
cursor: pointer;
transition: background-color 0.3s ease;
width: 100%;
text-align: left;
}

.question:hover {
background-color: #01579b;
}

.answer {
display: none;
padding: 15px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 5px;
margin-top: 10px;
text-align: left;
}

.answer p {
margin: 0;
}

/* FAQ section */
/* FAQ section styling */
.faq {
background-color: #f5f5f5;
padding: 50px 0;
text-align: left; /* Align content to the left */
}

.container {
width: 80%;
margin: 0 auto;
}

h2 {
color: #333;
font-size: 2em;
margin-bottom: 30px;
}

details {
margin-bottom: 20px;
border-radius: 5px;
overflow: hidden;
}

summary {
background-color: #0277bd;
color: #fff;
padding: 15px 20px;
font-size: 1em;
cursor: pointer;
outline: none;
}

summary::-webkit-details-marker {
display: none;
}

summary:focus {
outline: none;
}

p {
background-color: #fff;
padding: 15px;
margin: 0;
border: 1px solid #ddd;
border-top: none;
border-radius: 0 0 5px 5px;
text-align: left;
}