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

Responsive portfolio using html and css.. #2

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

Responsive portfolio using html and css.. #2

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
df5ab03
portfolio is now responsive.
KaranKumar282828 Oct 30, 2024
a9028f0
Responsive portfolio using html and css..
KaranKumar282828 Oct 30, 2024
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
235 changes: 126 additions & 109 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,128 +27,145 @@

<body>
<!-- The <div> element is a container used to group and style content. In this code, <div> elements with specific classes like "layout," "main_content," "home_page," and "navbar" are used to organize different sections of the webpage. -->
<div class="layout">
<div class="main_content">

<!-- Home Page starts here -->
<div class="home_page">
<div class="home_heading" id="Home">
<!-- Edit here 👇 Change "GDSC IIIT Kalyani" to your own name -->
<div class="intro">Hello <br>I'm <br>GDSC IIIT Kalyani</div>
<!-- Edit here 👇 Add an interesting bio here. Your instagram bio works too 😉 -->
<div class="sub_heading">Lorem, ipsum dolor sit amet consectetur adipisicing elit</div>

<!-- Navbar starts here -->
<div class="navbar">
<div class="logo">
<img src="./assets/logo.png">
</div>
<div class="navbar_list">
<ul class="navbar_content">
<li><a href="#Home">HOME</a></li>
<li><a href="#About">ABOUT</a></li>
<li><a href="#Portfolio">PORTFOLIO</a></li>
</ul>
</div>
</div>

<!-- Home Page starts here -->
<div class="home_page">
<div class="home_heading" id="Home">
<!-- Edit here 👇 Change "GDSC IIIT Kalyani" to your own name -->
<div class="intro">
<p>Hello <br>I'm GDSC IIIT Kalyani</p>
</div>
<!-- Edit here 👇 Add an interesting bio here. Your instagram bio works too 😉 -->
<div class="sub_heading">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, doloribus nesciunt error modi nulla
tempora aperiam officiis. Similique, earum nihil minus ducimus et eligendi natus ad voluptatibus
corporis, architecto praesentium.</p>
</div>
</div>
<div class="profile_pic">
<!-- Edit here 👇 Add your own photo here. Simply download it in the assets folder and update the filename "pfp.png" to match your image's filename -->
<img src="./assets/pfp.png" />
</div>
</div>

<!-- About Page starts here -->
<div class="about_page" id="About">
<div class="about_heading">
<p>About</p>
</div>
<div class="about_me">
<div class="about_me_contents">
NAME: <span>GDSC IIIT Kalyani</span>
<!-- Edit here 👇 Add your name instead of "GDSC IIIT Kalyani" -->
</div>
<div class="about_me_contents">
BIRTHDAY: <span>15th July 2020</span>
<!-- Edit here 👇 Add your birthday -->
</div>
<div class="about_me_contents">
EMAIL: <span>[email protected]</span>
<!-- Edit here 👇 Add your email instead of "[email protected]" -->

</div>
<div class="about_me_contents">
PHONE: <span>(+91)-sickret</span>
<!-- Edit here 👇 Add your phone number. We'll not prank call you. -->

</div>
<div class="profile_pic">
<!-- Edit here 👇 Add your own photo here. Simply download it in the assets folder and update the filename "pfp.png" to match your image's filename -->
<img src="./assets/pfp.png">
<div class="about_me_contents">
LOCATION: <span>Kalyani, West Bengal</span>
<!-- Edit here 👇 Add your location -->
</div>
<div class="about_me_contents">
CONNECT WITH ME
</div>
</div>

<!-- About Page starts here -->
<div class="about_page" id="About">
<div class="about_heading">About</div>
<div class="right_container">
<div class="about_me">
<div class="about_me_contents">
NAME
<!-- Edit here 👇 Add your name instead of "GDSC IIIT Kalyani" -->
<span>GDSC IIIT Kalyani</span>
</div>
<div class="about_me_contents">
BIRTHDAY
<!-- Edit here 👇 Add your birthday -->
<span>15th July 2020</span>
</div>
<div class="about_me_contents">
EMAIL
<!-- Edit here 👇 Add your email instead of "[email protected]" -->
<span>[email protected]</span>
</div>
<div class="about_me_contents">
PHONE
<!-- Edit here 👇 Add your phone number. We'll not prank call you. -->
<span>(+91)-sickret</span>
</div>
<div class="about_me_contents">
LOCATION
<!-- Edit here 👇 Add your location -->
<span>Kalyani, West Bengal</span>
</div>
<div class="about_me_contents">
CONNECT WITH ME
<div></div>
</div>
<div class="skills">
<div class="experiences">
<div class="info">
EDUCATION BACKGROUND <span>B.Tech</span>
<!-- Edit here 👇 Add your Educational Background -->
</div>
<div class="info">
ACADEMIC ACHIEVEMENTS <span>5</span>
<!-- Edit here 👇 Add your Acad Achievements -->
</div>
<div class="skills">
<div class="experiences">
<div class="info">
EDUCATION BACKGROUND
<!-- Edit here 👇 Add your Educational Background -->
<span>BTech</span>
</div>
<div class="info">
ACADEMIC ACHIEVEMENTS
<!-- Edit here 👇 Add your Acad Achievements -->
<span>5</span>
</div>
<div class="info">
EXPERIENCE
<!-- Edit here 👇 Add your Experience -->
<span>2</span>
</div>
<div class="info">
PROJECTS
<!-- Edit here 👇 Add your Projects -->
<span>3</span>
</div>
</div>
<!-- Edit here 👇 Write something about yourself. Something that will help people know you better -->
<div class="description">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima consequatur atque maxime
corrupti debitis, quas magnam autem. Mollitia ipsa illo cumque vero, maxime sunt aut autem
voluptate, iste perspiciatis ducimus.
</div>
<div class="info">
EXPERIENCE <span>2</span>
<!-- Edit here 👇 Add your Experience -->
</div>
<div class="info">
PROJECTS <span>3</span>
<!-- Edit here 👇 Add your Projects -->

</div>
</div>
<!-- Edit here 👇 Write something about yourself. Something that will help people know you better -->
<div class="description">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima consequatur atque maxime
corrupti debitis, quas magnam autem. Mollitia ipsa illo cumque vero, maxime sunt aut autem
voluptate, iste perspiciatis ducimus.
</div>

</div>
</div>

<!-- Portfolio page starts here -->
<div class="portfolio" id="Portfolio">
<div class="portfolio_heading">Portfolio</div>
<div class="portfolio_container">
<!--Edit here 👇 Add your own photo or video here. Incase of photo change the <Video> tag to <img> and remove autoplay and controls -->
<div class="item video1">
<video src="./assets/IMG_0473.mp4" autoplay controls>
</video>
</div>

<div class="item image1">
<!-- Edit here 👇 Add your own photo here. Simply download it in the assets folder and update the filename "pfp.png" to match your image's filename -->
<img src="./assets/robotics.png">
</div>

<div class="item image2">
<!-- Edit here 👇 Add your own photo here. Simply download it in the assets folder and update the filename "pfp.png" to match your image's filename -->
<img src="./assets/team.jpeg">
</div>

<!-- Portfolio page starts here -->
<div class="portfolio" id="Portfolio">
<div class="portfolio_heading">Portfolio</div>
<div class="portfolio_container">
<!--Edit here 👇 Add your own photo or video here. Incase of photo change the <Video> tag to <img> and remove autoplay and controls -->
<video src="./assets/IMG_0473.mp4" autoplay controls class="bento__item" style="--columns: span 2; object-fit: cover;">
</video>
<!-- <div class="bento__item" style="--columns: span 2;">

</div> -->
<!-- Edit here 👇 Add your own photo here. Simply download it in the assets folder and update the filename "pfp.png" to match your image's filename -->
<img src="./assets/robotics.png" class="bento__item" style="--columns: span 2; object-fit: cover; width: 20rem;">
<!-- Edit here 👇 Add your own photo here. Simply download it in the assets folder and update the filename "pfp.png" to match your image's filename -->
<img src="./assets/team.jpeg" class="bento__item" style="--rows: span 4; --columns: 1 / -1; object-fit: cover;">

<!-- Edit here 👇 Add your own photo here. Simply download it in the assets folder and update the filename "pfp.png" to match your image's filename -->
<img src="./assets/rebase.png" class="bento__item" style="object-fit: cover">
<!-- Edit here 👇 Add your own photo here. Simply download it in the assets folder and update the filename "pfp.png" to match your image's filename -->
<img src="./assets/git.png" class="bento__item" style="--columns: span 2; object-fit: cover; height: 14rem;">
<!-- Edit here 👇 Add your own photo here. Simply download it in the assets folder and update the filename "pfp.png" to match your image's filename -->
<img class="bento__item" src="./assets/rebase2.png">
</div>
<div class="item image3">
<!-- Edit here 👇 Add your own photo here. Simply download it in the assets folder and update the filename "pfp.png" to match your image's filename -->
<img src="./assets/rebase.png">
</div>
</div>

<!-- Navbar starts here -->
<div class="navbar">
<div class="logo">
<img src="./assets/logo.png">
<div class="item image4">
<!-- Edit here 👇 Add your own photo here. Simply download it in the assets folder and update the filename "pfp.png" to match your image's filename -->
<img src="./assets/git.png">
</div>
<ul class="navbar_list">
<li class="navbar_content"><a href="#Home">HOME</a></li>
<li class="navbar_content"><a href="#About">ABOUT</a></li>
<li class="navbar_content"><a href="#Portfolio">PORTFOLIO</a></li>
</ul>

<div class="item image5">
<!-- Edit here 👇 Add your own photo here. Simply download it in the assets folder and update the filename "pfp.png" to match your image's filename -->
<img src="./assets/rebase2.png">
</div>


</div>
</div>
</div>



</body>
<!-- This is where the content of the webpage ends. -->

Expand Down
Loading