Skip to content
This repository has been archived by the owner on Jun 19, 2021. It is now read-only.

Added the About & PS Section #11

Merged
merged 4 commits into from
Apr 27, 2021
Merged

Added the About & PS Section #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0cf7bad
Merge pull request #4 from SOACodeRoom/main
saswatsamal Apr 26, 2021
c3706f2
About, Problem Statement Added + ParticleJs implemented
saswatsamal Apr 26, 2021
791e84f
footer font type and size added
saswatsamal Apr 26, 2021
72a7b73
ParticleJs theme added
saswatsamal Apr 26, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
6 changes: 6 additions & 0 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -450,6 +450,12 @@ body {
}

.masthead h2,
.sub-heading-small {
text-align: center;
font-family: 'Roboto', sans-serif;
color: white;
font-size: 1rem;
}
.sub-heading {
text-align: center;
font-family: 'Roboto', sans-serif;
Expand Down
86 changes: 73 additions & 13 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,10 @@
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="title" content="Summer Hacks">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<meta name="title" content="Summer Hacks">
<meta name="description" content="Summer Hacks by SOA Code Room">
<meta name="author" content="SOA Code Room">
<meta name="keywords" content="SOA Code Room">
Expand All @@ -16,14 +18,15 @@

<!-- Custom CSS -->
<link href="css/style.css" rel="stylesheet">

</head>

<!-- 100% virtual right sticker -->
<a id="pure-virtual-sticker" style="display:block;max-width:100px;min-width:100px;position:fixed;right:10px;top: 10px;width:10%;z-index:10000" href="#" target="_blank"><img src="./img/pure-virtual-sticker.svg" alt="" style="width:100%"></a>

<!-- Apply Now Sticker tba -->

<body id="page-top">
<body>
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
<div id="navbar-container" class="container">
<div id="navbar-top-menu">
Expand All @@ -39,6 +42,8 @@
<div class="container d-flex h-100 align-items-center">
<div class="mx-auto text-center no-select">
<h1 class="mx-auto my-0 title-text">Summer Hacks</h1>
<br>
<h2 class="mx-auto mt-2 mb-1 sub-heading title-text">Hack-a-warm-thon</h2>
<br><br>
<h2 class="orange mx-auto mt-2 mb-1 sub-heading" style="width: 100%;">7<sup>th</sup>-9<sup>th</sup> May 2021</h2>
<h2 class="white mx-auto mt-2 mb-3 sub-heading" style="width: 100%;">SOA Code Room, Siksha O Anusandhan University</h2>
Expand All @@ -48,18 +53,73 @@ <h2 class="white mx-auto mt-2 mb-3 sub-heading" style="width: 100%;">SOA Code Ro
</div>
</div>
</div>
<div id="particles-js"></div>
<section class="text-center">

<section>

<h1 class="sub-heading diagonal-text orange sub-heading-title">About</h1>

<audio src="./audio/tech-house.mp3"></audio>
<!-- Custom javascript -->
<script src="js/script.js"></script>
<script>
window.addEventListener("DOMContentLoaded", event => {
const audio = document.querySelector("audio");
audio.volume = 0.1;
audio.play();
});
</script>
</section>

<section class="diagonal-section white-bg">

<div class="mx-auto diagonal-section-content">
<div class="container nexa">
<p class="black bold">Summer Hacks is the first online hackathon organized by SOA Code Room in the month of May'21 to start engaging the students in hackathon activities.
</br></br>
In this hackathon we encourage students to experince a 2 day continous hackathon, explore ideas and technology, meet and greet people and learn some awesome things that they couldn't able to learn before. This hackathon mainly focus on contributing to GitHub and is based on GitHub.
<br><br>
The theme of the hackathon moves around the summer season. Students have to make a cool portfolio website with reference to our set of rules for this hackathon.
</p>
</div>
</div>

</section>

<section>

<h1 class="sub-heading diagonal-text orange sub-heading-title" style="padding-bottom: 100px; padding-top: 100px; margin-bottom: 0;">Problem Statement</h1>

</section>

<section class="diagonal-section white-bg">

<div class="mx-auto diagonal-section-content">
<div class="container nexa">
<p class="black bold">Make a cool portfolio website for yourself with summer themed.
</p>
</div>
</div>

</section>
<section class="footer-section ">

<div style="padding-top: 0">
<div class="small text-center white">
<div class="social d-flex justify-content-center"></div>
<div class="white mb-4 sub-heading-small" style="padding-bottom: 2rem; padding-top: 100px; margin-bottom: 0;">
Copyright &copy; SOA Code Room 2021
</div>
</div>
</div>

</section>
</section>

<!-- Custom javascript -->
<script src="js/script.js"></script>
<script src="./js/particles.js"></script>
<script src="./js/app.js"></script>
<!-- <audio src="./audio/tech-house.mp3"></audio>
<script>
window.addEventListener("DOMContentLoaded", event => {
const audio = document.querySelector("audio");
audio.volume = 0.1;
audio.play();
});
</script> -->

</body>

</html>
115 changes: 115 additions & 0 deletions js/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,115 @@
particlesJS('particles-js',

{
"particles": {
"number": {
"value": 6,
"density": {
"enable": true,
"value_area": 100
}
},
"color": {
"value": "#1711f2"
},
"shape": {
"type": "polygon",
"stroke": {
"width": 1,
"color": "#000"
},
"polygon": {
"nb_sides": 8
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.2,
"random": true,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 40,
"random": false,
"anim": {
"enable": true,
"speed": 10,
"size_min": 40,
"sync": false
}
},
"line_linked": {
"enable": false,
"distance": 200,
"color": "#ffffff",
"opacity": 1,
"width": 2
},
"move": {
"enable": true,
"speed": 2,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": false,
"mode": "grab"
},
"onclick": {
"enable": false,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 200,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
}

);