feat(15): initial mobile step 1 styling
This commit is contained in:
efim
parent
808ba96049
commit
d8e25ff95d
|
|
@ -740,6 +740,10 @@ div, p, button, ol, li, summary {
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
@media (min-width: 768px) {
|
||||||
|
.md\:mt-0 {
|
||||||
|
margin-top: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
.md\:flex {
|
.md\:flex {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html class="no-js" lang="">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta http-equiv="x-ua-compatible" content="ie=edge" />
|
||||||
|
<title>TEst</title>
|
||||||
|
<meta name="description" content="" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
|
||||||
|
<link href="../public/out.css" rel="stylesheet" />
|
||||||
|
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
|
||||||
|
<!-- Place favicon.ico in the root directory -->
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!--[if lt IE 8]>
|
||||||
|
<p class="browserupgrade">
|
||||||
|
You are using an <strong>outdated</strong> browser. Please
|
||||||
|
<a href="http://browsehappy.com/">upgrade your browser</a> to improve
|
||||||
|
your experience.
|
||||||
|
</p>
|
||||||
|
<![endif]-->
|
||||||
|
|
||||||
|
<main class="bg-green-200">
|
||||||
|
<h1 class="text-3xl">Hello!</h1>
|
||||||
|
<secion>
|
||||||
|
<p>into the template</p>
|
||||||
|
</secion>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -1,30 +1,33 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html class="no-js" lang="">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta http-equiv="x-ua-compatible" content="ie=edge" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>TEst</title>
|
<!-- displays site properly based on user's device -->
|
||||||
<meta name="description" content="" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
||||||
|
|
||||||
|
<link
|
||||||
|
rel="icon"
|
||||||
|
type="image/png"
|
||||||
|
sizes="32x32"
|
||||||
|
href="./assets/images/favicon-32x32.png"
|
||||||
|
/>
|
||||||
<link href="../public/out.css" rel="stylesheet" />
|
<link href="../public/out.css" rel="stylesheet" />
|
||||||
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
|
|
||||||
<!-- Place favicon.ico in the root directory -->
|
<title>Frontend Mentor | Multi-step form</title>
|
||||||
|
|
||||||
|
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
|
||||||
|
<style>
|
||||||
|
.attribution {
|
||||||
|
font-size: 11px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.attribution a {
|
||||||
|
color: hsl(228, 45%, 44%);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<!--[if lt IE 8]>
|
<main class="bg-light-gray h-screen w-screen">
|
||||||
<p class="browserupgrade">
|
<!-- here be immediate hx-get for the form. to subscitute the body -->
|
||||||
You are using an <strong>outdated</strong> browser. Please
|
|
||||||
<a href="http://browsehappy.com/">upgrade your browser</a> to improve
|
|
||||||
your experience.
|
|
||||||
</p>
|
|
||||||
<![endif]-->
|
|
||||||
|
|
||||||
<main class="bg-green-200">
|
|
||||||
<h1 class="text-3xl">Hello!</h1>
|
|
||||||
<secion>
|
|
||||||
<p>into the template</p>
|
|
||||||
</secion>
|
|
||||||
</main>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,124 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html class="no-js" lang="">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<!-- displays site properly based on user's device -->
|
||||||
|
|
||||||
|
<link
|
||||||
|
rel="icon"
|
||||||
|
type="image/png"
|
||||||
|
sizes="32x32"
|
||||||
|
href="./assets/images/favicon-32x32.png"
|
||||||
|
/>
|
||||||
|
<link href="../public/out.css" rel="stylesheet" />
|
||||||
|
|
||||||
|
<title>Frontend Mentor | Multi-step form</title>
|
||||||
|
|
||||||
|
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
|
||||||
|
<style>
|
||||||
|
.attribution {
|
||||||
|
font-size: 11px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.attribution a {
|
||||||
|
color: hsl(228, 45%, 44%);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!--[if lt IE 8]>
|
||||||
|
<p class="browserupgrade">
|
||||||
|
You are using an <strong>outdated</strong> browser. Please
|
||||||
|
<a href="http://browsehappy.com/">upgrade your browser</a> to improve
|
||||||
|
your experience.
|
||||||
|
</p>
|
||||||
|
<![endif]-->
|
||||||
|
|
||||||
|
<article
|
||||||
|
class="flex flex-col items-center w-screen h-screen bg-light-gray"
|
||||||
|
id="form-step"
|
||||||
|
>
|
||||||
|
<summary
|
||||||
|
class="w-full h-44 bg-no-repeat bg-sidebar-mobile md:bg-sidebar-desktop md:h-[570px] md:w-[280px]"
|
||||||
|
id="sidebar"
|
||||||
|
>
|
||||||
|
<ol
|
||||||
|
class="flex flex-row gap-x-5 items-center place-content-center h-24"
|
||||||
|
>
|
||||||
|
<li>
|
||||||
|
<div
|
||||||
|
class="grid place-content-center w-8 h-8 text-white rounded-full border border-white"
|
||||||
|
>
|
||||||
|
1
|
||||||
|
</div>
|
||||||
|
<p class="hidden md:flex">
|
||||||
|
<span>Step 1</span><span>Your info</span>
|
||||||
|
</p>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div
|
||||||
|
class="grid place-content-center w-8 h-8 text-white rounded-full border border-white"
|
||||||
|
>
|
||||||
|
2
|
||||||
|
</div>
|
||||||
|
<p class="hidden md:flex">
|
||||||
|
<span>Step 2</span><span>Select plan</span>
|
||||||
|
</p>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div
|
||||||
|
class="grid place-content-center w-8 h-8 text-white rounded-full border border-white"
|
||||||
|
>
|
||||||
|
3
|
||||||
|
</div>
|
||||||
|
<p class="hidden md:flex">
|
||||||
|
<span>Step 3</span><span>Add-ons</span>
|
||||||
|
</p>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div
|
||||||
|
class="grid place-content-center w-8 h-8 text-white rounded-full border border-white"
|
||||||
|
>
|
||||||
|
4
|
||||||
|
</div>
|
||||||
|
<p class="hidden md:flex">
|
||||||
|
<span>Step 4</span><span>summary</span>
|
||||||
|
</p>
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
</summary>
|
||||||
|
<section
|
||||||
|
id="multipage-form-container"
|
||||||
|
class="flex flex-col py-8 px-6 -mt-20 w-11/12 bg-white rounded-xl md:mt-0"
|
||||||
|
>
|
||||||
|
<!-- Step 1 start -->
|
||||||
|
<h1>Personal info</h1>
|
||||||
|
<p>Please provide your name, email address, and phone number.</p>
|
||||||
|
<label for="name">Name</label>
|
||||||
|
<input id="name" placeholder="e.g. Stephen King"></input>
|
||||||
|
<label for="email">Email Address</label>
|
||||||
|
<input id="email" placeholder="e.g. stephenking@lorem.com"></input>
|
||||||
|
<label for="phone">Phone Number</label>
|
||||||
|
<input id="phone" placeholder="e.g. +1 234 567 890 Next Step"></input>
|
||||||
|
|
||||||
|
<!-- Step 1 end -->
|
||||||
|
</section>
|
||||||
|
<div class="grow"></div>
|
||||||
|
<section id="footer-controls"
|
||||||
|
class="flex flex-row items-center w-full h-20 bg-white"
|
||||||
|
>
|
||||||
|
<div class="grow"></div>
|
||||||
|
<a
|
||||||
|
href="step2.html"
|
||||||
|
class="grid place-content-center mr-3 w-24 h-10 text-white rounded bg-marine-blue">Next Step</a>
|
||||||
|
</section>
|
||||||
|
</article>
|
||||||
|
<div class="fixed inset-x-0 bottom-0 attribution">
|
||||||
|
Challenge by
|
||||||
|
<a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
|
||||||
|
>Frontend Mentor</a
|
||||||
|
>. Coded by <a href="#">Your Name Here</a>.
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,62 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html class="no-js" lang="">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<!-- displays site properly based on user's device -->
|
||||||
|
|
||||||
|
<link
|
||||||
|
rel="icon"
|
||||||
|
type="image/png"
|
||||||
|
sizes="32x32"
|
||||||
|
href="./assets/images/favicon-32x32.png"
|
||||||
|
/>
|
||||||
|
<link href="../public/out.css" rel="stylesheet" />
|
||||||
|
|
||||||
|
<title>Frontend Mentor | Multi-step form</title>
|
||||||
|
|
||||||
|
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
|
||||||
|
<style>
|
||||||
|
.attribution {
|
||||||
|
font-size: 11px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.attribution a {
|
||||||
|
color: hsl(228, 45%, 44%);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!--[if lt IE 8]>
|
||||||
|
<p class="browserupgrade">
|
||||||
|
You are using an <strong>outdated</strong> browser. Please
|
||||||
|
<a href="http://browsehappy.com/">upgrade your browser</a> to improve
|
||||||
|
your experience.
|
||||||
|
</p>
|
||||||
|
<![endif]-->
|
||||||
|
|
||||||
|
<main class="bg-green-200">
|
||||||
|
<!-- Step 2 start -->
|
||||||
|
|
||||||
|
Select your plan
|
||||||
|
You have the option of monthly or yearly billing.
|
||||||
|
|
||||||
|
Arcade
|
||||||
|
$9/mo
|
||||||
|
|
||||||
|
Advanced
|
||||||
|
$12/mo
|
||||||
|
|
||||||
|
Pro
|
||||||
|
$15/mo
|
||||||
|
|
||||||
|
Monthly
|
||||||
|
Yearly
|
||||||
|
|
||||||
|
Go Back
|
||||||
|
Next Step
|
||||||
|
|
||||||
|
<!-- Step 2 end -->
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,62 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html class="no-js" lang="">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<!-- displays site properly based on user's device -->
|
||||||
|
|
||||||
|
<link
|
||||||
|
rel="icon"
|
||||||
|
type="image/png"
|
||||||
|
sizes="32x32"
|
||||||
|
href="./assets/images/favicon-32x32.png"
|
||||||
|
/>
|
||||||
|
<link href="../public/out.css" rel="stylesheet" />
|
||||||
|
|
||||||
|
<title>Frontend Mentor | Multi-step form</title>
|
||||||
|
|
||||||
|
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
|
||||||
|
<style>
|
||||||
|
.attribution {
|
||||||
|
font-size: 11px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.attribution a {
|
||||||
|
color: hsl(228, 45%, 44%);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!--[if lt IE 8]>
|
||||||
|
<p class="browserupgrade">
|
||||||
|
You are using an <strong>outdated</strong> browser. Please
|
||||||
|
<a href="http://browsehappy.com/">upgrade your browser</a> to improve
|
||||||
|
your experience.
|
||||||
|
</p>
|
||||||
|
<![endif]-->
|
||||||
|
|
||||||
|
<main class="bg-green-200">
|
||||||
|
<!-- Step 3 start -->
|
||||||
|
|
||||||
|
Pick add-ons
|
||||||
|
Add-ons help enhance your gaming experience.
|
||||||
|
|
||||||
|
Online service
|
||||||
|
Access to multiplayer games
|
||||||
|
+$1/mo
|
||||||
|
|
||||||
|
Larger storage
|
||||||
|
Extra 1TB of cloud save
|
||||||
|
+$2/mo
|
||||||
|
|
||||||
|
Customizable Profile
|
||||||
|
Custom theme on your profile
|
||||||
|
+$2/mo
|
||||||
|
|
||||||
|
Go Back
|
||||||
|
Next Step
|
||||||
|
|
||||||
|
<!-- Step 3 end -->
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,54 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html class="no-js" lang="">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<!-- displays site properly based on user's device -->
|
||||||
|
|
||||||
|
<link
|
||||||
|
rel="icon"
|
||||||
|
type="image/png"
|
||||||
|
sizes="32x32"
|
||||||
|
href="./assets/images/favicon-32x32.png"
|
||||||
|
/>
|
||||||
|
<link href="../public/out.css" rel="stylesheet" />
|
||||||
|
|
||||||
|
<title>Frontend Mentor | Multi-step form</title>
|
||||||
|
|
||||||
|
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
|
||||||
|
<style>
|
||||||
|
.attribution {
|
||||||
|
font-size: 11px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.attribution a {
|
||||||
|
color: hsl(228, 45%, 44%);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!--[if lt IE 8]>
|
||||||
|
<p class="browserupgrade">
|
||||||
|
You are using an <strong>outdated</strong> browser. Please
|
||||||
|
<a href="http://browsehappy.com/">upgrade your browser</a> to improve
|
||||||
|
your experience.
|
||||||
|
</p>
|
||||||
|
<![endif]-->
|
||||||
|
|
||||||
|
<main class="bg-green-200">
|
||||||
|
<!-- Step 4 start -->
|
||||||
|
|
||||||
|
Finishing up
|
||||||
|
Double-check everything looks OK before confirming.
|
||||||
|
|
||||||
|
<!-- Dynamically add subscription and add-on selections here -->
|
||||||
|
|
||||||
|
Total (per month/year)
|
||||||
|
|
||||||
|
Go Back
|
||||||
|
Confirm
|
||||||
|
|
||||||
|
<!-- Step 4 end -->
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,50 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html class="no-js" lang="">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<!-- displays site properly based on user's device -->
|
||||||
|
|
||||||
|
<link
|
||||||
|
rel="icon"
|
||||||
|
type="image/png"
|
||||||
|
sizes="32x32"
|
||||||
|
href="./assets/images/favicon-32x32.png"
|
||||||
|
/>
|
||||||
|
<link href="../public/out.css" rel="stylesheet" />
|
||||||
|
|
||||||
|
<title>Frontend Mentor | Multi-step form</title>
|
||||||
|
|
||||||
|
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
|
||||||
|
<style>
|
||||||
|
.attribution {
|
||||||
|
font-size: 11px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.attribution a {
|
||||||
|
color: hsl(228, 45%, 44%);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!--[if lt IE 8]>
|
||||||
|
<p class="browserupgrade">
|
||||||
|
You are using an <strong>outdated</strong> browser. Please
|
||||||
|
<a href="http://browsehappy.com/">upgrade your browser</a> to improve
|
||||||
|
your experience.
|
||||||
|
</p>
|
||||||
|
<![endif]-->
|
||||||
|
|
||||||
|
<main class="bg-green-200">
|
||||||
|
<!-- Step 5 start -->
|
||||||
|
|
||||||
|
Thank you!
|
||||||
|
|
||||||
|
Thanks for confirming your subscription! We hope you have fun
|
||||||
|
using our platform. If you ever need support, please feel free
|
||||||
|
to email us at support@loremgaming.com.
|
||||||
|
|
||||||
|
<!-- Step 5 end -->
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue