Work in progress
This commit is contained in:
parent
4b1e46d0a3
commit
c2a59f697f
|
|
@ -20,14 +20,87 @@ body {
|
|||
/* per the style guide, the body copy is 16px */
|
||||
font-size: 16px;
|
||||
font-family: 'Karla', sans-serif;
|
||||
min-width: 375px;
|
||||
width: 90vw;
|
||||
height: 100vh;
|
||||
margin: 0 auto;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
/* align-items: center; */
|
||||
|
||||
background-color: var(--site-light-gray);
|
||||
}
|
||||
|
||||
.box {
|
||||
box-sizing: border-box;
|
||||
padding-left: 0.8rem;
|
||||
padding-right: 0.8rem;
|
||||
padding-top: 0.7rem;
|
||||
padding-bottom: 0.7rem;
|
||||
}
|
||||
|
||||
.topRow {
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
background-color: white;
|
||||
}
|
||||
.heading {
|
||||
/* margin-top: 1.5rem; */
|
||||
color: white;
|
||||
}
|
||||
|
||||
.topRow .heading {
|
||||
color: var(--site-cyan);
|
||||
}
|
||||
|
||||
.quickSell {
|
||||
color: var(--site-bright-yellow);
|
||||
}
|
||||
.sellBlurb {
|
||||
color: var(--site-light-gray);
|
||||
}
|
||||
.bottomRow {
|
||||
flex-direction: column;
|
||||
|
||||
display: flex;
|
||||
}
|
||||
.pricingBox {
|
||||
background-color: var(--site-cyan);
|
||||
}
|
||||
.priceRow {
|
||||
display: flex;
|
||||
}
|
||||
.price {
|
||||
color: white;
|
||||
}
|
||||
.pricePeriod {
|
||||
color: var(--site-cyan)
|
||||
}
|
||||
.sell {
|
||||
color: white;
|
||||
}
|
||||
.signupButton {
|
||||
background-color: var(--site-bright-yellow);
|
||||
color: white;
|
||||
}
|
||||
.whyUsBox {
|
||||
background-color: rgb(0, 195, 192);
|
||||
}
|
||||
.blurb {
|
||||
}
|
||||
|
||||
.blurb .unstyledList {
|
||||
list-style: none;
|
||||
font-size: 10px;
|
||||
color: var(--site-light-gray)
|
||||
}
|
||||
|
||||
/* Feel free to remove these styles or customise in your own stylesheet 👍 */
|
||||
.attribution { font-size: 11px; text-align: center; }
|
||||
.attribution a { color: hsl(228, 45%, 44%); }
|
||||
|
||||
/**
|
||||
* * style guide has 2 designs, one aimed for 375x870, and the other 1440x800
|
||||
* TODO: Tweak transition point later
|
||||
|
|
@ -36,6 +109,46 @@ body {
|
|||
|
||||
}
|
||||
|
||||
@media screen and (min-width: 500px) {
|
||||
|
||||
@media screen and (min-width: 500px) and (max-width: 800px) {
|
||||
body {
|
||||
/* roughly half way, arbitrary for the moment */
|
||||
width: 78vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 800px) {
|
||||
body {
|
||||
width: 45vw;
|
||||
}
|
||||
|
||||
.topRow {
|
||||
}
|
||||
.heading {
|
||||
}
|
||||
.quickSell {
|
||||
}
|
||||
.sellBlurb {
|
||||
}
|
||||
.bottomRow {
|
||||
flex-direction: row;
|
||||
/* flex: 0 50%; */
|
||||
}
|
||||
.pricingBox {
|
||||
width: 50%;
|
||||
}
|
||||
.priceRow {
|
||||
}
|
||||
.price {
|
||||
}
|
||||
.pricePeriod {
|
||||
}
|
||||
.sell {
|
||||
}
|
||||
.signupButton {
|
||||
}
|
||||
.whyUsBox {
|
||||
width: 50%;
|
||||
}
|
||||
.blurb {
|
||||
}
|
||||
}
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="topRow">
|
||||
<div class="topRow box">
|
||||
<div class="heading">
|
||||
Join our community
|
||||
</div>
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="bottomRow">
|
||||
<div class="pricingBox">
|
||||
<div class="pricingBox box">
|
||||
<div class="heading">
|
||||
Monthly Subscription
|
||||
</div>
|
||||
|
|
@ -41,19 +41,21 @@
|
|||
|
||||
<a title="Sign Up Button" href="#" class="signupButton">Sign Up</a>
|
||||
</div>
|
||||
<div class="whyUsBox">
|
||||
<div class="whyUsBox box">
|
||||
<div class="heading">
|
||||
Why Us
|
||||
</div>
|
||||
|
||||
<div class="blurb">
|
||||
Tutorials by industry experts
|
||||
Peer & expert code review
|
||||
Coding exercises
|
||||
Access to our GitHub repos
|
||||
Community forum
|
||||
Flashcard decks
|
||||
New videos every week
|
||||
<ul class="unstyledList">
|
||||
<li>Tutorials by industry experts</li>
|
||||
<li>Peer & expert code review</li>
|
||||
<li>Coding exercises</li>
|
||||
<li>Access to our GitHub repos</li>
|
||||
<li>Community forum</li>
|
||||
<li>Flashcard decks</li>
|
||||
<li>New videos every week</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -11,4 +11,13 @@ Otherwise there doesn't seem to be any obvious/glaring differences between the 2
|
|||
Set-up the HTML into `div`s to match what I think are the distinct sections. Absolutely need to change some of the names, but I can't think of better descriptors at the moment. (seriously ... "sellBlurb" 🙄)
|
||||
|
||||
Aside: Would love something to take all the classes I define in the html file and put them into the css file ... *quick google later* Oooooh. Such a thing does exist https://marketplace.visualstudio.com/items?itemName=diz.ecsstractor-port ... lets see how well that works.
|
||||
Seems to ... Nice!
|
||||
|
||||
**Just noticed, the corners on the mobile design column are less rounded than on the desktop design. Need to properly compare, might just be a sizing thing.** Check!
|
||||
|
||||
Continued basic styling. Used a color picker to find (roughly) what the other tourqise/aquamarine color was.
|
||||
|
||||
Stopped for lunch & roleplaying.
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
Reference in New Issue