Skip to content

Commit

Permalink
Make the competition page
Browse files Browse the repository at this point in the history
  • Loading branch information
VishwaAmarasinghe committed Apr 16, 2024
1 parent e60f582 commit a79defc
Show file tree
Hide file tree
Showing 16 changed files with 317 additions and 10 deletions.
Binary file added assets/img/3d.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/img/e-sport.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/img/game-dev.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/img/logo-design.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/img/photo-mani.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/img/poster-design.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/img/presentation.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/img/quiz.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/img/video.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/img/web-design.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions assets/js/script.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@

$(function(){
$("#nav-placeholder").load("../assets/placeholders/nav.html");
$("#nav-placeholder").load("/assets/placeholders/nav.html");
});

$(function(){
$("#footer-placeholder").load("../assets/placeholders/footer.html");
$("#footer-placeholder").load("/assets/placeholders/footer.html");
});
2 changes: 1 addition & 1 deletion assets/placeholders/footer.html
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ <h4>Links</h4>
<a class="footer-link-contact " href="/index.html#contact">Contact</a>
</li>
<li class="footer-link">
<a class="footer-link-competitions " href="#">Competitions</a>
<a class="footer-link-competitions " href="/competitions.html">Competitions</a>
</li>
</ul>
</div>
Expand Down
6 changes: 3 additions & 3 deletions assets/placeholders/nav.html
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,15 @@
<a class="nav-link " href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
<a class="nav-link" href="/index.html#about">About</a>
</li>
<li class="nav-item ">
<a class="nav-link " href="#contact">
<a class="nav-link " href="/index.html#contact">
Contact Us
</a>
</li>
<li class="nav-item nav-end">
<a class="nav-link " href="">Competitions</a>
<a class="nav-link " href="/competitions.html">Competitions</a>
</li>
</ul>

Expand Down
59 changes: 56 additions & 3 deletions assets/style/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -44,17 +44,25 @@ background: url("../img/bg.png");
border: solid white 2px;
border-radius: 25px;
}
.button-main:hover{
.button-1-link{
text-decoration: none;
color: #ffffff;
}
.button-main:hover,.button-1-link:hover{
background-color: aliceblue;
color: #09051e;
}
#about , #contact{
#about , #contact {
background: url("../img/bg-2.png");
background-size: cover;
padding: 80px;

}

#competitions{
background: url("../img/bg-2.png");
padding: 80px;
}
.acf-img{
width: 200px;
padding-bottom: 20px;
Expand Down Expand Up @@ -130,4 +138,49 @@ background: url("../img/bg.png");
.footer-link a{
text-decoration: none;
color: #ffffff;
}
}
.competition-title{
color: #ffffff;
}
.competition-card-row{
margin-top: 50px;
}
#competitions .card{
background-color: rgba(145, 145, 145, 0.118);
-webkit-backdrop-filter: blur(50px);
backdrop-filter: blur(50px);
border: solid 1px rgba(255, 255, 255, 0.352);;
color: #ffffff;
padding: 0px;
margin: 30px;

}
.card-img{
width: 100%;
height: 300px;
object-fit: cover;
margin-bottom: 20px;
scale: 1.0;

}
.card:hover{
scale: 1.04;
transition: 0.5s;
}
.card-description{
margin: 30px;
}
.card-button{
width: 100px;
margin-bottom: 20px;
background: none;
border: solid 2px white;
border-radius: 10px;
color: #ffffff;
font-size: 20px;
font-weight: 600;
}
.card-button:hover{
background:#ffffff;
color: #000000;
}
254 changes: 254 additions & 0 deletions competitions.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,254 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cyber Pulse</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<!--bootstraps-link-->
<link rel="stylesheet" href="assets/style/style.css">
</head>
<body>
<!--navbar starts here-->
<div id="nav-placeholder">
</div>
<!--navbar ends here-->
<section id="competitions">
<center>
<h1 class="competition-title">
Competitions
</h1>
</center>
<div class="row competition-card-row justify-content-center g-4">
<!--1-->
<div class="card competition-card col-9 col-lg-3">
<div class="card-img-div">
<img src="/assets/img/web-design.jpg" alt="" class="card-img" >
</div>
<div class="card-titile">
<center>
<h3>Web Design</h3>
</center>
</div>
<div class="card-description">

Web design integrates creativity, functionality, and user experience to build visually captivating
and user-friendly websites.
</div>
<center>
<button class="button card-button">
JOIN
</button>
</center>

</div>
<!--1-->
<!--2-->
<div class="card competition-card col-9 col-lg-3">
<div class="card-img-div">
<img src="/assets/img/photo-mani.jpg" alt="" class="card-img" >
</div>
<div class="card-titile">
<center>
<h3>Photo Manipulation</h3>
</center>
</div>
<div class="card-description">
Transforming and enhancing images creatively through digital editing techniques.
</div>
<center>
<button class="button card-button">
JOIN
</button>
</center>

</div>
<!--2-->
<!--3-->
<div class="card competition-card col-9 col-lg-3">
<div class="card-img-div">
<img src="/assets/img/poster-design.jpg" alt="" class="card-img" >
</div>
<div class="card-titile">
<center>
<h3>Poster Design</h3>
</center>
</div>
<div class="card-description">
Communicating messages visually through compelling layouts and graphics for promotional purposes.
</div>
<center>
<button class="button card-button">
JOIN
</button>
</center>

</div>
<!--3-->
<!--4-->
<div class="card competition-card col-9 col-lg-3">
<div class="card-img-div">
<img src="/assets/img/logo-design.jpg" alt="" class="card-img" >
</div>
<div class="card-titile">
<center>
<h3>Logo Design</h3>
</center>
</div>
<div class="card-description">
Crafting distinctive and memorable visual symbols to represent brands or organizations.
</div>
<center>
<button class="button card-button">
JOIN
</button>
</center>

</div>
<!--4-->
<!--5-->
<div class="card competition-card col-9 col-lg-3">
<div class="card-img-div">
<img src="/assets/img/presentation.jpg" alt="" class="card-img" >
</div>
<div class="card-titile">
<center>
<h3>Presentations</h3>
</center>
</div>
<div class="card-description">
Designing visually engaging slideshows to convey information effectively and engage audiences.
</div>
<center>
<button class="button card-button">
JOIN
</button>
</center>

</div>
<!--5-->
<!--6-->
<div class="card competition-card col-9 col-lg-3">
<div class="card-img-div">
<img src="/assets/img/3d.jpg" alt="" class="card-img" >
</div>
<div class="card-titile">
<center>
<h3>3D Design</h3>
</center>
</div>
<div class="card-description">
Modeling and rendering objects and environments in three-dimensional space for various applications.
</div>
<center>
<button class="button card-button">
JOIN
</button>
</center>

</div>
<!--6-->
<!--7-->
<div class="card competition-card col-9 col-lg-3">
<div class="card-img-div">
<img src="/assets/img/video.jpg" alt="" class="card-img" >
</div>
<div class="card-titile">
<center>
<h3>Video Editing</h3>
</center>
</div>
<div class="card-description">
Creating captivating visual content through editing, effects, and storytelling for various purposes.
</div>
<center>
<button class="button card-button">
JOIN
</button>
</center>

</div>
<!--7-->
<!--8-->
<div class="card competition-card col-9 col-lg-3">
<div class="card-img-div">
<img src="/assets/img/game-dev.jpg" alt="" class="card-img" >
</div>
<div class="card-titile">
<center>
<h3>Game Development</h3>
</center>
</div>
<div class="card-description">
Creating immersive interactive experiences through programming, design, and storytelling elements.
</div>
<center>
<button class="button card-button">
JOIN
</button>
</center>

</div>
<!--8-->
<!--9-->
<div class="card competition-card col-9 col-lg-3">
<div class="card-img-div">
<img src="/assets/img/quiz.jpg" alt="" class="card-img" >
</div>
<div class="card-titile">
<center>
<h3>Quiz</h3>
</center>
</div>
<div class="card-description">
Developing interactive assessments to test knowledge or gather feedback in an engaging format.
</div>
<center>
<button class="button card-button">
JOIN
</button>
</center>

</div>
<!--9-->
<!--10-->
<div class="card competition-card col-9 col-lg-3">
<div class="card-img-div">
<img src="/assets/img/e-sport.jpg" alt="" class="card-img" >
</div>
<div class="card-titile">
<center>
<h3>E-Sports</h3>
</center>
</div>
<div class="card-description">
Organizing competitive gaming events and tournaments for players and spectators in the digital realm.
</div>
<center>
<button class="button card-button">
JOIN
</button>
</center>

</div>
<!--10-->
</div>
</section>






<div id="footer-placeholder">
</div>
<!--bootstraps-link-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<!--bootstraps-link-->
<!--Font awsome starts-->
<script src="https://kit.fontawesome.com/8d78513a47.js" crossorigin="anonymous"></script>
<!--Font awsome ends-->
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>
2 changes: 1 addition & 1 deletion index.html
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ <h1 class="main-text">
</h1>
<div class="buttons-header">
<button class="button-main button-1">
Competitions
<a href="/competitions.html" class="button-1-link">Competitions</a>
</button>

<a href="#about">
Expand Down

0 comments on commit a79defc

Please sign in to comment.