Some tweaks. Tried to not do too much compared to where I had it back in August. Supposed to be a reflection of where I was at that point of the freeCodeCamp course, not a bit further along having started Frontend Mentor.
This commit is contained in:
		
							parent
							
								
									c018b6d766
								
							
						
					
					
						commit
						9d87d7c720
					
				| 
						 | 
					@ -22,7 +22,7 @@
 | 
				
			||||||
         
 | 
					         
 | 
				
			||||||
    </div>
 | 
					    </div>
 | 
				
			||||||
    <section id="formsection">
 | 
					    <section id="formsection">
 | 
				
			||||||
        <h2>Product Blurb</h2>
 | 
					        <h1>Discover the latest games with Fakery</h1>
 | 
				
			||||||
        <form id="form" action="https://www.freecodecamp.com/email-submit">
 | 
					        <form id="form" action="https://www.freecodecamp.com/email-submit">
 | 
				
			||||||
            <div class="form-email">
 | 
					            <div class="form-email">
 | 
				
			||||||
                <label for="email">Enter your email: </label>
 | 
					                <label for="email">Enter your email: </label>
 | 
				
			||||||
| 
						 | 
					@ -34,7 +34,7 @@
 | 
				
			||||||
        </form>
 | 
					        </form>
 | 
				
			||||||
    </section>
 | 
					    </section>
 | 
				
			||||||
    <section id="games">
 | 
					    <section id="games">
 | 
				
			||||||
        <h2 >games</h2>
 | 
					        <h2>Latest Games</h2>
 | 
				
			||||||
        <div class="grid">
 | 
					        <div class="grid">
 | 
				
			||||||
            <div class="icon">
 | 
					            <div class="icon">
 | 
				
			||||||
                <i class="fab fa-3x fa-acquisitions-incorporated"></i>
 | 
					                <i class="fab fa-3x fa-acquisitions-incorporated"></i>
 | 
				
			||||||
| 
						 | 
					@ -74,7 +74,11 @@
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    </section>
 | 
					    </section>
 | 
				
			||||||
    <section id="videos">
 | 
					    <section id="videos">
 | 
				
			||||||
        <iframe id="video" width="420" height="315" src="https://www.youtube.com/embed/LhFETREAvhc?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
 | 
					        <h2>Teasers for games</h2>
 | 
				
			||||||
 | 
					        <iframe class="video" id="video" width="420" height="315" src="https://www.youtube.com/embed/KipPMgbpKzk?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
 | 
				
			||||||
 | 
					        <iframe class="video" id="video2" width="420" height="315" src="https://www.youtube.com/embed/A4BuL886bJA?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
 | 
				
			||||||
 | 
					        <iframe class="video" id="video3" width="420" height="315" src="https://www.youtube.com/embed/LhFETREAvhc?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
 | 
				
			||||||
 | 
					        <iframe class="video" id="video4" width="420" height="315" src="https://www.youtube.com/embed/-PxHfU2Xoac?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
 | 
				
			||||||
    </section>
 | 
					    </section>
 | 
				
			||||||
    <section id="features">
 | 
					    <section id="features">
 | 
				
			||||||
        <h2 >Features</h2>
 | 
					        <h2 >Features</h2>
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -1,5 +1,12 @@
 | 
				
			||||||
 | 
					@import url('https://fonts.googleapis.com/css2?family=Roboto&family=Rubik:wght@300;500&display=swap');
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					:root {
 | 
				
			||||||
 | 
					    --blue: rgb(17, 76, 202);
 | 
				
			||||||
 | 
					    font-family: 'Roboto', sans-serif;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
body {
 | 
					body {
 | 
				
			||||||
    background-color: rgb(168, 168, 168);
 | 
					    background-color: rgb(189, 188, 188);
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
#nav-bar {
 | 
					#nav-bar {
 | 
				
			||||||
| 
						 | 
					@ -10,6 +17,7 @@ body {
 | 
				
			||||||
    display: flex;
 | 
					    display: flex;
 | 
				
			||||||
    flex-direction: row;
 | 
					    flex-direction: row;
 | 
				
			||||||
    justify-content: space-between;
 | 
					    justify-content: space-between;
 | 
				
			||||||
 | 
					    align-content: center;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
/* On screens that are 600px wide or less, make the menu links stack on top of each other instead of next to each other */
 | 
					/* On screens that are 600px wide or less, make the menu links stack on top of each other instead of next to each other */
 | 
				
			||||||
| 
						 | 
					@ -20,83 +28,99 @@ body {
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					#header-img {
 | 
				
			||||||
 | 
					    width: 15%;
 | 
				
			||||||
 | 
					    height: 15%;
 | 
				
			||||||
 | 
					    margin: 0 1em 0;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
.push {
 | 
					.push {
 | 
				
			||||||
    margin-left: auto;
 | 
					    margin-left: auto;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					#nav-links {
 | 
				
			||||||
 | 
					    display: flex;
 | 
				
			||||||
 | 
					    flex-direction: row;
 | 
				
			||||||
 | 
					    justify-content: space-between;
 | 
				
			||||||
 | 
					    align-items: center;
 | 
				
			||||||
 | 
					    padding-left: 1rem;
 | 
				
			||||||
 | 
					    padding-right: 1rem;
 | 
				
			||||||
 | 
					    /* margin: 1em; */
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.btn-link {
 | 
				
			||||||
 | 
					    background: var(--blue);
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    -webkit-border-radius: 10px;
 | 
				
			||||||
 | 
					    -moz-border-radius: 10px;
 | 
				
			||||||
 | 
					    border-radius: 10px;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    color: #FFFFFF;
 | 
				
			||||||
 | 
					    font-family: 'Rubik', sans-serif;
 | 
				
			||||||
 | 
					    font-size: 1em;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    padding: 5px 40px;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    box-shadow: 1px 1px 20px 0px #000000;
 | 
				
			||||||
 | 
					    -webkit-box-shadow: 1px 1px 20px 0px #000000;
 | 
				
			||||||
 | 
					    -moz-box-shadow: 1px 1px 20px 0px #000000;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    text-shadow: 1px 1px 20px #000000;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    border: solid #337FED 1px;
 | 
				
			||||||
 | 
					    text-decoration: none;
 | 
				
			||||||
 | 
					    /* display: inline-block; */
 | 
				
			||||||
 | 
					    cursor: pointer;
 | 
				
			||||||
 | 
					    text-align: center;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.btn-link + .btn-link {
 | 
				
			||||||
 | 
					    margin-left: 1rem;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    
 | 
				
			||||||
 | 
					.btn-link:hover {
 | 
				
			||||||
 | 
					    border: double 1px;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
#empty-space {
 | 
					#empty-space {
 | 
				
			||||||
    display: block;
 | 
					    display: block;
 | 
				
			||||||
    padding: 1.5em;
 | 
					    padding: 1.5em;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
#nav-links {
 | 
					 | 
				
			||||||
    display: flex;
 | 
					 | 
				
			||||||
    flex-direction: row;
 | 
					 | 
				
			||||||
    justify-content: space-between;
 | 
					 | 
				
			||||||
    margin: 1em;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.btn-link {
 | 
					 | 
				
			||||||
    background: #6EF63D;
 | 
					 | 
				
			||||||
    background-image: -webkit-linear-gradient(top, #6EF63D, #D0501E);
 | 
					 | 
				
			||||||
    background-image: -moz-linear-gradient(top, #6EF63D, #D0501E);
 | 
					 | 
				
			||||||
    background-image: -ms-linear-gradient(top, #6EF63D, #D0501E);
 | 
					 | 
				
			||||||
    background-image: -o-linear-gradient(top, #6EF63D, #D0501E);
 | 
					 | 
				
			||||||
    background-image: linear-gradient(to bottom, #6EF63D, #D0501E);
 | 
					 | 
				
			||||||
    -webkit-border-radius: 10px;
 | 
					 | 
				
			||||||
    -moz-border-radius: 10px;
 | 
					 | 
				
			||||||
    border-radius: 10px;
 | 
					 | 
				
			||||||
    color: #FFFFFF;
 | 
					 | 
				
			||||||
    font-family: Open Sans;
 | 
					 | 
				
			||||||
    font-size: 15px;
 | 
					 | 
				
			||||||
    font-weight: 100;
 | 
					 | 
				
			||||||
    padding: 15px;
 | 
					 | 
				
			||||||
    box-shadow: 1px 1px 20px 0px #000000;
 | 
					 | 
				
			||||||
    -webkit-box-shadow: 1px 1px 20px 0px #000000;
 | 
					 | 
				
			||||||
    -moz-box-shadow: 1px 1px 20px 0px #000000;
 | 
					 | 
				
			||||||
    text-shadow: 1px 1px 20px #000000;
 | 
					 | 
				
			||||||
    border: solid #337FED 1px;
 | 
					 | 
				
			||||||
    text-decoration: none;
 | 
					 | 
				
			||||||
    display: inline-block;
 | 
					 | 
				
			||||||
    cursor: pointer;
 | 
					 | 
				
			||||||
    text-align: center;
 | 
					 | 
				
			||||||
    margin: 0 1em 0;
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
    
 | 
					 | 
				
			||||||
    .btn-link:hover {
 | 
					 | 
				
			||||||
    border: double #99C624 1px;
 | 
					 | 
				
			||||||
    color: #0e0e0e;
 | 
					 | 
				
			||||||
    background: rgba(110, 246, 61, 0.57);
 | 
					 | 
				
			||||||
    background-image: -webkit-linear-gradient(top, rgba(110, 246, 61, 0.57), rgba(208, 80, 30, 0.98));
 | 
					 | 
				
			||||||
    background-image: -moz-linear-gradient(top, rgba(110, 246, 61, 0.57), rgba(208, 80, 30, 0.98));
 | 
					 | 
				
			||||||
    background-image: -ms-linear-gradient(top, rgba(110, 246, 61, 0.57), rgba(208, 80, 30, 0.98));
 | 
					 | 
				
			||||||
    background-image: -o-linear-gradient(top, rgba(110, 246, 61, 0.57), rgba(208, 80, 30, 0.98));
 | 
					 | 
				
			||||||
    background-image: linear-gradient(to bottom, rgba(110, 246, 61, 0.57), rgba(208, 80, 30, 0.98));
 | 
					 | 
				
			||||||
    text-decoration: none;
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  /* Navbar links */
 | 
					 | 
				
			||||||
/*
 | 
					 | 
				
			||||||
  #nav-bar a {
 | 
					 | 
				
			||||||
    color: #602d2d;
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
*/
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
#header-img {
 | 
					 | 
				
			||||||
    width: 15%;
 | 
					 | 
				
			||||||
    height: 15%;
 | 
					 | 
				
			||||||
    margin: 0 1em 0;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
/* Form Section */
 | 
					/* Form Section */
 | 
				
			||||||
 | 
					
 | 
				
			||||||
#formsection {
 | 
					#formsection {
 | 
				
			||||||
    text-align: center;
 | 
					    text-align: center;
 | 
				
			||||||
 | 
					    font-family: 'Rubik', sans-serif;
 | 
				
			||||||
 | 
					    font-weight: 500;
 | 
				
			||||||
 | 
					    font-size: 25px;
 | 
				
			||||||
 | 
					    color: #000000;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					#formsection #email {
 | 
				
			||||||
 | 
					    padding-left: 10px;
 | 
				
			||||||
 | 
					    padding-top: 5px;
 | 
				
			||||||
 | 
					    padding-bottom: 5px;
 | 
				
			||||||
 | 
					    font-size: 25px;
 | 
				
			||||||
 | 
					    border: 2px solid var(--blue);
 | 
				
			||||||
 | 
					    border-radius: 5px;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					#formsection #submit {
 | 
				
			||||||
 | 
					    background-color: var(--blue);
 | 
				
			||||||
 | 
					    color: white;
 | 
				
			||||||
 | 
					    margin-top: 1rem;
 | 
				
			||||||
 | 
					    font-size: 20px;
 | 
				
			||||||
 | 
					    font-weight: 500;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
/* Games Section */
 | 
					/* Games Section */
 | 
				
			||||||
#games {
 | 
					#games {
 | 
				
			||||||
 | 
					    margin-top: 2rem;
 | 
				
			||||||
 | 
					    display: flex;
 | 
				
			||||||
 | 
					    flex-direction: column;
 | 
				
			||||||
 | 
					    align-items: center;
 | 
				
			||||||
    text-align: center;
 | 
					    text-align: center;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
| 
						 | 
					@ -109,17 +133,15 @@ body {
 | 
				
			||||||
    align-items: center;
 | 
					    align-items: center;
 | 
				
			||||||
    justify-content: center;
 | 
					    justify-content: center;
 | 
				
			||||||
    height: 125px;
 | 
					    height: 125px;
 | 
				
			||||||
    width: 20vw;
 | 
					    /* width: 15vw; */
 | 
				
			||||||
    color: rgb(17, 76, 202);
 | 
					    color: var(--blue);
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
#games .details {
 | 
					#games .details {
 | 
				
			||||||
 | 
					    margin-left: 2rem;
 | 
				
			||||||
    text-align: left;
 | 
					    text-align: left;
 | 
				
			||||||
    display: flex;
 | 
					 | 
				
			||||||
    flex-direction: column;
 | 
					 | 
				
			||||||
    justify-content: center;
 | 
					 | 
				
			||||||
    height: 125px;
 | 
					    height: 125px;
 | 
				
			||||||
    width: 80vw;
 | 
					    width: 50vw;
 | 
				
			||||||
    padding: 5px;
 | 
					    padding: 5px;
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
| 
						 | 
					@ -127,11 +149,20 @@ body {
 | 
				
			||||||
#videos {
 | 
					#videos {
 | 
				
			||||||
    padding: 1em;
 | 
					    padding: 1em;
 | 
				
			||||||
    display: flex;
 | 
					    display: flex;
 | 
				
			||||||
 | 
					    flex-direction: column;
 | 
				
			||||||
    justify-content: center;
 | 
					    justify-content: center;
 | 
				
			||||||
 | 
					    align-items: center;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.video + .video {
 | 
				
			||||||
 | 
					    margin-top: 1rem;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
/* Pricing Section */
 | 
					/* Pricing Section */
 | 
				
			||||||
#features {
 | 
					#features {
 | 
				
			||||||
 | 
					    margin: auto;
 | 
				
			||||||
 | 
					    width: 60%;
 | 
				
			||||||
    text-align: center;
 | 
					    text-align: center;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Reference in New Issue