Hello. I have a personal project that I’m working on for a youth group. I have created HTML, CSS and a bit of Javascript in the code. I’m struggling with incorporating responsive design into my coding (lack of knowledge) and some things that I have tried don’t seem to get me the results that I’m looking for. Can you review my code, and let me know how I can take this and make it responsive for Desktops, Laptops, tablets and mobile devices? Thanks in advance!!
<<!DOCTYPE html>
<html>
<head>
<title>Mapleton Scouts BSA Troop 22 - What To Expect</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Rod Hunsaker">
<meta name="keywords" content="Mapleton Troop 22, Troop 22, Troop22, ScoutsBSA, Scouts BSA, Scouts, Scout, Tenderfoot, Second Class, First Class, Star, Life, Eagle, Be A Scout, Merit Badge, bsa scouts mapleton troop 22, troop 22 mapleton utah, troop 22 mapleton, troop 22, mapleton bsa troop 22">
<meta name="description" content= "Scouts BSA Website">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="icon" href="Images/BSAFluerdeLis.jpg" type="image/icon type">
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-MPFRY05VGH"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-MPFRY05VGH');
</script>
<style>
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: inherit;
}
.overlay {
height: 100%;
width: 0%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #FCCF42;
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 5%;
width: 100%;
text-align: center;
margin-top: 35px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 20px;
color: #fff;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 1px;
right: 450px;
font-size: 60px;
}
body {
font-family: 'Poppins', sans-serif;
font-size: 16px;
line-height: 1.5;
color: #333;
background: white;
}
.h1 {
width: 100%;
margin-left: 20%;
margin-right: 5%;
font-family: 'Verdana';
padding: 5px;
Font-size: 30px;
position: center;
}
h2 {
text-align: center;
margin: 20px;
font-size: 30px;
}
h3 {
text-align: center;
margin: 50px;
}
.fontquote { text-align: center;
}
p {
width: 800px;
margin: auto;
font-family: 'Verdana';
padding: 20px;
line-height:200%;
}
.p1 {
text-align:center;
color:Blue;
font-size: 50px;
}
.p2 {
text-align:center;
color:Red;
font-size: 40px;
padding: 40px 40px;
}
.p3 {
text-align:center;
color:Orange;
font-size: 35px;
padding: 10px 10px;
}
.p4 {
text-align:center;
color:Green;
font-size: 35px;
padding: 50px 25px;
}
.p5 {
text-align:center;
color:#7114B8;
font-size: 35px;
padding: 50px 25px;
}
.p6 {
text-align:center;
color:#dc143c;
font-size: 35px;
padding: 50px 25px;
}
ul {
list-style-type: none;
}
.ul {
width: 800px;
margin: auto;
font-family: 'Verdana';
font-size: 14px;
padding: 20px;
line-height:150%
}
.footer {
left: 0;
bottom: 0;
width: 100%;
background-color: #FCCF42;
color: #fff;
text-align: center;
}
.fa {
padding: 20px;
font-size: 30px;
width: 30px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
}
.fa:hover {
opacity: 0.7;
}
.fa-facebook {
background: #3B5998;
color: white;
}
.fa-youtube {
background: #bb0000;
color: white;
}
.fa-google {
background: #dd4b39;
color: white;
}
</style>
</head>
<body>
<div id="myNav" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div class="overlay-content">
<img src="Images/Boot-AdventureOn.jpg" alt="AdventureOn" style="width:100%;height:100%;">
<a href="Index.html">Home</a>
<a href="WhatToExpect-Desktop.html">What To Expect</a>
<a href="Calendar-Desktop.html">Calendar</a>
<a href="Photos-Desktop.html">Photos</a>
<a href="LeaderResources-Desktop.html">Leader Resources</a>
<a href="ParentResources-Desktop.html">Parent Resources</a>
<a href="VolunteerEfforts-Desktop.html">Volunteer Efforts</a>
<a href="Fundraising-Desktop.html">Fundraising</a>
</div>
</div>
<img src="Images/Boot-AdventureOn.jpg" alt="AdventureOn" style="width:100%;height:100%;">
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰</span>
<script>
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
</script>
<a href="Index.html"> <img src="Images/DesktopIcon.jpg" alt="DesktopIcon" style="width:2%;height:2%;"></a>
<a href="Index-Mobile.html"> <img src="Images/MobileIcon.jpg" alt="MobileIcon" style="width:1%;height:1%;"></a>
<a href="https://beascout.scouting.org/list/?zip=84664&program%5B0%5D=scoutsBSA&scoutsBSAFilter=all&miles=10" target="_blank">
<img src="Images/Join Now.png" alt="Join Now" style="margin-left:75%;width:10%;height:10%;"></a>
<p style="text-align:center;"><img src ="Images/ScoutMeIn.jpg" alt="Scout Me In"></p>
<div class="p3">
<p> What to Expect When Joining Troop 22
</p>
</div>
<article>
<h2 style="text-align: center;">Welcome to the start of something great! </h2>
<p> Scouting is filled with endless possibilities including adventure, outdoors, service, skills, and leadership. Each chapter is a new beginning that builds on the last.
It’s a journey filled with fun, friends and faith. Scouting is an important part of the physical, mental, moral and spiritual development of youth.
Whether you are pitching a tent in the great outdoors or surveying the stars, you will be working with others to become a person who does their duty to God and their
country. Along the way, the Scout Oath and Scout Law will be your compass. Scouting will challenge you to work hard, do your best, and to serve others. With each
journey and every skill you master, you and the other Scouts in your troop will gain confidence and get better together. By the end of your scouting journey, you will be
prepared to go anywhere, do anything and be anything you want. Welcome to the adventure of a lifetime! Welcome to Scouts BSA!
</p>
<div class="fontquote"> <em> Thoughts included from Michael B Surbaugh, Chief Scout Executive, <br>
Boy Scouts of America, Scouts BSA Handbook for Boys </em>
</div>
<p> We look forward to all boys ages 11-18 to join our troop. We want you to feel welcome, ready to be adventurous, learn, grow and enjoy your experience as you work
towards your Eagle Scout rank. Below is some information regarding our meetings, campouts and other events.
</p>
</article>
</section>
<br> <br>
<section>
<article>
<h2 style="color:green"> PLANNING and BUDGETING METHOD </h2>
<p>
<img src="Images/PlanningandBudget.jpg" alt="Annual Planning" style="float:right;padding:5%;margin-left:30px; width:175px;height:175px;">
<br>
Troop 22 meets once a year to plan and budget the activities for the year including troop meetings, campouts, volunteer events, and fundraising. This meeting is
conducted with youth leaders where they are involved in developing a plan, in conjunction with the adult leaders, for next program year. The troops program plan is shared
with the unit commissioner and charter representatives.
</p>
</article>
</section>
<br> <br>
<section>
<article>
<h2> MEMBERSHIP </h2>
<p>
<img src="Images/AttendanceList.gif" alt="Attendance List" style="margin-left:250px;width:300px;height:auto;"> <br>
We actively welcome new boys to join our troop throughout the year. Three methods used to maintain a strong membership is recruiting new youth into the troop, retaining a
significant percentage of youth members, and transition Webelos from Cub Scouts by holding two activities with a pack or Webelos den to provide information on how to
transition into Scouts in the Troop. Once a year we conduct a formal recruiting event. Keep an eye on the calendar for this event.
Membership fees and participation costs can quickly add up. On average, yearly costs for each boy averages around $600.00 which includes costs for uniforms, handbook,
camping trips, awards, and registration fees. We participate in various fundraising activities throughout the year to help offset these costs for the boys.
</p>
</article>
</section>
<br> <br> </br>
<section>
<article>
<h2 style="color:BLUE"> TROOP 22 MEETINGS </h2>
<p>
<img src="Images/troopmeeting.jpg" alt="Troop Meeting" style="margin-left:250px;width:300px;height:250px;"> <br>
Twice a month, on the second and fourth Thursdays, all scouts meet together to enjoy focused and themed opportunities to advance towards completion of core merit badges.
This is accomplished through activities, learning new skills, and having fun. Some troop meetings may require parent participation. Review our calendar page to know what
activities are taking place at these meetings. We encourage scouts to wear their uniform. Wearing the uniform is important for many reasons including quick identification
of the group, displaying recently achieved awards, and nurture support and pride with one another. We encourage boys to bring their Scout handbook as this provides the
requirements for each activity and a place to record progress.
</p>
<br> <br>
</article>
</section>
<section>
<article>
<h2 style="color:RED"> ADVANCEMENT </h2>
<p>
<img src="Images/ScoutPatch.jpg" alt="Scout Patch" style="margin-left:275px;width:250px;height:250px;"> <br>
Around the age of 11, young boys begin to explore an interest in scouting and the value they will receive by participating in a troop and its various activities over the
next 6+ years. Through the scouting program, physical, mental, moral and spiritual development takes place that may play constructive roles in society, with a strong focus
on the outdoors and survival skills.
</p>
<p> Through the ranks of scouting including scout, tenderfoot, second class, first class, star, life, and eagle rank, these young boys grow to be young men with developed
academic skills, self-confidence, ethics, leadership skills, and citizenship skills that influence their adult lives. It’s important to advance through scouting with merit
badges and ranks, however, it’s important to remember that it is only a method and not an end in itself, to educate, expand horizons, a measure of growth, all while
having fun. In scouting, it’s important to have fun.
</p>
<p> We take pride and pleasure in helping Scouts advance through at least one rank each calendar year. Additionally, several merit badges are earned throughout the year through service
projects, campouts and troop meetings.
</p>
<p> Troop 22 conducts at least three court of honors in the year where youth are recognized for their achievements and program plans are shared with parents.
</p>
<p> “For more than a century, Scouts have tested themselves against a strong standard of requirements to advance from rank to rank until they reach the pinnacle, the Eagle Scout
Award. Along the way, they learn Scouting skills that cover everything from knot tying to camping to aquatics, including the how and why of the advancement program.”
<em> ~ Scouts BSA Handbook for Boys. </em>
<p> The advancement program includes two elements: ranks and merit badges. Scouts BSA has seven ranks: Scout, Tenderfoot, Second Class, First Class, Star, Life, Eagle, and
more than 135 merit badges.
</p>
<p> The Scout rank starts you off on the right foot by covering topics such as the Scout Oath, Scout Law, and the patrol method. You should complete this rank as soon as you
join a troop.
</p>
<br> <br>
<p>
<img src="Images/TenderfootPatch.jpg" alt="TenderfootPatch" style="float:left;margin-left:150px;width:150px;height:200px;">
<img src="Images/SecondClassPatch.jpg" alt="SecondClassPatch" style="margin-left:50px;width:150px;height:200px;">
<img src="Images/FirstClassPatch.jpg" alt="FirstClassPatch" style="margin-left:50px;width:150px;height:200px;">
</p>
</p>
<br>
<p>
Tenderfoot, Second Class and First Class ranks cover important skills related to camping, cooking, hiking, navigation, outdoor ethics, first aid, fitness, citizenship,
leadership, nature, tools, and aquatics. These ranks can be accomplished in the first 12 to 18 months as a Scout.
</p>
<br> <br>
<p>
<img src="Images/StarPatch.jpg" alt="StarPatch" style="float:left;margin-left:150px;width:150px;height:200px;">
<img src="Images/LifePatch.jpg" alt="LifePatch" style="margin-left:50px;width:150px;height:200px;">
<img src="Images/EaglePatch.jpg" alt="EaglePatch" style="margin-left:50px;width:150px;height:200px;">
</p>
</p>
<br> <br>
<p>
Ranks of Star, Life and Eagle emphasize leadership, service, and earning merit badges. To become an Eagle Scout, 21 merit badges must be earned, 14 of which are required
including: First Aid, Citizenship in the Community, Citizenship in the Nation, Citizenship in the World, Citizenship in Society, Communication, Cooking, Personal Fitness,
Emergency Preparedness or Lifesaving, Environmental Science or Sustainability, Personal Management, Swimming or Hiking or Cycling, Camping, Family Life.
</p>
<p>
“Becoming an Eagle Scout is a big accomplishment. Earning the badge requires you to create a vision of future success and to develop a plan to make that vision a reality.
The requirements take into account everything you’ve learned about leadership, service, outdoor skills and values. Throughout your life, you will encounter people who
recognize the badge and who will trust and rely on you because you are an Eagle Scout. (By the way, you always are an Eagle Scout…never were!). Your status as an Eagle Scout
could help you earn a college scholarship, enter the military at a higher pay grade, or get a good job. More importantly, what you’ve learned on the trail to Eagle will help
you be successful in whatever you do after your time as a Scout comes to an end.” ~ Scouts BSA Handbook for Boys.
</p>
</article>
</section>
<br> <br>
<section>
<article>
<h2 style="color:brown"> CAMPING </h2>
<p> <img src="Images/Scoutcamping.jpg" alt="Scout Camping" style="float:left;margin-right:50px;width:400px;height:450px;"> <br>
Troop Scouts enjoy at least 9 short overnight campouts through out the year. Once a year, at least 70% of Scouts in the troop attend week-long camp. Some of the past
campouts have been to Utah’s Little Sahara, High Uintas, Maple Dell, Bear Lake Aquatic Base, Klondike and Camp Loll and more. Activities done at these campouts include
astronomy, backpacking, canoeing, cooking, cycling, first aid, fishing, hiking, nature, orienteering, shooting and swimming.
</p>
<br> <br> </br>
</article>
</section>
<br> <br>
<section>
<article>
<h2 style="color:purple"> SERVICE PROJECTS </h2>
<p>
<img src="Images/ScoutingForFood.jpg" alt="Scouting For Food" style="float:right;margin-left:100px;width:400px;height:350px;"> <br>
Service Projects are performed at least five times throughout the year. Most commonly this is done through supporting Scouts as they complete their Eagle Scout projects.
Once a year, a service project is also performed to benefit the chartered organization.
</p>
<br> <br> </br>
</article>
</section>
<br> <br><br> br><br>
<section>
<article>
<h2 style="color:#ff9933"> PATROL METHOD </h2>
<p> <img src="Images/SPL.jpg" alt="Patrol Method" style="float:left;margin-right:100px;width:300px;height:400px;">
Troop 22 Scouts is for youth boys led by youth boys. We use the patrol method to develop youth leaders. The troop currently has two patrols, each with a patrol leader.
Patrol leader training is held throughout the year, and meets at least ten times per year. We encourage scouts to also attend advanced training including NYLT or Order of
the Arrow Conference.
</p>
<p>
Additional positions of leaderhip in the patrol include: Quartermaster, Scribe, Chaplain Aide, Historian, Librarian, Webmaster, Bugler, and Outdoor Ethics Guide.
</p>
<br> <br> </br>
</article>
</section>
<section>
<article>
<h2 style="color:#992600"> VOLUNTEER LEADERSHIP MEASURES </h2>
<p> <img src="Images/VolunteerLeadership.jpg" alt="Scouting For Food" style="float:right;margin-left:100px;width:300px;height:350px;"> <br>
Although Scouts is for youth led by youth, success cannot be fully achieved without dedicated volunteer leaders. Foremost, we believe and actively maintain two-deep
leadership at all times in all activities.
</p>
<p> The troop proactively recruits sufficient leaders and communicates regularly with parents. Troop Committee meetings are held once a month. These meetings consist of the
Scoutmaster, Charter Representative, Committee Representative, Assistant Scoutmasters, Finance Representative, Merit Badge Coordinator, and Fundraising Committee.
</p>
<p> All leaders are trained and engaged at all levels. All leaders are required to be registered with Scouts BSA, Youth Protection Training, position specific training.
Scoutmaster and Assistant Scoutmaster also attend advanced training courses throughout the year.
</p>
<br> <br> </br>
</article>
</section>
<section>
<article>
<h2 style="color:#992600"> FUNDRAISING </h2>
<p>
<img src="Images/Fundraising.jpg" alt="Fundraising" style="margin-left:225px;width:400px;height:auto;"> <br>
The costs of running a troop quickly adds up. On average, yearly costs for each boy is around $600.00. Costs are broken into 3 buckets: 1) Registration and Dues ($250.00). Dues
cover weekend campouts and awards. 2) Week-long Scout camp, which averages $300/year. 3) Scouts BSA Uniform and Handbook.
</p>
<p> Each year, Troop 22 participates in various fundraising events to help parents support their youth in Scouting. We welcome new fundraising ideas and parent support for these
fundraising events to be a success. Fundraisers are generally led by parents with Troop Committee Support.
</p>
<br> <br> </br>
</article>
</section>
<section>
<article>
<h2 style="color:#ff3300"> PARENT RESPONSIBILITIES </h2>
<p> Above all else, the success of Scouts BSA and their children’s success in scouting cannot happen without the endless support of the parents.
We ask the parents to support their boys by:
</p>
<div class="ul">
<ul>
<li>
Understand the requirements for your son’s rank advancement; assist him in fulfilling these requirements; help keep the record of his achievements in his book
accurate and up to date and make sure that he brings his book to each Troop meeting.
</li>
<br>
<li> Assure that your Scout has a “Class A” uniform and that he dresses appropriately for all Scout functions.
</li>
<br>
<li> Notify your son’s troop leader whenever your son will be absent or late for a meeting.
</li>
<br>
<li> Volunteer time to help organize and execute one or more specific Scout activities throughout the year.
</li>
<br>
<li> Support the troops financial goals by understanding the troop budget and participating in fund raising activities.
</li>
<br>
<li> Be prompt in arrivals and departures also in turning in monies or forms due, or responding to emails from leaders if applicable. Prompt arrival ensures activities get started
on time and your scout does not miss anything. Picking up your scout on time allows the leaders to pick up their scout and get on with their life. Getting monies and forms on
time enables the leaders to make effective use of their time and energy in planning and delivering a quality program that benefits the entire group.
</li>
</ul>
</div>
</article>
</section>
<br> <br>
<br> <br>
<footer>
<div class="footer">
<img src="Images/Footer-AdventureOn.jpg" alt="footer" style="width:100%;height:100%;">
<div class="centered"><b>Copyright © 2023 <br>
Mapleton Scouts BSA Troop 22 <br>
All Rights Reserved<br>
<a href="https://www.facebook.com/profile.php?id=100089935580979"target="blank" class="fa fa-facebook"></a>
<a href="https://www.youtube.com/@boyscoutsofamerica" target="blank" class="fa fa-youtube"></a>
<a href="https://beascout.scouting.org/list/?zip=84664&program%5B0%5D=scoutsBSA&scoutsBSAFilter=all&miles=10" target="blank" class="fa fa-google"></a>
<a href="mailto:[email protected];" target="_blank"><i class="fa fa-envelope" style="font-size:48px"></i>
</div>
</div>
</footer>
</body>
</html>
/>