Skip to content

Commit

Permalink
desktop ui build start
Browse files Browse the repository at this point in the history
  • Loading branch information
@Deeokafor
Deeokafor committed Jun 21, 2023
1 parent 49b9cf1 commit 2c856cb
Show file tree
Hide file tree
Showing 2 changed files with 141 additions and 83 deletions.
201 changes: 129 additions & 72 deletions assets/css/output.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -522,6 +522,10 @@ video {
--tw-backdrop-sepia: ;
}

.tw-order-2 {
order: 2;
}

.tw-my-5 {
margin-top: 1.25rem;
margin-bottom: 1.25rem;
Expand Down Expand Up @@ -575,6 +579,10 @@ video {
justify-content: space-evenly;
}

.tw-overflow-hidden {
overflow: hidden;
}

.tw-rounded-lg {
border-radius: 0.5rem;
}
Expand Down Expand Up @@ -606,14 +614,14 @@ video {
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.tw-bg-green-300 {
.tw-bg-black {
--tw-bg-opacity: 1;
background-color: rgb(134 239 172 / var(--tw-bg-opacity));
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}

.tw-bg-gray-500 {
.tw-bg-gray-300 {
--tw-bg-opacity: 1;
background-color: rgb(107 114 128 / var(--tw-bg-opacity));
background-color: rgb(209 213 219 / var(--tw-bg-opacity));
}

.tw-p-5 {
Expand Down Expand Up @@ -673,76 +681,119 @@ video {
color: rgb(255 255 255 / 0.9);
}

@media (min-width: 640px) {
.sm\:tw-hidden {
display: none;
}
}

@media (min-width: 768px) {
.md\:tw-my-6 {
margin-top: 1.5rem;
margin-bottom: 1.5rem;
.md\:tw-mt-3 {
margin-top: 0.75rem;
}

.md\:tw-mt-2 {
margin-top: 0.5rem;
}

.md\:tw-block {
display: block;
}

.md\:tw-flex {
display: flex;
}

.md\:tw-h-96 {
height: 24rem;
.md\:tw-hidden {
display: none;
}

.md\:tw-h-\[28rem\] {
height: 28rem;
}

.md\:tw-h-auto {
height: auto;
}

.md\:tw-h-96 {
height: 24rem;
}

.md\:tw-h-28 {
height: 7rem;
}

.md\:tw-h-\[\] {
height: ;
}

.md\:tw-h-\[2\] {
height: 2;
.md\:tw-h-\[29rem\] {
height: 29rem;
}

.md\:tw-h-\[28rem\] {
height: 28rem;
.md\:tw-h-\[30rem\] {
height: 30rem;
}

.md\:tw-w-12 {
width: 3rem;
}

.md\:tw-w-\[28rem\] {
width: 28rem;
}

.md\:tw-w-5\/6 {
width: 83.333333%;
.md\:tw-w-full {
width: 100%;
}

.md\:tw-w-9\/12 {
width: 75%;
.md\:tw-w-\[\] {
width: ;
}

.md\:tw-w-2\/12 {
width: 16.666667%;
.md\:tw-w-\[30rem\] {
width: 30rem;
}

.md\:tw-w-1\/12 {
width: 8.333333%;
.md\:tw-w-\[50rem\] {
width: 50rem;
}

.md\:tw-w-10 {
width: 2.5rem;
.md\:tw-w-\[40rem\] {
width: 40rem;
}

.md\:tw-w-1 {
width: 0.25rem;
.md\:tw-w-\[45rem\] {
width: 45rem;
}

.md\:tw-w-14 {
width: 3.5rem;
.md\:tw-w-1\/2 {
width: 50%;
}

.md\:tw-w-12 {
.md\:tw-w-\[32rem\] {
width: 32rem;
}

.md\:tw-w-\[3rem\] {
width: 3rem;
}

.md\:tw-scale-75 {
--tw-scale-x: .75;
--tw-scale-y: .75;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
.md\:tw-w-\[38rem\] {
width: 38rem;
}

.md\:tw-w-\[44rem\] {
width: 44rem;
}

.md\:tw-w-2\/5 {
width: 40%;
}

.md\:tw-w-3\/5 {
width: 60%;
}

.md\:tw-flex-col {
Expand All @@ -757,10 +808,6 @@ video {
justify-content: center;
}

.md\:tw-justify-between {
justify-content: space-between;
}

.md\:tw-justify-around {
justify-content: space-around;
}
Expand All @@ -769,83 +816,93 @@ video {
border-radius: 1.5rem;
}

.md\:tw-rounded {
border-radius: 0.25rem;
}

.md\:tw-bg-ns-dsg {
--tw-bg-opacity: 1;
background-color: hsl(234 29% 20% / var(--tw-bg-opacity));
}

.md\:tw-px-14 {
padding-left: 3.5rem;
padding-right: 3.5rem;
}

.md\:tw-py-14 {
padding-top: 3.5rem;
padding-bottom: 3.5rem;
.md\:tw-bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.md\:tw-py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
.md\:tw-p-10 {
padding: 2.5rem;
}

.md\:tw-py-5 {
padding-top: 1.25rem;
padding-bottom: 1.25rem;
.md\:tw-p-5 {
padding: 1.25rem;
}

.md\:tw-py-0 {
padding-top: 0px;
padding-bottom: 0px;
}

.md\:tw-py-3 {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
.md\:tw-px-14 {
padding-left: 3.5rem;
padding-right: 3.5rem;
}

.md\:tw-py-4 {
padding-top: 1rem;
padding-bottom: 1rem;
}

.md\:tw-py-20 {
padding-top: 5rem;
padding-bottom: 5rem;
}

.md\:tw-px-10 {
padding-left: 2.5rem;
padding-right: 2.5rem;
}

.md\:tw-text-2xl {
font-size: 1.5rem;
line-height: 2rem;
.md\:tw-py-5 {
padding-top: 1.25rem;
padding-bottom: 1.25rem;
}

.md\:tw-px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem;
}

.md\:tw-text-3xl {
font-size: 1.875rem;
line-height: 2.25rem;
.md\:tw-px-20 {
padding-left: 5rem;
padding-right: 5rem;
}

.md\:tw-text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
}

.md\:tw-text-\[36px\] {
font-size: 36px;
.md\:tw-text-\[0\.2rem\] {
font-size: 0.2rem;
}

.md\:tw-text-\[2rem\] {
font-size: 2rem;
.md\:tw-text-\[0\.5rem\] {
font-size: 0.5rem;
}

.md\:tw-text-\[1\.9rem\] {
font-size: 1.9rem;
.md\:tw-text-\[0\.7rem\] {
font-size: 0.7rem;
}

.md\:tw-text-\[0\.75rem\] {
font-size: 0.75rem;
}

.md\:tw-text-\[\] {
color: ;
}

.md\:tw-text-\[1\] {
color: 1;
.md\:tw-text-\[0\.2\] {
color: 0.2;
}

.md\:tw-text-\[0\.rem\] {
color: 0.rem;
}
}
23 changes: 12 additions & 11 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,14 @@
</style>
</head>
<body class="tw-text-md">
<main class="tw-h-screen md:tw-flex md:tw-justify-center md:tw-items-center md:tw-bg-ns-dsg">
<main class="tw-h-screen tw-overflow-hidden md:tw-flex md:tw-justify-center md:tw-items-center md:tw-bg-ns-dsg">
<!-- Sign-up form start -->
<div id="form_sign_up" class="tw-h-full tw-hidden">
<div id="hero">
<img src="/assets/images/illustration-sign-up-mobile.svg" alt="" class="tw-w-full">
<div id="form_sign_up" class="tw-h-full tw-overflow-hidden md:tw-bg-white md:tw-flex md:tw-h-[30rem] md:tw-rounded-3xl">
<div id="hero" class="md:tw-p-5 tw-order-2 md:tw-w-2/5">
<img src="/assets/images/illustration-sign-up-mobile.svg" alt="" class="tw-w-full md:tw-hidden">
<img src="./assets/images/illustration-sign-up-desktop.svg" alt="" class="tw-w-full tw-h-full sm:tw-hidden md:tw-block">
</div>
<div class="tw-flex tw-flex-col tw-justify-evenly tw-py-10 tw-px-5">
<div class="tw-flex tw-flex-col tw-justify-evenly tw-py-10 tw-px-5 md:tw-px-20 tw-bg-gray-300 md:tw-text-sm md:tw-w-3/5">
<h1 class="tw-text-[40px] tw-font-bold">
Stay updated!
</h1>
Expand All @@ -36,21 +37,21 @@ <h1 class="tw-text-[40px] tw-font-bold">
<li class="tw-py-2"> And much more!</li>
</ul>
<form action="#" class="tw-flex tw-flex-col tw-mt-4">
<label for="email_address" class="tw-font-bold tw-text-sm">
<label for="email_address" class="tw-font-bold tw-text-sm md:tw-text-[0.7rem]">
Email address
</label>
<input type="text" name="email_address" id="email_address" placeholder="email@company.com" class="tw-p-5 tw-border tw-border-ns-g tw-rounded-lg tw-bg-transparent tw-my-5">
<button disabled="disabled" class="tw-p-5 tw-bg-ns-dsg tw-text-white/90 tw-rounded-lg tw-font-black">Subscribe to monthly newsletter</button>
<input type="text" name="email_address" id="email_address" placeholder="email@company.com" class="tw-p-5 tw-border tw-border-ns-g tw-rounded-lg tw-bg-transparent tw-my-5 md:tw-py-4 md:tw-text-sm md:tw-mt-2">
<button disabled="disabled" class="tw-p-5 tw-bg-ns-dsg tw-text-white/90 tw-rounded-lg tw-font-black md:tw-py-4 md:tw-text-sm">Subscribe to monthly newsletter</button>
</form>
</div>
</div>
<!-- Sign-up form end -->

<!-- Success message start -->
<div id="modal" class="tw-py-10 tw-px-5 tw-h-full tw-bg-white md:tw-h-[28rem] md:tw-w-[28rem] md:tw-flex md:tw-flex-col md:tw-items-center md:tw-justify-around md:tw-rounded-3xl md:tw-px-14">
<!-- <div id="modal" class="tw-py-10 tw-px-5 tw-h-full tw-bg-white md:tw-h-[28rem] md:tw-w-[28rem] md:tw-flex md:tw-flex-col md:tw-items-center md:tw-justify-around md:tw-rounded-3xl md:tw-px-14">
<div class="tw-h-1/2 tw-flex tw-flex-col tw-justify-end md:tw-h-auto">
<div class="md:tw-w-12"><img src="assets/images/icon-success.svg" alt="" srcset=""></div>
<h1 class="tw-text-[40px] tw-font-black tw-leading-10 tw-pt-8 tw-pb-6 md:tw-text-[1.9rem]">
<h1 class="tw-text-[40px] tw-font-black tw-leading-10 tw-pt-8 tw-pb-6">
Thanks for subscribing!
</h1>
<p class="md:tw-text-sm">
Expand All @@ -63,7 +64,7 @@ <h1 class="tw-text-[40px] tw-font-black tw-leading-10 tw-pt-8 tw-pb-6 md:tw-text
Dismiss message
</button>
</div>
</div>
</div> -->
<!-- Success message end -->
</main>

Expand Down

0 comments on commit 2c856cb

Please sign in to comment.