codeninjasuk/codeninjasuk.github.io
1
0
Fork 0
mirror of https://github.com/codeninjasuk/codeninjasuk.github.io.git synced 2024-11-25 16:57:54 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Created sub pages

Browse source
This commit is contained in:
elvistony 2023-07-20 12:33:07 +01:00
parent 29df31c088
commit 8bfa9f8eb6
3 changed files with 68 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
assets/css/custom.css
View file

@ -73,5 +73,16 @@
} }
.btn:visited{ .btn:visited{
color: white; color: inherit;
}
.w3-petite-caps{
font-variant: petite-caps;
}
.masthead{
position: sticky; top: 0;
border: none;
background: white;
box-shadow: 1px 1px 10px rgb(78, 78, 78);
} }

36
index.html
View file

@ -11,15 +11,18 @@ w3: true
<div class="w3-row" style="background:#0763ad; color:white" id="about"> <div class="w3-row" style="background:#0763ad; color:white" id="about">
<div class="w3-col m9 w3-padding-large w3-flex-parent"> <div class="w3-col m9 w3-padding-large w3-flex-parent">
<div class="w3-flex-child"> <div class="w3-flex-child">
<h1 class="w3- w3-bolder" style="font-weight: 1000;font-size: 6vh;">CODE NINJAS<span class="display-4 regicon">®</span></h1> <h1 class="w3- w3-bolder" style="font-weight: 1000;font-size: 6vh;">CODE NINJAS<span class="display-4 regicon">®</span></h1>
<h3 class="w3- w3-bolder">Langley Berkshire</h3> <h3 class="w3- w3-bolder">Langley Berkshire</h3>
<p class="w3-large">WE MAKE CODING FUN.&reg;</p> <h3 class="w3-bolder" style="font-weight: 1000;">SUMMER CAMPS OPEN!</h3>
<a href="/camps/" class="btn btn-success w3-small">Learn More</a>
</div> </div>
</div> </div>
<div class="w3-col m3 w3-right"> <div class="w3-col m3 w3-right">
<img src="https://www.codeninjas.co.uk/assets/img/brands/codeNinjas/mission-statement-reflection-cropped.png" class="w3-round w3-image" alt="Table Setting" width="600" height="750"> <img src="https://www.codeninjas.co.uk/assets/img/brands/codeNinjas/mission-statement-reflection-cropped.png" class="w3-round w3-image" width="600" height="750">
</div> </div>
</div>
<div class="w3-row">
<p class=" w3-center" style="font-weight: 1000;font-size: 3vh;">WE MAKE CODING FUN.&reg;</p>
</div> </div>
</header> </header>
@ -36,7 +39,7 @@ w3: true
<div class="w3-row w3-padding-64" id="about"> <div class="w3-row w3-padding-64" id="about">
<div class="w3-col m3 w3-padding-large"> <div class="w3-col m3 w3-padding-large">
<img src="/assets/img/create-program.png" class="w3-round w3-image" alt="Table Setting" width="300" height="300"> <img src="/assets/img/create-program.png" class="w3-round w3-image" width="300" height="300">
</div> </div>
<div class="w3-col m9 w3-padding-large w3-flex-child"> <div class="w3-col m9 w3-padding-large w3-flex-child">
<span class="badge w3-right"><span class="h6 text-uppercase">AGES 7 TO 14</span></span> <span class="badge w3-right"><span class="h6 text-uppercase">AGES 7 TO 14</span></span>
@ -61,14 +64,14 @@ w3: true
</div> </div>
<div class="w3-col m3 w3-padding-large"> <div class="w3-col m3 w3-padding-large">
<img src="/assets/img/jr-program.png" class="w3-round w3-image" alt="Table Setting" width="300" height="300"> <img src="/assets/img/jr-program.png" class="w3-round w3-image" width="300" height="300">
</div> </div>
</div> </div>
<div class="w3-row w3-padding-64" id="about"> <div class="w3-row w3-padding-64" id="about">
<div class="w3-col m3 w3-padding-large"> <div class="w3-col m3 w3-padding-large">
<img src="/assets/img/camp-program.png" class="w3-round w3-image" alt="Table Setting" width="600" height="400"> <img src="/assets/img/camp-program.png" class="w3-round w3-image" width="600" height="400">
</div> </div>
<div class="w3-col m9 w3-padding-large w3-flex-child"> <div class="w3-col m9 w3-padding-large w3-flex-child">
<span class="badge w3-right"><span class="h6 text-uppercase">SUMMER &amp; YEAR ROUND</span></span> <span class="badge w3-right"><span class="h6 text-uppercase">SUMMER &amp; YEAR ROUND</span></span>
@ -81,38 +84,21 @@ w3: true
</div> </div>
<div class="w3-row w3-container text-center"> <div class="w3-row w3-container text-center">
<div class="w3-center w3-padding-64">
<h2 class="w3-center w3-bolder" style="font-weight: 1000;">CODE NINJAS<span class="display-4 regicon">®</span></h2>
<h1 class="w3-center w3-jumbo w3-bolder" style="font-weight: 1000;font-size:8vw;;"><span style="color:teal">CAMPS</span></h1>
</div>
<div class="w3-col l3 m6 w3-light-grey w3-container w3-padding-16"> <div class="w3-col l3 m6 w3-light-grey w3-container w3-padding-16">
<img src="https://img.icons8.com/?size=512&id=NDoZ1UbUuS7c&format=png" width="100px" alt=""> <img src="https://img.icons8.com/?size=512&id=NDoZ1UbUuS7c&format=png" width="100px" alt="">
<h3>Stopmotion Animation</h3> <h3>Stopmotion Animation</h3>
<p>Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.</p>
</div> </div>
<div class="w3-col l3 m6 w3-container w3-padding-16"> <div class="w3-col l3 m6 w3-container w3-padding-16">
<img src="https://img.icons8.com/?size=512x&id=nQVd58awWcQA&format=gif" width="100px" alt=""> <img src="https://img.icons8.com/?size=512x&id=nQVd58awWcQA&format=gif" width="100px" alt="">
<h3>Moviemaking with Minecraft</h3> <h3>Moviemaking with Minecraft</h3>
<p>Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.</p> </div>
</div>
<div class="w3-col l3 m6 w3-container w3-padding-16"> <div class="w3-col l3 m6 w3-container w3-padding-16">
<img src="https://img.icons8.com/?size=512x&id=qdWsFiGwz7NW&format=gif" width="100px" alt=""> <img src="https://img.icons8.com/?size=512x&id=qdWsFiGwz7NW&format=gif" width="100px" alt="">
<h3>Become a Youtuber</h3> <h3>Become a Youtuber</h3>
<p>Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.</p>
</div> </div>
<div class="w3-col l3 m6 w3-light-grey w3-container w3-padding-16"> <div class="w3-col l3 m6 w3-light-grey w3-container w3-padding-16">
<img src="https://img.icons8.com/?size=512x&id=113741&format=png" width="100px" alt=""> <img src="https://img.icons8.com/?size=512x&id=113741&format=png" width="100px" alt="">
<h3>Roblox Development</h3> <h3>Roblox Development</h3>
<p>Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.</p>
</div> </div>
</div> </div>
</div> </div>

74
pages/camps.html
View file

@ -3,42 +3,58 @@ title: Camps
layout: default layout: default
permalink: /camps/ permalink: /camps/
w3: true w3: true
camps:
- name: Stopmotion Animation
img: https://img.icons8.com/?size=512&id=NDoZ1UbUuS7c&format=png
link: /camps/stopmotion-animation/
dates: 25th, 26th July
youtubeid: 5Zs7vqM8t24
- name: Moviemaking with Minecraft
img: https://img.icons8.com/?size=512x&id=nQVd58awWcQA&format=gif
link: /camps/moviemaking-with-minecraft/
dates: 1st, 2nd August
youtubeid: UMKng76YFq4
- name: Become a Youtuber
img: https://img.icons8.com/?size=512x&id=qdWsFiGwz7NW&format=gif
link: /camps/become-a-youtuber/
dates: 8th, 9th August
youtubeid: A5oDCEHdOpM
- name: Roblox Development
img: https://img.icons8.com/?size=512x&id=113741&format=png
link: /camps/roblox-development/
dates: 15th, 16th August
youtubeid: ANL0Jz7Yt2c
--- ---
<div class="w3-content" style="max-width:1100px"> <div class="w3-content" style="max-width:1100px">
<div class="w3-row w3-container text-center"> <div class="w3-row w3-container text-center">
<div class="w3-center w3-padding-64"> <div class="w3-center w3-padding-32">
<h2 class="w3-center w3-bolder" style="font-weight: 1000;">CODE NINJAS</h2> <img src="/assets/img/camp-program.png" class="w3-round w3-image" width="200" height="200">
<h2 class="w3-text-right w3-bolder" style="font-weight: 1000;">CODE NINJAS<span class="display-4 regicon">®</span></h2>
<h1 class="w3-center w3-jumbo w3-bolder" style="font-weight: 1000;font-size:8vw;;"><span style="color:teal">CAMPS</span></h1> <h1 class="w3-center w3-jumbo w3-bolder" style="font-weight: 1000;font-size:8vw;;"><span style="color:teal">CAMPS</span></h1>
<p class="w3-padding-16 w3-large">Our camps offer an immersive environment for kids to explore and develop new skills, gain confidence, and have fun with friends. From coding and game building, to STEM and robotics - it's an unforgettable experience!</p>
</div> </div>
<div class="w3-col l3 m6 w3-light-grey w3-container w3-padding-16"> {% for camp in page.camps %}
<img src="https://img.icons8.com/?size=512&id=NDoZ1UbUuS7c&format=png" width="100px" alt=""> <div class="w3-col l6 m6 w3-container w3-padding-32">
<h3>Stopmotion Animation</h3> <img src="{{camp.img}}" width="100px" alt="{{camp.name}}">
<p>Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.</p> <h3 class="w3-bolder w3-petite-caps">{{camp.name}}</h3>
<div class="w3-margin">
{{camp.dates}}
</div>
<a class="btn btn-success" href="{{camp.link}}">Learn More</a> <button class="btn btn-success" onclick="document.getElementsByName('{{camp.name}}')[0].style.display='block'" href="{{camp.link}}"><i class="fa fa-video"></i></button>
<div name="{{camp.name}}" class="w3-modal">
<div class="w3-modal-content">
<div class="w3-container">
<span onclick="document.getElementsByName('{{camp.name}}')[0].style.display='none'"
class="w3-button w3-display-topright"><i class="fa fa-times"></i></span>
<p>{{camp.name}}</p>
<iframe width="420" height="315" style="width: 100%;" src="https://www.youtube-nocookie.com/embed/{{camp.youtubeid}}?autoplay=1&controls=0&modestbranding=1&showinfo=0&rel=0" allowfullscreen></iframe>
</div>
</div>
</div>
</div> </div>
{% endfor %}
<div class="w3-col l3 m6 w3-container w3-padding-16">
<img src="https://img.icons8.com/?size=512x&id=nQVd58awWcQA&format=gif" width="100px" alt="">
<h3>Moviemaking with Minecraft</h3>
<p>Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.</p>
</div>
<div class="w3-col l3 m6 w3-container w3-padding-16">
<img src="https://img.icons8.com/?size=512x&id=qdWsFiGwz7NW&format=gif" width="100px" alt="">
<h3>Become a Youtuber</h3>
<p>Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.</p>
</div>
<div class="w3-col l3 m6 w3-light-grey w3-container w3-padding-16">
<img src="https://img.icons8.com/?size=512x&id=113741&format=png" width="100px" alt="">
<h3>Roblox Development</h3>
<p>Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.</p>
</div>
</div> </div>