Skip to content

Commit

Permalink
cleared html markup to restart due to modal not rendering properly
Browse files Browse the repository at this point in the history
  • Loading branch information
@Deeokafor
Deeokafor committed Jul 8, 2023
1 parent 2c856cb commit 770aa87
Show file tree
Hide file tree
Showing 2 changed files with 57 additions and 174 deletions.
173 changes: 54 additions & 119 deletions assets/css/output.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -539,10 +539,6 @@ video {
display: flex;
}

.tw-hidden {
display: none;
}

.tw-h-1\/2 {
height: 50%;
}
Expand Down Expand Up @@ -600,6 +596,11 @@ video {
border-color: hsl(231 7% 60% / var(--tw-border-opacity));
}

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

.tw-bg-ns-dsg {
--tw-bg-opacity: 1;
background-color: hsl(234 29% 20% / var(--tw-bg-opacity));
Expand All @@ -619,11 +620,6 @@ video {
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}

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

.tw-p-5 {
padding: 1.25rem;
}
Expand Down Expand Up @@ -681,17 +677,30 @@ video {
color: rgb(255 255 255 / 0.9);
}

.tw-shadow {
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.tw-shadow-2xl {
--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.tw-shadow-black {
--tw-shadow-color: #000;
--tw-shadow: var(--tw-shadow-colored);
}

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

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

.md\:tw-mt-2 {
margin-top: 0.5rem;
}
Expand All @@ -712,88 +721,60 @@ video {
height: 28rem;
}

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

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

.md\:tw-h-28 {
height: 7rem;
.md\:tw-w-12 {
width: 3rem;
}

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

.md\:tw-h-\[29rem\] {
height: 29rem;
.md\:tw-w-3\/5 {
width: 60%;
}

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

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

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

.md\:tw-w-full {
width: 100%;
}

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

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

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

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

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

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

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

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

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

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

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

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

.md\:tw-flex-col {
Expand All @@ -816,8 +797,10 @@ video {
border-radius: 1.5rem;
}

.md\:tw-rounded {
border-radius: 0.25rem;
@media (min-width: 768px) {
.md\:md\:tw-rounded-3xl {
border-radius: 1.5rem;
}
}

.md\:tw-bg-ns-dsg {
Expand All @@ -830,10 +813,6 @@ video {
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.md\:tw-p-10 {
padding: 2.5rem;
}

.md\:tw-p-5 {
padding: 1.25rem;
}
Expand All @@ -843,66 +822,22 @@ video {
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-py-5 {
padding-top: 1.25rem;
padding-bottom: 1.25rem;
}

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

.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-\[0\.2rem\] {
font-size: 0.2rem;
}

.md\:tw-text-\[0\.5rem\] {
font-size: 0.5rem;
.md\:tw-py-4 {
padding-top: 1rem;
padding-bottom: 1rem;
}

.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-\[0\.2\] {
color: 0.2;
}

.md\:tw-text-\[0\.rem\] {
color: 0.rem;
.md\:tw-text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
}
}
58 changes: 3 additions & 55 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,62 +10,10 @@

<title>Frontend Mentor | Newsletter sign-up form with success message</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 class="tw-text-md">
<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-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 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>
<p class="tw-py-4">
Join 60,000+ product managers receiving monthly updates on:
</p>
<ul class="dee-custom-list tw-w-full tw-h-32 tw-flex tw-flex-col tw-justify-around">
<li class="tw-py-4"> Product discovery and building what matters</li>
<li class="tw-py-4"> Measuring to ensure updates are a success</li>
<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 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 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 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">
Thanks for subscribing!
</h1>
<p class="md:tw-text-sm">
A confirmation email has been sent to <span id="company_name" class="tw-font-black">ash@loremcompany.com</span>.
Please open it and click the button inside to confirm your subscription.
</p>
</div>
<div class="tw-h-1/2 tw-flex tw-flex-col tw-justify-end tw-w-full md:tw-h-auto">
<button class="tw-p-5 tw-bg-ns-dsg tw-text-white/90 tw-border-none tw-rounded-lg tw-font-black tw-w-full md:tw-text-sm md:tw-py-4">
Dismiss message
</button>
</div>
</div> -->
<!-- Success message end -->
<body class="">

</main>


Expand Down

0 comments on commit 770aa87

Please sign in to comment.