/* This CSS file is contains the CSS rule sets for - index.html - any universal elements that all pages use The CSS for the take-action.html is in take-action.css */ /************************************************/ /************* UNIVERSAL ELEMENTS ***************/ /************************************************/ /* TODO: Customize your font properties and background color for all elements inside the and tags */ body, html { height: 100%; font-size: 20px; /* Change the font size*/ font-family: "Spectral"; /* Change the font */ font-style: bold; line-height: 1.5em; /* Change the line height size*/ margin: 0em; color: white; /* Change the font color*/ background-color: #f5c842; /* Change the background color */ box-sizing: border-box; } h1 { letter-spacing: 10px; /*TODO: Change the font-family property to your linked font*/ font-family: 'IM Fell English'; font-style: italic; font-size: 75px; color: #3d2413; text-align: center; } /*TODO: Change the font-family property to your linked font*/ h2 { letter-spacing: 3px; font-size: 25px; font-family: "Spectral"; font-style: bold; color: white; text-align: center; line-height: 1.3em; } .title { display: flex; flex-direction: row; justify-content: center; align-items: flex-end; } /*TODO: Change the color of a link when a person hovers over it*/ p a { color: #43d6b9ff; text-decoration: none; } /************************************************/ /*************** CSS FOR NAV BAR ****************/ /************************************************/ /* All of these TODOs are optional. You should change the styling based on your mockup */ /* TODO (optional): Change the background color and/or border style */ ul.nav-bar { /* Styling for the

element */ float: right; font-size: 15px; } /* TODO (optional): Change the font color, decoration, and/or case */ li.nav a { /* Styling for the elements in
*/ display: block; color: white; text-align: center; border-style: inset; border-color: #6b4d3a; padding: 14px 16px; text-decoration: none; text-transform: uppercase; font-weight: bold; } /* TODO (optional): Change the background color and/or font color when the mouse hovers over an item */ li.nav a:hover { /* Styling for the elements when the mouse is hovering in
*/ background-color: #ff8fbf; color: #2b1e0c; } /************************************************/ /*********** CSS FOR FLEXBOX HEADING ************/ /************************************************/ /* TODO: Review the CSS properties to the flexbox container for title and intro text */ .flex-container { display: flex; /* Set the flexbox display */ flex-direction: row; /* Configure the flex items to row */ flex-wrap: nowrap; /* Don’t wrap the flex items */ justify-content: center; /* Justify the flex items to the center */ align-items: center; /* Align the flex items to the center */ /* Design properties */ background-color: #3d2413; padding: 5px; /* Positioning properties */ position: absolute; left: 5%; right: 5%; top: 30%; /* Change this value to move the box up or down */ /*Debugging Tip: Uncomment the line below to see the outline of the container*/ /*border-style: dotted;*/ } /* TODO: Review the CSS properties to the flex item for the heading (the left box) */ .heading-home { padding: 5%; color: white; font-size: 50px; letter-spacing: 10px; line-height: 60px; text-align: center; font-family: 'IM Fell English'; font-weight: bold; /*Debugging Tip: Uncomment the line below to see the outline of the container*/ /*border-style: dotted;*/ } /* TODO: Review the CSS properties to the flex item for the intro text (the right box) */ .intro-text { background-color: #f5c842; /* Add your own background color */ padding: 2%; margin: 2%; color: black; /* Add the color of your font */ font-size: 30px; /* Add your font size*/ letter-spacing: 2px; /* Adds space between letters */ line-height: 1.4em; /* Adds space between lines */ text-align: center; /*Debugging Tip: Uncomment the line below to see the outline of the container*/ /*border-style: dotted;*/ } /************************************************/ /*************** PARALLAX SCROLL ****************/ /************************************************/ /*-----------TEXT SECTIONS-----------*/ /* TODO (optional): Change the background color and/or text alignment */ .text-section { background-color: #6b370c; padding: 20px 20px; margin: 50px; margin-bottom: 0px; text-align: center; font-size: 50px; line-height: 1.4em; } /*---------IMAGE STYLING + PARALLAX PROPERTY---------*/ /* TODO: Add the CSS selector for each image to the collective image rule set */ .main-message, .image-one, .image-two, .image-three, .image-four { position: relative; background-position: center; background-repeat: no-repeat; background-color: #43d6b9ff; background-size: cover; min-height: 100%; /* This adjusts the height of the image */ /* TODO: Add the property to create the parallax scrolling effect here */ background-attachment: fixed; } /* TODO: Replace the current image URL with your own. This is the top image on your homepage. */ .main-message { background-image: url("https://cdn.glitch.com/90d993d5-1e4a-430d-939f-a8d043e233e3%2Fforget-me-not-257176_1920.jpg?v=1594783059170"); } /* TODO: Replace the current image URL with your own */ .image-one { background-image: url("https://cdn.glitch.com/f5747443-a99d-4f9d-902d-2d7e58c9bd9c%2Fhoney-bees-326337_1920.jpg?v=1594930058681"); } .image-two { background-image: url("https://cdn.glitch.com/f5747443-a99d-4f9d-902d-2d7e58c9bd9c%2Ffruit-700006_1920.jpg?v=1594928747608"); } .image-three { background-image: url("https://cdn.glitch.com/f5747443-a99d-4f9d-902d-2d7e58c9bd9c%2Ftractor-4217686_1920.jpg?v=1594930121478"); } .image-four { background-image: url("https://cdn.glitch.com/f5747443-a99d-4f9d-902d-2d7e58c9bd9c%2Fbee-colonies-4027005_1920.jpg?v=1594939966751") } /* TODO: Add a second background image. Make sure you add this class selector to the collective image rule set above */ /* TODO: Add more background images by repeating the process above */ /*-----------IMAGE ATTRIBUTIONS (if required)-----------*/ .attributions { font-size: 12px; text-align: right; margin-right: 10px; color: black; } .link{ color: #ff8fbf; } /******************************************************/ /***** CHANGE INDEX.HTML CSS BASED ON SCREEN SIZE *****/ /******************************************************/ /* TODO: Add a breakpoint if the screen is 700px or less */ /* TODO: Add additional breakpoints based on your website's design*/ @media mediatype and (max-width: 700 px) { .flex-container { flex-wrap: wrap; top: 20%; } } .bottom-text { background-color: #ff8fbf; color: black; font-size: 50px; text-align: center; line-height: 1.4em; padding: 20px 20px; font-weight: bold; } #fun-fact { color: black; }