A Pen by Raquel Lorenzana
How do I make an a pen by raquel lorenzana?
What is a a pen by raquel lorenzana? How do you make a a pen by raquel lorenzana? This script and codes were developed by Raquel Lorenzana on 20 January 2023, Friday.
A Pen by Raquel Lorenzana Previews
A Pen by Raquel Lorenzana - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Raquel Lorenzana</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html lang="en">
<head> <title>SIMUX</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="author" content="Raquel Lorenzana"> <meta name="keywords" content="PSD Developer Exercise"> <link rel="shortcut icon" href="http://devraq.com/simuxdesignexercise/assets/simux.png"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <!-- Material Design CDN --> <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.grey-blue.min.css"/> <!-- Fonts --> <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700|Roboto:300,400,700" rel="stylesheet"> <!-- Bootstrap CSS--> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body> <!-- Begin Layout Container --> <div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header"> <!-- Begin Header --> <header class="mdl-layout__header"> <div class="mdl-layout__header-row"> <!-- Logo --> <p class="logo_title mdl-layout-title"><img class="logo" src="http://devraq.com/simuxdesignexercise/assets/sim_logo.svg" alt="SIMUX logo"><b>SIM</b>UX</p> <!-- Nav 'space in between' --> <div class="mdl-layout-spacer"></div> <!-- Nav --> <nav class="navi_bar mdl-navigation"> <div class="dropdown"> <a class="mdl-navigation__link" href="">PRODUCTS</a> <div class="dropdown-content"> <a href="#">Search</a> <a href="#">Identity</a> <a href="#">Maps</a> </div> </div> <div class="dropdown"> <a class="mdl-navigation__link" href="">HORIZONTALS</a> <div class="dropdown-content"> <a href="#">Research</a> <a href="#">Writing</a> <a href="#">Operations</a> <a href="#">UX Engineering</a> <a href="#">Motion Design</a> <a href="#">Design @ Scale</a> <a href="#">Design Paradigms</a> </div> </div> <div class="dropdown"> <a class="mdl-navigation__link" href="">RESOURCES</a> <div class="dropdown-content"> <a href="#">Resource Links</a> <a href="#">SIMux Values</a> <a href="#">Video Insights</a> </div> </div> <a class="mdl-navigation__link" href="">CONTACT</a> <a class="mdl-navigation__link" href="">CAREERS</a> <!-- End Nav --> </nav> </div> </header> <div class="mdl-layout__drawer"> <span class="mdl-layout-title"><b>SIM</b>UX</span> <nav class="mdl-navigation"> <div class="dropdown"> <a class="mdl-navigation__link" href="">PRODUCTS</a> <div class="dropdown-content"> <a href="#">Search</a> <a href="#">Identity</a> <a href="#">Maps</a> </div> </div> <div class="dropdown"> <a class="mdl-navigation__link" href="">HORIZONTALS</a> <div class="dropdown-content"> <a href="#">Research</a> <a href="#">Writing</a> <a href="#">Operations</a> <a href="#">UX Engineering</a> <a href="#">Motion Design</a> <a href="#">Design @ Scale</a> <a href="#">Design Paradigms</a> </div> </div> <div class="dropdown"> <a class="mdl-navigation__link" href="">RESOURCES</a> <div class="dropdown-content"> <a href="#">Resource Links</a> <a href="#">SIMux Values</a> <a href="#">Video Insights</a> </div> </div> <a class="mdl-navigation__link" href="">CONTACT</a> <a class="mdl-navigation__link" href="">CAREERS</a> </nav> </div> <!-- End Header --> <!-- Begin Main content --> <main class="mdl-layout__content"> <!-- Begin Carousel --> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="http://devraq.com/simuxdesignexercise/assets/hero.jpg"> <div class="carousel-caption"> <h3>The Story of Busyness</h3> <p>Episode 9 tells the story of how Busyness came to be</p> </div> </div> <div class="item"> <img src="http://devraq.com/simuxdesignexercise/assets/hero.jpg"> <div class="carousel-caption"> <h3>The Story of Busyness</h3> <p>Episode 9 tells the story of how Busyness came to be</p> </div> </div> <div class="item"> <img src="http://devraq.com/simuxdesignexercise/assets/hero.jpg"> <div class="carousel-caption"> <h3>The Story of Busyness</h3> <p>Episode 9 tells the story of how Busyness came to be</p> </div> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <!-- FAB button --> <button class="mybtn_left mybtn mdl-button mdl-js-button mdl-button--fab"> <i class="material-icons">navigate_before</i> </button> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <!-- FAB button --> <button class="mybtn_right mybtn mdl-button mdl-js-button mdl-button--fab"> <i class="material-icons">navigate_next</i> </button> <span class="sr-only">Next</span> </a> <!-- Raised button --> <button class="watchBtn mdl-button mdl-js-button mdl-button--raised">Watch Now</button> <button class="allVidBtn mdl-button mdl-js-button mdl-button--raised">All Videos</button> </div> <!-- End Carousel --> <!-- Begin Main (white bg section)--> <div class="main_white mdl-grid"> <div class="mdl-cell mdl-cell--12-col"> <!-- Values --> <div class="values"> <h1 class="section_title">Our values</h1> <ul> <li>Think longitudunally, think incrementally</li> <li>Advocate against complexity</li> <li>Value the holistic experience</li> <li>Explore possibilities, then distill practical solutions</li> <li>Innovate to support integrative solutions</li> <li>Connect the dots and drive the change</li> </ul> </div> <!-- End Values --> </div> </div> <!-- End Main (white bg section) --> <!-- Begin Main (grey bg section)--> <div class="main_grey mdl-grid"> <div class="mdl-cell mdl-cell--12-col"> <!-- Product --> <!-- Product Layout Container--> <div class="product"> <h1 class="section_title">What we do</h1> <h4>We lead all aspects of user experience research, strategy, and design for the Search, Identity, and Maps product areas.</h4> <!-- Product Cards --> <div class="mdl-grid"> <div class="mdl-cell mdl-cell--4-col"> <div class="demo-card-square mdl-card mdl-shadow--2dp"> <div class="img_center img_size"> <img src="http://devraq.com/simuxdesignexercise/assets/icon-search.png"> </div> <h3>Search</h3> </div> </div> <div class="mdl-cell mdl-cell--4-col"> <div class="demo-card-square mdl-card mdl-shadow--2dp"> <div class="img_center img_size"> <img src="http://devraq.com/simuxdesignexercise/assets/icon-identity.png"> </div> <h3>Identity</h3> </div> </div> <div class="mdl-cell mdl-cell--4-col"> <div class="demo-card-square mdl-card mdl-shadow--2dp"> <div class="img_center img_size"> <img src="http://devraq.com/simuxdesignexercise/assets/icon-maps.png"> </div> <h3>Maps</h3> </div> </div> <!-- End Product Cards --> </div> <!-- End Product section --> </div> <!-- grey section --> </div> </div> <!-- Horizontals --> <div class="main_grey mdl-grid"> <div class="mdl-cell mdl-cell--12-col"> <!-- Horizontals card --> <div class="h-card mdl-card mdl-shadow--2dp"> <div class="h-grid mdl-grid"> <div class="horizontals research mdl-cell mdl-cell--2-col"> <h3>Research</h3> <p>Usability science, user testing, research at scale, international.</p> </div> <div class="horizontals writing mdl-cell mdl-cell--2-col"> <h3>Writing</h3> <p>Content strategy, core content, text strings, editoral guidelines.</p> </div> <div class="horizontals design mdl-cell mdl-cell--2-col"> <h3>Design</h3> <p>Visual & interaction design, voice UX, and design strategy - 100% embedded in PAs.</p> </div> <div class="horizontals flux mdl-cell mdl-cell--2-col"> <h3>Flux</h3> <p>UX Engineering, Motion Design, Design Paradigms and Design @ Scale. High-fidelity and pixel perfect.</p> </div> <div class="horizontals operations mdl-cell mdl-cell--2-col"> <h3>Operations</h3> <p>UX program mgmt, resourcing, planning, communications.</p> </div> <!-- end grid --> </div> <!-- end card --> </div> <!-- end grey section --> </div> </div> <!-- End Horizontals --> <!-- grey section --> <div class="main_grey mdl-grid"> <div class="mdl-cell mdl-cell--12-col"> <!-- Who We Are Layout Container --> <div class="main_who mdl-grid"> <div class="mdl-cell mdl-cell--10-col"> <h1 class="section_title">Who We Are</h1> <!-- Row 1 --> <div class="mdl-grid"> <div class="mdl-cell mdl-cell--3-col"> <div class="whoWeAre mdl-card mdl-shadow--2dp"> <div class="img_center"> <img class="img-responsive img-circle" src="http://devraq.com/simuxdesignexercise/assets/user_photos/jmurphy.jpg"> </div> <h4>Jonathan Murphy
</h4> <p>Administrative Business Partner • MTV</p> </div> </div> <div class="mdl-cell mdl-cell--3-col"> <div class="whoWeAre mdl-card mdl-shadow--2dp"> <div class="img_center"> <img class="img-responsive img-circle" src="http://devraq.com/simuxdesignexercise/assets/user_photos/grivera.jpg"> </div> <h4>George Rivera</h4> <p>Design Manager • MTV</p> </div> </div> <div class="mdl-cell mdl-cell--3-col"> <div class="whoWeAre mdl-card mdl-shadow--2dp"> <div class="img_center"> <img class="img-responsive img-circle" src="http://devraq.com/simuxdesignexercise/assets/user_photos/sbennett.jpg"> </div> <h4>Stephen Bennett</h4> <p>UX Program Manager • MTV</p> </div> </div> <div class="mdl-cell mdl-cell--3-col"> <div class="whoWeAre mdl-card mdl-shadow--2dp"> <div class="img_center"> <img class="img-responsive img-circle" src="http://devraq.com/simuxdesignexercise/assets/user_photos/cgutierrez.jpg"> </div> <h4>Celina Gutierrez</h4> <p>UX Program Manager, Knowledge • MTV</p> </div> </div> </div> <!-- End Row 1 --> <!-- Row 2 --> <div class="whoWeAre_grid mdl-grid"> <div class="mdl-cell mdl-cell--3-col"> <div class="whoWeAre mdl-card mdl-shadow--2dp"> <div class="img_center"> <img class="img-responsive img-circle" src="http://devraq.com/simuxdesignexercise/assets/user_photos/bgardner.jpg"> </div> <h4>Beatrice Gardner</h4> <p>Flux Team Lead • MTV</p> </div> </div> <div class="mdl-cell mdl-cell--3-col"> <div class="whoWeAre mdl-card mdl-shadow--2dp"> <div class="img_center"> <img class="img-responsive img-circle" src="http://devraq.com/simuxdesignexercise/assets/user_photos/caustin.jpg"> </div> <h4>Christina Austin</h4> <p>Director of UX, Knowledge • MTV</p> </div> </div> <div class="mdl-cell mdl-cell--3-col"> <div class="whoWeAre mdl-card mdl-shadow--2dp"> <div class="img_center"> <img class="img-responsive img-circle" src="http://devraq.com/simuxdesignexercise/assets/user_photos/jgardner.jpg"> </div> <h4>Jackie Gardner</h4> <p>UX Lead • MTV</p> </div> </div> <div class="mdl-cell mdl-cell--3-col"> <div class="whoWeAre mdl-card mdl-shadow--2dp"> <div class="img_center"> <img class="img-responsive img-circle" src="http://devraq.com/simuxdesignexercise/assets/user_photos/anichols.jpg"> </div> <h4>Arnold Nichols</h4> <p>HR Business Partner • MTV</p> </div> </div> </div> <!-- End Row 2 --> <!-- Row 3 --> <div class="whoWeAre_grid mdl-grid"> <div class="mdl-cell mdl-cell--3-col"> <div class="whoWeAre mdl-card mdl-shadow--2dp"> <div class="img_center"> <img class="img-responsive img-circle" src="http://devraq.com/simuxdesignexercise/assets/user_photos/jjackson.jpg"> </div> <h4>Jayden Jackson</h4> <p>Mgr III, UX • MTV</p> </div> </div> <div class="mdl-cell mdl-cell--3-col"> <div class="whoWeAre mdl-card mdl-shadow--2dp"> <div class="img_center"> <img class="img-responsive img-circle" src="http://devraq.com/simuxdesignexercise/assets/user_photos/ahill.jpg"> </div> <h4>Armando Hill</h4> <p>Principal UX Researcher • LON</p> </div> </div> <div class="mdl-cell mdl-cell--3-col"> <div class="whoWeAre mdl-card mdl-shadow--2dp"> <div class="img_center"> <img class="img-responsive img-circle" src="http://devraq.com/simuxdesignexercise/assets/user_photos/aholt.jpg"> </div> <h4>Annette Holt</h4> <p>Quantitative User Experience Researcher • MTV</p> </div> </div> <div class="mdl-cell mdl-cell--3-col"> <div class="whoWeAre mdl-card mdl-shadow--2dp"> <div class="img_center"> <img class="img-responsive img-circle" src="http://devraq.com/simuxdesignexercise/assets/user_photos/tallen.jpg"> </div> <h4>Tiffany Allen</h4> <p>User Experience Director • MTV</p> </div> </div> </div> <!-- End Row 3 --> <!-- Row 4 --> <div class="whoWeAre_grid mdl-grid"> <div class="mdl-cell mdl-cell--3-col"> <div class="whoWeAre mdl-card mdl-shadow--2dp"> <div class="img_center"> <img class="img-responsive img-circle" src="http://devraq.com/simuxdesignexercise/assets/user_photos/srobinson.jpg"> </div> <h4>Scott Robinson</h4> <p>UX Manager • MTV</p> </div> </div> <div class="mdl-cell mdl-cell--3-col"> <div class="whoWeAre mdl-card mdl-shadow--2dp"> <div class="img_center"> <img class="img-responsive img-circle" src="http://devraq.com/simuxdesignexercise/assets/user_photos/gporter.jpg"> </div> <h4>Gina Porter</h4> <p>Design Manager • MTV</p> </div> </div> <div class="mdl-cell mdl-cell--3-col"> <div class="whoWeAre mdl-card mdl-shadow--2dp"> <div class="img_center"> <img class="img-responsive img-circle" src="http://devraq.com/simuxdesignexercise/assets/user_photos/ilawrence.jpg"> </div> <h4>Isabella Lawrence</h4> <p>Doodle Team Lead • MTV</p> </div> </div> <div class="mdl-cell mdl-cell--3-col"> <div class="whoWeAre mdl-card mdl-shadow--2dp"> <div class="img_center"> <img class="img-responsive img-circle" src="http://devraq.com/simuxdesignexercise/assets/user_photos/kturner.jpg"> </div> <h4>Keith Turner</h4> <p>Research Manager • MTV</p> </div> </div> </div> <!-- End Row 4 --> <!-- End 'Who We Are' section --> </div> </div> <!-- End grey section --> </div> </div> <!-- Footer --> <footer class="mdl-mini-footer"> <div class="mdl-mini-footer__left-section"> <span><img class="logo" src="http://devraq.com/simuxdesignexercise/assets/sim_logo_white.svg" alt="SIMUX logo"><b>SIM</b>UX</span> </div> <div class="mdl-mini-footer__right-section"> <p>Have a suggestion? <a href="">We'd love to hear it!</a></p> </div> </footer> <!-- End Footer --> <!-- End Main Content --> </main> <!-- End Layout Container --> </div> <!-- jquery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <!-- Material Design script --> <script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script> <!-- Boostrap JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>
</body>
</html>
A Pen by Raquel Lorenzana - Script Codes CSS Codes
/*Body*/
body { font-family: 'Roboto', sans-serif !important; font-size: 16px !important;
}
.section_title { margin: 5% 0 2% 0 !important;
}
.img_center { margin: 0 auto !important;
}
/*Header Nav*/
.mdl-layout__header{ background-color: #fff !important;
}
.logo { height: 50px !important; width: 50px !important; vertical-align: middle !important;
}
.logo_title { color: #000 !important; font-weight: 300 !important; padding-left: 3% !important; padding-top: 2% !important; display: inline-block !important;
}
/*Drop Downs in Navbar*/
/* Style The Dropdown Button */
.dropbtn { background-color: #f2f2f2 !important; color: #000 !important; padding: 16px !important; font-size: 16px !important; border: none !important; cursor: pointer !important;
}
/* The container - needed to position the dropdown content */
.dropdown { z-index: 15px !important; position: relative !important; display: inline-block !important;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content { z-index: 20 !important; display: none !important; position: absolute !important; background-color: #f9f9f9 !important; min-width: 160px !important; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2) !important;
}
/* Links inside the dropdown */
.dropdown-content a { color: #887C7D !important; padding: 12px 16px !important; text-decoration: none !important; display: block !important;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover { background-color: #f1f1f1 !important;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content { display: block !important;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn { background-color: #f2f2f2 !important;
}
.mdl-layout__drawer.is-visible{ background-color: #fff !important;
}
.mdl-layout__drawer a { box-shadow: 0 0 0 0 rgba(0,0,0,.14),0 0 1px 0 rgba(0,0,0,.2),0 0 5px 0 rgba(0,0,0,.12) !important;
}
nav a:hover { text-decoration: none !important; font-weight: 600!important;
}
a.mdl-navigation__link:hover { text-decoration: none !important;
}
.dropdown-content a { background-color: #f2f2f2 !important; opacity: 1 !important; z-index: 12 !important;
}
.mdl-layout__drawer-button,
.mdl-layout__drawer { display: none !important;
}
.mdl-layout--fixed-drawer.is-upgraded:not(.is-small-screen)>.mdl-layout__header,
.mdl-layout--fixed-drawer>.mdl-layout__content { margin-left: initial !important;
}
.mdl-layout--fixed-drawer.is-upgraded:not(.is-small-screen)>.mdl-layout__header{ width: initial !important;
}
/*Main*/
.main_white { background-color: #fff !important;
}
.main_grey { background-color: #f2f2f2 !important;
}
/*Carousel Buttons*/
.mybtn { position: absolute !important; top: 45% !important; background-color: #f2f2f2 !important;
}
.mybtn.mdl-button:hover { background-color: #9e9e9e !important;
}
.mybtn_left { left: 10% !important;
}
.mybtn_right { right: 10% !important;
}
.carousel-control { opacity: 1 !important;
}
.carousel-caption { text-align: left !important; padding-top: 4% !important; width: 100% !important; height: 30% !important; right: 0 !important; padding-left: 10% !important; left: 0 !important; bottom: 0 !important; background: black; /* For browsers that do not support gradients */ background: -webkit-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1)); /*Safari 5.1-6*/ background: -o-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1)); /*Opera 11.1-12*/ background: -moz-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1)); /*Fx 3.6-15*/ background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.7), rgba(0,0,0,1)); /*Standard*/
}
.watchBtn { position: absolute !important; background-color: #448AFF !important; color: #fff !important; font-weight: 600 !important; right: 20% !important; top: 84% !important;
}
.allVidBtn { position: absolute !important; background-color: #9e9e9e !important; color: #fff !important; font-weight: 600 !important; right: 10% !important; top: 84% !important;
}
.watchBtn.mdl-button:hover { background-color: #1976D2 !important;
}
.allVidBtn.mdl-button:hover { background-color: #616161 !important;
}
/* Values*/
.values { padding-bottom: 50px !important; margin-left: 7% !important;
}
.values ul { list-style-type: none !important;
}
/* dash decoration solution, */
.values ul > li:before { content: "/" !important; /* en dash */ position: absolute !important; margin-left: -3em !important;
}
.values li{ margin-left: 25px !important; color: #35A9F6 !important; font-size: 20px !important; line-height: 2em !important;
}
/*Product*/
.product { width: 87% !important; margin: 0 auto !important;
}
.product .mdl-card { width: 100% !important; height: 100% !important; margin: 0 auto !important; text-align: center !important;
}
.product img { width: 125px !important; max-width: 100% !important; height: auto !important; margin: 10% 5% 0 5% !important;
}
.product h3 { font-weight: 600 !important; margin-bottom: 10% !important;
}
/*horizontals*/
.h-grid.mdl-grid { padding: 2% 0 1% 0 !important;
}
.h-card.mdl-card { width: 84% !important; margin: 0 auto !important;
}
.horizontals { padding: 0 1% !important; margin: 1% auto !important; text-align: center !important;
}
.horizontals h3 { font-weight: 600 !important;
}
.horizontals p { margin-bottom: 0 !important; color: #757575 !important;
}
.research,
.writing { width: 180px !important;
}
.design{ width: 210px !important;
}
.flux { width: 250px !important;
}
.operations { width: 190px !important;
}
/*Who We Are*/
.main_who .mdl-cell.mdl-cell--10-col { width: 87% !important; margin: 0 auto !important;
}
.whoWeAre.mdl-card { width: 100% !important; height: 300px !important;
}
.whoWeAre h4 { text-align: center !important; font-weight: 500 !important; color: #448AFF !important;
}
.whoWeAre p { text-align: center !important; font-weight: 400 !important; color: #887C7D !important; padding-left: 2% !important; padding-right: 2% !important;
}
.whoWeAre img { -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */ filter: grayscale(100%); margin: 10% 2% 0 2%;
}
/*Footer*/
.mdl-mini-footer { height: 75% !important; padding: 0 8% 0 9% !important;
}
.mdl-mini-footer, .mdl-mini-footer a { color: #fff !important; background-color: #000 !important; font-weight: 300 !important;
}
.mdl-mini-footer__left-section { padding: 18px 0 !important; font-size: 16px !important;
}
.mdl-mini-footer__right-section { padding: 34px 0 !important;
}
footer a { text-decoration: underline !important;
}
/*MEDIA QUERIES*/
@media (max-width: 400px) { .mybtn_left, .mybtn_right, .watchBtn, .allVidBtn { visibility: hidden !important; } .carousel-caption { padding-bottom: 45% !important; } .section_title { font-size: 2em !important; } .values ul { font-size: 80% !important; }
.mdl-mini-footer__right-section { margin: 0 auto !important;
}
.mdl-mini-footer__left-section { margin: 0 auto !important;
}
@media (max-width: 450px) { .mdl-mini-footer__left-section { padding-left: 0 !important;
}
,
.mdl-mini-footer__right-section { padding-right: 0 !important;
}
}
}
@media (max-width: 700px) { .navi_bar.mdl-navigation { display: none !important; } .mdl-layout__drawer-button, .mdl-layout__drawer { display: initial !important;
} .logo_title { padding-left: 0 !important; }
.mdl-layout--fixed-drawer.is-upgraded:not(.is-small-screen)>.mdl-layout__header,
.mdl-layout--fixed-drawer>.mdl-layout__content { margin-left: calc(100%-240px) !important;
}
.mdl-layout--fixed-drawer.is-upgraded:not(.is-small-screen)>.mdl-layout__header{ width: 240px !important;
}
.carousel-caption { padding-bottom: 20% !important;
}
.watchBtn,
.allVidBtn { visibility: hidden !important; }
.mybtn_left { left: 15% !important;
}
.mybtn_right { right: 15% !important;
}
}
@media (max-width: 840px) {
.mybtn.mdl-button--fab { width: 40px !important; min-width: 40px !important; height: 40px !important; }
.main_who .mdl-cell.mdl-cell--10-col { margin: 0 auto !important; }
.main_who .mdl-cell.mdl-cell--3-col { width: 250px !important; margin: 2% !important; }
.whoWeAre.mdl-card { margin: 5% !important; }
.carousel-caption { height: 40% !important; padding-bottom: 15% !important;
}
.allVidBtn { right: 8% !important; }
}
@media (max-width: 1200px){ .watchBtn { right: 25% !important; }
A Pen by Raquel Lorenzana - Script Codes Developer Raquel Lorenzana Username raquellorenzana Uploaded January 20, 2023 Rating 3 Size 7,002 Kb Views 10,120
Do you need developer help for A Pen by Raquel Lorenzana? Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Raquel Lorenzana (raquellorenzana) Script Codes Name Size Input Answer and View Results 3,061 Kb HTML and CSS 6,300 Kb Banner Ad 4,172 Kb API Search App 4,133 Kb JS Form 5,730 Kb Material Design 2,920 Kb
Create amazing video scripts with AI! Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes Name Username Size Twitch.tv API Ryzokuken 2,618 Kb Off Canvas Mariamarica 1,870 Kb A Pen by Xand0r Xand0r 1,928 Kb CSS Variables Jdsteinbach 4,759 Kb Simple DevTools Deegill 2,511 Kb Twitch TV Natester13 4,488 Kb Fluid Grid 12 Alexoliverwd 2,309 Kb TigerWoods Freecodecamp Page Baileytj 2,869 Kb Cloud upload Jaflo 2,774 Kb Scroll Arrow Robooneus 4,437 Kb
Do you want hide your ip address? Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!
