Skip to content

Commit

Permalink
Merge pull request #1201 from Harsh2504/AboutPage
Browse files Browse the repository at this point in the history 
#2 Enhanced About Page interface and added animations to website
  • Loading branch information
@vikhyatsingh123
vikhyatsingh123 committed Dec 30, 2023
2 parents 1b2cd62 + c2853ac commit e8a68c4
Show file tree
Hide file tree
Showing 7 changed files with 281 additions and 153 deletions.
69 changes: 46 additions & 23 deletions about.html
View file
Expand Up @@ -15,21 +15,34 @@
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/contact.css">
<link href="css/translate.css" rel="stylesheet" type="text/css" media="all" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
</head>


<style>
.img1{
position: absolute;
left: 0;
bottom:0;
}
.img2{
position: absolute;
right: 0;
bottom:0;
}
</style>
<body class="light-mode">
<header>
<nav class="navbar fixed-top navbar-expand-lg navbar-light" style="height: 60px; padding:5px 5px 5px 30px;">
<nav class=" animate__animated animate__fadeInDown navbar fixed-top navbar-expand-lg navbar-light" style="height: 60px; padding:5px 5px 5px 30px;">

<img src="adi image/naruto-advenimiento-los-animes-cortos-2.png" style="max-height: 100%; width: auto;">
<!-- <a class="navbar-brand brand1 ml-4" href="#" style="color: beige;">Naruto</a> -->


<div class="search">
<div class="icon"></div>
<div class="input">
<input type="text" placeholder="search" id="mysearch">
</div>



<span class="clear" onclick="document.getElementById('mysearch').value = ' '"></span>
</div>
Expand All @@ -43,15 +56,14 @@
<ul class="navbar-nav mr-auto">
<li class="nav-item mx-4">
<a class="nav-link link" href="./index.html" >Home</a>

</li>
<li class="nav-item active mx-4">
<a class="link nav-link " href="./about.html">About</a>
</li>
<li class="nav-item mx-4">
<a class="link nav-link " href="./contact.html" >Contact</a>
</li>
<li class="nav-item mx-4">
<a class="link nav-link " href="./Game.html" >Game</a>

</li>
<div class="dark_lang">
<li>
Expand Down Expand Up @@ -97,23 +109,25 @@
<!--start-->
<main>
<div class="container">
<h1 class="about-title">
<h1 class="about-title animate__animated animate__fadeInUp animate__slow">
This Project Is Developed by Vikhyat Singh
</h1>
<div class="about-content">
<div class="about-content animate__animated animate__fadeInUp animate__slow" style="position: relative;">
<p>
Hey! I am a Final Year Student. I'm currently pursuing B.Tech degree in Electronics and
Communication Engineering from National Institute of Technology Patna.I love to learn and do code. I
also like Web development and full MERN Stack Web Developer and a Competitive Programmer that's the
reason, I created this project as a starter Repository for Hacktoberfest2020 for the first-time
participants who can learn how to make their first pull request through this project.
</p>
<img class="img1" src="adi image/7cf0fd9c161fe42a044c2eac43c44f6d.gif" alt="">
<img class="img2" src="adi image/narutogif.gif" alt="">
</div>
<div class="row row1 inner-container">
<div class="col-lg-4 col-sm-8 about_card">
<div class="col-lg-4 col-sm-8 about_card animate__animated animate__backInLeft animate__delay-1s">
<div class="text-white">
<div id="one" class="card-body about-card">
<h5 class="card-title">
<h5 class="card-title1">
<i class="fab fa-linkedin"></i> LinkedIn
</h5>
<p class="card-text font-weight-lighter">Let's Connect!</p>
Expand All @@ -122,20 +136,20 @@ <h5 class="card-title">
</div>
</div>
</div>
<div class="col-lg-4 col-sm-8 about_card">
<div class="col-lg-4 col-sm-8 about_card animate__animated animate__backInRight animate__delay-1s">
<div class="text-white">
<div id="two" class="card-body about-card">
<h5 class="card-title"><i class="fab fa-github"></i> Github</h5>
<h5 class="card-title1"><i class="fab fa-github"></i> Github</h5>
<p class="card-text font-weight-lighter">Check out my Github Profile!</p>
<a href="https://github.com/vikhyatsingh123/"
class="btn btn-outline-light btn-sm">Github</a>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-8 about_card">
<div class="col-lg-4 col-sm-8 about_card animate__animated animate__backInLeft animate__delay-1s">
<div class="text-white">
<div id="three" class="card-body about-card">
<h5 class="card-title">
<h5 class="card-title1">
<i class="fab fa-instagram"></i> Instagram
</h5>
<p class="card-text font-weight-lighter">Let's follow each other!</p>
Expand All @@ -144,10 +158,10 @@ <h5 class="card-title">
</div>
</div>
</div>
<div class="col-lg-4 col-sm-8 about_card">
<div class="col-lg-4 col-sm-8 about_card animate__animated animate__backInRight animate__delay-1s">
<div class="text-white">
<div id="four" class="card-body about-card">
<h5 class="card-title"><i class="fab fa-facebook"></i> Facebook</h5>
<h5 class="card-title1"><i class="fab fa-facebook"></i> Facebook</h5>
<p class="card-text font-weight-lighter">Check out my Facebook Profile!</p>
<a href="https://facebook.com/vikhyatsingh123/"
class="btn btn-outline-light btn-sm">Facebook</a>
Expand All @@ -168,9 +182,10 @@ <h1>Our Valuable Contributors</h1>
<p class="mx-auto text-light font-weight-lighter">&copyright Developed By- Vikhyat Singh</p>
</nav>
</footer> -->
<footer class="footer">
Developed and Designed By <a href="https://github.com/vikhyatsingh123/"><span>Vikhyat Singh</span> </a> | © All
Rights Reserved
<footer class="footer" style="padding: 20px;">
<marquee> Developed and Designed By <span id="idblink" onclick="tap()" style="cursor: pointer;"><u>Vikhyat
Singh</u></span> | © All
Rights Reserved</marquee>
</footer>
<script>
function darkmode() {
Expand All @@ -191,6 +206,14 @@ <h1>Our Valuable Contributors</h1>
}
}
</script>

<script>
function tap() {
const link = document.getElementById('idblink')
window.location.href = "https://github.com/vikhyatsingh123"
}
</script>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
Expand Down
Binary file added adi image/7cf0fd9c161fe42a044c2eac43c44f6d.gif
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added adi image/narutogif.gif
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
34 changes: 32 additions & 2 deletions css/contact.css
View file
Expand Up @@ -135,7 +135,8 @@ input:focus::placeholder,
textarea:focus::placeholder{
color:transparent;
}
.btn {

.light-mode .btn {
border: none;
font-family: 'Source Sans Pro', sans-serif;
font-size: 18px;
Expand All @@ -154,9 +155,38 @@ textarea:focus::placeholder{
margin-right: 6px;
}

.btn:hover {
.dark-mode .btn {
border: none;
font-family: 'Source Sans Pro', sans-serif;
font-size: 18px;
width: 200px;
height: 48px;
color: rgb(0, 0, 0);
background: rgb(255, 255, 255);
cursor: pointer;
display: inline-block;
font-weight: 700;
position: relative;
outline: none;
box-shadow: 0 6px rgb(120, 118, 118);
border-radius: 5px;
float: right;
margin-right: 6px;
}

.light-mode .btn:hover {
background: #fff;
outline: none;
color:#000000;
box-shadow: 0 4px #cecece;
top: 2px;
}

.dark-mode .btn:hover {
background: #000000;
outline: none;
color:#ffffff;

box-shadow: 0 4px #cecece;
top: 2px;
}
Expand Down
11 changes: 6 additions & 5 deletions css/index.css
View file
Expand Up @@ -210,11 +210,11 @@ main{
}

.contributors h1 {
font: 5.5vw/1 Permanent Marker;
text-align: center;
color: white;
font-size: 2.5rem;
margin-bottom: 4%;

}

.contributors h1:hover {
Expand All @@ -235,6 +235,10 @@ main{
height: auto;
clip-path: polygon(50% 0%, 91% 25%, 91% 75%, 50% 100%, 9% 75%, 9% 25%);
margin: 5px;
transition: all 0.5s ease-in;
}
.contributor-card :hover {
transform: scale(1.2);
}

.contributor-card img {
Expand All @@ -243,10 +247,7 @@ main{
object-fit: cover;
}

.contributor-card:nth-child(4n+1),
.contributor-card:nth-child(4n+3) {
margin-top: -30px;
}


/* .VIpgJd-ZVi9od-ORHb-OEVmcd{
display: none!important;
Expand Down
81 changes: 55 additions & 26 deletions css/style.css
View file
Expand Up @@ -535,16 +535,23 @@ h1 {
line-height: 14pt;
}

#one {

.light-mode #one {
background-color: #2867b2;
}

#two {
.dark-mode #one {
background-color: #0e3361;
}
.light-mode #two {
background-color: rgb(33, 31, 31);
}
.dark-mode #two {
background-color: rgba(40, 40, 40, 0.877);
}

#three {
background-color: rgb(225, 48, 108);
background: radial-gradient(circle at 0% 180%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);

}

#buttons {
Expand Down Expand Up @@ -634,7 +641,7 @@ h1 {
padding-top: 2%;
color: white;
font-weight: bold;
font-style: italic;

line-height: 2.5rem;
}

Expand Down Expand Up @@ -733,29 +740,54 @@ h2 {
}

/*about*/
.about-content {

.light-mode .about-content {
text-align: justify;
font-size: 20px;
color: black;
border-radius: 2rem;
background: beige;
overflow: hidden;
transition: all 0.5s ease-in;
z-index: 1;

transition: all 0.3s ease-in-out;
padding: 30px;
box-shadow: -10px 25px 50px rgba(0, 0, 0, 0.3);
margin: 20px;
min-height: 50vh;
-webkit-font-smoothing: antialised;
-moz-osx-font-smoothing: grayscale;
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}
.about-content:hover {
opacity: 1;

.dark-mode .about-content {
text-align: justify;
font-size: 20px;
color: rgb(172, 83, 245);
border-radius: 2rem;
background-color: #1a1919c4;
border: 3px rgb(130, 60, 188) solid;
overflow: hidden;
transition: all 0.3s ease-in-out;
padding: 30px;
margin: 20px;
min-height: 50vh;
box-shadow: rgba(132, 0, 255, 0.4) 0px 2px 40px, rgba(140, 0, 255, 0.3) 0px 7px 13px -3px, rgba(140, 0, 255, 0.2) 0px -3px 0px inset;
}
.light-mode .about-content:hover {

background: #e2a9e5;
background: -moz-linear-gradient(-45deg, #e2a9e5 15%, #2b94e5 100%);
background: -webkit-linear-gradient(-45deg, #e2a9e5 15%, #2b94e5 100%);
color: white;

background: linear-gradient(135deg, #e2a9e5 15%, #2b94e5 100%);
}

.dark-mode .about-content:hover {

background: #e2a9e5;
color: white;

background: linear-gradient(135deg, #a950ad 15%, #2271ad 100%);
}



/* body {
background-color: white;
font-family: "Righteous", cursive;
Expand All @@ -770,20 +802,16 @@ h1 {
line-height: 14pt;
}

#one {
background-color: #0a66c2;
}

#two {
background-color: #333;
}

#three {
background-color: #c32aa3;
}
#four {
.light-mode #four {
background-color: #1877f2;
}
.dark-mode #four {
background-color: #07499f;
}



.about-card {
border-radius: 8px;
Expand Down Expand Up @@ -1102,7 +1130,8 @@ ul.navbar-nav.mr-auto {
}
.about_card {
width: 300px;
margin: 6px;
margin: 10px 60px;

}
/* social icons */
.footer h5 {
Expand Down

1 comment on commit e8a68c4

@CyberRuto
Copy link

Choose a reason for hiding this comment

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

Thats amazing! I love Naruto so much!

Please sign in to comment.