Skip to content

Commit

Permalink
added transition on img styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@Ridhima10
Ridhima10 committed Jun 15, 2024
1 parent c0cc77b commit d1fdc47
Show file tree
Hide file tree
Showing 2 changed files with 103 additions and 97 deletions.
11 changes: 11 additions & 0 deletions public/css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1601,8 +1601,19 @@ section.image {
height: 270px;
padding-top: 30px;
width: 470px;
transition: transform 0.3s ease-in-out;
border: 0 solid white;
padding: 0;
}
.image_part img:hover {
transform: translateY(-10px);
border:5px double rgb(87, 43, 190);
padding: 20px;
/* border-style: ; */
border-radius: 30px;
}


/* .line_pic{
width: 330px;
} */
Expand Down
189 changes: 92 additions & 97 deletions server/views/about.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
<!-- Link to the Unicons CSS file. -->
<script src="/js/script.js" defer></script>
<!-- Link to an external JavaScript file with the 'defer' attribute, meaning it will be executed after the document has been parsed. -->

</head>

<body class="page-leaderboard">
Expand All @@ -44,41 +44,29 @@
<!-- Logo of the website. -->
<br />

<ul class="nav-links">
<!-- Unordered list for navigation links. -->
<i class="uil uil-times navCloseBtn"></i>
<!-- Icon for closing navigation menu. -->
<li><a href="/">Home</a></li>
<li><a href="/play">Play Games</a></li>
<li><a href="/products">Products</a></li>
<li><a href="/about">About Us</a></li>
<li><a href="/contribute">Contribute</a></li>
<li>
<div class="small-screen-social">
<a
href="https://www.youtube.com/@ChromeGamingOn"
target="_blank"
class="social-icon youtube"></a>
<a
href="https://www.linkedin.com/company/chromegaming"
target="_blank"
class="social-icon linkedin"></a>
<a
href="https://www.facebook.com/profile.php?id=61558763492008"
target="_blank"
class="social-icon facebook"></a>
<a
href="https://twitter.com"
target="_blank"
class="social-icon twitter"></a>
<a
href="https://www.instagram.com/chromegamingon/"
target="_blank"
class="social-icon instagram"></a>
</div>
</li>
</ul>

<ul class="nav-links">
<!-- Unordered list for navigation links. -->
<i class="uil uil-times navCloseBtn"></i>
<!-- Icon for closing navigation menu. -->
<li><a href="/">Home</a></li>
<li><a href="/play">Play Games</a></li>
<li><a href="/products">Products</a></li>
<li><a href="/about">About Us</a></li>
<li><a href="/contribute">Contribute</a></li>
<li>
<div class="small-screen-social">
<a href="https://www.youtube.com/@ChromeGamingOn" target="_blank" class="social-icon youtube"></a>
<a href="https://www.linkedin.com/company/chromegaming" target="_blank"
class="social-icon linkedin"></a>
<a href="https://www.facebook.com/profile.php?id=61558763492008" target="_blank"
class="social-icon facebook"></a>
<a href="https://twitter.com" target="_blank" class="social-icon twitter"></a>
<a href="https://www.instagram.com/chromegamingon/" target="_blank"
class="social-icon instagram"></a>
</div>
</li>
</ul>

<i class="uil uil-search search-icon" id="searchIcon"></i>
<!-- Icon for search functionality. -->
<div class="search-box">
Expand All @@ -94,10 +82,11 @@
</nav>

<div class="social-icons">
<button class="toggler"><img src="/images/social1.webp" alt="" ></button>
<button class="toggler"><img src="/images/social1.webp" alt=""></button>
<a href="https://www.youtube.com/@ChromeGamingOn" target="_blank" class="social-icon youtube"></a>
<a href="https://www.linkedin.com/company/chromegaming" target="_blank" class="social-icon linkedin"></a>
<a href="https://www.facebook.com/profile.php?id=61558763492008" target="_blank" class="social-icon facebook"></a>
<a href="https://www.facebook.com/profile.php?id=61558763492008" target="_blank"
class="social-icon facebook"></a>
<a href="https://twitter.com" target="_blank" class="social-icon twitter"></a>
<a href="https://www.instagram.com/chromegamingon/" target="_blank" class="social-icon instagram"></a>
</div>
Expand All @@ -113,7 +102,8 @@
<div class="logo_head1">GAMING</div>
</div>
<div class="text" style="margin: 20px 200px 0 200px; text-align: justify; text-justify: inter-word;">
<h1 style="color: rgb(204, 22, 198); text-align: start; padding-bottom: 30px; text-shadow: .1em .1em 0 hsl(200 50% 30%); " class="border-hover">ABOUT US</h1>
<h1 style="color: rgb(204, 22, 198); text-align: start; padding-bottom: 30px; text-shadow: .1em .1em 0 hsl(200 50% 30%); "
class="border-hover">ABOUT US</h1>
<p>Chrome gaming community page is an online space within the Chrome
browser where gamers connect, discuss games, share content, get
updates, troubleshoot issues, join events and interact with
Expand All @@ -127,7 +117,8 @@

<!-- <div class="line"> -->
<div class="line_main">
<div class="line1 border-hover" style="color: rgb(204, 22, 198); text-shadow: .1em .1em 0 hsl(200 50% 30%);">OUR HISTORY</div>
<div class="line1 border-hover" style="color: rgb(204, 22, 198); text-shadow: .1em .1em 0 hsl(200 50% 30%);">
OUR HISTORY</div>
<!-- <hr class="line2" /> -->
<div class="line3">Since our establishment, we have been working to bring our
customers
Expand All @@ -146,7 +137,7 @@
<p style="font-weight: bold; padding-bottom: 5px">Our history begins back in 2006, when the first
auction was held
at our office in LA.</p>
<p >Online Auction was founded in 2006, and has since been in
<p>Online Auction was founded in 2006, and has since been in
continuous operation in its current location. In the early years,
we offered two auctions each week, and we specialised in art and
household auctions.</p>
Expand All @@ -155,24 +146,26 @@
<h1>September, 2016</h1>
<p style="font-weight: bold; padding-bottom: 5px">Continuous innovation and transformation
</p>
<p >Continuous innovation and rapid transformation have been themes
<p>Continuous innovation and rapid transformation have been themes
throughout our history, which the company traces to 2006 with the
website development and providing quality online auctions.</p>
</div>
<div class="container1 right">
<h1>March, 2017</h1>
<p style="font-weight: bold; padding-bottom: 5px">Further development</p>
<p >Our company has expanded the range of online bidding services
<p>Our company has expanded the range of online bidding services
provided to our registered and new users, and today everyone who
has access to the Internet can place a bid and win a desired
product.</p>
</div>
</div>
<div class="image_part">
<div><img
<div>
<img
src="https://th.bing.com/th/id/OIP.kcKIOvqiVCMz3yw5GRaJ3AHaEK?w=296&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7" />
</div>
<div><img
<div>
<img
src="https://media.wired.com/photos/61f48f02d0e55ccbebd52d15/3:2/w_1280%2Cc_limit/Gear-Rant-Game-Family-Plans-1334436001.jpg" />
</div>
</div>
Expand All @@ -199,7 +192,7 @@
</script>
</script>-->


<!-- Horizontal line separator. -->
<section class="footer">
<!-- Footer section. -->
Expand Down Expand Up @@ -250,7 +243,7 @@
<!-- Fourth column within the footer. -->
<h4>Newsletter</h4>
<!-- Heading for newsletter section. -->
<p >
<p>
Subscribe to our newsletter for a weekly dose of news, updates,
helpful tips, and exclusive offers.
</p>
Expand All @@ -267,53 +260,54 @@
</div>
<div class="icons">
<button class="share-button">
<svg id="share-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
stroke-width="2" stroke="white" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" class="box"></path>
<path d="M6 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
<path d="M18 6m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
<path d="M18 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
<path d="M8.7 10.7l6.6 -3.4"></path>
<path d="M8.7 13.3l6.6 3.4"></path>
</svg>
<svg id="share-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" stroke-width="2" stroke="white" fill="none" stroke-linecap="round"
stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" class="box"></path>
<path d="M6 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
<path d="M18 6m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
<path d="M18 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
<path d="M8.7 10.7l6.6 -3.4"></path>
<path d="M8.7 13.3l6.6 3.4"></path>
</svg>
</button>
<ul class="socials-menu">
<li class="social" id="discord" title="discord">
<a href="https://discord.com/">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-discord" viewBox="0 0 16 16">
<path
d="M13.545 2.907a13.2 13.2 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.2 12.2 0 0 0-3.658 0 8 8 0 0 0-.412-.833.05.05 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.04.04 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032q.003.022.021.037a13.3 13.3 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019q.463-.63.818-1.329a.05.05 0 0 0-.01-.059l-.018-.011a9 9 0 0 1-1.248-.595.05.05 0 0 1-.02-.066l.015-.019q.127-.095.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.05.05 0 0 1 .053.007q.121.1.248.195a.05.05 0 0 1-.004.085 8 8 0 0 1-1.249.594.05.05 0 0 0-.03.03.05.05 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.2 13.2 0 0 0 4.001-2.02.05.05 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.03.03 0 0 0-.02-.019m-8.198 7.307c-.789 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612m5.316 0c-.788 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612" />
</svg>
</a>
</li>
<li class="social" title="signal" id="signal">
<a href="https://signal.org/">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-signal" viewBox="0 0 16 16">
<path
d="m6.08.234.179.727a7.3 7.3 0 0 0-2.01.832l-.383-.643A7.9 7.9 0 0 1 6.079.234zm3.84 0L9.742.96a7.3 7.3 0 0 1 2.01.832l.388-.643A8 8 0 0 0 9.92.234m-8.77 3.63a8 8 0 0 0-.916 2.215l.727.18a7.3 7.3 0 0 1 .832-2.01l-.643-.386zM.75 8a7 7 0 0 1 .081-1.086L.091 6.8a8 8 0 0 0 0 2.398l.74-.112A7 7 0 0 1 .75 8m11.384 6.848-.384-.64a7.2 7.2 0 0 1-2.007.831l.18.728a8 8 0 0 0 2.211-.919M15.251 8q0 .547-.082 1.086l.74.112a8 8 0 0 0 0-2.398l-.74.114q.082.54.082 1.086m.516 1.918-.728-.18a7.3 7.3 0 0 1-.832 2.012l.643.387a8 8 0 0 0 .917-2.219m-6.68 5.25c-.72.11-1.453.11-2.173 0l-.112.742a8 8 0 0 0 2.396 0l-.112-.741zm4.75-2.868a7.2 7.2 0 0 1-1.537 1.534l.446.605a8 8 0 0 0 1.695-1.689zM12.3 2.163c.587.432 1.105.95 1.537 1.537l.604-.45a8 8 0 0 0-1.69-1.691zM2.163 3.7A7.2 7.2 0 0 1 3.7 2.163l-.45-.604a8 8 0 0 0-1.691 1.69l.604.45zm12.688.163-.644.387c.377.623.658 1.3.832 2.007l.728-.18a8 8 0 0 0-.916-2.214M6.913.831a7.3 7.3 0 0 1 2.172 0l.112-.74a8 8 0 0 0-2.396 0zM2.547 14.64 1 15l.36-1.549-.729-.17-.361 1.548a.75.75 0 0 0 .9.902l1.548-.357zM.786 12.612l.732.168.25-1.073A7.2 7.2 0 0 1 .96 9.74l-.727.18a8 8 0 0 0 .736 1.902l-.184.79zm3.5 1.623-1.073.25.17.731.79-.184c.6.327 1.239.574 1.902.737l.18-.728a7.2 7.2 0 0 1-1.962-.811zM8 1.5a6.5 6.5 0 0 0-6.498 6.502 6.5 6.5 0 0 0 .998 3.455l-.625 2.668L4.54 13.5a6.502 6.502 0 0 0 6.93-11A6.5 6.5 0 0 0 8 1.5" />
</svg>
</a>
</li>
<li class="social" title="Github" id="github">
<a href="https://github.com/GameSphere-MultiPlayer">
<i class="fa-brands fa-github" style="color: white"></i>
</a>
</li>
<li class="social" title="reddit" id="reddit">
<a href="https://www.reddit.com/?rdt=35900" title="Facebook">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-reddit" viewBox="0 0 16 16">
<path
d="M6.167 8a.83.83 0 0 0-.83.83c0 .459.372.84.83.831a.831.831 0 0 0 0-1.661m1.843 3.647c.315 0 1.403-.038 1.976-.611a.23.23 0 0 0 0-.306.213.213 0 0 0-.306 0c-.353.363-1.126.487-1.67.487-.545 0-1.308-.124-1.671-.487a.213.213 0 0 0-.306 0 .213.213 0 0 0 0 .306c.564.563 1.652.61 1.977.61zm.992-2.807c0 .458.373.83.831.83s.83-.381.83-.83a.831.831 0 0 0-1.66 0z" />
<path
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.828-1.165c-.315 0-.602.124-.812.325-.801-.573-1.9-.945-3.121-.993l.534-2.501 1.738.372a.83.83 0 1 0 .83-.869.83.83 0 0 0-.744.468l-1.938-.41a.2.2 0 0 0-.153.028.2.2 0 0 0-.086.134l-.592 2.788c-1.24.038-2.358.41-3.17.992-.21-.2-.496-.324-.81-.324a1.163 1.163 0 0 0-.478 2.224q-.03.17-.029.353c0 1.795 2.091 3.256 4.669 3.256s4.668-1.451 4.668-3.256c0-.114-.01-.238-.029-.353.401-.181.688-.592.688-1.069 0-.65-.525-1.165-1.165-1.165" />
</svg>
</a>
</li>
<li class="social" id="discord" title="discord">
<a href="https://discord.com/">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-discord" viewBox="0 0 16 16">
<path
d="M13.545 2.907a13.2 13.2 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.2 12.2 0 0 0-3.658 0 8 8 0 0 0-.412-.833.05.05 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.04.04 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032q.003.022.021.037a13.3 13.3 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019q.463-.63.818-1.329a.05.05 0 0 0-.01-.059l-.018-.011a9 9 0 0 1-1.248-.595.05.05 0 0 1-.02-.066l.015-.019q.127-.095.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.05.05 0 0 1 .053.007q.121.1.248.195a.05.05 0 0 1-.004.085 8 8 0 0 1-1.249.594.05.05 0 0 0-.03.03.05.05 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.2 13.2 0 0 0 4.001-2.02.05.05 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.03.03 0 0 0-.02-.019m-8.198 7.307c-.789 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612m5.316 0c-.788 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612" />
</svg>
</a>
</li>
<li class="social" title="signal" id="signal">
<a href="https://signal.org/">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-signal" viewBox="0 0 16 16">
<path
d="m6.08.234.179.727a7.3 7.3 0 0 0-2.01.832l-.383-.643A7.9 7.9 0 0 1 6.079.234zm3.84 0L9.742.96a7.3 7.3 0 0 1 2.01.832l.388-.643A8 8 0 0 0 9.92.234m-8.77 3.63a8 8 0 0 0-.916 2.215l.727.18a7.3 7.3 0 0 1 .832-2.01l-.643-.386zM.75 8a7 7 0 0 1 .081-1.086L.091 6.8a8 8 0 0 0 0 2.398l.74-.112A7 7 0 0 1 .75 8m11.384 6.848-.384-.64a7.2 7.2 0 0 1-2.007.831l.18.728a8 8 0 0 0 2.211-.919M15.251 8q0 .547-.082 1.086l.74.112a8 8 0 0 0 0-2.398l-.74.114q.082.54.082 1.086m.516 1.918-.728-.18a7.3 7.3 0 0 1-.832 2.012l.643.387a8 8 0 0 0 .917-2.219m-6.68 5.25c-.72.11-1.453.11-2.173 0l-.112.742a8 8 0 0 0 2.396 0l-.112-.741zm4.75-2.868a7.2 7.2 0 0 1-1.537 1.534l.446.605a8 8 0 0 0 1.695-1.689zM12.3 2.163c.587.432 1.105.95 1.537 1.537l.604-.45a8 8 0 0 0-1.69-1.691zM2.163 3.7A7.2 7.2 0 0 1 3.7 2.163l-.45-.604a8 8 0 0 0-1.691 1.69l.604.45zm12.688.163-.644.387c.377.623.658 1.3.832 2.007l.728-.18a8 8 0 0 0-.916-2.214M6.913.831a7.3 7.3 0 0 1 2.172 0l.112-.74a8 8 0 0 0-2.396 0zM2.547 14.64 1 15l.36-1.549-.729-.17-.361 1.548a.75.75 0 0 0 .9.902l1.548-.357zM.786 12.612l.732.168.25-1.073A7.2 7.2 0 0 1 .96 9.74l-.727.18a8 8 0 0 0 .736 1.902l-.184.79zm3.5 1.623-1.073.25.17.731.79-.184c.6.327 1.239.574 1.902.737l.18-.728a7.2 7.2 0 0 1-1.962-.811zM8 1.5a6.5 6.5 0 0 0-6.498 6.502 6.5 6.5 0 0 0 .998 3.455l-.625 2.668L4.54 13.5a6.502 6.502 0 0 0 6.93-11A6.5 6.5 0 0 0 8 1.5" />
</svg>
</a>
</li>
<li class="social" title="Github" id="github">
<a href="https://github.com/GameSphere-MultiPlayer">
<i class="fa-brands fa-github" style="color: white"></i>
</a>
</li>
<li class="social" title="reddit" id="reddit">
<a href="https://www.reddit.com/?rdt=35900" title="Facebook">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-reddit" viewBox="0 0 16 16">
<path
d="M6.167 8a.83.83 0 0 0-.83.83c0 .459.372.84.83.831a.831.831 0 0 0 0-1.661m1.843 3.647c.315 0 1.403-.038 1.976-.611a.23.23 0 0 0 0-.306.213.213 0 0 0-.306 0c-.353.363-1.126.487-1.67.487-.545 0-1.308-.124-1.671-.487a.213.213 0 0 0-.306 0 .213.213 0 0 0 0 .306c.564.563 1.652.61 1.977.61zm.992-2.807c0 .458.373.83.831.83s.83-.381.83-.83a.831.831 0 0 0-1.66 0z" />
<path
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.828-1.165c-.315 0-.602.124-.812.325-.801-.573-1.9-.945-3.121-.993l.534-2.501 1.738.372a.83.83 0 1 0 .83-.869.83.83 0 0 0-.744.468l-1.938-.41a.2.2 0 0 0-.153.028.2.2 0 0 0-.086.134l-.592 2.788c-1.24.038-2.358.41-3.17.992-.21-.2-.496-.324-.81-.324a1.163 1.163 0 0 0-.478 2.224q-.03.17-.029.353c0 1.795 2.091 3.256 4.669 3.256s4.668-1.451 4.668-3.256c0-.114-.01-.238-.029-.353.401-.181.688-.592.688-1.069 0-.65-.525-1.165-1.165-1.165" />
</svg>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
Expand All @@ -327,12 +321,13 @@
&copy; 2024-All rights reserved.<br />
Made with ❤️ of <b>Chrome Gaming</b>
</footer>
</body><script>
document.querySelector('.toggler').addEventListener('click', function() {
document.querySelector('.social-icons').classList.toggle('show-icons');
});
</body>
<script>
document.querySelector('.toggler').addEventListener('click', function () {
document.querySelector('.social-icons').classList.toggle('show-icons');
});
</script>

Expand Down

0 comments on commit d1fdc47

Please sign in to comment.