+
-
@@ -165,15 +142,12 @@ Welcome to your new digital HQ
-
-
+
-
-
\ No newline at end of file
diff --git a/starter_code/stylesheets/style.css b/starter_code/stylesheets/style.css
index 59f4a7798..157a3ebb2 100644
--- a/starter_code/stylesheets/style.css
+++ b/starter_code/stylesheets/style.css
@@ -8,3 +8,855 @@ paragraph yellow: #ECB12F
links blue: #2E71A6
footer links grey: #454245
*/
+
+@media (max-width:760px) {
+
+ html, body {
+ margin: 0;
+ padding: 0;
+ width: 100vw;
+ overflow-x: hidden;
+ font-family: Arial, Helvetica, sans-serif;
+ box-sizing: border-box;
+ }
+
+ .navbar{
+ background-color: #540B51;
+ display:flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ margin: 0;
+ max-width: 100%;
+ padding:10px 0;
+ width: 100%;
+ list-style-type: none;
+ list-style-type: none;
+ box-sizing: border-box; /* Ensures padding doesn't affect width */
+ }
+ .navbar div{
+ margin: 0;
+ padding: 0;
+ }
+
+ .navbar ul{
+ display: none;
+ }
+
+ .navbar button{
+ height: 50px;
+ width: auto;
+ margin: 0;
+ padding:0;
+ background-color: #540B51;
+ border:none;
+ }
+
+ header {
+ background-color: #540B51;
+ color: #fff;
+ text-align: center;
+ margin: 0;
+ padding: 0;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ }
+
+ header h1{
+ font-size: 5rem;
+ }
+
+ header span{
+ color:#ECB12F;
+ }
+
+ header p, span{
+ font-size: 2.2rem;
+ }
+
+ .btn-signin{
+ display:flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding:30px 0;
+ width:100%;
+ }
+
+ .blue-btn{
+ display: flex;
+ flex-direction: row;
+ justify-content: space-evenly;
+ align-items: center;
+ width:90%;
+ background-color:#4285F4 ;
+ padding: 10px 0;
+ border-radius:5px;
+ }
+
+ .blue-btn img{
+ background-color:#f4f4f4 ;
+ margin: 0;
+ padding:0;
+ height: 90px;
+ width: auto;
+ border-radius:5px;
+ }
+
+ .email-button{
+ border-radius:5px;
+ width:90%;
+ height:100px;
+
+ }
+ .blue-btn p {
+ color:white;
+ }
+
+ .hero-img{
+ width: 100%;
+ padding:0;
+ margin: 0;
+ }
+
+ #trusted{
+ background-color: #F3EAE2;
+ margin: 0;
+ padding:10px 0 0 0;
+ text-align: center;
+ width: 100%;
+ }
+
+ #trusted div{
+ margin: 0;
+ padding:50px 0;
+ display: flex;
+ flex-wrap: wrap; /* Ensures responsiveness */
+ justify-content: center; /* Centers logos */
+ align-items: center;
+ gap: 10px; /* Adds spacing between images */
+ width: 100%; /* Restrict width for better layout */
+ height: auto;
+ }
+
+ #trusted div img{
+ width:20%;
+ }
+ #trusted h3 {
+ font-size: 1.6rem;
+ text-transform: uppercase;
+ }
+
+ #info{
+ text-align: center;
+ font-weight: bold;
+ font-size: 25px;
+ word-wrap: break-word;
+ overflow-wrap: break-word; /* Ensures text wraps properly */
+ white-space: normal;
+ }
+
+ #info h3, span{
+ font-weight: bold;
+ font-size: 50px;
+ color: #540B51;
+ }
+
+ #info ul{
+ display:flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ list-style-type: none;
+ text-align: center;
+ padding: 0;
+ margin: 0;
+ border: 0;
+ width: 100%;
+ }
+
+ #info ul li {
+ max-width: 70%; /* Restricts width to allow wrapping */
+ word-wrap: break-word; /* Breaks long words */
+ overflow-wrap: break-word; /* Ensures wrapping */
+ white-space: normal; /* Allows text to wrap */
+ text-align: center; /* Centers the text */
+ padding: 10px 0;
+ }
+
+ #free-sale{
+ background-color: #540B51;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-evenly;
+ align-items: center;
+ width:100%;
+ margin: 0;
+ padding: 0 0 90px 0;
+ }
+
+ #free-sale button{
+ width: 90%;
+ height: 50px;
+ border-radius: 3px;
+ border: 1px solid white;
+ }
+
+ .free-btn{
+ color: #540B51;
+
+ }
+
+ .sales-btn{
+ background-color: #540B51;
+ color: white;
+ }
+
+ #free-sale h3{
+ font-weight: bold;
+ font-size: 50px;
+ color:white;
+ text-align: center;
+ width: 100%;
+ }
+
+ footer{
+ font-weight: bold;
+ font-size: 16px;
+ }
+
+ footer ul li{
+ max-width: 80%; /* Restricts width to allow wrapping */
+ word-wrap: break-word; /* Breaks long words */
+ overflow-wrap: break-word; /* Ensures wrapping */
+ white-space: normal; /* Allows text to wrap */
+ padding: 10px 0;
+ margin-bottom: 15px; /* Adds space below each
- */
+ word-spacing: 5px; /* Adds space between words */
+ list-style-type: none;
+ }
+
+ footer a{
+ text-decoration: none;
+ color:#4285F4;
+ }
+
+ .social-row{
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding:0 30px;
+ margin:0;
+ }
+
+ #foot-info{
+ color:grey;
+ text-align:center;
+ margin:0;
+ padding: 0 50px;
+ max-width:100%;
+ }
+}@media (min-width: 760px) and (max-width: 1024px) {
+
+ html, body {
+ margin: 0;
+ padding: 0;
+ width: 100vw;
+ overflow-x: hidden;
+ font-family: Arial, Helvetica, sans-serif;
+ box-sizing: border-box;
+ }
+
+
+ .navbar {
+ background-color: #540B51;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ width: 100vw; /* Ensures it spans the viewport width */
+ max-width: 100%; /* Prevents unwanted shrinking */
+ padding: 10px 0;
+ margin: 0;
+ list-style-type: none;
+ box-sizing: border-box; /* Ensures padding doesn't affect width */
+ }
+
+ .navbar div {
+ margin: 0;
+ padding: 0;
+ }
+
+ .navbar ul {
+ display: none;
+ }
+
+ .navbar button {
+ height: 50px;
+ width: auto;
+ margin: 0;
+ padding: 0;
+ background-color: #540B51;
+ border: none;
+ }
+
+ header{
+ background-image: url(../images/background-singup.png);
+ background-size: cover;
+ background-repeat: no-repeat;
+ position:0 0;
+ display: flex;
+ flex-direction: row;
+ align-items: center; /* Aligns content to the top */
+ justify-content: space-between; /* Pushes text to left & image to right */
+ color: white;
+ padding: 40px 20px; /* Adds spacing inside the header */
+ width: 100%;
+ height: 100vh; /* Ensures full screen height */
+ box-sizing: border-box;
+ }
+
+
+ header h1{
+ font-size: 50px;
+
+
+ }
+
+ header span{
+ color: #ECB12F;
+ }
+
+ header p{
+ font-size: 25px;
+ }
+
+ .blue-btn img{
+ background-color: white;
+ border-radius: 5px;
+ padding: 0;
+ margin: 0;
+ height: 30px;
+ width: auto;
+ }
+ .btn-signin{
+ display:flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding:30px 0;
+ gap: 5px;
+ margin-top: 20px;
+ }
+
+ .blue-btn{
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 12px 20px;
+ border-radius: 5px;
+ background-color: #4285F4;
+ color: white;
+ font-size: 16px;
+ border: none;
+ gap: 10px;
+ width: 80%;
+ height:50px ;
+ }
+
+ .email-button{
+ border-radius: 5px;
+ padding: 12px 20px;
+ font-size: 16px;
+ border: 1px solid #ccc;
+ background-color: white;
+ width: 80%;
+ height: 50px;
+ }
+
+ /* Image container (right side) */
+ .hero-img {
+ height: 400px;
+ width: 400px; /* Adjust size as needed */
+}
+
+ #trusted{
+ background-color: #F3EAE2;
+ margin: 0;
+ padding:10px 0 0 0;
+ text-align: center;
+ width: 100%;
+ }
+
+ #trusted div{
+ margin: 0;
+ padding:50px 0;
+ display: flex;
+ justify-content:space-evenly; /* Centers logos */
+ align-items: center;
+ gap: 10px; /* Adds spacing between images */
+ width: 100%; /* Restrict width for better layout */
+ height: auto;
+ }
+
+ #trusted div img{
+ width:150px;
+ height: auto;
+ }
+ #trusted h3 {
+ font-size: 1.6rem;
+ text-transform: uppercase;
+ }
+
+ #info{
+ text-align: center;
+ font-weight: bold;
+ font-size: 25px;
+ word-wrap: break-word;
+ overflow-wrap: break-word; /* Ensures text wraps properly */
+ white-space: normal;
+ }
+
+ #info h3, span{
+ font-weight: bold;
+ font-size: 50px;
+ color: #540B51;
+ }
+
+ #info ul{
+ display:flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ list-style-type: none;
+ text-align: left;
+ padding: 0;
+ margin: 0;
+ border: 0;
+ width: 100%;
+ }
+
+ #info ul li {
+ max-width: 70%; /* Restricts width to allow wrapping */
+ word-wrap: break-word; /* Breaks long words */
+ overflow-wrap: break-word; /* Ensures wrapping */
+ white-space: normal; /* Allows text to wrap */
+ text-align: left; /* Centers the text */
+ padding: 10px 50px;
+ }
+
+ #free-sale{
+ background-color: #540B51;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-evenly;
+ align-items: center;
+ width:100%;
+ margin: 0;
+ padding: 0 0 90px 0;
+ }
+
+ #free-sale button{
+ width: 90%;
+ height: 90px;
+ border-radius: 3px;
+ border: 1px solid white;
+ font-size:30px;
+ text-transform: uppercase;
+ }
+
+ .free-btn{
+ color: #540B51;
+
+ }
+
+ .sales-btn{
+ background-color: #540B51;
+ color: white;
+ }
+
+ #free-sale h3{
+ font-weight: bold;
+ font-size: 50px;
+ color:white;
+ text-align: center;
+ width: 100%;
+ }
+
+ footer ul{
+ font-weight: bold;
+ font-size: 16px;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-evenly;
+ padding: 50px 0 20px 0;
+ }
+
+ footer ul li{
+
+ padding: 10px 0;
+ margin-bottom: 15px; /* Adds space below each
- */
+ word-spacing: 5px; /* Adds space between words */
+ list-style-type: none;
+ }
+
+ footer a{
+ text-decoration: none;
+ color:#4285F4;
+ }
+
+ .social-row{
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ padding:0 30px;
+ margin:0;
+ gap:50px;
+ }
+
+ #foot-info{
+ color:grey;
+ text-align:center;
+ margin:0;
+ padding: 0 50px;
+ max-width:100%;
+ }
+}
+@media (min-width: 1024px) and (max-width: 1440px){
+
+ html, body {
+ margin: 0;
+ padding: 0;
+ width: 100vw;
+ overflow-x: hidden;
+ font-family: Arial, Helvetica, sans-serif;
+ box-sizing: border-box;
+ }
+
+
+ .navbar {
+ background-color: #540B51;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ width: 100vw; /* Ensures it spans the viewport width */
+ max-width: 100%; /* Prevents unwanted shrinking */
+ padding: 10px 0;
+ margin: 0;
+ list-style-type: none;
+ box-sizing: border-box; /* Ensures padding doesn't affect width */
+ }
+
+ .navbar div {
+ margin: 0;
+ padding: 0;
+ }
+
+ .butt-gone{
+ display: none;
+ }
+
+ .navbar ul{
+ font-weight: bold;
+ font-size: 16px;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ padding: 0;
+ margin:0;
+ }
+ .navbar ul li{
+ padding: 10px 20px;
+ margin-bottom: 15px;
+ word-spacing: 5px;
+ list-style-type: none;
+ }
+
+
+
+ #nav-tryagain{
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-around;
+ padding:0;
+ margin:0;
+ }
+
+ #nav-tryagain ul{
+ font-weight: bold;
+ font-size: 16px;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ padding: 0;
+ margin: 0;
+ width: 100%;
+ }
+ #nav-tryagain ul li{
+ padding: 10px 20px;
+ margin-bottom: 0;
+ word-spacing: 5px;
+ list-style-type: none;
+ text-align: center;
+ }
+
+ #nav-tryagain a{
+ color: rgb(255, 255, 255);
+ display: inline-block;
+ }
+ #nav-tryagain button {
+ background: none;
+ border: none;
+ padding: 10px;
+ cursor: pointer;
+}
+
+ .navbar a{
+ text-decoration: none;
+ color:white;
+
+ }
+
+ .try-free{
+ background-color: rgb(255, 255, 255);
+ color: #540B51;
+ text-transform: uppercase;
+ border-radius: 5px;
+ padding: 10px 20px;
+ font-size: 16px;
+ border: 1px solid #540B51;
+ text-align: center;
+ }
+
+
+ .navbar button {
+ height: 50px;
+ width: auto;
+ margin: 0;
+ padding: 0;
+ background-color: #540B51;
+ border: none;
+ }
+
+ header{
+ background-image: url(../images/background-singup.png);
+ background-size: cover;
+ background-repeat: no-repeat;
+ position:0 0;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ color: white;
+ padding: 40px 20px;
+ width: 100%;
+ height: 100vh;
+ box-sizing: border-box;
+ }
+
+
+ header h1{
+ font-size: 50px;
+
+
+ }
+
+ header span{
+ color: #ECB12F;
+ }
+
+ header p{
+ font-size: 25px;
+ }
+
+ .blue-btn img{
+ background-color: white;
+ border-radius: 5px;
+ padding: 0;
+ margin: 0;
+ height: 30px;
+ width: auto;
+ }
+ .btn-signin{
+ display:flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding:30px 0;
+ gap: 5px;
+ margin-top: 20px;
+ }
+
+ .blue-btn{
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 12px 20px;
+ border-radius: 5px;
+ background-color: #4285F4;
+ color: white;
+ font-size: 16px;
+ border: none;
+ gap: 10px;
+ width: 80%;
+ height:50px ;
+ }
+
+ .email-button{
+ border-radius: 5px;
+ padding: 12px 20px;
+ font-size: 16px;
+ border: 1px solid #ccc;
+ background-color: white;
+ width: 80%;
+ height: 50px;
+ }
+
+ /* Image container (right side) */
+ .hero-img {
+ height: 400px;
+ width: 400px; /* Adjust size as needed */
+}
+
+ #trusted{
+ background-color: #F3EAE2;
+ margin: 0;
+ padding:10px 0 0 0;
+ text-align: center;
+ width: 100%;
+ }
+
+ #trusted div{
+ margin: 0;
+ padding:50px 0;
+ display: flex;
+ justify-content:space-evenly;*/
+ align-items: center;
+ gap: 10px;
+ width: 100%;
+ height: auto;
+ }
+
+ #trusted div img{
+ width:150px;
+ height: auto;
+ }
+ #trusted h3 {
+ font-size: 1.6rem;
+ text-transform: uppercase;
+ }
+
+ #info{
+ text-align: center;
+ font-weight: bold;
+ font-size: 25px;
+ word-wrap: break-word;
+ overflow-wrap: break-word; /* Ensures text wraps properly */
+ white-space: normal;
+ }
+
+ #info h3, span{
+ font-weight: bold;
+ font-size: 50px;
+ color: #540B51;
+ }
+
+ #info ul{
+ display:flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ list-style-type: none;
+ text-align: left;
+ padding: 0;
+ margin: 0;
+ border: 0;
+ width: 100%;
+ }
+
+ #info ul li {
+ max-width: 70%; /* Restricts width to allow wrapping */
+ word-wrap: break-word; /* Breaks long words */
+ overflow-wrap: break-word; /* Ensures wrapping */
+ white-space: normal; /* Allows text to wrap */
+ text-align: left; /* Centers the text */
+ padding: 10px 50px;
+ }
+
+ #free-sale{
+ background-color: #540B51;
+ display: flex;
+ flex-direction: column; /* Keep overall layout as column */
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ margin: 0;
+ padding: 0 0 90px 0;
+ }
+
+ #free-sale button{
+ width: 45%;
+ height: 90px;
+ border-radius: 3px;
+ border: 1px solid white;
+ font-size: 30px;
+ text-transform: uppercase;
+ margin: 10px;
+ }
+
+ .free-btn{
+ color: #540B51;
+
+ }
+
+ .sales-btn{
+ background-color: #540B51;
+ color: white;
+ }
+
+ #free-sale h3{
+ color: white;
+ font-size: 2rem;
+ margin-bottom: 20px;
+ }
+
+ footer ul{
+ font-weight: bold;
+ font-size: 16px;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-evenly;
+ padding: 50px 0 20px 0;
+ }
+
+ footer ul li{
+
+ padding: 10px 0;
+ margin-bottom: 15px; /* Adds space below each
- */
+ word-spacing: 5px; /* Adds space between words */
+ list-style-type: none;
+ }
+
+ footer a{
+ text-decoration: none;
+ color:#4285F4;
+ }
+
+ .social-row{
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ padding:0 30px;
+ margin:0;
+ gap:50px;
+ }
+
+ #foot-info{
+ color:grey;
+ text-align:center;
+ margin:0;
+ padding: 0 50px;
+ max-width:100%;
+ }
+
+}
\ No newline at end of file