CABC - test5

<!doctype html><html lang="en">

<head><meta charset="utf-8"><meta name="viewport"

content="width=device-width, initial-scale=1">

<link

href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">

<title>Bootstrap Example</title><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js">

</script></head><body class="p-3 m-0 border-0 bd-example m-0 border-0"><style>

/* Reset CSS */

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

/* Ensures that the root and body elements take up full height and sets default font properties. */

html, body {

height: 100%;

font-size: 100%;

line-height: 1.4;

font-family: sans-serif;

}

/* Ensures media elements are displayed as blocks and are responsive by default. */

img, picture, video, canvas, svg {

display: block;

max-width: 80%;

}

/* Inherits font settings from the parent element to maintain consistency. */

button, input, select, textarea {

font-family: inherit;

}

/* Removes the default underline and ensures links inherit the text color. */

a {

text-decoration: none;

color: inherit;

}

/* Removes default list styling.*/

ul, ol {

list-style: none;

}

/* Ensures tables have consistent border and spacing behavior */

table { border-collapse: collapse; border-spacing: 0; }

body {

margin: 0;

font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

background-color: navy;

color: #000;

line-height: 1.25rem;

}

.carousel {

width: 100%; /* Full width carousel */

height: 500px; /* Set height for the carousel */

position: relative;

display: flex;

justify-content: center;

align-items: center;

overflow: hidden;

}

.carousel-caption{

top:50%;

}

/*

.container1 {

display: flex;

flex-wrap: wrap; /* Allows the columns to wrap on smaller screens */

gap: 20px; /* Adds space between the columns */

padding: 2px; /*Adds padding around the container */

margin-left: 4vw;

max-width: 85%;

}

/* centers the header*/

.centered {

position: absolute;

top: 9%;

left: 50%;

transform: translate(-50%, -50%);

}

.header {

display: flex;

justify-content: center;

align-items: center;

width:auto;

gap: 20px; /* space between items */

flex-wrap: wrap; /* Wraps items when the screen is too small */

}

/*

.flex-item {

padding: 20px;

background-color: red;

border: 1px solid #ccc;

}

*/

/* header text colours */

.highlite-word-colour {

color: crimson;

}

.highlite-word-colour1 {

color: green;

}

/* Container to hold the columns */

.container {

display: flex;

flex-wrap: wrap;; /* Allows the columns to wrap on smaller screens */

gap: 20px; /* Adds space between the columns */

padding: 20px; /* Adds padding around the container */

padding-top: 5vh;

}

.container-img{

max-width: 80%; /* Ensures image doesn't exceed container width */

height: 40vh;

margin-top: 20px;

margin-bottom: 20px;}

/* Text column styles */

.text-column {

flex: 1; /* This column will take up available space proportionally */

min-width: 300px; /* Ensures the text column doesn't get too narrow */

background-color: #fff;/* sets backgroeun of colour of column*/

padding-left: .5rem; /* indents the text*/

padding-right: 1.0rem

;

max-width: 90%;

}

/* Image column styles */

.image-column {

flex: 1; /* This column will take up available space proportionally */

min-width: 300px; /* Ensures the image column doesn't get too narrow */

display: flex; /* Makes sure the image can be centered if needed */

justify-content: center; /* Centers the image horizontally */

align-items: center; /* Centers the image vertically */

background-color: #fff; /* sets backgroeun of colour of column*/

}

/* Image styling */

.image-column img {

width: 90%; /* Makes the image responsive */

height: 90%; /* Maintains the aspect ratio of the image */

object-fit: cover; /* Ensures the image covers the space */

max-width: 900px; /* Optional: Limit the max width of the image */

border-radius: 20px; /* rounds the corner of the image*/

}

/*positions the rext on the image*/

.text-overlay {

position: absolute;

bottom: 200px;

right: 100px;

color: black;

font-size: clamp(1.2rem, 2vw, 1.8rem);

font-weight: bold;

text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);

max-width: 60ch;

}

.text-overlay1 {

position: absolute;

bottom: 100px;

right: 100px;

color: black;

font-size: clamp(1.2rem, 2vw, 1.8rem);

font-weight: bold;

text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);

max-width: 60ch;

}

/* Responsive design: Adjusts for smaller screens */

/* Responsive design for smaller screens */

@media (max-width: 768px) {

.container {

flex-direction: column;

}

.text-column, .image-column {

width: 100%;

padding: 10px;

}

.image-column img {

max-width: 100%;}

.text-overlay{

right:20px;

}

</style>

<body>

</div>

<h5>Cold Ashby Bowls Club</h5>

<br>

<p>Some representative placeholder content for the first slide.</p>

</div>

<h5>competitions</h5>

<p>Some representative placeholder content for the second slide.</p>

</div>

<img src="https://live.staticflickr.com/65535/53897189789_8f9ce6a3a9_w.jpg"

class= "d-block w-100" alt="Slide 3">

<h5>Third Slide Label</h5>

<p>Some representative placeholder content for the third slide.</p>

</div>

<span class="visually-hidden">Previous</span>

</button>

</button>

</div>

<br>

<h4>

<span class="highlite-word-colour"> Get </span><span class="highlite-word-colour1"> Active, </span><span class="highlite-word-colour"> Have </span><span class="highlite-word-colour1"> Fun, </span><span class="highlite-word-colour"> Play </span><span class="highlite-word-colour1"> Bowls </span>

</h4>

</div>

<h1>Hello</h1>

<br>

<p3>We truly believe that Lawn Bowls is the sport for all.

<br>

We strongly believe everyone should be able to access and enjoy our sport regardless of gender, race, sexual orientation, background, or circumstances.

<br>

At Cold Ashby Bowls Club we are committed to embedding inclusive practice and are passionate that we are stronger together when trying to achieve this aim.

<br>

Never tried lawn bowls before- then come along and let us show you what a wonderful game it is.

<br>

All we ask is that you turn up in a pair of flat bottom light shoes to protect our green.

<br>

We will supply everything else.

<br>

</p3>

<h1> Yes bowling is our passion</h1>

<br>

</p3>

</div>

</div>

<p3>

Cold Ashby Bowls Club is set in the North Northamptonshire country side in the village of Cold Ashby.

<br>

Set next to the cricket ground and adjacent to the golf club it is surrounded by open countryside.

<br>

The club has onsite parking for over 40cars.

The club has a very active calendar of seasonal interclub bowling competitions for those who have a competitive spirit and for others a laid-back opportunity

to play informally on one of the best kept bowling greens in the county.

<br>

New members, playing or experienced and visitors made very welcome.

<br>

</p3>

<h1>

Make new friends with an active calendar throughout the year. <br>

</h1>

</div>

</div>

<p3>

<span style="color: blue;font-style: italic; font-size: 1.75rem;font-weight: 600;"> Why Play Bowls.</span></h1>

<br>

<span style="color: red;font-size: 1.5rem; font-weight: 600;">To improve concentration</span>

<br>

<span style="color: green;font-size: 1.5rem;font-weight: 600;"> Be more alert .</span>

<br>

<span style="font-size: 1.5rem;color: red; font-weight: 600;"> Get better balance </span>

<br>

<span style="color: green;font-size: 1.5rem;font-weight: 600;">Be more flexible </span>

<br>

<span style="font-size: 1.5rem;color: red; font-weight: 600;">Reduce the risk of heart disease</span>

<br>

<span style="color: green;font-size: 1.5rem;font-weight: 600;">Reduce the risk of heart disease</span>

<br>

<span style="font-size: 1.5rem;color: red; font-weight: 600;"> Reduce stress </span>

<br>

<span style="color: green;font-size: 1.5rem;font-weight: 600;"> Burn calories â€“ lose weight </span>

</p3>

</div>

</div>

</body>