diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..99c499e3d --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5504 +} diff --git a/starter_code/index.html b/starter_code/index.html index 2f593610f..67dad1801 100644 --- a/starter_code/index.html +++ b/starter_code/index.html @@ -1,179 +1,197 @@ + + + + + + + + + + + + + Slack is your digital HQ | Slack + + + + + + + +
+
+

Great teamwork starts with a digital HQ

+ +

+ Slack is free to try for as long as + you'd like. +

+ +
+ + + +
+
- - Slack is your digital HQ | Slack - +
+ Slack app screenshot +
+
+ +
+
+

Trusted by companies all over the world

+ +
+ Airbnb logo + NASA logo + Uber logo + Target logo + New York Times logo + Spotify logo +
+
+ +
+

Teams large and small rely on Slack

+

+ Slack securely scales up to support collaboration at the world’s + biggest companies. +

+ + +
+ +
+

Welcome to your new digital HQ

+ + + +
+
+ + + + diff --git a/starter_code/stylesheets/style.css b/starter_code/stylesheets/style.css index 59f4a7798..db3aa919f 100644 --- a/starter_code/stylesheets/style.css +++ b/starter_code/stylesheets/style.css @@ -8,3 +8,367 @@ paragraph yellow: #ECB12F links blue: #2E71A6 footer links grey: #454245 */ + +/* Mobile Screens */ +@media screen and (max-width: 768px) { + nav { + background-color: #540b51; + display: flex; + justify-content: space-between; + padding: 30px; + } + + nav img { + height: 40px; + width: 100%; + } + + h1 { + font-size: 4rem; + color: #fff; + } + + header { + text-align: center; + } + + .header-p { + color: #fff; + font-size: 1.5rem; + } + + .header-span { + color: #ecb12f; + } + + #second-buttons { + display: flex; + flex-direction: column; + margin: 20px; + } + + #second-buttons button { + font-size: 2rem; + margin-bottom: 20px; + } + + .signup { + color: #540b51; + padding: 20px; + } + + .google-image { + background-color: #4285f4; + color: white; + padding: 20px; + display: flex; + justify-content: space-between; + } + + .google-image span { + align-self: center; + margin-right: 170px; + } + + .google-image img { + height: 40px; + width: 40px; + background-color: #fff; + padding: 10px; + } + + body { + background-color: #540b51; + } + + .big-image { + width: 100%; + } + + .companies { + background-color: #f3eae2; + padding: 30px; + } + + .logos img { + height: 50px; + } + + .teams { + background-color: #ffffff; + font-size: 2rem; + text-align: center; + padding: 20px; + margin-top: 10px; + } + + .teams ul { + list-style: none; + } + + .teams span { + color: #540b51; + font-size: 4rem; + font-weight: bold; + } + + .teams h3 { + font-size: 4rem; + color: #540b51; + } + + .teams p { + font-weight: bold; + font-size: 2rem; + } + + .welcome-title { + font-size: 3.2rem; + color: #fff; + } + + .welcome { + display: flex; + flex-direction: column; + text-align: center; + background-color: #540b51; + padding: 60px; + } + + .welcome-button { + padding: 30px; + border: 2px solid white; + margin-left: 30px; + margin-bottom: 20px; + font-size: 2.5rem; + } + + #button-welcome1 { + background-color: #f3eae2; + color: #540b51; + } + #button-welcome2 { + background-color: #540b51; + color: #fff; + } + + /* Footer */ + .footer { + background-color: #f3eae2; + font-size: 1.5rem; + text-align: center; + padding: 30px; + } + + .footer-ul li { + list-style: none; + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 10px; + font-weight: bold; + } + + .footer-links { + display: flex; + justify-content: space-between; + padding: 30px; + list-style: none; + font-size: 1.8rem; + } + + .region { + display: flex; + } + .region img { + height: 20px; + width: 20px; + align-self: center; + } + + .download { + display: flex; + } + .download img { + height: 20px; + width: 20px; + align-self: center; + } + + .nav-ul { + display: none; + } + + .footer-hr { + display: none; + } +} + +/* Small Screens*/ +@media screen and (min-width: 768px) and (max-width: 1024px) { + nav { + background-color: #540b51; + display: flex; + justify-content: space-between; + padding: 30px; + } + + nav img { + height: 40px; + width: 100%; + } + + h1 { + font-size: 4rem; + color: #fff; + } + + header { + text-align: center; + } + + .header-p { + color: #fff; + font-size: 1.5rem; + } + + .header-span { + color: #ecb12f; + } + + #second-buttons { + display: flex; + flex-direction: column; + margin: 20px; + } + + #second-buttons button { + font-size: 2rem; + margin-bottom: 20px; + } + + .signup { + color: #540b51; + padding: 20px; + } + + .google-image { + background-color: #4285f4; + color: white; + padding: 20px; + display: flex; + justify-content: space-between; + } + + .google-image span { + align-self: center; + margin-right: 170px; + } + + .google-image img { + height: 40px; + width: 40px; + background-color: #fff; + padding: 10px; + } + + body { + background-color: #540b51; + } + + .big-image { + width: 100%; + } + + .companies { + background-color: #f3eae2; + padding: 30px; + } + + .logos img { + height: 50px; + } + + .teams { + background-color: #ffffff; + font-size: 2rem; + text-align: center; + padding: 20px; + margin-top: 10px; + display: flex; + justify-content: center; + } + + .teams ul { + list-style: none; + } + + .teams span { + color: #540b51; + font-size: 4rem; + font-weight: bold; + } + + .teams h3 { + font-size: 4rem; + color: #540b51; + } + + .teams p { + font-weight: bold; + font-size: 2rem; + } + + .welcome-title { + font-size: 3.2rem; + color: #fff; + } + + .welcome { + display: flex; + flex-direction: column; + text-align: center; + background-color: #540b51; + padding: 60px; + } + + .welcome-button { + padding: 30px; + border: 2px solid white; + margin-left: 30px; + margin-bottom: 20px; + font-size: 2.5rem; + } + + #button-welcome1 { + background-color: #f3eae2; + color: #540b51; + } + #button-welcome2 { + background-color: #540b51; + color: #fff; + } + + /* Footer */ + .footer { + font-size: 2rem; + background-color: #fff; + } + + .footer-ul { + display: flex; + list-style: none; + justify-content: space-around; + font-size: 1.7rem; + } + + .footer-links { + display: flex; + align-content: flex-start; + list-style: none; + } + + .footer-hr { + display: none; + } +}