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

Add hero section with socials connect #25

Closed
wants to merge 34 commits into from
Closed

Add hero section with socials connect #25

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
34 commits
Select commit Hold shift + click to select a range
ff77f78
add comments to index
namita0210 Dec 29, 2023
b78f730
add comments to style
namita0210 Dec 29, 2023
d9d6469
declare certification section, add certification to navbar
namita0210 Dec 29, 2023
f7ec503
create box-1 and box-2 divs in section certification
namita0210 Dec 29, 2023
1b594a6
add div for heading in certification section
namita0210 Dec 29, 2023
61d44f9
add second dive in div-box-1
namita0210 Dec 29, 2023
93f02d0
add div-box-button to store buttons
namita0210 Dec 29, 2023
907db2d
add buttons in certification
namita0210 Dec 29, 2023
446ad14
add div in box-2
namita0210 Dec 29, 2023
85c79a9
styling for - content, box-1, box-2, buttons, image layout
namita0210 Dec 29, 2023
502cbe3
import certification img to directory
namita0210 Dec 29, 2023
c3bf358
style anchor tags
namita0210 Dec 29, 2023
d2db9cc
add certifications to existing styling for sections
namita0210 Dec 29, 2023
4465200
add correct class to certification section html
namita0210 Dec 29, 2023
83b803a
changed section to div
namita0210 Dec 29, 2023
82ece34
reverted section-div changes
namita0210 Dec 29, 2023
4f7d63b
h2 styling
namita0210 Dec 29, 2023
7f880a1
last changes
namita0210 Dec 29, 2023
92a3c30
changed links of buttons to google
namita0210 Dec 29, 2023
d085255
added certifications link to navbar
namita0210 Dec 29, 2023
9dc303d
removed certifications img file
namita0210 Dec 29, 2023
0ea4f70
removed and added - from stage one
namita0210 Dec 29, 2023
df28503
reset to stage - 1
namita0210 Dec 29, 2023
5a634c1
reset to commits
namita0210 Dec 29, 2023
732d8b3
add hero code - html
namita0210 Dec 29, 2023
a0431cc
hero styling
namita0210 Dec 29, 2023
a473bca
add img to directory
namita0210 Dec 29, 2023
5b2ba14
replace old img
namita0210 Dec 29, 2023
ee23cc4
removed header tags
namita0210 Dec 29, 2023
56f8caf
removed socials from hero div
namita0210 Dec 29, 2023
ed20235
add socials to about section top
namita0210 Dec 29, 2023
b2c297b
make page font color black
namita0210 Dec 29, 2023
692de33
final changes
namita0210 Dec 29, 2023
bc740ea
Merge branch 'SnowScriptWinterOfCode:main' into hero
namita0210 Dec 29, 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
Binary file added img_hero.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.
250 changes: 153 additions & 97 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,110 +1,166 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Your Name - Portfolio</title>
</head>
<body>

<nav>
<div class="container">
<ul>
<li><a href="#about">About Me</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<!DOCTYPE html>
<html lang="en">

<head> <!--head start-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="styles.css">
<title>Your Name - Portfolio</title>
</head> <!-- head end-->

<body> <!--Body=========================================================================================================-->

<nav><!--Navbar Start------------------------------------------------------------------------------------------------->
<div class="container">
<ul>
<li><a href="#about">About Me</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</nav> <!--Navbar End------------------------------------------------------------------------------------------------>

<!--Header start--------------------------------------------------------------------------------------------->
<div class="hero-section"> <!--hero section div-->

<div class="hero-intro"> <!--Introduction-->
<h2>Software Engineer</h2>

<p class="hero-para">A passionate web developer currently in my second year at IGDTUW. My journey in the world of technology began with a deep curiosity for how things work on the web.
In my courses at IGDTUW, I've gained a solid foundation in programming languages like HTML, CSS, and JavaScript. I'm enthusiastic about creating responsive and visually appealing websites that not only meet functional requirements but also deliver a delightful user experience.
My interest in web development extends beyond the classroom. I actively participate in coding competitions, hackathons, and collaborative projects, continuously enhancing my skills and staying abreast of the latest industry trends.</p>
</p>
</div> <!--Intro End-->


</div> <!--hero section div End-->

<!--Header End---------------------------------------------------------------------------------------------->

<!--About Section Start--------------------------------------------------------->
<!--start--> <h2 style=" background-color: #f5f5f5;">CONNECT WITH ME AT</h2>
<div class="hero-socials"> <!--Socials-->
<ul class="socials">
<li>
<a href="https://www.medium.com">
<i class="fa-brands fa-medium"></i>
</a>
</li>
<li>
<a href="https://www.linkedin.com">
<i class="fa-brands fa-linkedin"></i>
</a>
</li>
<li>
<a href="https://www.github.com">
<i class="fa-brands fa-square-github"></i>
</a>
</li>
<li>
<a href="https://www.google.com">
<i class="fa-solid fa-envelope"></i>
</a>
</li>
<li>
<a href="https://www.twitter.com">
<i class="fa-brands fa-square-twitter"></i>
</a>
</li>
</ul>
</div><!--Socials End-->

<!--end-->
<div class="container">
<h1>About Me</h1>
<p>A passionate web developer currently in my second year at IGDTUW. My journey in the world of technology began with a deep curiosity for how things work on the web.
In my courses at IGDTUW, I've gained a solid foundation in programming languages like HTML, CSS, and JavaScript. I'm enthusiastic about creating responsive and visually appealing websites that not only meet functional requirements but also deliver a delightful user experience.
My interest in web development extends beyond the classroom. I actively participate in coding competitions, hackathons, and collaborative projects, continuously enhancing my skills and staying abreast of the latest industry trends.</p>
As a second-year student, I look forward to further expanding my knowledge, tackling challenging projects, and contributing to the dynamic field of web development. Let's connect and explore the possibilities together!</p>
</div>

<!--About Section End------------------------------------------------------------------------------------->

<section id="projects" class="projects"><!--Project Section Start----------------------------------------------------->

<div class="container">

<h1>Projects</h1>

<div class="project">
<h3>Project 1</h3>
<p>A dynamic web application showcasing my skills in HTML, CSS, and JavaScript. Implemented responsive design for optimal user experience.</p>
<p>Skills and Tools: HTML, CSS, JavaScript</p>
<button><a href="https://example-project1-live-website.com" target="_blank">Live Website</a></button>
<button><a href="https://github.com/your-username/project1" target="_blank">GitHub Repo</a></button>
</div>
</nav>
<header>
<div class="container">
<p>Hey there👋 ! <p>
<h1> I am &lt;Your Name&gt;</h1>

<div class="project">
<h3>Project 2</h3>
<p>Developed a full-stack web application using Node.js and MongoDB. Implemented user authentication and integrated third-party APIs for enhanced functionality.</p>
<p>Skills and Tools: HTML, CSS, JavaScript, Node.js, MongoDB</p>
<button><a href="https://example-project1-live-website.com" target="_blank">Live Website</a></button>
<button><a href="https://github.com/your-username/project1" target="_blank">GitHub Repo</a></button>
</div>
</header>

<section id="about" class="about-me">
<div class="container">
<h1>About Me</h1>
<p>A passionate web developer currently in my second year at IGDTUW. My journey in the world of technology began with a deep curiosity for how things work on the web.
In my courses at IGDTUW, I've gained a solid foundation in programming languages like HTML, CSS, and JavaScript. I'm enthusiastic about creating responsive and visually appealing websites that not only meet functional requirements but also deliver a delightful user experience.
My interest in web development extends beyond the classroom. I actively participate in coding competitions, hackathons, and collaborative projects, continuously enhancing my skills and staying abreast of the latest industry trends.</p>
As a second-year student, I look forward to further expanding my knowledge, tackling challenging projects, and contributing to the dynamic field of web development. Let's connect and explore the possibilities together!</p>

<div class="project">
<h3>Project 3</h3>
<p>Built a mobile-responsive website using React.js. Integrated state management for a seamless user interface and employed RESTful API communication.</p>
<p>Skills and Tools: HTML, CSS, JavaScript, React.js</p>
<button><a href="https://example-project1-live-website.com" target="_blank">Live Website</a></button>
<button><a href="https://github.com/your-username/project1" target="_blank">GitHub Repo</a></button>
</div>
</section>

<section id="projects" class="projects">
<div class="container">
<h1>Projects</h1>

<div class="project">
<h3>Project 1</h3>
<p>A dynamic web application showcasing my skills in HTML, CSS, and JavaScript. Implemented responsive design for optimal user experience.</p>
<p>Skills and Tools: HTML, CSS, JavaScript</p>
<button><a href="https://example-project1-live-website.com" target="_blank">Live Website</a></button>
<button><a href="https://github.com/your-username/project1" target="_blank">GitHub Repo</a></button>

</div>

</section><!--Project Section End------------------------------------------------------------------------------------>

<section id="contact" class="contact"><!--Contact Section Start----------------------------------------------------->

<div class="container">
<h1>Contact Me</h1>

<div class="contact-info">

<div class="contact-item">
<img src="" alt="Email Icon">
<p>Email: <a href="mailto:[email protected]">[email protected]</a></p>
</div>

<div class="project">
<h3>Project 2</h3>
<p>Developed a full-stack web application using Node.js and MongoDB. Implemented user authentication and integrated third-party APIs for enhanced functionality.</p>
<p>Skills and Tools: HTML, CSS, JavaScript, Node.js, MongoDB</p>
<button><a href="https://example-project1-live-website.com" target="_blank">Live Website</a></button>
<button><a href="https://github.com/your-username/project1" target="_blank">GitHub Repo</a></button>
<div class="contact-item">
<img src="" alt="Phone Icon">
<p>Phone: <a href="tel:+123456789">+123 456 789</a></p>
</div>

<div class="project">
<h3>Project 3</h3>
<p>Built a mobile-responsive website using React.js. Integrated state management for a seamless user interface and employed RESTful API communication.</p>
<p>Skills and Tools: HTML, CSS, JavaScript, React.js</p>
<button><a href="https://example-project1-live-website.com" target="_blank">Live Website</a></button>
<button><a href="https://github.com/your-username/project1" target="_blank">GitHub Repo</a></button>
<div class="contact-item">
<img src="" alt="Address Icon">
<p>Address: 123 Main St, Cityville, Country</p>
</div>

</div>
</section>


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

<div class="contact-info">
<div class="contact-item">
<img src="" alt="Email Icon">
<p>Email: <a href="mailto:[email protected]">[email protected]</a></p>
</div>

<div class="contact-item">
<img src="" alt="Phone Icon">
<p>Phone: <a href="tel:+123456789">+123 456 789</a></p>
</div>

<div class="contact-item">
<img src="" alt="Address Icon">
<p>Address: 123 Main St, Cityville, Country</p>
</div>

<div class="contact-item">
<img src="" alt="LinkedIn Icon">
<p>LinkedIn: <a href="https://www.linkedin.com/in/yourusername/" target="_blank">Your LinkedIn</a></p>
</div>

<div class="contact-item">
<img src="" alt="Twitter Icon">
<p>Twitter: <a href="https://twitter.com/yourusername" target="_blank">Your Twitter</a></p>
</div>
<div class="contact-item">
<img src="" alt="LinkedIn Icon">
<p>LinkedIn: <a href="https://www.linkedin.com/in/yourusername/" target="_blank">Your LinkedIn</a></p>
</div>

<div class="contact-item">
<img src="" alt="Twitter Icon">
<p>Twitter: <a href="https://twitter.com/yourusername" target="_blank">Your Twitter</a></p>
</div>

</div>
</section>
<footer>
<div class="container">
<p>&copy; 2023 Your Name. All rights reserved.</p>
</div>
</footer>

<script src="script.js"></script>
</body>
</html>
</div>

</section><!--Contact Section End-------------------------------------------------------------------------------->

<footer><!--Footer Start----------------------------------------------------------------------------------------->
<div class="container">
<p>&copy; 2023 Your Name. All rights reserved.</p>
</div>
</footer><!--Footer End------------------------------------------------------------------------------------------->

<script src="script.js"></script>

</body><!--Body End==================================================================================================-->

</html>
Binary file added lmao.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.
Loading