@charset "UTF-8"; body { padding: 0px; /* This removes any default padding the browser may apply to the body tag */ margin: 0px; /* This removes any default margin the browser may apply to the body tag */ text-align: center; /* This will make sure all text and objects that behave like text center in the browser */ background-color: rgba(243,243,244,1.00); /* This is my background color in case my gradient fails */ background-image: url(../images/pexels-photo-1193743.jpeg); /* This is our background image animated animated GIF. Look at those lil' fishies swim */ background-repeat: no-repeat; /* This makes sure only one background image will appear */ background-attachment: fixed; /* This makes sure the image will appear where you want it to */ background-position: center center; /* This makes the background image appear in the exact center of the browser window */ background-size: cover; /* This makes the background image fill the entirety of the tag containing it. In this case, the tag */ /* Look at all this gradient code crap. Aren't you glad Michael didn't make you hand code this? */ /* -- Yes, I have hidden our beautiful background gradient. background-image is needed by a duck -- background-image: -webkit-linear-gradient(34deg,rgba(255,252,0,1.00) 0%,rgba(246,157,251,1.00) 41.89%,rgba(0,74,255,1.00) 82.66%); background-image: -moz-linear-gradient(34deg,rgba(255,252,0,1.00) 0%,rgba(246,157,251,1.00) 41.89%,rgba(0,74,255,1.00) 82.66%); background-image: -o-linear-gradient(34deg,rgba(255,252,0,1.00) 0%,rgba(246,157,251,1.00) 41.89%,rgba(0,74,255,1.00) 82.66%); background-image: linear-gradient(56deg,rgba(255,252,0,1.00) 0%,rgba(246,157,251,1.00) 41.89%,rgba(0,74,255,1.00) 82.66%); */ } header { height: 200px; /* This determines the height of our
(deafault is 0) */ width: 100%; margin-right: auto; margin-left: auto; margin-bottom: 0px; /* Each number represents an edge of our header; the first number is the top margin (30 px), the second number is the right margin (auto), the third number is the bottom margin (0 px), the fourth number is the left margin (auto). The "auto auto" margins for the left and right center the box in our browser window */ /* I commented out the background color so we could have a gradient in out background */ /* background-color: rgba(0,24,146,0.75); */ /* Note the 0.75 in the "a" channel. This means that our
has an opacity of 75% */ border-radius: 0px; /* This rounds the corners and gives our header an elegant look. Maybe. */ border: 1px solid rgba(239,239,237,1.00); /* This is a 2px white, solid line border around our header */ -webkit-box-shadow: 0px 0px 0px 0px; box-shadow: 0px 0px 0px 0px; /* This sexy gradient gradiates from a 100% opacity version of the class selected teal to a 0% version of the same teal. It creates a neat effect, if I do say so myself. */ /* [disabled]background-color: #1F1C43; */ background-image: -webkit-linear-gradient(270deg,rgba(8,5,42,1.00) 0%,rgba(8,5,42,0.00) 100%); background-image: -moz-linear-gradient(270deg,rgba(8,5,42,1.00) 0%,rgba(8,5,42,0.00) 100%); background-image: -o-linear-gradient(270deg,rgba(8,5,42,1.00) 0%,rgba(8,5,42,0.00) 100%); background-image: linear-gradient(180deg,rgba(8,5,42,1.00) 0%,rgba(8,5,42,0.00) 100%); } nav { position: relative; /* Added so that we could add a z-index property and have it stick */ z-index: 10000; /* This makes sure our dropdown menu appears over the top of our other content */ width: 40%; height: 125px; margin: 20px auto 0px auto; background-color: rgba(8,5,42,1.00); border: 2px solid rgba(239,239,237,1.00); border-radius: 300px; white-space: nowrap; } nav ul /* This selector controls our navigation unordered list. The compound selector is looking for instaces of