Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <header id="header" class="head">
  <nav id="nav-bar" class="head">
    <ul id="u">
      <li><a href="#home" class="nav-link">Home</a></li>
      <li><a href="#about" class="nav-link">About Us</a></li>
      <li><a href="#print" class="nav-link">Printing Services</a></li>
      <li><a href="#contact" class="nav-link">Contact Us</a></li>
    </ul>
  </nav>

  <div id="p1">
    <div id="head-img"><img id="header-img" class="head" src="http://eashaamedia.in/Eashaa-Logo.jpg?v=2aesaokts4y32b" alt="companylogo"></div>
    <h1 id="eas"> Easha Media Communications

    </h1>
  </div>
  

</header>
<div id="main" class="container">
  <div id="video-con" class="vid">
    <iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/pNZb7CXUjs0?start=32" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div>
  <div id="home" class="home-con">
    <div id="qp">
      <h2>Quality Printing</h2>
      <p>Modern equipment and our professional staff ensure you high quality, on-time delivery for all your printing needs. Just ask our satisfied customers!
      </p>
    </div>
    <div id="sd">
      <h2>Shipping and Delivery</h2>
      <p>You choose your preferred delivery method. We can have your order ready for pick-up or deliver it to you right when and where you need it. customers!
      </p>
    </div>
    <div id="sg">
      <h2>100% Satisfaction Guarantee</h2>
      <p>We guarante the highest quality and the lowest prices on full colour offset printing.We assure you that our prices are very competitive for full-colour printing of comparable quality.
      </p>
    </div>
  </div>

  <div id="about" class="about-us">
    <div>
      <h2 class="about-us">About us</h2>
    </div>
    <div id="about-us">
      <p>

        Printing Services

        Eashaa Media Communications Pvt Ltd. has been set up with the vision of servicing as a one stop shop for all your printing requirements, from designing, processing, procuring, printing, binding, packing, dispatching and logistic planning support.

        Our philosophy is based on the principle of providing the maximum facilities to our valued customers and the services we offer encapsulate “walk in with an idea and walk out with the finished product”.

        We have expertise in Small and Large format Offset and Digital Printing and we have in house finishing equipment that can process and finish books, magazines, cards, envelopes, brochures, posters, calendars and all related articles.

        We achieve our High Quality finishes by employing our fully automated and state of the art technology machineries. Our machines are the World Leader brands and are Computerized Numeric Control (CNC) operated and are totally environment friendly.

        Get in touch

        We deliver all over India. Our support team is available from Mon-Sat 10 am - 7 pm.
      </p>
    </div>

  </div>
  <div id="print" class="pp">
    <div class="lis">
      <h2>Our products and portfolio </h2>
    </div>
    <div id="lis">
      <ul id="ul" class="li">
        <div class="li">
          <li class="li"><img src="https://images.besttemplates.com/2972/Engagement-Card.jpg" alt="">Annoucement Card</li>
        </div>
        <div class="li">
          <li class="li"><img src="https://stepandrepeatla.com/wp-content/uploads/2015/07/BIG-web.jpg" alt="" class="icon-im">Backdrop</li>
        </div>
        <div class="li">
          <li class="li"><img src="https://www.presentation-guru.com/wp-content/uploads/2020/03/Mixam-Booklet_05-opt.jpg" alt="" class="icon-im">Booklet</li>
        </div>
        <div class="li">
          <li class="li"><img src="https://d1yn1kh78jj1rr.cloudfront.net/image/preview/rDtN98Qoishumwih/flyer_10074132-1115-allint-1_SB_PM.jpg" alt="" class="icon-im">
            Single Page Brochure</li>
        </div>

        <div class="li">
          <li class="li"> <img src="https://image.freepik.com/free-vector/elegant-minimal-black-yellow-business-card-template_1017-22513.jpg" alt="" class="icon-im"> Business/Visiting Card</li>
        </div>

        <div class="li">
          <li class="li"><img src="https://i.pinimg.com/originals/b9/fe/9d/b9fe9d2f7c10fba91f246d163bc73a34.jpg" alt="" class="icon-im">Calendar</li>
        </div>

        <div class="li">
          <li class="li"><img src="https://files.inkmonk.com/site/20190417_114617913170_5cc6da_Banner_1.png" alt="" class="icon-im">Paper Bag</li>
        </div>

        <div class="li">
          <li class="li"><img src="https://d18p7bpxfjy0wm.cloudfront.net/static/images/landingpage/posterprints/bulk_poster_print.png" alt="" class="icon-im">Poster</li>
        </div>

      </ul>
    </div>
  </div>

  <div id="contact" class="details">
    <form id="form" action="https://www.freecodecamp.com/email-submit">

      <div class="frm">
        <div>Full Name</div><input name="field0" class="param" type="text" value="">
      </div>

      <div class="frm">
        <div>Company Name</div><input name="field1" class="param" type="text" value="">
      </div>
      <div class="frm">
        <div>Email address:</div><input id="email" placeholder="Enter your email" name="email" class="email" type="email" value="email">
      </div>
      <div class="frm">
        <div>Phone / Mobile No</div><input name="field3" class="param" type="text" value="">
      </div>
      <div class="frm">
        <div>Your Message / Brief Description</div>
      </div>
      <div class="frm">
        <div><textarea rows="10" cols="45" name="field5" class="param"></textarea></div>
      </div>
      <div class="frm">
        <div class="button"><input id="submit" type="submit" value="Submit" class="btn">

        </div>
      </div>

    </form>
  </div>
</div>
<footer calss="footer" class="footer-m">
  <div id="footer">
    <div class="w1">
      <h3>Payment Options</h3>
      <p> We accept all major Credit Cards, Debit Cards and Net-banking</p>
      <img src="https://digital.hbs.edu/platform-digit/wp-content/uploads/sites/2/2020/02/Picture1.png" alt="">
    </div>
    <div class="w2">
      <h3>Eashaa Media Communications Pvt Ltd</h3>
      <p>R.O. : #91/16, 12th Cross, Maruthi Industrial Area, Maruthi Nagar, New Madiwala, BTM 1st Stage, Bangalore -560068</p>
      <p>Email:info@eashaamedia.in, emc.pvt.ltd@gmail.com
      </p>
      <p>Ph : 080 - 2552 9482 / 0710 - Mob : 9448227421 / 7760695328</p>
    </div>
    <div class="w3">
      <p>Built by nishanth </p>
    </div>
  </div>
</footer>
              
            
!

CSS

              
                @import url("https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Philosopher:ital,wght@1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lobster&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Bowlby+One+SC&family=Caveat+Brush&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Yanone+Kaffeesatz:wght@300&display=swap");
body {
  position: relative;
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
  background-color: #010203;
  color: white;
}

header {position:relative;
  display: inline-block;
}

#header-img {
  position: absolute;
  top:0;
left:0;
  padding: 0px;

  width: 8.5vw;
 
  overflow: hidden;
  max-width: 100%;
  height: auto;
}
#p1 {
  position:absolute;
  top:3rem;
 width: 98.9vw;
 
  color: whitesmoke;
  font-size: 1.2rem;

  font-family: "Philosopher", sans-serif;

  background: linear-gradient(45deg, rgba(31, 61, 159), rgba(0, 156, 227));
}
#eas {
  text-align: center;
}
#nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
}
#u {
  list-style-type: none;
  margin: 0;
  padding: 1vh;
  overflow: hidden;
  background:black;
  text-align: left;
}

li {
  display: inline-block;
  background: #010203;
  margin: auto;
  border-radius: 5px;
}

li a {
  display: inline;
  color: white;
  font-size: 2rem;
  padding: 5vw;
  width: 100%;
  line-height: 1.5em;
  text-align: center;
  font-family: "Lobster", cursive;

  text-decoration: none;
}

#main {
  margin-top: 200px;
}
#video {
  display: block;
  margin: auto;
  padding: 20px;
  text-align: center;
}

#home {
  display: grid;
  padding: 10px;
  grid-template-columns: repeat(3, 1fr);
  justify-self: center;
  grid-column-gap: 30px;
}
#qp,
#sd,
#sg {
  border-width: 5px;
  border-style: solid;
  border-radius: 25px;
  border-image-source: linear-gradient(45deg, #1c63ff, #1cdcff);
  border-image-slice: 1;
}
h2 {
  text-align: center;
  color: #ff631c;
  font-size: 2em;
  font-family: "Lobster", cursive;
}
p {
  padding: 10px;
  font-family: "Yanone Kaffeesatz", sans-serif;
  font-size: 1.5em;
}
#about {
  margin: auto;

  width: 60%;
  text-align: center;
}
#about-us {
  margin: auto;
  width: 60%;

  text-align: center;
  border-width: 1px;
  border-style: solid;
  border-radius: 50px;
  border-image-source: linear-gradient(45deg, #1c63ff, #1cdcff);
  border-image-slice: 1;
}
#print {
  display: block;

  margin-top: 50px;
  border: 5px solid;
}

img {
  width: auto;
  height: 100px;
}
#lis li {
  margin-top: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  list-style: none;
  flex-wrap: wrap;

  font-family: "Yanone Kaffeesatz", sans-serif;

  text-align: center;
}
.li {
  font-size: 1.2em;
  display: block;
  margin-top: 0px;
}

#contact {
  margin-top: 300px;
  margin-left: 30rem;
  font-weight: 900;
  font-family: "Yanone Kaffeesatz", sans-serif;
  width: 30%;

  font-size: 20px;

  border-width: 3px;
  border-style: solid;
  border-radius: 50px;
  border-image-source: linear-gradient(45deg, #1c63ff, #1cdcff);
  border-image-slice: 1;
  text-align: center;
}
#form {
  border-width: 3px;
  border-style: solid;
  border-radius: 50px;
  border-image-source: linear-gradient(45deg, #1c63ff, #1cdcff);
  border-image-slice: 1;
  text-align: center;
}
#contact .frm {
  padding: 10px;
  text-align: center;
}
#footer {
  margin: 20px;
  display: grid;
  grid-template-columns: auto auto auto;
  grid-column-gap: 50px;
  border: 2px solid;
}
.w3 {
  width: 100%;
  height: auto;
}
.w2 {
  width: 100%;
  height: auto;
}
.w1 {
  width: 100%;
  height: auto;
}

.w1 img {
  width: 150px;
  height: 100px;
}
.w1 h3 {
  font-size: 0.8em;
  text-align: center;
  color: white;
  font-family: cursive;
}
.w2 h3 {
  font-size: 0.8em;
  text-align: center;
  color: white;
  font-family: cursive;
}
.w1 p {
  font-size: 10px;
  color: white;
  font-family: cursive;
  text-align: center;
}
.w2 p {
  font-size: 10px;
  color: white;
  font-family: cursive;
}
.w3 p {
  font-size: 10px;
  color: white;
  font-family: cursive;
}

@media (max-width:600px) {
 #nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
   z-index:10;
}
#u {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

li {
  display: flex;
  background: #010203;
  margin: 0;
  border-radius: 5px;
}

li a {
  display: inline;
  color: white;
  font-size: 1.2rem;
  padding: 5px;
  width: 100%;
  line-height: 20px;
  text-align: center;
  font-family: "Lobster", cursive;

  text-decoration: none;
}
  
#p1 {
  position:absolute;
  top:34vh;
 width: 100vw;
  overflow: hidden;
  color: whitesmoke;


  font-family: "Philosopher", sans-serif;

  background: linear-gradient(45deg, rgba(31, 61, 159), rgba(0, 156, 227));
}
#eas {font-size: 1.3rem;

  text-align: center;
}
  #header-img {
  position: absolute;
  top:0;
left:0;
  padding: 0px;

  width:10%;
 
  overflow: hidden;
  max-width: 100%;
  height: 8vh;
}
 
}
              
            
!

JS

              
                
              
            
!
999px

Console