OutdoorAdventure.html file and accompanying css | Contains some css styling embedded within html

outdooradventure.css

header{
    display:grid;
    grid-template-columns: minmax(225px, 230px) auto minmax(225px, 230px);
    align-items: center;
}

footer {
    /*margin: 10px 0 10px; This margin is whitespace as sadiq said in class*/
    padding: 15px 0 15px; /* this padding is non-whitespace, its more useful for extending space where you have colored backgrounds */
    display: grid;
    grid-template-columns:245px 1fr 1fr 1fr 1fr;
    grid-row-gap: 10px;
    grid-column-gap: 15px;
    background-color:lightblue;
    border-top:1px solid #0172BA;
    border-bottom:1px solid #0172BA;
}

.menu{  /* This is used as part of nav */
    display: flex;/*shrinks nav based on screen size to a point*/
    flex-wrap:nowrap;/*nowrap property makes so nav items will not go to a new row when screen-size reduced less than nav width */
    justify-content:space-evenly; /* property space-evenly does as expected, within the space available*/  
   
}


nav {   
    /*line-height:1.5em;*/
    border-bottom: 1px solid #0172BA;
    border-top: 1px solid #0172BA;
    top:0;
    position:sticky;
  
}

nav ul { /* this is for the nav ul styles, no grid items */
    background-color:lightblue;
    padding: 15px;
 
}

nav ul li { /* this is for the nav li styles, no grid items */
    text-decoration: none;
    list-style-type: none;
    
    margin: 0 .2em;
    

}
nav a{
    text-decoration: none;
    font-size: 1.25em;
    color:#0172BA;
    background-color:white;
    padding: 0.4em 0.7em;

    border: 1px solid #0172BA;
    border-radius:25px;
}
nav a:hover{
    background-color: #003557;
}

footer div div p:first-of-type{
    font-weight:bold;
} 

footer li a:hover{
    background-color:#0172BA; /* take a look at this */
}

a{
    
    font-family: Arial;  /* check if this font is right*/
    line-height:2em;

}

.maintrailstitlerow{
    grid-column:1 / span 2;
    text-align:center;
}


.footer1 li{
    list-style-type:none;
}
.maintrailsleft{
    grid-column: 1;
    border-right: 1px solid black;
    
    align-content: center;
}
.maintrailsright{
    grid-column: 2;
    padding-left:10px;
    
} 
.maintrailscontainer {
    display:grid;
    grid-template-columns: 1fr 1fr;  /* This is the pair display:grid and grid-template-columns that combine to create a new container for my trails content within the grid item hiking, within gridmaincontainer of main content */
    border: 1px solid black;
    
    background-color: lightblue;
    padding:3px 0px 24px 0px; /* top right bottom left */
    margin: 30px 15px 7px 10px; /* This is to add whitespace on the sides of the trails grid container within gridmainhiking's greater contianer*/
    line-height:20px;
    align-content:center;
    
} 
.gridmaincontainer { /*main *CONTENT CONTAINER ONLY* */
    margin: 10px 10% 0px; /* all hail the 10% margin by the grace of the gods, as a stalwart bulwark against those p img {},  who with malice, attempt to disrupt the resplendent peacefulness and hegemony of my coding, created and made manifest in the .gridmaincontainer layout*/
    display: grid;
    grid-template-columns: minmax(200px, 230px) 1fr 200px;
    grid-gap: 25px;
}  
.gridheaderbuttons a{
    text-decoration: none;
    font-size: 1.25em;
    color:white;
    background-color:#0172BA;
    padding: 0.4em 0.7em;
    border: 1px solid #003557;
    border-radius:25px;
}
.gridheaderbuttons a:hover{
    background-color:#089247;
}
.gridheadericons{
    grid-column: 1;

}
.gridheaderlogo{
    grid-column: 2;
    text-align:center;
}
.gridheaderbuttons{
    grid-column:3;
    text-align:right;
    
}

.gridgallery {
    display:flex;
    flex-wrap:wrap;
    flex-direction:row;
    justify-content:center;
}

.ads{
    grid-column:3;
}

.Column1{
    grid-column:1;
    
   /* padding:2em;*/
}
.credits{
    grid-row:2;
    grid-column:1 / span 3;
    
}
.logoo {
    grid-column:1;
}
.aboutus{
    grid-column:2;
}
.reviews{
    grid-column:3;
}
.seminars {
    grid-column:4;
}
.shop {
    grid-column:5;
}
.photos{
    grid-column:2;
    grid-row:2;
}
.travel{
    grid-column:3;
    grid-row:2;
}
.events{
    grid-column:4;
    grid-row:2;
}

outdooradventure.html

<!DOCTYPE html>
<html lang="en">
<!-- Statement Of Authorship Michael Blair | COMP CO701 | 000223441-->
    <head>
        <meta charset = "UTF-8">
        <link rel="stylesheet" type="text/css" href="outdooradventure.css">
            <title>Outdoor Adventure </title>   
        <style>

            *{
                margin: 0;
                padding: 0;
            }

            .gridmainhiking p img {
                height:150px;
                width:150px;
            }

            body{
                padding-bottom:15px;
                background-color:white;
                font-family: Arial, Helvetica, sans-serif;
                font-size:1em;
            }

            #floatright{
                float:right;
                margin: 0 5px;/* Margin whitespace between the seperated paragraph - done to avoid using inline styles <br> */
            }

            #floatleft{
                float:left;
                margin: 0 10px;
 
            }

            .maintrailsleft ul, .maintrailsright ul{
                margin: 20px 0 40px 20px;
                align-items:center;
            
            }
            
            .maintrailsleft ul li, .maintrailsright ul li {
                margin-left:30px;   
                
            }

            .boldedtrailsheader {    
                text-decoration:none;
                list-style-type:none;
                font-weight:bold;
                margin-left: 34px;
                font-size:1.1em;
            }


            #specific{
                font-size:1.5em;
                font-family:Arial;
                font-weight:bold;
                line-height:1.1em;
                margin: 0 0 20px 0;
        
            }

            .card img{
                width:150px;
                border: 1px solid black;
                text-align:center;
                width:150px;
                margin:5px;    
            }

            h2, h3 { 
                background-color:#0172BA;
                font-weight:bold;
                color:white;
                text-align: center;
            }

            #typeofcanoe ul{
                margin:15px;
                top:0;
            }

            h5{
                text-align: center;
            }

            h4 {
                border-bottom: 1px solid black;
                font-weight:bolder;
            }

            .credits{
                border-top: 1px solid black;
                border-bottom: 1px solid black;
                margin:10px;
            }

            .ads img {
                padding-bottom:30px;
            }

            .card {
                margin:0;
            }

            .card img{   /* adjust card13,card14,card15 */
                height:150px;
                width: 150px;
            }

            .Column1 p{
                margin:12px 0;
            }

            .credits p{
                font-size:.8em;   
            }

             
            
            .gridmainhiking p {
                margin: 3px 0 10px 0;/* Margin whitespace between the seperated paragraph - done to avoid using inline styles <br> */
            
            }

            .gridmainhiking{
                text-align:left;
            }
            #gallery{
                margin:0px 2px;
            }

        </style>
    </head>
    <body>

        <header>
            <div class="gridheadericons">     <!--  This is the start of my social media icons link group within the grid container of my header  -->
                <a href="https://www.facebook.com"><img src = "images/socialmedia/facebook32.png"  alt="facebook icon" title="Facebook"></a>
                <a href="https://www.twitter.com/"><img src = "images/socialmedia/twitter32.png" alt="twitter icon" title="Twitter"></a>
                <a href="https://www.instagram.com/"><img src = "images/socialmedia/instagram32.png" alt="instagram icon" title="Instagram"></a>
                <a href="https://www.pinterest.com/"><img src = "images/socialmedia/pinterest32.png" alt="pinterest icon" title="Pinterest"></a>
                <a href="https://www.youtube.com/"><img src = "images/socialmedia/youtube32.png" alt="youtube icon" title="Youtube"></a>
                <a href="mailto:info@example.com"><img src="images/socialmedia/emailat32.png" alt="email icon" title="Email"></a> 
            </div>                           <!--  This is the end of my social media icons link group within the grid container of my header  -->

            <div class="gridheaderlogo">
                <img src = "images/logos/outdooradventuresquare.png" alt="outdoor adventure logo footer">
            </div> 

            <div class="gridheaderbuttons">
                <a href="#">Subscribe</a>
                <a href="#">Sign-in</a>
            </div> 
        </header>
        <!-- NAV STARTS -->
        <nav>
            <ul class="menu">
                <li class="item"><a href = "outdooradventure.html#">About Us</a></li>
                <li class="item"><a href = "outdooradventure.html#">Travel</a></li>
                <li class="item"><a href = "outdooradventure.html#">Photos</a></li>
                <li class="item"><a href = "outdooradventure.html#">Shop</a></li>
                <li class="item"><a href = "outdooradventure.html#">Reviews</a></li>
                <li class="item"><a href = "outdooradventure.html#">Seminars</a></li>
                <li class="item"><a href = "outdooradventure.html#">Events</a></li>
            </ul>
        </nav>
        <!-- NAV ENDS -->
        <div class= "gridmaincontainer"> <!-- Stores main webpage content grid items -->
            <div class="Column1">
                <h2>Canoeing</h2>
                <p>Canoeing is an activity which involves paddling a canoe with a single-bladed paddle. Common meanings of the term are limited to when the canoeing is the central purpose of the activity. Broader meanings include when it is combined with other activities such as canoe camping, or where canoeing is merely a transportation method used to accomplish other activities. Most present-day canoeing is done as or as a part of a sport or recreational activity. In some parts of Europe canoeing refers to both canoeing and kayaking, with a canoe being called an open canoe.<p>
                <p>
                Canoes are widely used for competition and pleasure, such as racing, whitewater, touring and camping, freestyle, and general recreation. Canoeing has been part of the Olympics since 1936. The intended use of the canoe dictates its hull shape and length and construction material. Historically, canoes were dugouts or made of bark on a wood frame, but construction materials evolved to canvas on a wood frame, then to aluminum. Most modern canoes are made of molded plastic or composites such as fiberglass.
                </p>
                <p>
                Canoes were developed by cultures all over the world, including some designed for use with sails or outriggers. Until the mid-1800s the canoe was an important means of transport for exploration and trade, and in some places it still is used as such, perhaps with the addition of an outboard motor. Where the canoe played a key role in history, such as the northern United States, Canada, and New Zealand, it remains an important theme in popular culture.
                </p>
                <div id="typeofcanoe">
                    <h2>Types Of Canoes</h2>
                    <ul>
                        <li>Sprint</li>
                        <li>Slalom and wildwater</li>
                        <li>Marathon</li>
                        <li>General Recreation</li>
                        <li>Touring and camping</li>
                        <li>Freestyle</li>
                    </ul>
                </div>
            </div>
            <div class= "Column2">
                <div class="gridmainhiking">
                    <h2>Hiking</h2>
                    <p>
                        <span id="floatleft"><img src="images/hiking150/hikingmountains150.jpg" alt="hiking through the mountains"></span>In the United States,   Canada, the Republic of Ireland, and United Kingdom, hiking means walking outdoors on a trail, or off trail, for recreational purposes. A day hike refers to a hike that can be completed in a single day. However, in the United Kingdom, the word walking is also used, as well as rambling, while walking in mountainous areas is called hillwalking. In Northern England, Including the Lake District and Yorkshire Dales, fellwalking describes hill or mountain walks, as fell is the common word for both features there.
                    </p><br>
                    <p>
                        Hiking sometimes involves bushwhacking and is sometimes referred to as such. <span id="floatright"><img src="images/hiking150/winterhiker150.jpg" alt="winter hiking on mountain"></span>This specifically refers to difficult walking through dense  forest, undergrowth, or bushes, where forward progress requires pushing vegetation aside. In extreme cases of bushwhacking, where the vegetation is so dense that human passage is impeded, a machete is used to clear a pathway. The Australian term bushwalking refers to both on and off-trail hiking. Common terms for hiking used by New Zealanders are tramping (particularly for overnight and longer trips), walking or bushwalking. Trekking is the preferred word used to describe multi-day hiking in the mountainous regions of India, Pakistan, Nepal, North America, South America, Iran, and the highlands of East Africa. Hiking a long-distance trail from end-to-end is also referred to as trekking and as thru-hiking in some places. In North America, multi-day hikes, usually with camping, are referred to as backpacking.
                    </p>
                </div>
                <div class="maintrailscontainer"><!-- START of Trails Nested Grid Container-->
                    <div class ="maintrailstitlerow"><!-- START Of Main Trails Title Row-->
                        <p id="specific">Trails - Fall 2020</p>
                    </div> 
                    <div class="maintrailsleft"> <!--left&right div class is mainly for grid css-->
                        <span class="boldedtrailsheader">National Parks (partial list)</span>
                        <ul>
                            <li>Banff National Park</li>
                            <li>Cape Breton Highlands National Park</li>
                            <li>Point Pelee National Park</li>
                        </ul>
                    </div>
                    <div class="maintrailsright"> <!--START of Nested Trails Grid Item (Right)-->
                        <span class="boldedtrailsheader">Provincial Parks (partial list)</span>
                        <ul>  
                            <li>Bronte Creek Provincial Park </li>
                            <li>Rock Point Provincial Park</li>
                            <li>Selkirk Provincial Park</li>    
                        </ul>
                    </div>      <!-- END Of Nested Trails Grid Item (Right)-->
                </div>  <!-- END of Trails Nested Grid Container  -->
                <div id ="gallery">
                    <h3>Gallery</h3>
                    
                    <div class="gridgallery">
                        <div class = "card">
                            <img src="images/outdoor150/outdoor150-1.jpg" alt = "sun shining through trees">
                        </div>
                        <div class = "card">
                            <img src="images/outdoor150/outdoor150-2.jpg" alt = "garbagebin on campfire">
                        </div>
                        <div class = "card">
                            <img src="images/outdoor150/outdoor150-3.jpg" alt = "rucksacks sitting on rocks">
                        </div>
                        <div class = "card">
                            <img src="images/outdoor150/outdoor150-4.jpg" alt = "man standing paddleboarding">
                        </div>
                        <div class = "card">
                            <img src="images/outdoor150/outdoor150-5.jpg" alt = "kettle propane stove">
                        </div>
                        <div class = "card">
                            <img src="images/outdoor150/outdoor150-6.jpg" alt = "food platter at campsite">
                        </div>
                        <div class = "card">
                            <img src="images/outdoor150/outdoor150-7.jpg" alt = "camping supplies to be packed">
                        </div>
                        <div class = "card">
                            <img src="images/outdoor150/outdoor150-8.jpg" alt = "family around day campfire">
                        </div>
                        <div class = "card">
                            <img src="images/outdoor150/outdoor150-9.jpg" alt = "campfire near tents">
                        </div>
                        <div class = "card">
                            <img src="images/outdoor150/outdoor150-10.jpg" alt = "canoe at lakeshore">
                        </div>
                        <div class = "card">
                            <img src="images/outdoor150/outdoor150-11.jpg" alt = "canoes paddling on lake">
                        </div>
                        <div class = "card">
                            <img src="images/outdoor150/outdoor150-12.jpg" alt = "a dozen canoes at lakeshore">
                        </div>
                        <div class = "card">
                            <img src="images/outdoor150/outdoor150-13.jpg" alt = "a dozen canoes at lakeshore">
                        </div>
                        <div class = "card">
                            <img src="images/outdoor150/outdoor150-14.jpg" alt = "a dozen canoes at lakeshore">
                        </div>
                        <div class = "card">
                            <img src="images/outdoor150/outdoor150-15.jpg" alt = "a dozen canoes at lakeshore">
                        </div>
                    </div>
                </div>
            </div>
                               <!-- END Of Hiking Grid Item (2nd Column)-->
            <div class="ads">
                <div>
                    <img src="images/ads/greymountain.jpg" alt="grey mountain ad">
                    <img src="images/ads/mountainsThinkBig.jpg" alt="mountain hiking ad">
                </div>
            </div>
            <div class="credits">
                <h5>Credits</h5>
                <p>
                    Text content was obtained from appropriate Wikipedia pages. Images were obtained from unsplash.com, social media buttons were generated at iconmonstr.com and logos were created at logomaker.com. License agreements for images do not require citation for non-profit use.
                </p>
            </div>
    </div>            <!-- END Of MAIN CONTENT GRID Container-->  
        
    <footer>
       
        <div class="logoo">
            <div class="footer1">
                <img src="images/logos/outdooradventurehorizontal.png" alt="outdoor adventure footer logo">
            </div>
        </div>

        <div class="aboutus">
            <div class="footer1">
                <h4>About Us</h4>
                <ul>
                    <li>Who we are</li>
                    <li>What we stand for</li>
                    <li>How you can help</li>
                    <li>Fall 2020 Plans</li>
                </ul>
            </div>
        </div>

        <div class="reviews">
            <div class="footer1">
                <h4>Reviews</h4> 
                <ul>
                    <li>Camping Products</li>
                    <li>Hiking Products</li>
                </ul>
            </div>
        </div>
        <div class="seminars">
            <div class="footer1">
                <h4>Seminars</h4>
                <ul>
                    <li>Trip Planning</li>
                    <li>Hiking</li>
                    <li>Camping</li>
                </ul>
            </div>
        </div>

        <div class="shop">
            <div class="footer1">
                <h4>Shop</h4>
                <ul>
                    <li>Camping</li>
                    <li>Hiking</li>
                    <li>Canoeing</li>
                    <li>Kayaking</li>
                    <li>Fishing</li>
                </ul>
            </div>
        </div>
        <div class="photos">
            <div class="footer1">
                <h4>Photos</h4>
                <ul>
                    <li>Gallery</li>
                    <li>Submit a Photo</li>
                </ul>
            </div>
        </div>
        <div class="travel">
            <div class="footer1">
                <h4>Travel</h4>
                <ul>
                    <li>Resources</li>
                    <li>Planning</li>
                </ul>
            </div>
        </div>
            
        <div class="events">
            <div class="footer1">
                <h4>Events</h4>
                <ul>
                    <li>Hikes</li>
                    <li>Vendor Demonstrations</li>
                </ul>
            </div>
        </div>
    </footer>
        
    </body>
</html>