diff --git a/starter_code/stylesheets/style.css b/starter_code/stylesheets/style.css index 59f4a7798..3041e0cbd 100644 --- a/starter_code/stylesheets/style.css +++ b/starter_code/stylesheets/style.css @@ -8,3 +8,303 @@ paragraph yellow: #ECB12F links blue: #2E71A6 footer links grey: #454245 */ + +/* Base styles */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: Arial, sans-serif; + line-height: 1.6; +} + +/* Navigation */ +nav { + background-color: #540B51; + padding: 20px; + display: flex; + justify-content: space-between; + align-items: center; +} + +nav img { + height: 24px; +} + +nav ul { + display: none; +} + +nav button { + background: none; + border: none; + margin-left: 10px; +} + +/* Header */ +header { + background-color: #540B51; + color: white; + padding: 40px 20px; + text-align: center; +} + +header h1 { + font-size: 2rem; + margin-bottom: 20px; +} + +header p { + margin-bottom: 30px; + font-size: 1.1rem; +} + +header div { + display: flex; + flex-direction: column; + gap: 15px; +} + +header button { + padding: 15px; + border: none; + border-radius: 4px; + font-weight: bold; + cursor: pointer; +} + +header button:first-child { + background-color: white; + color: #540B51; +} + +header button:last-child { + background-color: #4285F4; + color: white; + display: flex; + align-items: center; + justify-content: center; + gap: 10px; +} + +header button img { + background-color: white; + padding: 5px; + border-radius: 2px; +} + +header img[alt="Slack app screenshot"] { + width: 100%; + max-width: 400px; + margin-top: 40px; +} + +/* Trusted Companies Section */ +main section:first-child { + background-color: #F3EAE2; + padding: 40px 20px; + text-align: center; +} + +main section:first-child p { + font-weight: bold; + margin-bottom: 20px; + color: #000000; +} + +main section:first-child div { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 20px; +} + +main section:first-child img { + height: 30px; + margin: 10px; +} + +/* Teams Section */ +main section:nth-child(2) { + padding: 60px 20px; + background-color: white; +} + +main section:nth-child(2) h3 { + font-size: 1.8rem; + margin-bottom: 20px; + color: #191817; +} + +main section:nth-child(2) > p { + margin-bottom: 40px; + color: #000000; +} + +main section:nth-child(2) ul { + list-style: none; +} + +main section:nth-child(2) li { + margin-bottom: 40px; + text-align: center; +} + +main section:nth-child(2) span { + display: block; + font-size: 3rem; + font-weight: bold; + color: #540B51; + margin-bottom: 10px; +} + +main section:nth-child(2) sup { + color: #540B51; +} + +/* CTA Section */ +main section:last-child { + background-color: #540B51; + padding: 60px 20px; + text-align: center; +} + +main section:last-child h3 { + color: white; + font-size: 1.8rem; + margin-bottom: 30px; +} + +main section:last-child button { + padding: 15px 25px; + margin: 10px; + border: none; + border-radius: 4px; + font-weight: bold; + cursor: pointer; + width: 90%; + max-width: 300px; +} + +main section:last-child button:first-child { + background-color: white; + color: #540B51; +} + +main section:last-child button:last-child { + background-color: #540B51; + color: white; + border: 1px solid white; +} + +/* Footer */ +footer { + background-color: white; + padding: 40px 20px; + text-align: center; +} + +footer ul { + list-style: none; + margin-bottom: 20px; +} + +footer ul:first-child { + display: flex; + flex-direction: column; + gap: 15px; +} + +footer ul:first-child li { + font-weight: bold; + color: #454245; +} + +footer hr { + margin: 30px 0; + border: 0.5px solid #ddd; +} + +footer ul:last-child { + display: flex; + justify-content: center; + gap: 20px; + margin-bottom: 30px; +} + +footer ul:last-child li { + font-size: 1.5rem; + color: #454245; +} + +footer div small { + color: #454245; + font-size: 0.9rem; +} + +/* Media Queries for Small Screens (768px - 1024px) */ +@media (min-width: 768px) and (max-width: 1024px) { + /* Header - 2 columns */ + header { + display: flex; + align-items: center; + text-align: left; + padding: 60px 40px; + } + + header > div:first-child { + flex: 1; + padding-right: 40px; + } + + header > div:last-child { + flex: 1; + } + + header div { + flex-direction: column; + } + + header button { + width: 100%; + max-width: 300px; + } + + /* Trusted Companies - single row */ + main section:first-child div { + flex-wrap: nowrap; + overflow-x: auto; + justify-content: space-between; + } + + /* Teams Section - horizontal layout */ + main section:nth-child(2) ul { + display: flex; + justify-content: space-around; + } + + main section:nth-child(2) li { + flex: 1; + margin: 0 10px; + } + + /* Footer - horizontal layout */ + footer ul:first-child { + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + gap: 20px; + } + + footer ul:first-child li { + margin: 0 15px; + } +} + +/* Media Queries for Large Screens (1024px and above) */ +@media (min-width: 1024px) { + /* Add your desktop styles here when you're ready to expand */ +}