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