Services Page

Developer
Tom D'Auira
Size
4,543 Kb
Views
22,264
  1. Services Page Previews
  2. Services Page HTML Codes
  3. Services Page CSS Codes

How do I make an services page?

What is a services page? How do you make a services page? This script and codes were developed by Tom D'Auira on 08 September 2022, Thursday.

Services Page Previews
IQ Test

Services Page - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Services Page</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="header"> <div class="logo"> <img src="http://smstc.org/Gas%20light%20red%20flame.jpg" alt="Main Street Logo"
height="250"/> </div>
<div class="banner"> <h1>Our Mission</h1> <p>"To provide for the cultural enhancement of our patrons, participants
and community by the production of high quality theatrical entertainment"</p> </div> <div class="menu"> <ul> <li><a href="">Buy Tickets</a></li> <li><a href="">Subscription & Membership</a></li> <li><a href="">Group Sales & Specials</a></li> <li><a href="">Work With Us</a> <ul> <li><a href="">Jobs</a></li> <li><a href="">Auditions</a></li> </ul> </li> <li><a href="https://s.codepen.io/tmd135/debug/bEVjNr">2015 Season</a></li> <li><a href="">About Us</a>
<ul> <li><a href="">Board of Trustees</a></li> <li><a href="">Awards</a></li> <li><a href="https://s.codepen.io/tmd135/debug/wMKXpW">Directions</a></li> <li><a href="https://s.codepen.io/tmd135/debug/wMKXpW">Contact Info</a></li>
</ul> </li>
</ul>
</div>
</div>
<div class="mobilemenu"> ☰
</div>
<div class="showinfo"> <div class="show"> <img src="http://smstc.org/Proof%20Logo.jpg" alt="" /> <span> <h1>Proof</h1> <p>“Proof,” the Pulitzer Prize and Tony Award winning show from David Auburn, begins on the eve of Catherine’s twenty-fifth birthday. She is a troubled young woman, who has spent years caring for her brilliant but unstable father, a famous mathematician in their Chicago home. Now, following his death, she must deal with her own volatile emotions; the arrival of her estranged sister, Claire; and the attentions and allure of Hal, a former student of her father's who hopes to find valuable work in the 103 notebooks that her father left behind. Over the long weekend that follows, a burgeoning romance and the discovery of a mysterious notebook draw Catherine into the most difficult problem of all: How much of her father's madness—or genius—will she inherit?
“Proof” focuses on how family draws us together and pushes us apart, and discusses the stigma around mental illness in a real and honest way.</p> <a href="https://app.arts-people.com/index.php?actions=4&p=1">Buy Tickets</a> </span> </div> <div class="show"> <img src="http://www.theview38002.com/wp-content/uploads/2013/11/Inherit-the-Wind_Poster_featured.png" alt="" /> <span> <h1>Inherit the Wind</h1> <p>In the 1920s, Tennessee schoolteacher Bertram Cates is put on trial for violating the Butler Act-- a state law that prohibits public school teachers from teaching evolution instead of creationism. Drawing intense national attention in the media, two of the nation's leading lawyers go head to head: Matthew Harrison Brady for the prosecution, and Henry Drummond for the defense.</p> <a href="">Buy Tickets</a> </span> </div>
</div>
<div class="calendar"> <h1>Calendar of Events</h1> <iframe src="https://www.google.com/calendar/embed?src=pqbo28k23bl556egplnb8a69to%40group.calendar.google.com&amp;ctz=America/New_York" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>
</div>
<div class="footer"> <span class="name">Sayreville Main Street Theatre Company</span> <!-- social media links --> <span class="social-media"> <a href="https://www.facebook.com/RutgersCommInfo" class="fa fa-facebook-square"></a> <a href="https://www.twitter.com/RutgersCommInfo" class="fa fa-twitter-square"></a> <a href="https://www.linkedin.com/groups?home=&gid=2941903" class="fa fa-instagram"></a> <a href="http://visitor.r20.constantcontact.com/d.jsp?llr=apucu6dab&p=oi&m=1103726989792" class="fa fa-envelope-square"></a> </span> <span class="quick-access"> <a href="https://comminfo.rutgers.edu/about-sc-i/contact-sc-i.html">Contact Us</a> <a href="https://comminfo.rutgers.edu/main/site-login.html">Directions</a> <a href="https://comminfo.rutgers.edu/main/site-login.html">Advertise With Us</a> </span> <span class="copyright">3018 Bordentown Avenue, Parlin, NJ 08859</span> <!-- quick acces links -->
</div>
</body>
</html>

Services Page - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Roboto);
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css");
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background-image: url("http://www.psdgraphics.com/file/blue-abstract-background.jpg"); background-position: middle; display: block; margin: 5px auto 5px auto; width: 95%;
}
.header{ display: block; text-align: center;
}
.logo{ display: inline-block; width: 20%; vertical-align: middle;
}
.banner{ display: inline-block; padding: 20px; margin-left: 100px; width: 45%; vertical-align: middle; color: white; font-family: Sans-Serif;
}
.menu { /* Use display: block, since it will have the whole row for itself. */ display: block; /* Use width: 100%, to make it as wide as the row. */ width: 80%; /* Use height: auto; and let browser calculate it based on its content. */ height: auto; margin: auto; background-color: rgb(25,25,30);
}
.menu > ul{ width: 100%; margin: 0 auto;
}
.menu > ul > li { /* Use display: inline-block since menu items will share the the same row. */ display: inline-block; position: relative; /* Use width: auto; height: auto; and let browser calculate it based on its content. */ width: auto; height: auto; /* Use padding: 15px; to add some space around each top level menu item. */
}
.menu > ul > li > a { display: inline-block; color:white; text-decoration:none; font-size:15px; padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 15px;
}
.menu > ul > li > ul{ list-style: none; display: none; width: 150px;
}
.menu > ul > li:hover{ background-color: rgb(50,130,200);
}
.menu > ul > li:hover > ul{ display: block; position: absolute; top: 2.96em; left:0; z-index: 1;
}
.menu > ul > li:nth-of-type(6):hover > ul{ display: block; position: absolute; left:auto; right: 0px;
}
.menu > ul > li:hover > ul > li{ text-decoration:none; height: auto; margin: auto; background-color: rgb(25,25,30);
}
.menu > ul > li:hover > ul > li:hover{ background-color: rgb(50,130,200);
}
.menu > ul > li:hover > ul > li > a { display:block; text-decoration:none; color:white; padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 15px;
}
.mobilemenu{ display: none;
}
.calendar{ display:block; margin-top: 75px; text-align:center; margin-bottom:25px;
}
.calendar > h1{ color: white;
}
.showinfo > .show{ display:block; margin:auto; margin-top:25px; margin-bottom:25px; width:75%; border-bottom: thick solid rgb(25,65,100); padding-bottom:20px;
}
.showinfo > .show > span > h1{ color:white;
}
.showinfo > .show > span >p{ color:white; margin-bottom:30px;
}
.showinfo > .show > span >a{ text-decoration: none; font-size: 125%; color:white; background-color:rgb(25,25,30); padding:10px;
}
.showinfo > .show > span > a:hover{ background-color:rgb(50,130,200);
}
.showinfo > .show > img{ display:inline-block; vertical-align: top; width:30%; border: 1px solid white;
}
.showinfo > .show > span{ margin-left: 10px; display:inline-block; width:60%;
}
.footer { /* set up size */ display: block; width: 70%; padding: 8px; margin: auto; border-top: solid 3px #05254a; /* set up alignment to center */ text-align: center; /* set up background */ background-color: black; background-size: contain; background-position: top left; background-repeat: no-repeat;
}
/* setup text color, font */
.footer > span { display: block; color: #dddddd; font-family: sans-serif;
}
/* remove link underline and color */
.footer > span > a { color: rgb(0,90,150); text-decoration: none;
}
/* choose google font for school name */
.footer > .name { margin-top: 10px; margin-bottom: 10px; font-size: 175%; font-family: roboto;
}
/* set up social media icon just like text content using font-size */
.footer > .social-media { margin-bottom: 10px; }
.footer > .social-media > a { padding: 0 5px; font-size: 30px;
}
/* copyright text */
.footer > .copyright { font-size: 75%; }
/* contact or login links */
.footer > .quick-access > a { border-right: 1px solid steelblue; padding: 0 1em; font-size: 75%;
}
.footer > .quick-access > a:last-child { border: 0; }
Services Page - Script Codes
Services Page - Script Codes
Home Page Home
Developer Tom D'Auira
Username tmd135
Uploaded September 08, 2022
Rating 3
Size 4,543 Kb
Views 22,264
Do you need developer help for Services Page?

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!

Tom D'Auira (tmd135) Script Codes
Name
Feedback 3
SCI highlights
Class Practice 4.3
Manager scorecard original
ICHD esig
Hello World
United Shore Offer
English test
Anthem Enrollment
Medifit IT
Create amazing marketing copy 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!