Difference between revisions of "Template:Queens Canada"

Line 2: Line 2:
 
<!-- This will be the location for all common elements on the website -->
 
<!-- This will be the location for all common elements on the website -->
  
 +
<header>
 +
        <nav>
 +
            <ul class = nav-list>
 +
                <div id = brand-elements>
 +
                    <li><a href = "index.html" title = "Go to Homepage"><img src = Resources/Logo_With_Pink.png width = 35%></a></li>
 +
                </div>
 +
                <div id = nav-elements>
 +
                    <li id = home-link><a href = "index.html" title = "Go to homepage">home</a></li>
 +
                    <li class = drop-link id = about-drop-link><a>about</a>
 +
                        <ul class = dropdown-content id = about-dropdown-content>
 +
                            <li><a href = "about.html" title = "Read about me">About Me</a></li>
 +
                            <li><a href = "" title = "View my career">My Career</a></li>
 +
                            <li><a href = "" title = "Read frequently asked questions">FAQ</a></li>
 +
                        </ul>
 +
                    </li>
 +
                    <li class = drop-link id = product-drop-link><a href = "products.html">products</a>
 +
                        <ul class = dropdown-content id = product-dropdown-content>
 +
                            <li><a href = "digital-art.html" title = "View Digital Art">Digital Art</a></li>
 +
                            <li><a href = "embroidery.html" title = "View Embroideries">Embroidery</a></li>
 +
                            <li><a href = "" title = "View Greeting Cards">Greeting Cards</a></li>
 +
                            <li><a href = "" title = "View Paintings">Paintings</a></li>
 +
                        </ul>
 +
                    </li>
 +
                    <li class = drop-link id = contact-drop-link><a href = "">contact</a>
 +
                        <ul class = dropdown-content id = contact-dropdown-content>
 +
                            <li><a href = "" title = "Contact me">Contact Me</a></li>
 +
                            <li><a href = "" title = "View my social media">Get Social</a></li>
 +
                        </ul>
 +
                    </li>
 +
                </div>
 +
            </ul>
 +
        </nav>
 +
       
 +
        <!--<script> /* makes the dropdown menus the same width as the dropdown "button". could not use width 100% */
 +
            function dropdownWidthAdjustment(){
 +
                var aboutWidth = document.getElementById("about-drop-link").offsetWidth;
 +
                aboutWidth = aboutWidth.toString();
 +
                aboutWidth = aboutWidth + "px";
 +
                document.getElementById("about-dropdown-content").style.width = aboutWidth;
  
 +
                var productsWidth = document.getElementById("product-drop-link").offsetWidth;
 +
                productsWidth = productsWidth.toString();
 +
                productsWidth = productsWidth + "px";
 +
                document.getElementById("product-dropdown-content").style.width = productsWidth;
 +
 +
                var contactWidth = document.getElementById("contact-drop-link").offsetWidth;
 +
                contactWidth = contactWidth.toString();
 +
                contactWidth = contactWidth + "px";
 +
                document.getElementById("contact-dropdown-content").style.width = contactWidth;
 +
            }
 +
        </script>-->
 +
       
 +
    </header>
  
  

Revision as of 21:07, 29 May 2020