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

Img transition #318

Merged
merged 2 commits into from
Jun 15, 2024
Merged

Img transition #318

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
c0cc77b
fixed footer and home page background
Ridhima10 Jun 15, 2024
d1fdc47
added transition on img styling
Ridhima10 Jun 15, 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
11 changes: 11 additions & 0 deletions public/css/styles.css
View file
Open in desktop
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
160 changes: 96 additions & 64 deletions server/views/about.ejs
View file
Open in desktop
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>-->

<hr />

<!-- 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 @@ -265,17 +258,55 @@
<span id="alertText"></span>
<button id="closeAlert">&times;</button>
</div>

<div class="footer-icon">
<!-- Icons section. -->
<a href="#"><i class="fa-brands fa-facebook-f"></i></a>
<!-- Facebook icon. -->
<a href="#"><i class="fa-brands fa-twitter"></i></a>
<!-- Twitter icon. -->
<a href="#"><i class="fa-brands fa-linkedin"></i></a>
<!-- LinkedIn icon. -->
<a href="#"><i class="fa-brands fa-github"></i></a>
<!-- GitHub icon. -->
<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>
</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>
</ul>
</div>
</div>
</div>
Expand All @@ -290,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
Loading
Loading