learning
/
tailwind_yt_tut
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Testimonials done

Browse Source
master
Drew Bednar 3 years ago
parent e22b6578e1
commit c5af8b540f
2 changed files with 128 additions and 18 deletions
Show Stats Download Patch File Download Diff File

70
css/main.css
Unescape Escape View File

@ -509,6 +509,11 @@ Ensure the default browser behavior of the `hidden` attribute.
margin-right: auto;
}
.my-16 {
margin-top: 4rem;
margin-bottom: 4rem;
}
.mt-10 {
margin-top: 2.5rem;
}
@ -517,6 +522,18 @@ Ensure the default browser behavior of the `hidden` attribute.
margin-bottom: 8rem;
}
.mt-32 {
margin-top: 8rem;
}
.mt-24 {
margin-top: 6rem;
}
.-mt-14 {
margin-top: -3.5rem;
}
.block {
display: block;
}
@ -529,6 +546,10 @@ Ensure the default browser behavior of the `hidden` attribute.
display: none;
}
.w-16 {
width: 4rem;
}
.max-w-md {
max-width: 28rem;
}
@ -537,6 +558,10 @@ Ensure the default browser behavior of the `hidden` attribute.
max-width: 24rem;
}
.max-w-6xl {
max-width: 72rem;
}
.flex-col {
flex-direction: column;
}
@ -593,6 +618,12 @@ Ensure the default browser behavior of the `hidden` attribute.
margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.self-baseline {
align-self: baseline;
}
@ -601,6 +632,10 @@ Ensure the default browser behavior of the `hidden` attribute.
border-radius: 9999px;
}
.rounded-lg {
border-radius: 0.5rem;
}
.rounded-l-full {
border-top-left-radius: 9999px;
border-bottom-left-radius: 9999px;
@ -674,10 +709,19 @@ Ensure the default browser behavior of the `hidden` attribute.
padding-bottom: 0.5rem;
}
.px-5 {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.pt-2 {
padding-top: 0.5rem;
}
.text-left {
text-align: left;
}
.text-center {
text-align: center;
}
@ -701,6 +745,11 @@ Ensure the default browser behavior of the `hidden` attribute.
line-height: 1.75rem;
}
.text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
}
.font-bold {
font-weight: 700;
}
@ -735,6 +784,12 @@ Ensure the default browser behavior of the `hidden` attribute.
color: hsl(227 12% 61% / var(--tw-text-opacity));
}
@media (min-width: 480px) {
.sm\:hidden {
display: none;
}
}
@media (min-width: 768px) {
.md\:mb-4 {
margin-bottom: 1rem;
@ -756,6 +811,10 @@ Ensure the default browser behavior of the `hidden` attribute.
width: 50%;
}
.md\:w-1\/3 {
width: 33.333333%;
}
.md\:flex-row {
flex-direction: row;
}
@ -793,5 +852,16 @@ Ensure the default browser behavior of the `hidden` attribute.
font-size: 3rem;
line-height: 1;
}
.md\:shadow-orange-50 {
--tw-shadow-color: #fff7ed;
--tw-shadow: var(--tw-shadow-colored);
}
}
@media (min-width: 976px) {
.lg\:text-left {
text-align: left;
}
}

76
index.html
Unescape Escape View File

@ -116,22 +116,18 @@
<div class="px-4 py-2 text-center text-white rounded-full md:py-1 bg-brightRed">02</div>
<!-- To overcome some alignment issues we hide this on md+ screens and use a different method -->
<h3 class="text-base font-bold md:mb-4 md:hidden">
Number two
Advanced Builtin Reports
</h3>
</div>
</div>
<div>
<!-- Repeats that H3 as mentioned to correct that layout issue so we hide this one on small screens -->
<!-- md:block shows it on larger screens -->
<h3 class="hidden text-lg font-bold md:block">Number two </h3>
<h3 class="hidden text-lg font-bold md:block">Advanced Builtin Reports</h3>
<p class="text-darkGrayishBlue">
See how your day-to-day tasks fit into the wider
vision. Go from
tracking progress at the milestone level to all the way
done to the
smallest of details. Never lose sight of the bigger
picture
again.
Set internal delivery estimates and track progress toward company goals.
Our customisable helps you build out the reports you need to keep stakeholders
informed.
</p>
</div>
</div>
@ -145,27 +141,71 @@
<div class="px-4 py-2 text-center text-white rounded-full md:py-1 bg-brightRed">03</div>
<!-- To overcome some alignment issues we hide this on md+ screens and use a different method -->
<h3 class="text-base font-bold md:mb-4 md:hidden">
Number 3
Everything you need in one place
</h3>
</div>
</div>
<div class="">
<!-- Repeats that H3 as mentioned to correct that layout issue so we hide this one on small screens -->
<!-- md:block shows it on larger screens -->
<h3 class="hidden text-lg font-bold md:block">Number 3 </h3>
<h3 class="hidden text-lg font-bold md:block">Everything you need in one place</h3>
<p class="text-darkGrayishBlue">
See how your day-to-day tasks fit into the wider
vision. Go from
tracking progress at the milestone level to all the way
done to the
smallest of details. Never lose sight of the bigger
picture
again.
Stop jumping from one service to another to communicate, store files, track tasks,
and share documents. Manage offers an all-in-one team productivity tool.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Testimonials -->
<section id="testimonials">
<!-- Container for heading and testimonial cards -->
<!-- Notice we only show one card on mobile because they would overlap each other. -->
<!-- Or you could add some margin but will will just hide the other two -->
<div class="max-w-6xl px-5 mx-auto mt-32 text-center">
<!-- Heading -->
<h2 class="text-4xl font-bold text-center">
What are people saying about Manage?
</h2>
<!-- Testimonial Container -->
<div class="flex flex-col mt-24 md:flex-row md:space-x-6">
<!-- Testimonial One -->
<div class="flex flex-col items-center p-6 space-y-6 rounded-lg bg-veryLightGray md:w-1/3">
<!-- NOTICE the use of a negative margin that places the picture of the user at the top of the card -->
<img src="img/avatar-anisha.png" class="w-16 -mt-14" alt="">
<h5 class="text-lg font-bold">Anisha Li </h5>
<p class="text-sm text-darkGrayishBlue">
"Manage has supercharged our team's workflow. The ability to
maintain visibility on larger milestones at all times keeps
everyone motivated"
</p>
</div>
<!-- Testimonial Two -->
<!-- The md:flex is what overrides it from being hidden -->
<div class="hidden md:flex flex-col items-center p-6 space-y-6 rounded-lg bg-veryLightGray md:w-1/3">
<img src="img/avatar-ali.png" class="w-16 -mt-14" alt="">
<h5 class="text-lg font-bold">Ali Bravo</h5>
<p class="text-sm text-darkGrayishBlue">
"We have been able to cancel so many other subscriptions since using Manage.
There is no more cross-channel confusion and everyone is much more focused."
</p>
</div>
<!-- Testimonial 3 -->
<div class="hidden md:flex flex-col items-center p-6 space-y-6 rounded-lg bg-veryLightGray md:w-1/3">
<!-- NOTICE the use of a negative margin that places the picture of the user at the top of the card -->
<img src="img/avatar-richard.png" class="w-16 -mt-14" alt="">
<h5 class="text-lg font-bold">Richard Watts</h5>
<p class="text-sm text-darkGrayishBlue">
"Manage has supercharged our team's workflow. The ability to
maintain visibility on larger milestones at all times keeps
everyone motivated"
</p>
</div>
</div>
<!-- End Testimonial Container -->
<div class="my-16"><a href="#" class="p-3 px-6 pt-2 text-white bg-brightRed rounded-full align-baseline hover:bg-brightRedLight">Get Started</a></div>
</div>
</section>
</body>
</html>
Write Preview
Loading…
Cancel
Save