Skip to content

Instantly share code, notes, and snippets.

@panbanda

panbanda/styled.html

Created October 3, 2018 08:11
Show Gist options
  • Save panbanda/110e37439246124629c4b4a337fcbb6c to your computer and use it in GitHub Desktop.
Save panbanda/110e37439246124629c4b4a337fcbb6c to your computer and use it in GitHub Desktop.
Download ZIP
Raw
styled.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" />
<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet">
<script src="http://localhost:3001/static/js/bundle.js" defer crossorigin></script>
</head>
<body>
<div id="root">
<div data-reactroot="">
<header class="MuiPaper-root-41 MuiPaper-elevation4-47 MuiAppBar-root-33 MuiAppBar-positionFixed-34 MuiAppBar-colorPrimary-39 mui-fixed Header-appBar-14 Header-transparent-26 Header-fixed-16">
<div class="MuiToolbar-root-68 MuiToolbar-regular-70 MuiToolbar-gutters-69 Header-container-17"><button
tabindex="0" class="MuiButtonBase-root-98 MuiButton-root-72 MuiButton-text-74 MuiButton-flat-77 Header-title-18"
type="button"><span class="MuiButton-label-73"><a href="/">Material Kit PRO React</a></span><span class="MuiTouchRipple-root-101"></span></button>
<div class="Header-hidden-30 HiddenCss-smDown-113">
<div class="Header-collapse-31">
<ul class="MuiList-root-141 MuiList-padding-142 HeaderLinks-list-123 HeaderLinks-mlAuto-140">
<li class="MuiListItem-root-145 MuiListItem-default-148 MuiListItem-gutters-152 HeaderLinks-listItem-124">
<div class="CustomDropdown-manager-157">
<div class=""><button tabindex="0" class="MuiButtonBase-root-98 MuiButton-root-72 MuiButton-text-74 MuiButton-flat-77 RegularButton-button-180 RegularButton-transparent-203 HeaderLinks-navLink-126"
type="button" aria-label="Notifications" aria-haspopup="true"><span class="MuiButton-label-73"><svg
class="MuiSvgIcon-root-212 CustomDropdown-buttonIcon-173" focusable="false" viewBox="0 0 24 24"
aria-hidden="true">
<path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"></path>
<path fill="none" d="M0 0h24v24H0z"></path>
</svg>Components<b class="CustomDropdown-caret-174"></b></span><span class="MuiTouchRipple-root-101"></span></button></div>
</div>
</li>
<li class="MuiListItem-root-145 MuiListItem-default-148 MuiListItem-gutters-152 HeaderLinks-listItem-124">
<div class="CustomDropdown-manager-157">
<div class=""><button tabindex="0" class="MuiButtonBase-root-98 MuiButton-root-72 MuiButton-text-74 MuiButton-flat-77 RegularButton-button-180 RegularButton-transparent-203 HeaderLinks-navLink-126"
type="button" aria-label="Notifications" aria-haspopup="true"><span class="MuiButton-label-73"><svg
class="MuiSvgIcon-root-212 CustomDropdown-buttonIcon-173" focusable="false" viewBox="0 0 24 24"
aria-hidden="true">
<path fill="none" d="M0 0h24v24H0z"></path>
<path d="M2 21h19v-3H2v3zM20 8H3c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h17c.55 0 1-.45 1-1V9c0-.55-.45-1-1-1zM2 3v3h19V3H2z"></path>
</svg>Sections<b class="CustomDropdown-caret-174"></b></span><span class="MuiTouchRipple-root-101"></span></button></div>
</div>
</li>
<li class="MuiListItem-root-145 MuiListItem-default-148 MuiListItem-gutters-152 HeaderLinks-listItem-124">
<div class="CustomDropdown-manager-157">
<div class=""><button tabindex="0" class="MuiButtonBase-root-98 MuiButton-root-72 MuiButton-text-74 MuiButton-flat-77 RegularButton-button-180 RegularButton-transparent-203 HeaderLinks-navLink-126"
type="button" aria-label="Notifications" aria-haspopup="true"><span class="MuiButton-label-73"><svg
class="MuiSvgIcon-root-212 CustomDropdown-buttonIcon-173" focusable="false" viewBox="0 0 24 24"
aria-hidden="true">
<path d="M7 19h10V4H7v15zm-5-2h4V6H2v11zM18 6v11h4V6h-4z"></path>
<path fill="none" d="M0 0h24v24H0z"></path>
</svg>Examples<b class="CustomDropdown-caret-174"></b></span><span class="MuiTouchRipple-root-101"></span></button></div>
</div>
</li>
<li class="MuiListItem-root-145 MuiListItem-default-148 MuiListItem-gutters-152 HeaderLinks-listItem-124"><a
tabindex="0" class="MuiButtonBase-root-98 MuiButton-root-72 MuiButton-text-74 MuiButton-flat-77 RegularButton-button-180 RegularButton-white-189 RegularButton-round-207 HeaderLinks-navButton-128"
role="button" href="https://www.creative-tim.com/product/material-kit-pro-react" target="_blank"><span
class="MuiButton-label-73"><svg class="MuiSvgIcon-root-212 HeaderLinks-icons-132" focusable="false"
viewBox="0 0 24 24" aria-hidden="true">
<path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"></path>
<path fill="none" d="M0 0h24v24H0z"></path>
</svg> buy now</span><span class="MuiTouchRipple-root-101"></span></a></li>
</ul>
</div>
</div>
</div>
<div class="HiddenCss-mdUp-115"></div>
</header>
<div class="Parallax-parallax-232 Parallax-darkColor-236 Parallax-small-241" style="background-image:url(http://localhost:3001/static/media/bg9.7d2facc5.jpg)">
<div class="AboutUsPage-container-5">
<div class="MuiGrid-container-243 MuiGrid-justify-xs-center-260 GridContainer-grid-242 ">
<div class="MuiGrid-item-244 MuiGrid-grid-sm-8-293 MuiGrid-grid-md-8-307 GridItem-grid-340 AboutUsPage-mlAuto-4 AboutUsPage-mrAuto-3 AboutUsPage-textCenter-7">
<h1 class="AboutUsPage-title-6">About Us</h1>
<h4>Meet the amazing team behind this project and find out more about how we work.</h4>
</div>
</div>
</div>
</div>
<div class="AboutUsPage-main-1 AboutUsPage-mainRaised-2">
<div class="AboutUsPage-container-5">
<div class="SectionDescription-aboutDescription-343 SectionDescription-textCenter-342">
<div class="MuiGrid-container-243 GridContainer-grid-242 ">
<div class="MuiGrid-item-244 MuiGrid-grid-sm-8-293 MuiGrid-grid-md-8-307 GridItem-grid-340 SectionDescription-mrAuto-344 SectionDescription-mlAuto-345">
<h5 class="SectionDescription-description-346">This is the paragraph where you can write more details
about your product. Keep you user engaged by providing meaningful information. Remember that by this
time, the user is curious, otherwise he wouldn&#x27;t scroll to get here. Add a button if you want
the user to see more.</h5>
</div>
</div>
</div>
<div class="SectionTeam-team-353">
<div class="MuiGrid-container-243 GridContainer-grid-242 ">
<div class="MuiGrid-item-244 MuiGrid-grid-sm-8-293 MuiGrid-grid-md-8-307 GridItem-grid-340 SectionTeam-mrAuto-347 SectionTeam-mlAuto-348 SectionTeam-textCenter-354">
<h2 class="SectionTeam-title-349">We are nerd rockstars</h2>
<h5 class="SectionTeam-description-350">This is the paragraph where you can write more details about
your team. Keep you user engaged by providing meaningful information.</h5>
</div>
</div>
<div class="MuiGrid-container-243 GridContainer-grid-242 ">
<div class="MuiGrid-item-244 MuiGrid-grid-sm-3-288 MuiGrid-grid-md-3-302 GridItem-grid-340 undefined">
<div class="Card-card-358 Card-cardPlain-359 Card-cardProfile-360">
<div class="CardAvatar-cardAvatar-373 CardAvatar-cardAvatarProfile-374 CardAvatar-cardAvatarPlain-375"><a
href="#pablo"><img src="http://localhost:3001/static/media/marc.101b9dc3.jpg" alt="profile-pic"
class="SectionTeam-img-355" /></a></div>
<div class="CardBody-cardBody-378 CardBody-cardBodyPlain-380">
<h4 class="SectionTeam-cardTitle-351">Alec Thompson</h4>
<h6 class="SectionTeam-textMuted-356">CEO / Co-Founder</h6>
<p class="SectionTeam-cardDescription-352">And I love you like Kanye loves Kanye. We need to
restart the human foundation.</p>
</div>
<div class="CardFooter-cardFooter-385 SectionTeam-justifyContent-357"><a tabindex="0" class="MuiButtonBase-root-98 MuiButton-root-72 MuiButton-text-74 MuiButton-flat-77 RegularButton-button-180 RegularButton-twitter-190 RegularButton-simple-202 RegularButton-justIcon-210"
role="button" href="#pablo"><span class="MuiButton-label-73"><i class="fab fa-twitter"></i></span><span
class="MuiTouchRipple-root-101"></span></a><a tabindex="0" class="MuiButtonBase-root-98 MuiButton-root-72 MuiButton-text-74 MuiButton-flat-77 RegularButton-button-180 RegularButton-facebook-191 RegularButton-simple-202 RegularButton-justIcon-210"
role="button" href="#pablo"><span class="MuiButton-label-73"><i class="fab fa-facebook"></i></span><span
class="MuiTouchRipple-root-101"></span></a><a tabindex="0" class="MuiButtonBase-root-98 MuiButton-root-72 MuiButton-text-74 MuiButton-flat-77 RegularButton-button-180 RegularButton-google-192 RegularButton-simple-202 RegularButton-justIcon-210"
role="button" href="#pablo"><span class="MuiButton-label-73"><i class="fab fa-google"></i></span><span
class="MuiTouchRipple-root-101"></span></a></div>
</div>
</div>
<div class="MuiGrid-item-244 MuiGrid-grid-sm-3-288 MuiGrid-grid-md-3-302 GridItem-grid-340 undefined">
<div class="Card-card-358 Card-cardPlain-359 Card-cardProfile-360">
<div class="CardAvatar-cardAvatar-373 CardAvatar-cardAvatarProfile-374 CardAvatar-cardAvatarPlain-375"><a
href="#pablo"><img src="http://localhost:3001/static/media/kendall.5a0e395b.jpg" alt="profile-pic"
class="SectionTeam-img-355" /></a></div>
<div class="CardBody-cardBody-378 CardBody-cardBodyPlain-380">
<h4 class="SectionTeam-cardTitle-351">Tania Andrew</h4>
<h6 class="SectionTeam-textMuted-356">DESIGNER</h6>
<p class="SectionTeam-cardDescription-352">Don&#x27;t be scared of the truth because we need to
restart the human foundation. And I love you like Kanye loves Kanye.</p>
</div>
<div class="CardFooter-cardFooter-385 SectionTeam-justifyContent-357"><a tabindex="0" class="MuiButtonBase-root-98 MuiButton-root-72 MuiButton-text-74 MuiButton-flat-77 RegularButton-button-180 RegularButton-twitter-190 RegularButton-simple-202 RegularButton-justIcon-210"
role="button" href="#pablo"><span class="MuiButton-label-73"><i class="fab fa-twitter"></i></span><span
class="MuiTouchRipple-root-101"></span></a><a tabindex="0" class="MuiButtonBase-root-98 MuiButton-root-72 MuiButton-text-74 MuiButton-flat-77 RegularButton-button-180 RegularButton-dribbble-199 RegularButton-simple-202 RegularButton-justIcon-210"
role="button" href="#pablo"><span class="MuiButton-label-73"><i class="fab fa-dribbble"></i></span><span
class="MuiTouchRipple-root-101"></span></a><a tabindex="0" class="MuiButtonBase-root-98 MuiButton-root-72 MuiButton-text-74 MuiButton-flat-77 RegularButton-button-180 RegularButton-linkedin-193 RegularButton-simple-202 RegularButton-justIcon-210"
role="button" href="#pablo"><span class="MuiButton-label-73"><i class="fab fa-linkedin-in"></i></span><span
class="MuiTouchRipple-root-101"></span></a></div>
</div>
</div>
<div class="MuiGrid-item-244 MuiGrid-grid-sm-3-288 MuiGrid-grid-md-3-302 GridItem-grid-340 undefined">
<div class="Card-card-358 Card-cardPlain-359 Card-cardProfile-360">
<div class="CardAvatar-cardAvatar-373 CardAvatar-cardAvatarProfile-374 CardAvatar-cardAvatarPlain-375"><a
href="#pablo"><img src="http://localhost:3001/static/media/christian.b23f7205.jpg" alt="profile-pic"
class="SectionTeam-img-355" /></a></div>
<div class="CardBody-cardBody-378 CardBody-cardBodyPlain-380">
<h4 class="SectionTeam-cardTitle-351">Christian Mike</h4>
<h6 class="SectionTeam-textMuted-356">Web Developer</h6>
<p class="SectionTeam-cardDescription-352">I love you like Kanye loves Kanye. Don&#x27;t be scared
of the truth because we need to restart the human foundation.</p>
</div>
<div class="CardFooter-cardFooter-385 SectionTeam-justifyContent-357"><a tabindex="0" class="MuiButtonBase-root-98 MuiButton-root-72 MuiButton-text-74 MuiButton-flat-77 RegularButton-button-180 RegularButton-facebook-191 RegularButton-simple-202 RegularButton-justIcon-210"
role="button" href="#pablo"><span class="MuiButton-label-73"><i class="fab fa-facebook"></i></span><span
class="MuiTouchRipple-root-101"></span></a><a tabindex="0" class="MuiButtonBase-root-98 MuiButton-root-72 MuiButton-text-74 MuiButton-flat-77 RegularButton-button-180 RegularButton-dribbble-199 RegularButton-simple-202 RegularButton-justIcon-210"
role="button" href="#pablo"><span class="MuiButton-label-73"><i class="fab fa-dribbble"></i></span><span
class="MuiTouchRipple-root-101"></span></a></div>
</div>
</div>
<div class="MuiGrid-item-244 MuiGrid-grid-sm-3-288 MuiGrid-grid-md-3-302 GridItem-grid-340 undefined">
<div class="Card-card-358 Card-cardPlain-359 Card-cardProfile-360">
<div class="CardAvatar-cardAvatar-373 CardAvatar-cardAvatarProfile-374 CardAvatar-cardAvatarPlain-375"><a
href="#pablo"><img src="http://localhost:3001/static/media/avatar.cc93a967.jpg" alt="profile-pic"
class="SectionTeam-img-355" /></a></div>
<div class="CardBody-cardBody-378 CardBody-cardBodyPlain-380">
<h4 class="SectionTeam-cardTitle-351">Rebecca Stormvile</h4>
<h6 class="SectionTeam-textMuted-356">WEB DEVELOPER</h6>
<p class="SectionTeam-cardDescription-352">And I love you like Kanye loves Kanye. We really need to
restart the human foundation.</p>
</div>
<div class="CardFooter-cardFooter-385 SectionTeam-justifyContent-357"><a tabindex="0" class="MuiButtonBase-root-98 MuiButton-root-72 MuiButton-text-74 MuiButton-flat-77 RegularButton-button-180 RegularButton-google-192 RegularButton-simple-202 RegularButton-justIcon-210"
role="button" href="#pablo"><span class="MuiButton-label-73"><i class="fab fa-google"></i></span><span
class="MuiTouchRipple-root-101"></span></a><a tabindex="0" class="MuiButtonBase-root-98 MuiButton-root-72 MuiButton-text-74 MuiButton-flat-77 RegularButton-button-180 RegularButton-twitter-190 RegularButton-simple-202 RegularButton-justIcon-210"
role="button" href="#pablo"><span class="MuiButton-label-73"><i class="fab fa-twitter"></i></span><span
class="MuiTouchRipple-root-101"></span></a><a tabindex="0" class="MuiButtonBase-root-98 MuiButton-root-72 MuiButton-text-74 MuiButton-flat-77 RegularButton-button-180 RegularButton-dribbble-199 RegularButton-simple-202 RegularButton-justIcon-210"
role="button" href="#pablo"><span class="MuiButton-label-73"><i class="fab fa-dribbble"></i></span><span
class="MuiTouchRipple-root-101"></span></a></div>
</div>
</div>
</div>
</div>
<div class="SectionServices-services-393">
<div class="MuiGrid-container-243 GridContainer-grid-242 ">
<div class="MuiGrid-item-244 MuiGrid-grid-sm-8-293 MuiGrid-grid-md-8-307 GridItem-grid-340 SectionServices-mlAuto-392 SectionServices-mrAuto-391 SectionServices-textCenter-394">
<h2 class="SectionServices-title-390">We build awesome products</h2>
<h5 class="SectionServices-description-395">This is the paragraph where you can write more details
about your product. Keep you user engaged by providing meaningful information.</h5>
</div>
</div>
<div class="MuiGrid-container-243 GridContainer-grid-242 ">
<div class="MuiGrid-item-244 MuiGrid-grid-sm-4-289 MuiGrid-grid-md-4-303 GridItem-grid-340 undefined">
<div class="InfoArea-infoArea-396">
<div class="InfoArea-iconWrapper-397 InfoArea-rose-403"><svg class="MuiSvgIcon-root-212 InfoArea-icon-405"
focusable="false" viewBox="0 0 24 24" aria-hidden="true">
<path d="M4.59 6.89c.7-.71 1.4-1.35 1.71-1.22.5.2 0 1.03-.3 1.52-.25.42-2.86 3.89-2.86 6.31 0 1.28.48 2.34 1.34 2.98.75.56 1.74.73 2.64.46 1.07-.31 1.95-1.4 3.06-2.77 1.21-1.49 2.83-3.44 4.08-3.44 1.63 0 1.65 1.01 1.76 1.79-3.78.64-5.38 3.67-5.38 5.37 0 1.7 1.44 3.09 3.21 3.09 1.63 0 4.29-1.33 4.69-6.1H21v-2.5h-2.47c-.15-1.65-1.09-4.2-4.03-4.2-2.25 0-4.18 1.91-4.94 2.84-.58.73-2.06 2.48-2.29 2.72-.25.3-.68.84-1.11.84-.45 0-.72-.83-.36-1.92.35-1.09 1.4-2.86 1.85-3.52.78-1.14 1.3-1.92 1.3-3.28C8.95 3.69 7.31 3 6.44 3 5.12 3 3.97 4 3.72 4.25c-.36.36-.66.66-.88.93l1.75 1.71zm9.29 11.66c-.31 0-.74-.26-.74-.72 0-.6.73-2.2 2.87-2.76-.3 2.69-1.43 3.48-2.13 3.48z"></path>
<path fill="none" d="M0 0h24v24H0z"></path>
</svg></div>
<div class="InfoArea-descriptionWrapper-406">
<h4 class="InfoArea-title-407">1. Design</h4>
<div class="InfoArea-description-408"><span>
<p>The moment you use Material Kit, you know you’ve never felt anything like it. With a single
use, this powerfull UI Kit lets you do more than ever before.
<!-- -->
</p><a href="#pablo">Find more...</a>
</span></div>
</div>
</div>
</div>
<div class="MuiGrid-item-244 MuiGrid-grid-sm-4-289 MuiGrid-grid-md-4-303 GridItem-grid-340 undefined">
<div class="InfoArea-infoArea-396">
<div class="InfoArea-iconWrapper-397 InfoArea-rose-403"><svg class="MuiSvgIcon-root-212 InfoArea-icon-405"
focusable="false" viewBox="0 0 24 24" aria-hidden="true">
<path fill="none" d="M0 0h24v24H0z" clip-rule="evenodd"></path>
<path d="M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z"></path>
</svg></div>
<div class="InfoArea-descriptionWrapper-406">
<h4 class="InfoArea-title-407">2. Develop</h4>
<div class="InfoArea-description-408"><span>
<p>Divide details about your product or agency work into parts. Write a few lines about each
one. A paragraph describing a feature will be enough.
<!-- -->
</p><a href="#pablo">Find more...</a>
</span></div>
</div>
</div>
</div>
<div class="MuiGrid-item-244 MuiGrid-grid-sm-4-289 MuiGrid-grid-md-4-303 GridItem-grid-340 undefined">
<div class="InfoArea-infoArea-396">
<div class="InfoArea-iconWrapper-397 InfoArea-rose-403"><span class="material-icons MuiIcon-root-411 InfoArea-icon-405"
aria-hidden="true">mode_edit</span></div>
<div class="InfoArea-descriptionWrapper-406">
<h4 class="InfoArea-title-407">3. Make Edits</h4>
<div class="InfoArea-description-408"><span>
<p>Divide details about your product or agency work into parts. Write a few lines about each
one. A paragraph describing a feature will be enough.
<!-- -->
</p><a href="#pablo">Find more...</a>
</span></div>
</div>
</div>
</div>
</div>
</div>
<div class="SectionOffice-office-423">
<div class="MuiGrid-container-243 GridContainer-grid-242 SectionOffice-textCenter-422">
<div class="MuiGrid-item-244 MuiGrid-grid-sm-8-293 MuiGrid-grid-md-8-307 GridItem-grid-340 SectionOffice-mrAuto-420 SectionOffice-mlAuto-421">
<h2 class="SectionOffice-title-418">Our office is our second home</h2>
<h4 class="SectionOffice-description-419">Here are some pictures from our office. You can see the place
looks like a palace and is fully equiped with everything you need to get the job done.</h4>
</div>
</div>
<div class="MuiGrid-container-243 GridContainer-grid-242 ">
<div class="MuiGrid-item-244 MuiGrid-grid-sm-4-289 MuiGrid-grid-md-4-303 GridItem-grid-340 undefined"><img
class="SectionOffice-imgRaised-424 SectionOffice-imgFluid-426 SectionOffice-rounded-425" src="http://localhost:3001/static/media/office1.6bb0b5d0.jpg"
alt="office1" /></div>
<div class="MuiGrid-item-244 MuiGrid-grid-sm-4-289 MuiGrid-grid-md-4-303 GridItem-grid-340 undefined"><img
class="SectionOffice-imgRaised-424 SectionOffice-imgFluid-426 SectionOffice-rounded-425" src="http://localhost:3001/static/media/office2.d57fa885.jpg"
alt="office2" /></div>
<div class="MuiGrid-item-244 MuiGrid-grid-sm-4-289 MuiGrid-grid-md-4-303 GridItem-grid-340 undefined"><img
class="SectionOffice-imgRaised-424 SectionOffice-imgFluid-426 SectionOffice-rounded-425" src="http://localhost:3001/static/media/office3.a4d3b2d4.jpg"
alt="office3" /></div>
<div class="MuiGrid-item-244 MuiGrid-grid-sm-6-291 MuiGrid-grid-md-6-305 GridItem-grid-340 undefined"><img
class="SectionOffice-imgRaised-424 SectionOffice-imgFluid-426 SectionOffice-rounded-425" src="http://localhost:3001/static/media/office4.7e9ec18c.jpg"
alt="office4" /></div>
<div class="MuiGrid-item-244 MuiGrid-grid-sm-6-291 MuiGrid-grid-md-6-305 GridItem-grid-340 undefined"><img
class="SectionOffice-imgRaised-424 SectionOffice-imgFluid-426 SectionOffice-rounded-425" src="http://localhost:3001/static/media/office5.99ffc11c.jpg"
alt="office5" /></div>
</div>
</div>
<div class="SectionContact-aboutUs-441">
<div class="MuiGrid-container-243 GridContainer-grid-242 ">
<div class="MuiGrid-item-244 MuiGrid-grid-sm-8-293 MuiGrid-grid-md-8-307 GridItem-grid-340 SectionContact-mrAuto-428 SectionContact-mlAuto-429">
<h2 class="SectionContact-title-427 SectionContact-textCenter-439">Want to work with us?</h2>
<h4 class="SectionContact-description-438 SectionContact-textCenter-439">Divide details about your
product or agency work into parts. Write a few lines about each one and contact us about any further
collaboration. We will get back to you in a couple of hours.</h4>
<form>
<div class="MuiGrid-container-243 GridContainer-grid-242 ">
<div class="MuiGrid-item-244 MuiGrid-grid-sm-4-289 MuiGrid-grid-md-4-303 GridItem-grid-340 undefined">
<div class="MuiFormControl-root-454 MuiFormControl-fullWidth-457 CustomInput-formControl-450"><label
class="MuiFormLabel-root-463 MuiInputLabel-root-458 MuiInputLabel-formControl-459 MuiInputLabel-animated-462 CustomInput-labelRoot-446 "
data-shrink="false">Your name</label>
<div class="MuiInput-root-470 MuiInput-formControl-471 MuiInput-underline-474 CustomInput-underline-443"><input
type="text" aria-invalid="false" class="MuiInput-input-478 CustomInput-input-452" /></div>
</div>
</div>
<div class="MuiGrid-item-244 MuiGrid-grid-sm-4-289 MuiGrid-grid-md-4-303 GridItem-grid-340 undefined">
<div class="MuiFormControl-root-454 MuiFormControl-fullWidth-457 CustomInput-formControl-450"><label
class="MuiFormLabel-root-463 MuiInputLabel-root-458 MuiInputLabel-formControl-459 MuiInputLabel-animated-462 CustomInput-labelRoot-446 "
data-shrink="false">Your email</label>
<div class="MuiInput-root-470 MuiInput-formControl-471 MuiInput-underline-474 CustomInput-underline-443"><input
type="text" aria-invalid="false" class="MuiInput-input-478 CustomInput-input-452" /></div>
</div>
</div>
<div class="MuiGrid-item-244 MuiGrid-grid-sm-4-289 MuiGrid-grid-md-4-303 GridItem-grid-340 undefined">
<div class="MuiFormControl-root-454 MuiFormControl-fullWidth-457 SectionContact-selectFormControl-431 SectionContact-selectUnderlineRoot-440">
<div class="MuiInput-root-470 MuiInput-formControl-471 MuiInput-underline-474">
<div class="MuiSelect-root-483">
<div class="MuiSelect-select-484 SectionContact-select-430 MuiSelect-selectMenu-485 MuiInput-input-478"
aria-pressed="false" tabindex="0" role="button" aria-haspopup="true">I&#x27;m a Designer</div><input
type="hidden" value="1" name="specialitySelect" id="speciality-select" /><svg class="MuiSvgIcon-root-212 MuiSelect-icon-487"
focusable="false" viewBox="0 0 24 24" aria-hidden="true">
<path d="M7 10l5 5 5-5z"></path>
</svg>
</div>
</div>
</div>
</div>
</div>
<div class="MuiGrid-container-243 GridContainer-grid-242 ">
<div class="MuiGrid-item-244 MuiGrid-grid-sm-4-289 MuiGrid-grid-md-4-303 GridItem-grid-340 SectionContact-mrAuto-428 SectionContact-mlAuto-429 SectionContact-textCenter-439"><button
tabindex="0" class="MuiButtonBase-root-98 MuiButton-root-72 MuiButton-text-74 MuiButton-flat-77 RegularButton-button-180 RegularButton-primary-182 RegularButton-round-207"
type="button"><span class="MuiButton-label-73">Let&#x27;s talk</span><span class="MuiTouchRipple-root-101"></span></button></div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<footer class="Footer-footer-493">
<div class="Footer-container-499">
<div>
<div class="AboutUsPage-left-11">
<ul class="MuiList-root-141 MuiList-padding-142 AboutUsPage-list-10">
<li class="MuiListItem-root-145 MuiListItem-default-148 MuiListItem-gutters-152 AboutUsPage-inlineBlock-9"><a
href="https://www.creative-tim.com/" class="AboutUsPage-block-8">Creative Tim</a></li>
<li class="MuiListItem-root-145 MuiListItem-default-148 MuiListItem-gutters-152 AboutUsPage-inlineBlock-9"><a
href="https://www.creative-tim.com/presentation" class="AboutUsPage-block-8">About us</a></li>
<li class="MuiListItem-root-145 MuiListItem-default-148 MuiListItem-gutters-152 AboutUsPage-inlineBlock-9"><a
href="//blog.creative-tim.com/" class="AboutUsPage-block-8">Blog</a></li>
<li class="MuiListItem-root-145 MuiListItem-default-148 MuiListItem-gutters-152 AboutUsPage-inlineBlock-9"><a
href="https://www.creative-tim.com/license" class="AboutUsPage-block-8">Licenses</a></li>
</ul>
</div>
<div class="AboutUsPage-right-12">©
<!-- -->2018
<!-- --> , made with
<!-- --> <svg class="MuiSvgIcon-root-212 AboutUsPage-icon-13" focusable="false" viewBox="0 0 24 24"
aria-hidden="true">
<path fill="none" d="M0 0h24v24H0z"></path>
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"></path>
</svg> by
<!-- --> <a href="https://www.creative-tim.com">Creative Tim</a> for a better web.</div>
</div>
<div class="Footer-clearFix-509"></div>
</div>
</footer>
</div>
</div>
</body>
</html>
Raw
unstyled.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" />
<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet">
<script src="http://localhost:3001/static/js/bundle.js" defer crossorigin></script>
</head>
<body>
<div id="root">
<div data-reactroot="">
<header class="MuiPaper-root-66 MuiPaper-elevation4-72 MuiAppBar-root-58 MuiAppBar-positionFixed-59 MuiAppBar-colorPrimary-64 mui-fixed Header-appBar-39 Header-transparent-51 Header-fixed-41">
<div class="MuiToolbar-root-93 MuiToolbar-regular-95 MuiToolbar-gutters-94 Header-container-42"><button
tabindex="0" class="MuiButtonBase-root-123 MuiButton-root-97 MuiButton-text-99 MuiButton-flat-102 Header-title-43"
type="button"><span class="MuiButton-label-98"><a href="/">Material Kit PRO React</a></span><span class="MuiTouchRipple-root-126"></span></button>
<div class="Header-hidden-55 HiddenCss-smDown-138">
<div class="Header-collapse-56">
<ul class="MuiList-root-166 MuiList-padding-167 HeaderLinks-list-148 HeaderLinks-mlAuto-165">
<li class="MuiListItem-root-170 MuiListItem-default-173 MuiListItem-gutters-177 HeaderLinks-listItem-149">
<div class="CustomDropdown-manager-182">
<div class=""><button tabindex="0" class="MuiButtonBase-root-123 MuiButton-root-97 MuiButton-text-99 MuiButton-flat-102 RegularButton-button-205 RegularButton-transparent-228 HeaderLinks-navLink-151"
type="button" aria-label="Notifications" aria-haspopup="true"><span class="MuiButton-label-98"><svg
class="MuiSvgIcon-root-237 CustomDropdown-buttonIcon-198" focusable="false" viewBox="0 0 24 24"
aria-hidden="true">
<path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"></path>
<path fill="none" d="M0 0h24v24H0z"></path>
</svg>Components<b class="CustomDropdown-caret-199"></b></span><span class="MuiTouchRipple-root-126"></span></button></div>
</div>
</li>
<li class="MuiListItem-root-170 MuiListItem-default-173 MuiListItem-gutters-177 HeaderLinks-listItem-149">
<div class="CustomDropdown-manager-182">
<div class=""><button tabindex="0" class="MuiButtonBase-root-123 MuiButton-root-97 MuiButton-text-99 MuiButton-flat-102 RegularButton-button-205 RegularButton-transparent-228 HeaderLinks-navLink-151"
type="button" aria-label="Notifications" aria-haspopup="true"><span class="MuiButton-label-98"><svg
class="MuiSvgIcon-root-237 CustomDropdown-buttonIcon-198" focusable="false" viewBox="0 0 24 24"
aria-hidden="true">
<path fill="none" d="M0 0h24v24H0z"></path>
<path d="M2 21h19v-3H2v3zM20 8H3c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h17c.55 0 1-.45 1-1V9c0-.55-.45-1-1-1zM2 3v3h19V3H2z"></path>
</svg>Sections<b class="CustomDropdown-caret-199"></b></span><span class="MuiTouchRipple-root-126"></span></button></div>
</div>
</li>
<li class="MuiListItem-root-170 MuiListItem-default-173 MuiListItem-gutters-177 HeaderLinks-listItem-149">
<div class="CustomDropdown-manager-182">
<div class=""><button tabindex="0" class="MuiButtonBase-root-123 MuiButton-root-97 MuiButton-text-99 MuiButton-flat-102 RegularButton-button-205 RegularButton-transparent-228 HeaderLinks-navLink-151"
type="button" aria-label="Notifications" aria-haspopup="true"><span class="MuiButton-label-98"><svg
class="MuiSvgIcon-root-237 CustomDropdown-buttonIcon-198" focusable="false" viewBox="0 0 24 24"
aria-hidden="true">
<path d="M7 19h10V4H7v15zm-5-2h4V6H2v11zM18 6v11h4V6h-4z"></path>
<path fill="none" d="M0 0h24v24H0z"></path>
</svg>Examples<b class="CustomDropdown-caret-199"></b></span><span class="MuiTouchRipple-root-126"></span></button></div>
</div>
</li>
<li class="MuiListItem-root-170 MuiListItem-default-173 MuiListItem-gutters-177 HeaderLinks-listItem-149"><a
tabindex="0" class="MuiButtonBase-root-123 MuiButton-root-97 MuiButton-text-99 MuiButton-flat-102 RegularButton-button-205 RegularButton-white-214 RegularButton-round-232 HeaderLinks-navButton-153"
role="button" href="https://www.creative-tim.com/product/material-kit-pro-react" target="_blank"><span
class="MuiButton-label-98"><svg class="MuiSvgIcon-root-237 HeaderLinks-icons-157" focusable="false"
viewBox="0 0 24 24" aria-hidden="true">
<path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"></path>
<path fill="none" d="M0 0h24v24H0z"></path>
</svg> buy now</span><span class="MuiTouchRipple-root-126"></span></a></li>
</ul>
</div>
</div>
</div>
<div class="HiddenCss-mdUp-140"></div>
</header>
<div class="Parallax-parallax-257 Parallax-darkColor-261 Parallax-small-266" style="background-image:url(http://localhost:3001/static/media/bg9.7d2facc5.jpg)">
<div class="AboutUsPage-container-588">
<div class="MuiGrid-container-268 MuiGrid-justify-xs-center-285 GridContainer-grid-267 ">
<div class="MuiGrid-item-269 MuiGrid-grid-sm-8-318 MuiGrid-grid-md-8-332 GridItem-grid-365 AboutUsPage-mlAuto-587 AboutUsPage-mrAuto-586 AboutUsPage-textCenter-590">
<h1 class="AboutUsPage-title-589">About Us</h1>
<h4>Meet the amazing team behind this project and find out more about how we work.</h4>
</div>
</div>
</div>
</div>
<div class="AboutUsPage-main-584 AboutUsPage-mainRaised-585">
<div class="AboutUsPage-container-588">
<div class="SectionDescription-aboutDescription-599 SectionDescription-textCenter-598">
<div class="MuiGrid-container-268 GridContainer-grid-267 ">
<div class="MuiGrid-item-269 MuiGrid-grid-sm-8-318 MuiGrid-grid-md-8-332 GridItem-grid-365 SectionDescription-mrAuto-600 SectionDescription-mlAuto-601">
<h5 class="SectionDescription-description-602">This is the paragraph where you can write more details
about your product. Keep you user engaged by providing meaningful information. Remember that by this
time, the user is curious, otherwise he wouldn&#x27;t scroll to get here. Add a button if you want
the user to see more.</h5>
</div>
</div>
</div>
<div class="SectionTeam-team-609">
<div class="MuiGrid-container-268 GridContainer-grid-267 ">
<div class="MuiGrid-item-269 MuiGrid-grid-sm-8-318 MuiGrid-grid-md-8-332 GridItem-grid-365 SectionTeam-mrAuto-603 SectionTeam-mlAuto-604 SectionTeam-textCenter-610">
<h2 class="SectionTeam-title-605">We are nerd rockstars</h2>
<h5 class="SectionTeam-description-606">This is the paragraph where you can write more details about
your team. Keep you user engaged by providing meaningful information.</h5>
</div>
</div>
<div class="MuiGrid-container-268 GridContainer-grid-267 ">
<div class="MuiGrid-item-269 MuiGrid-grid-sm-3-313 MuiGrid-grid-md-3-327 GridItem-grid-365 undefined">
<div class="Card-card-444 Card-cardPlain-445 Card-cardProfile-446">
<div class="CardAvatar-cardAvatar-614 CardAvatar-cardAvatarProfile-615 CardAvatar-cardAvatarPlain-616"><a
href="#pablo"><img src="http://localhost:3001/static/media/marc.101b9dc3.jpg" alt="profile-pic"
class="SectionTeam-img-611" /></a></div>
<div class="CardBody-cardBody-473 CardBody-cardBodyPlain-475">
<h4 class="SectionTeam-cardTitle-607">Alec Thompson</h4>
<h6 class="SectionTeam-textMuted-612">CEO / Co-Founder</h6>
<p class="SectionTeam-cardDescription-608">And I love you like Kanye loves Kanye. We need to
restart the human foundation.</p>
</div>
<div class="CardFooter-cardFooter-619 SectionTeam-justifyContent-613"><a tabindex="0" class="MuiButtonBase-root-123 MuiButton-root-97 MuiButton-text-99 MuiButton-flat-102 RegularButton-button-205 RegularButton-twitter-215 RegularButton-simple-227 RegularButton-justIcon-235"
role="button" href="#pablo"><span class="MuiButton-label-98"><i class="fab fa-twitter"></i></span><span
class="MuiTouchRipple-root-126"></span></a><a tabindex="0" class="MuiButtonBase-root-123 MuiButton-root-97 MuiButton-text-99 MuiButton-flat-102 RegularButton-button-205 RegularButton-facebook-216 RegularButton-simple-227 RegularButton-justIcon-235"
role="button" href="#pablo"><span class="MuiButton-label-98"><i class="fab fa-facebook"></i></span><span
class="MuiTouchRipple-root-126"></span></a><a tabindex="0" class="MuiButtonBase-root-123 MuiButton-root-97 MuiButton-text-99 MuiButton-flat-102 RegularButton-button-205 RegularButton-google-217 RegularButton-simple-227 RegularButton-justIcon-235"
role="button" href="#pablo"><span class="MuiButton-label-98"><i class="fab fa-google"></i></span><span
class="MuiTouchRipple-root-126"></span></a></div>
</div>
</div>
<div class="MuiGrid-item-269 MuiGrid-grid-sm-3-313 MuiGrid-grid-md-3-327 GridItem-grid-365 undefined">
<div class="Card-card-444 Card-cardPlain-445 Card-cardProfile-446">
<div class="CardAvatar-cardAvatar-614 CardAvatar-cardAvatarProfile-615 CardAvatar-cardAvatarPlain-616"><a
href="#pablo"><img src="http://localhost:3001/static/media/kendall.5a0e395b.jpg" alt="profile-pic"
class="SectionTeam-img-611" /></a></div>
<div class="CardBody-cardBody-473 CardBody-cardBodyPlain-475">
<h4 class="SectionTeam-cardTitle-607">Tania Andrew</h4>
<h6 class="SectionTeam-textMuted-612">DESIGNER</h6>
<p class="SectionTeam-cardDescription-608">Don&#x27;t be scared of the truth because we need to
restart the human foundation. And I love you like Kanye loves Kanye.</p>
</div>
<div class="CardFooter-cardFooter-619 SectionTeam-justifyContent-613"><a tabindex="0" class="MuiButtonBase-root-123 MuiButton-root-97 MuiButton-text-99 MuiButton-flat-102 RegularButton-button-205 RegularButton-twitter-215 RegularButton-simple-227 RegularButton-justIcon-235"
role="button" href="#pablo"><span class="MuiButton-label-98"><i class="fab fa-twitter"></i></span><span
class="MuiTouchRipple-root-126"></span></a><a tabindex="0" class="MuiButtonBase-root-123 MuiButton-root-97 MuiButton-text-99 MuiButton-flat-102 RegularButton-button-205 RegularButton-dribbble-224 RegularButton-simple-227 RegularButton-justIcon-235"
role="button" href="#pablo"><span class="MuiButton-label-98"><i class="fab fa-dribbble"></i></span><span
class="MuiTouchRipple-root-126"></span></a><a tabindex="0" class="MuiButtonBase-root-123 MuiButton-root-97 MuiButton-text-99 MuiButton-flat-102 RegularButton-button-205 RegularButton-linkedin-218 RegularButton-simple-227 RegularButton-justIcon-235"
role="button" href="#pablo"><span class="MuiButton-label-98"><i class="fab fa-linkedin-in"></i></span><span
class="MuiTouchRipple-root-126"></span></a></div>
</div>
</div>
<div class="MuiGrid-item-269 MuiGrid-grid-sm-3-313 MuiGrid-grid-md-3-327 GridItem-grid-365 undefined">
<div class="Card-card-444 Card-cardPlain-445 Card-cardProfile-446">
<div class="CardAvatar-cardAvatar-614 CardAvatar-cardAvatarProfile-615 CardAvatar-cardAvatarPlain-616"><a
href="#pablo"><img src="http://localhost:3001/static/media/christian.b23f7205.jpg" alt="profile-pic"
class="SectionTeam-img-611" /></a></div>
<div class="CardBody-cardBody-473 CardBody-cardBodyPlain-475">
<h4 class="SectionTeam-cardTitle-607">Christian Mike</h4>
<h6 class="SectionTeam-textMuted-612">Web Developer</h6>
<p class="SectionTeam-cardDescription-608">I love you like Kanye loves Kanye. Don&#x27;t be scared
of the truth because we need to restart the human foundation.</p>
</div>
<div class="CardFooter-cardFooter-619 SectionTeam-justifyContent-613"><a tabindex="0" class="MuiButtonBase-root-123 MuiButton-root-97 MuiButton-text-99 MuiButton-flat-102 RegularButton-button-205 RegularButton-facebook-216 RegularButton-simple-227 RegularButton-justIcon-235"
role="button" href="#pablo"><span class="MuiButton-label-98"><i class="fab fa-facebook"></i></span><span
class="MuiTouchRipple-root-126"></span></a><a tabindex="0" class="MuiButtonBase-root-123 MuiButton-root-97 MuiButton-text-99 MuiButton-flat-102 RegularButton-button-205 RegularButton-dribbble-224 RegularButton-simple-227 RegularButton-justIcon-235"
role="button" href="#pablo"><span class="MuiButton-label-98"><i class="fab fa-dribbble"></i></span><span
class="MuiTouchRipple-root-126"></span></a></div>
</div>
</div>
<div class="MuiGrid-item-269 MuiGrid-grid-sm-3-313 MuiGrid-grid-md-3-327 GridItem-grid-365 undefined">
<div class="Card-card-444 Card-cardPlain-445 Card-cardProfile-446">
<div class="CardAvatar-cardAvatar-614 CardAvatar-cardAvatarProfile-615 CardAvatar-cardAvatarPlain-616"><a
href="#pablo"><img src="http://localhost:3001/static/media/avatar.cc93a967.jpg" alt="profile-pic"
class="SectionTeam-img-611" /></a></div>
<div class="CardBody-cardBody-473 CardBody-cardBodyPlain-475">
<h4 class="SectionTeam-cardTitle-607">Rebecca Stormvile</h4>
<h6 class="SectionTeam-textMuted-612">WEB DEVELOPER</h6>
<p class="SectionTeam-cardDescription-608">And I love you like Kanye loves Kanye. We really need to
restart the human foundation.</p>
</div>
<div class="CardFooter-cardFooter-619 SectionTeam-justifyContent-613"><a tabindex="0" class="MuiButtonBase-root-123 MuiButton-root-97 MuiButton-text-99 MuiButton-flat-102 RegularButton-button-205 RegularButton-google-217 RegularButton-simple-227 RegularButton-justIcon-235"
role="button" href="#pablo"><span class="MuiButton-label-98"><i class="fab fa-google"></i></span><span
class="MuiTouchRipple-root-126"></span></a><a tabindex="0" class="MuiButtonBase-root-123 MuiButton-root-97 MuiButton-text-99 MuiButton-flat-102 RegularButton-button-205 RegularButton-twitter-215 RegularButton-simple-227 RegularButton-justIcon-235"
role="button" href="#pablo"><span class="MuiButton-label-98"><i class="fab fa-twitter"></i></span><span
class="MuiTouchRipple-root-126"></span></a><a tabindex="0" class="MuiButtonBase-root-123 MuiButton-root-97 MuiButton-text-99 MuiButton-flat-102 RegularButton-button-205 RegularButton-dribbble-224 RegularButton-simple-227 RegularButton-justIcon-235"
role="button" href="#pablo"><span class="MuiButton-label-98"><i class="fab fa-dribbble"></i></span><span
class="MuiTouchRipple-root-126"></span></a></div>
</div>
</div>
</div>
</div>
<div class="SectionServices-services-627">
<div class="MuiGrid-container-268 GridContainer-grid-267 ">
<div class="MuiGrid-item-269 MuiGrid-grid-sm-8-318 MuiGrid-grid-md-8-332 GridItem-grid-365 SectionServices-mlAuto-626 SectionServices-mrAuto-625 SectionServices-textCenter-628">
<h2 class="SectionServices-title-624">We build awesome products</h2>
<h5 class="SectionServices-description-629">This is the paragraph where you can write more details
about your product. Keep you user engaged by providing meaningful information.</h5>
</div>
</div>
<div class="MuiGrid-container-268 GridContainer-grid-267 ">
<div class="MuiGrid-item-269 MuiGrid-grid-sm-4-314 MuiGrid-grid-md-4-328 GridItem-grid-365 undefined">
<div class="InfoArea-infoArea-370">
<div class="InfoArea-iconWrapper-371 InfoArea-rose-377"><svg class="MuiSvgIcon-root-237 InfoArea-icon-379"
focusable="false" viewBox="0 0 24 24" aria-hidden="true">
<path d="M4.59 6.89c.7-.71 1.4-1.35 1.71-1.22.5.2 0 1.03-.3 1.52-.25.42-2.86 3.89-2.86 6.31 0 1.28.48 2.34 1.34 2.98.75.56 1.74.73 2.64.46 1.07-.31 1.95-1.4 3.06-2.77 1.21-1.49 2.83-3.44 4.08-3.44 1.63 0 1.65 1.01 1.76 1.79-3.78.64-5.38 3.67-5.38 5.37 0 1.7 1.44 3.09 3.21 3.09 1.63 0 4.29-1.33 4.69-6.1H21v-2.5h-2.47c-.15-1.65-1.09-4.2-4.03-4.2-2.25 0-4.18 1.91-4.94 2.84-.58.73-2.06 2.48-2.29 2.72-.25.3-.68.84-1.11.84-.45 0-.72-.83-.36-1.92.35-1.09 1.4-2.86 1.85-3.52.78-1.14 1.3-1.92 1.3-3.28C8.95 3.69 7.31 3 6.44 3 5.12 3 3.97 4 3.72 4.25c-.36.36-.66.66-.88.93l1.75 1.71zm9.29 11.66c-.31 0-.74-.26-.74-.72 0-.6.73-2.2 2.87-2.76-.3 2.69-1.43 3.48-2.13 3.48z"></path>
<path fill="none" d="M0 0h24v24H0z"></path>
</svg></div>
<div class="InfoArea-descriptionWrapper-380">
<h4 class="InfoArea-title-381">1. Design</h4>
<div class="InfoArea-description-382"><span>
<p>The moment you use Material Kit, you know you’ve never felt anything like it. With a single
use, this powerfull UI Kit lets you do more than ever before.
<!-- -->
</p><a href="#pablo">Find more...</a>
</span></div>
</div>
</div>
</div>
<div class="MuiGrid-item-269 MuiGrid-grid-sm-4-314 MuiGrid-grid-md-4-328 GridItem-grid-365 undefined">
<div class="InfoArea-infoArea-370">
<div class="InfoArea-iconWrapper-371 InfoArea-rose-377"><svg class="MuiSvgIcon-root-237 InfoArea-icon-379"
focusable="false" viewBox="0 0 24 24" aria-hidden="true">
<path fill="none" d="M0 0h24v24H0z" clip-rule="evenodd"></path>
<path d="M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z"></path>
</svg></div>
<div class="InfoArea-descriptionWrapper-380">
<h4 class="InfoArea-title-381">2. Develop</h4>
<div class="InfoArea-description-382"><span>
<p>Divide details about your product or agency work into parts. Write a few lines about each
one. A paragraph describing a feature will be enough.
<!-- -->
</p><a href="#pablo">Find more...</a>
</span></div>
</div>
</div>
</div>
<div class="MuiGrid-item-269 MuiGrid-grid-sm-4-314 MuiGrid-grid-md-4-328 GridItem-grid-365 undefined">
<div class="InfoArea-infoArea-370">
<div class="InfoArea-iconWrapper-371 InfoArea-rose-377"><span class="material-icons MuiIcon-root-630 InfoArea-icon-379"
aria-hidden="true">mode_edit</span></div>
<div class="InfoArea-descriptionWrapper-380">
<h4 class="InfoArea-title-381">3. Make Edits</h4>
<div class="InfoArea-description-382"><span>
<p>Divide details about your product or agency work into parts. Write a few lines about each
one. A paragraph describing a feature will be enough.
<!-- -->
</p><a href="#pablo">Find more...</a>
</span></div>
</div>
</div>
</div>
</div>
</div>
<div class="SectionOffice-office-642">
<div class="MuiGrid-container-268 GridContainer-grid-267 SectionOffice-textCenter-641">
<div class="MuiGrid-item-269 MuiGrid-grid-sm-8-318 MuiGrid-grid-md-8-332 GridItem-grid-365 SectionOffice-mrAuto-639 SectionOffice-mlAuto-640">
<h2 class="SectionOffice-title-637">Our office is our second home</h2>
<h4 class="SectionOffice-description-638">Here are some pictures from our office. You can see the place
looks like a palace and is fully equiped with everything you need to get the job done.</h4>
</div>
</div>
<div class="MuiGrid-container-268 GridContainer-grid-267 ">
<div class="MuiGrid-item-269 MuiGrid-grid-sm-4-314 MuiGrid-grid-md-4-328 GridItem-grid-365 undefined"><img
class="SectionOffice-imgRaised-643 SectionOffice-imgFluid-645 SectionOffice-rounded-644" src="http://localhost:3001/static/media/office1.6bb0b5d0.jpg"
alt="office1" /></div>
<div class="MuiGrid-item-269 MuiGrid-grid-sm-4-314 MuiGrid-grid-md-4-328 GridItem-grid-365 undefined"><img
class="SectionOffice-imgRaised-643 SectionOffice-imgFluid-645 SectionOffice-rounded-644" src="http://localhost:3001/static/media/office2.d57fa885.jpg"
alt="office2" /></div>
<div class="MuiGrid-item-269 MuiGrid-grid-sm-4-314 MuiGrid-grid-md-4-328 GridItem-grid-365 undefined"><img
class="SectionOffice-imgRaised-643 SectionOffice-imgFluid-645 SectionOffice-rounded-644" src="http://localhost:3001/static/media/office3.a4d3b2d4.jpg"
alt="office3" /></div>
<div class="MuiGrid-item-269 MuiGrid-grid-sm-6-316 MuiGrid-grid-md-6-330 GridItem-grid-365 undefined"><img
class="SectionOffice-imgRaised-643 SectionOffice-imgFluid-645 SectionOffice-rounded-644" src="http://localhost:3001/static/media/office4.7e9ec18c.jpg"
alt="office4" /></div>
<div class="MuiGrid-item-269 MuiGrid-grid-sm-6-316 MuiGrid-grid-md-6-330 GridItem-grid-365 undefined"><img
class="SectionOffice-imgRaised-643 SectionOffice-imgFluid-645 SectionOffice-rounded-644" src="http://localhost:3001/static/media/office5.99ffc11c.jpg"
alt="office5" /></div>
</div>
</div>
<div class="SectionContact-aboutUs-660">
<div class="MuiGrid-container-268 GridContainer-grid-267 ">
<div class="MuiGrid-item-269 MuiGrid-grid-sm-8-318 MuiGrid-grid-md-8-332 GridItem-grid-365 SectionContact-mrAuto-647 SectionContact-mlAuto-648">
<h2 class="SectionContact-title-646 SectionContact-textCenter-658">Want to work with us?</h2>
<h4 class="SectionContact-description-657 SectionContact-textCenter-658">Divide details about your
product or agency work into parts. Write a few lines about each one and contact us about any further
collaboration. We will get back to you in a couple of hours.</h4>
<form>
<div class="MuiGrid-container-268 GridContainer-grid-267 ">
<div class="MuiGrid-item-269 MuiGrid-grid-sm-4-314 MuiGrid-grid-md-4-328 GridItem-grid-365 undefined">
<div class="MuiFormControl-root-673 MuiFormControl-fullWidth-676 CustomInput-formControl-669"><label
class="MuiFormLabel-root-682 MuiInputLabel-root-677 MuiInputLabel-formControl-678 MuiInputLabel-animated-681 CustomInput-labelRoot-665 "
data-shrink="false">Your name</label>
<div class="MuiInput-root-689 MuiInput-formControl-690 MuiInput-underline-693 CustomInput-underline-662"><input
type="text" aria-invalid="false" class="MuiInput-input-697 CustomInput-input-671" /></div>
</div>
</div>
<div class="MuiGrid-item-269 MuiGrid-grid-sm-4-314 MuiGrid-grid-md-4-328 GridItem-grid-365 undefined">
<div class="MuiFormControl-root-673 MuiFormControl-fullWidth-676 CustomInput-formControl-669"><label
class="MuiFormLabel-root-682 MuiInputLabel-root-677 MuiInputLabel-formControl-678 MuiInputLabel-animated-681 CustomInput-labelRoot-665 "
data-shrink="false">Your email</label>
<div class="MuiInput-root-689 MuiInput-formControl-690 MuiInput-underline-693 CustomInput-underline-662"><input
type="text" aria-invalid="false" class="MuiInput-input-697 CustomInput-input-671" /></div>
</div>
</div>
<div class="MuiGrid-item-269 MuiGrid-grid-sm-4-314 MuiGrid-grid-md-4-328 GridItem-grid-365 undefined">
<div class="MuiFormControl-root-673 MuiFormControl-fullWidth-676 SectionContact-selectFormControl-650 SectionContact-selectUnderlineRoot-659">
<div class="MuiInput-root-689 MuiInput-formControl-690 MuiInput-underline-693">
<div class="MuiSelect-root-702">
<div class="MuiSelect-select-703 SectionContact-select-649 MuiSelect-selectMenu-704 MuiInput-input-697"
aria-pressed="false" tabindex="0" role="button" aria-haspopup="true">I&#x27;m a Designer</div><input
type="hidden" value="1" name="specialitySelect" id="speciality-select" /><svg class="MuiSvgIcon-root-237 MuiSelect-icon-706"
focusable="false" viewBox="0 0 24 24" aria-hidden="true">
<path d="M7 10l5 5 5-5z"></path>
</svg>
</div>
</div>
</div>
</div>
</div>
<div class="MuiGrid-container-268 GridContainer-grid-267 ">
<div class="MuiGrid-item-269 MuiGrid-grid-sm-4-314 MuiGrid-grid-md-4-328 GridItem-grid-365 SectionContact-mrAuto-647 SectionContact-mlAuto-648 SectionContact-textCenter-658"><button
tabindex="0" class="MuiButtonBase-root-123 MuiButton-root-97 MuiButton-text-99 MuiButton-flat-102 RegularButton-button-205 RegularButton-primary-207 RegularButton-round-232"
type="button"><span class="MuiButton-label-98">Let&#x27;s talk</span><span class="MuiTouchRipple-root-126"></span></button></div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<footer class="Footer-footer-567">
<div class="Footer-container-573">
<div>
<div class="AboutUsPage-left-594">
<ul class="MuiList-root-166 MuiList-padding-167 AboutUsPage-list-593">
<li class="MuiListItem-root-170 MuiListItem-default-173 MuiListItem-gutters-177 AboutUsPage-inlineBlock-592"><a
href="https://www.creative-tim.com/" class="AboutUsPage-block-591">Creative Tim</a></li>
<li class="MuiListItem-root-170 MuiListItem-default-173 MuiListItem-gutters-177 AboutUsPage-inlineBlock-592"><a
href="https://www.creative-tim.com/presentation" class="AboutUsPage-block-591">About us</a></li>
<li class="MuiListItem-root-170 MuiListItem-default-173 MuiListItem-gutters-177 AboutUsPage-inlineBlock-592"><a
href="//blog.creative-tim.com/" class="AboutUsPage-block-591">Blog</a></li>
<li class="MuiListItem-root-170 MuiListItem-default-173 MuiListItem-gutters-177 AboutUsPage-inlineBlock-592"><a
href="https://www.creative-tim.com/license" class="AboutUsPage-block-591">Licenses</a></li>
</ul>
</div>
<div class="AboutUsPage-right-595">©
<!-- -->2018
<!-- --> , made with
<!-- --> <svg class="MuiSvgIcon-root-237 AboutUsPage-icon-596" focusable="false" viewBox="0 0 24 24"
aria-hidden="true">
<path fill="none" d="M0 0h24v24H0z"></path>
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"></path>
</svg> by
<!-- --> <a href="https://www.creative-tim.com">Creative Tim</a> for a better web.</div>
</div>
<div class="Footer-clearFix-583"></div>
</div>
</footer>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment