completed mobile and tablet versions, more just hitting design than being responsive

This commit is contained in:
Robert McGovern 2022-09-08 11:50:04 +01:00
parent 0260d5f87a
commit 05e78e1615
9 changed files with 344 additions and 9 deletions

View File

@ -1,3 +1,9 @@
/* Sizes
Mobile: 375x667
Tablet: 768x1024
Desktop: 1440x900
*/
*,
::after,
::before {
@ -6,7 +12,311 @@
box-sizing: border-box;
}
:root {
--lh-general: 1.75rem;
--lh-mobile: 1.5625rem;
input {
font-size: inherit;
line-height: inherit;
}
:root {
/* Line Height */
--lh-28px: 1.75rem;
--lh-25px: 1.5625rem;
--lh-38px: 2.375rem;
--lh-56px: 3.5rem;
--lh-68px: 4.25rem;
/* Colors */
--col-lime-green: hsla(157, 74%, 62%, 1);
--col-lime-green-hover: hsla(157, 100%, 85%, 1);
--col-dark-blue: hsla(225, 26%, 23%, 1);
--col-darker-blue: hsl(225, 36%, 11%);
--col-light-blue: hsla(225, 21%, 45%, 1);
--col-lighter-blue: hsla(225, 40%, 83%, 1);
--col-white: hsla(0, 0%, 100%, 1);
/* Fonts */
--ff-chivo: "Chivo", sans-serif;
--fs-14px: 0.875rem;
--fs-15px: 0.9375rem;
--fs-18px: 1.125rem;
--fs-48px: 3rem;
--fs-52px: 3.25rem;
--fs-26px: 1.625rem;
--background-image: url(../assets/mobile/image-host.jpg);
--background-image-opacity: 0.9;
--text-alignment: center;
--logos-height-17px: 1.0625rem;
--logos-height-29px: 1.8125rem;
/* Variables for Elements */
--fs-title: var(--fs-26px);
--lh-title: var(--lh-38px);
--fs-blurb: var(--fs-15px);
--lh-blurb: var(--lh-25px);
--logos-height: var(--logos-height-17px);
}
body {
width: 100%;
min-height: 100vh;
font-family: "Chivo", sans-serif;
font-size: 0.875rem;
display: flex;
flex-direction: column;
/* Turned off for mobile so I can get exact match */
/* align-items: center;
justify-content: center; */
background-color: var(--col-darker-blue);
color: var(--col-lighter-blue);
text-align: var(--text-alignment);
background-image: var(--background-image);
background-repeat: no-repeat;
}
header {
/* Added to get exact mobile match */
margin-top: 3.875rem;
margin-bottom: 3.5rem;
}
main::before {
content: " ";
background-color: var(--col-darker-blue);
mix-blend-mode: normal;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
/* opacity: var(--background-image-opacity); */
opacity: var(--background-image-opacity);
z-index: -1;
}
main {
display: flex;
flex-direction: column;
padding: 0 1.5rem;
}
.logo {
order: 1;
margin-bottom: 3.5625rem;
height: 3.5rem;
}
.title {
order: 2;
color: var(--col-lime-green);
font-size: var(--fs-title);
line-height: var(--lh-title);
text-transform: uppercase;
margin-bottom: 16px;
font-weight: normal;
}
.title span {
color: var(--col-white);
}
.blurb {
order: 3;
font-size: var(--fs-blurb);
line-height: var(--lh-blurb);
margin-bottom: 2rem;
}
.logos-section {
order: 4;
/* width: 100%; */
margin-bottom: 3rem;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
/* flex-shrink: 2; */
justify-content: space-between;
height: var(--logos-height);
}
.logos-section img {
height: var(--logos-height);
}
.email-form {
order: 5;
font-size: var(--fs-14px);
line-height: var(--lh-28px);
}
.email-form__field {
width: 100%;
border-radius: 28px;
background-color: var(--col-dark-blue);
padding: 0.5625rem 0;
color: var(--col-lighter-blue);
margin-bottom: 1rem;
padding-left: 2rem;
border-width: 0px;
}
.email-form__field:is(:active, :focus) {
color: var(--col-white);
}
.email-form__button-submit {
width: 100%;
border-radius: 28px;
background-color: var(--col-lime-green);
padding: 0.5625rem 0;
color: var(--col-darker-blue);
border-width: 0px;
}
.email-form__button-submit:hover,
.email-form__button-submit:focus {
background-color: var(--col-lime-green-hover);
}
.dots-image {
visibility: hidden;
}
/* Tablet */
@media screen and (min-width: 760px) {
:root {
--background-image: url(../assets/tablet/image-host.jpg);
--text-alignment: unset;
--background-image-opacity: 1;
--fs-title: var(--fs-48px);
--lh-title: var(--lh-56px);
--fs-blurb: var(--fs-18px);
--lh-blurb: var(--lh-28px);
--logos-height: var(--logos-height-29px);
}
body {
/* align-items: center; */
justify-content: center;
background-position: top right;
}
header {
position: absolute;
top: 0px;
left: 0px;
margin-top: 50px;
margin-left: 39px;
}
main {
padding: unset;
width: 39.6875rem;
height: 31.875rem;
padding-top: 5.75rem;
margin-left: 39px;
}
.title {
width: 25ch;
margin-bottom: 2rem;
}
.blurb {
width: 40ch;
margin-bottom: 2.5rem;
}
.logos-section {
order: 5;
margin-bottom: unset;
justify-content: space-evenly;
}
.email-form {
order: 4;
margin-bottom: 64px;
position: relative;
}
.email-form__field {
width: 48ch;
z-index: -1;
}
.email-form__button-submit {
width: unset;
padding: 0.5625rem 1.6875rem;
position: relative;
right: 10rem;
}
.dots-image {
visibility: visible;
position: absolute;
bottom: 0px;
left: 30px;
}
main::before {
background-color: unset;
/* position: absolute; */
/* top: 0px; */
/* right: 50%; */
/* bottom: 0px; */
/* left: 0px; */
}
main {
background-color: var(--col-darker-blue);
}
}
/* Desktop */
@media screen and (min-width: 1430px) {
:root {
--background-image: url(../assets/desktop/image-host.jpg);
--text-alignment: unset;
--background-image-opacity: 1;
--fs-title: var(--fs-52px);
--lh-title: var(--lh-68px);
--fs-blurb: var(--fs-18px);
--lh-blurb: var(--lh-28px);
--logos-height: var(--logos-height-29px);
}
header {
margin-top: 102px;
margin-left: 165px;
}
.logos-section {
order: 5;
}
.email-form {
order: 4;
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 113 KiB

View File

@ -6,18 +6,43 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" sizes="32x32" href="./assets/favicon-32x32.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Chivo&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<title>Frontend Mentor | Pod request access landing page</title>
</head>
<body>
Publish your podcasts everywhere.
<header>
<div class="logo">
<img src="./assets/logo.svg" alt="POD Logo image" aria-hidden="true">
</div>
</header>
<main>
<h1 class="title">Publish your podcasts <span>everywhere.</span></h1>
<p class="blurb">
Upload your audio to Pod with a single click. Well then distribute your podcast to Spotify,
Apple Podcasts, Google Podcasts, Pocket Casts and more!
Request access
</p>
<div class="logos-section">
<img src="./assets/spotify.svg" alt="Spotify Logo" aria-hidden="true">
<img src="./assets/apple-podcast.svg" alt="Apple Podcasts Logo" aria-hidden="true">
<img src="./assets/google-podcasts.svg" alt="Google Podcasts Logo" aria-hidden="true">
<img src="./assets/pocket-casts.svg" alt="Pocket Casts Logo" aria-hidden="true">
</div>
<form action="" class="email-form">
<label hidden="true" aria-hidden="false" for="email">Enter your email: </label>
<input class="email-form__field" placeholder="Email Address" type="email" name="email" id="email" required>
<input class="email-form__button-submit" type="submit" value="Request Access">
</form>
</main>
<footer>
<img class="dots-image" src="./assets/bg-pattern-dots.svg" alt="image of dots" aria-hidden="true">
</footer>
</body>
</html>