+
© 2022 Slack Technologies, LLC, a Salesforce company. All rights reserved. Various trademarks held by
their respective owners.
diff --git a/starter_code/stylesheets/style.css b/starter_code/stylesheets/style.css
index 59f4a7798..f5f21f893 100644
--- a/starter_code/stylesheets/style.css
+++ b/starter_code/stylesheets/style.css
@@ -8,3 +8,405 @@ paragraph yellow: #ECB12F
links blue: #2E71A6
footer links grey: #454245
*/
+
+html,
+body {
+ width: 100%;
+ margin: 0;
+ padding: 0;
+ font-family: 'Roboto', sans-serif;
+}
+
+
+/*Nav*/
+
+nav {
+ display: grid;
+ grid-auto-flow: column;
+ grid-template-columns: repeat(3, 1fr);
+ width: 100%;
+ align-items: center;
+ justify-content: space-evenly;
+ background-color:#540b51;
+ padding: 20px;
+}
+
+.nav-logo img{
+ width: 120px;
+ height: auto;
+ background-color: #540b51;
+ position: relative;
+}
+
+nav ul {
+ display: none;
+}
+
+.nav-buttons {
+ display: flex;
+ justify-content: space-around;
+ padding: 10px 20px;
+}
+
+.nav-buttons button{
+ background-color:#540b51;
+ border: 0;
+ color: white;
+}
+
+/*Header*/
+
+header {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ background-color:#540b51;
+ background-size:contain;
+ background-repeat: no-repeat;
+}
+
+.header-content{
+ color: #F3EAE2;
+ padding: 20px;
+}
+
+.header-content h1 {
+ font-size: 3em;
+ color: whitesmoke;
+ text-align: center;
+}
+
+.header-content p {
+ padding-top: 50px;
+ font-size: 1.2em;
+ word-spacing: 1.6;
+ letter-spacing: 1.4;
+ text-align: center;
+}
+
+.header-content span {
+ font-weight: bold;
+ color: rgb(255, 187, 0);
+}
+.header-image {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding-bottom: 30px;
+}
+
+.header-image img{
+ width: 100%;
+ height: auto;
+}
+
+.header-buttons {
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: center;
+ width: 100%;
+ margin: 20px 0;
+}
+
+.sign-up-button{
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: white;
+ color: #540b51;
+ border-radius: 5px;
+ margin: 10px;
+ width: 100%;
+ padding: 15px;
+ text-transform: uppercase;
+ font-weight: bolder;
+}
+
+.google-button {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: #4285F4;
+ color: white;
+ border-radius: 5px;
+ margin: 10px;
+ width: 100%;
+ padding: 5px;
+}
+.google-button img {
+ width: auto;
+ height: 35px;
+ background-color: white;
+ margin-right: auto;
+}
+
+.google-button span {
+ margin-right: auto;
+ text-transform: uppercase;
+ font-size: 1em;
+ color: white;
+ padding-right: 20px;
+}
+
+/*Main*/
+
+.companies {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ background-color: #F3EAE2;
+ padding: 20px;
+}
+
+.companies p{
+ text-align: center;
+ text-transform: uppercase;
+ font-weight: bold;
+ padding: 10px;
+}
+
+.companies-container {
+ display: flex;
+ justify-content: space-evenly;
+ flex-wrap: wrap;
+ padding-bottom: 20px;
+}
+
+.companies-container img {
+ width: auto;
+ height: 40px;
+ padding: 10px;
+}
+
+/*Info Section*/
+
+.info-container {
+ background-color: white;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ padding: 0 40px;
+}
+
+.info-container h3 {
+ font-size: 2.2em;
+ font-weight: 600;
+ color:#540b51;
+ text-align: center;
+ padding-top: 40px;
+}
+
+.info-container p {
+ font-size: 1.2em;
+ text-align: center;
+}
+
+.info-container span {
+ font-size: 2.5em;
+ font-weight: 700;
+ color:#540b51;
+}
+
+.info-container ul {
+ text-align: justify;
+ font-weight: 1em;
+ width: 60%;
+ list-style-type: none;
+}
+
+.info-container li p {
+ font-weight: bold;
+}
+
+.survey-container {
+ width: 100%;
+ font-weight: lighter;
+ font-size: 0.8em;
+ padding-bottom: 40px;
+}
+
+
+/*Digital Section*/
+
+.digital-era {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ padding: 20px;
+ background-color: #540b51;
+}
+
+.digital-era h3 {
+ color: white;
+ font-size: 2.2em;
+ text-align: center;
+}
+
+.digital-era button {
+ color:#540b51;
+ text-transform: uppercase;
+ padding: 10px;
+ margin-bottom: 10px;
+ border-radius: 2px;
+ border: 1px solid white;
+ font-weight: bold;
+}
+
+#buttontwo {
+ color: white;
+ background-color:#540b51;
+}
+
+/*Footer*/
+
+hr{
+ width: 90%;
+ margin: 40px auto 30px auto;
+ color: #d3cfd3;
+}
+
+footer ul li {
+ width: 100%;
+ list-style-type: none;
+ padding: 15px 0;
+}
+
+.footer-container li {
+ font-weight: 600;
+}
+
+.footer-container li span {
+ color:#4285F4
+}
+
+.icon-container ul{
+ width: 80%;
+ display: grid;
+ grid-auto-flow: column;
+ justify-content:space-between;
+ align-items: center;
+}
+
+.small {
+ padding: 20px;
+ text-align: center;
+ font-weight: light;
+}
+
+
+@media only screen and (min-width: 768px) and (max-width: 1024px) {
+
+ /*Nav*/
+
+nav {
+ display: flex;
+ align-items:center;
+ justify-content: space-around;
+ height: 30px;
+}
+nav ul {
+ display: flex;
+ list-style-type: none;
+ background-color: #540b51;
+}
+
+nav ul li {
+ display: flex;
+ align-items: center;
+ padding-right: 40px;
+}
+
+nav ul li a{
+ text-decoration: none;
+ color: white;
+ background-color: #540b51;
+}
+.menu-icon {
+ display: none;
+}
+
+.btn-trial {
+ height: 15px;
+ font-size: 0.7em;
+ font-weight: bold;
+ background-color: white;
+ color:#540b51;
+ padding: 10px;
+ text-transform: uppercase;
+}
+
+/*header*/
+
+header {
+ background-image: url('../images/background-singup.png');
+ display: grid;
+ grid-auto-flow: column;
+ grid-template-columns: 1fr 1fr;
+}
+
+.header-image {
+ width: 120%;
+ height: auto;
+}
+
+.header-content h1 {
+ font-size: 3.5em;
+ text-align:left
+}
+
+/*container*/
+
+.companies-container {
+ display: flex;
+ flex-wrap: wrap;
+}
+
+/*Info container*/
+
+.info-container ul {
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ padding: 10px;
+}
+
+.info-container ul li p {
+ width: 80%;
+ text-align: center;
+}
+
+/*Digital Section*/
+
+.digital-era {
+ display: flex;
+ align-items: center;
+ flex-shrink: 1;
+}
+
+.digital-era button {
+ width: 400px;
+}
+
+/*footer*/
+
+.footer-container ul{
+ font-size: 0.8em;
+ width: 90%;
+ display: flex;
+ justify-content:space-between;
+ align-items: center;
+ text-align: center;
+}
+
+.footer-container ul li img {
+ display: none;
+}
+
+.icon-container {
+ display: flex;
+ justify-content: space-evenly;
+}
+
+}
\ No newline at end of file