HTML and CSS

Developer
Raquel Lorenzana
Size
6,300 Kb
Views
8,096
  1. HTML and CSS Previews
  2. HTML and CSS HTML Codes
  3. HTML and CSS CSS Codes

How do I make an html and css?

HTML and CSS page, no framework. . What is a html and css? How do you make a html and css? This script and codes were developed by Raquel Lorenzana on 20 January 2023, Friday.

HTML and CSS Previews
IQ Test

HTML and CSS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>HTML and CSS</title> <link rel='stylesheet prefetch' href='https://www.devraq.com/37signals/main.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav> <ul> <li> <a href="#">Company Blog</a> </li> <li> <a href="#">Our Story</a> </li> <li> <a href="#">Follow us on Twitter</a> </li> <li> <a href="#">System Status</a> </li> <li> <a href="#">Sign in</a> </li> </ul> </nav> <header> <img src="http://devraq.com/37signals/img/logo-37s-large.png" alt="37Signals logo"/> <h1>Making collaborations productive and enjoyable for people every day.</h1> <h5>Frustration-free web-based apps for collaboration, sharing information, and making decisions.</h5> </header>	<section class="products">	<a href="#" class="bc"> <img src="http://devraq.com/37signals/img/logo-bc.png" alt="Basecamp tool"/> <h3>Bascamp</h3> <h4>Manage Projects</h4> <p>Used by millions for project managemnet.</p>	</a>	<a href="#" class="hr"> <img src="http://devraq.com/37signals/img/logo-cf.png" alt="Highrise tool"/> <h3>Highrise</h3> <h4>Manage Contacts</h4> <p>Know the people you do business with.</p>	</a>	<a href="#" class="cf"> <img src="http://devraq.com/37signals/img/logo-hr.png" alt="Campfire tool"/> <h3>Campfire</h3> <h4>Work in Real-Time</h4> <p>Group chat rooms for your business</p>	</a>	</section> <!-- thematic break with background img --> <hr> <!-- Customers -->	<section class="customers">	<h2>Millions of entrepreneurs, freelancers, small businesses, and departments inside big organizations rely on our web apps.</h2>	<div class="meet">	<a href=""></a>	<p>Meet some customers</p>	</div>	<div class="arrow-left">	<img src="http://devraq.com/37signals/img/arrow-customer.png" alt="37signals arrow"/>	</div>	<div class="globe">	<a href="#">	<img src="http://devraq.com/37signals/img/img-world-badge.png" alt="Trusted by millions of people in over 30 countries"/>	</a>	</div>	<p>Our loyal customers include designers, developers, freelancers, lawyers, accountants, architects, non-profits, charities, universities, PR firms, retailers, manufacturers, consultants, authors, publishers, government agencies, students, marketers, airlines, restaurants, filmmakers, farmers, and just about everyone in-between.</p>	<p>The world's most popular brands depend on our products every day. We'll never take their trust - or your trust - for granted.</p>	<img src="http://devraq.com/37signals/img/logos-companies-bw.png" alt="The best brands use our products">	</section>
<!-- Thematic page break -->	<hr>
<!-- Manifesto -->	<section class="manifesto">	<h2>We built the company that we'd want to do business with. We hope you do too.</h2> <div class="column"> <div> <h3>1</h3> <h4>Useful is forever</h4> <p>Bells and whistles wear off, but usefulness never does. We build useful software that does just what you need and nothing you don't.</p> </div> <div> <h3>2</h3> <h4>Great service is everything</h4> <p>We're famous for fast and friendly customer service. We work hard to make sure we live up to that reputation every day. See how our customers rate our service.</p> </div> <div> <h3>3</h3> <h4>Clarity is king</h4> <p>Buzzwords, lingo, and sensationalized sales-and-marketing-speak have no place at 37signals. We communicate clearly and honestly.</p> </div> <div> <h3>4</h3> <h4>Our customers are our investors</h4> <p>Our customers fund our daily operations by paying for our products. We answer to them - not investors, the stock market, or a board of directors.</p>	</div>	</div> <div class="column-end"> <div> <h3>5</h3> <h4>The basics are beautiful</h4> <p>We'll never overlook what really matters: The basics. Great service, ease of use, honest pricing, and respect for our customer's time, money, and trust.</p> </div> <div> <h3>6<h3> <h4>No hidden fees or secret prices</h4> <p>We believe everyone is entitled to the best price we can offer. Our prices are public, published right on our site, and the same no matter who you are.</p> </div> <div> <h3>7</h3> <h4>Software should be easy</h4> <p>Our products are intuitive. You'll pick them up in seconds or minutes, not hours, days or weeks. We don't sell you training because you don't need it.</p> </div> <div> <h3>8</h3> <h4>Long-term contracts are obscene</h4> <p>No one likes being locked into something they don't want anymore. Our customers can cancel at any time, no questions asked. No setup/termination fees either.</p> </div> </div> </section>	<hr>	<section class="rework">	<h2>Our book REWORK is a fresh approach to runninr a busniness. It's a New York Times and Wall Street Journal best seller.</h2>	<div class="book">	<a href="">	<img src="http://devraq.com/37signals/img/img-rework.png" alt="rework"/>	</a>	</div>	<div class="quotes">	<h3>If given a choice between investing in someone who has read REWORK or has an MBA, I'm investing in REWORK every time. A must read for every entrepreneur.</h3>	<p>- Mark Cuban, co-founder HDNet, owner of the Dallas Mavericks</p>	<h3>"The wisdom in these pages is edgy yet simple, straightforward, and proven. Read this book multiple times to help give you the courage you need to get out there and make something great."</h3>	<p>- Tony Hsieh, CEO of Zappos.com</p>	</div>	<div class="arrow-right">	<img src="http://devraq.com/37signals/img/arrow-rework.png" alt="37signals arrow" /> <!-- below paragraph to the left -->	</div>	<div class="crumple">	<a href="#">	<img src="http://devraq.com/37signals/img/img-crumple.png" alt="crumpled paper"/>	</a>	</div>	</section>	<hr>	<section class="offerings">	<h2>Here's everything we offer, soup to nuts.</h2>	<div class="main-offerings">	<a href="#">	<img src="http://devraq.com/37signals/img/logo-bc.png" alt="bascamp Logo"/>	<h3>Bascamp<sup>&reg;</sup></h3>	<h4>Manage Projects</h4>	<p>As easy as email, just way more powerful.</p>	</a>	<a href="#">	<img src="http://devraq.com/37signals/img/logo-cf.png" alt="highrise Logo"/>	<h3>Highrise<sup>&reg;</sup></h3>	<h4>Manage Contacts</h4>	<p>Over 20,000,000 contacts managed with Highrise.</p>	</a>	<a href="#">	<img src="http://devraq.com/37signals/img/logo-hr.png" alt="camfire Logo"/>	<h3>Campfire<sup>&reg;</sup></h3>	<h4>Work in Real-Time</h4>	<p>Private group chat rooms for your business</p>	</a>	</div>	<div class="column">	<h3>Our Services</h3>	<ul>	<li>	<a href="#">The Job Board</a>	<br>	<small>Find (or post) a programming or design job.</small>	</li>	<li>	<a href="#">37Signals Speaks</a>	<br>	<small>Videos of our kenotes and interviews.</small>	</li>	</ul>	<h3>Feature Stories</h3>	<ul>	<li>	<a href="#">Bootstrapped &amp; Proud</a>	<br>	<small>We profile succesful small businesses.</small>	</li>	<li>	<a href="#">Exit Interviews</a>	<br>	<small>Interviews with companies post-acquisition.</small>	</li>	</ul>	</div> <div class="column-end">	<h3>Our books</h3> <ul> <li> <a href="#">REWORK</a> <br> <small>Our take on building a great business.</small> </li> <li> <a href="#">Getting Real</a> <br> <small>Learning how to build software the easy way.</small> </li> </ul>	<h3>Our Open-source contributions</h3> <ul> <li> <a href="#">Ruby on Rails</a> <br> <small>A powerful &amp; simple web app framework.</small> </li> <li> <a href="#">Open Source</a> <br> <small>A list of projects we've released &amp; contributed to.</small> </li> </ul>	</div>	</section>	<hr>	<footer> <h3>More about 37signals</h3> <ul> <a href="#"><li>Follow us on Twitter</li></a> <a href="#"><li>Get our newsletter</li></a> <a href="#"><li>Company Blog</li></a> <a href="#"><li>37signals API</li></a> <a href="#"><li>Our Story</li></a> <a href="#"><li>Home<li></a> </ul> <p>All text and design is copyright ©1999-2012 37signals, LLC. All rights reserved. <a href="#">Privacy Policy</a> <a href="#">Security</a> <a href="#">Information</a> <a href="#">Contact us</a> </p> </footer>
</body>
</html>

HTML and CSS - Script Codes CSS Codes

@font-face {	font-family: CrimsonSemiBold;	src: url('../fonts/Crimson-Semibold.otf');
}
@font-face {	font-family: CrimsonRoman;	src: url('../fonts/Crimson-Roman.otf');
}
/*Site Resets */
* {	margin: 0;	padding: 0;
}
a {	text-decoration: none;	color: #369;
}
/* HEADER and SECTION STYLE */
header,
section {	margin: 30px auto;	width: 825px;	display: block;
}
/* HR Styles */
hr {	background: white url("http://devraq.com/37signals/img/img-hr.png") no-repeat scroll 50% 50%;	clear: both;	border: 0;	height: 12px;
}
/* WHAT ARE SUBSCRIPT STYLES??? */
sup {	color: #999;	font-weight: normal;	font-size: 11px;
}
/*NAVIGATION */
nav {	min-width: 100%	height: 48px;	font-family: sans-serif;
}
nav ul {	float: right;	margin: 12px 18px;	padding: 10px 30px;
}
nav li {	margin: 0 5px;	padding: 5px;	font-size: 12px;	display: inline-block;	color: #369
}
nav a:hover {	color: #18AFE0;
}
.sign-in {	color: #18AFE0
}
.sign-in:hover {	color: #369;
}
/* HEADER */
header {	clear: both;	height: 163px;	padding: 6px 0;	text-align: center;	font-family: "CrimsonSemiBold", serif;
}
header h1 {	font-size: 58px;	line-height: 1em;	margin: 10px 0;	letter-spacing: -2px;	color: #232323;
}
header h5 {	font-weight: 500;	font-size: 20px;	line-height: 1.5em;	margin: 10px 0;	color: #222;
}
/* PRODUCTS */
.products {	text-align: center;	height: 288px;	padding-bottom: 30px;	font-family: "Lucida Grande", sans-serif;
}
.products a {	position: relative;	top: 40px;	left: 75px;	width: 160px;	margin: 15px 20px 5px;	float: left;	border: 1px solid #E8E8E8;	border-radius: 5px;	box-shadow: 0 0 5px #EFEFEF;	padding: 20px 10px;	text-decoration: none;	font-family: "Lucida Grande", sans-serif;
}
.products h3 {	font-size: 21px;	color: #369;	font-weight: bold;	line-height: 1.5em;	margin-bottom: 10px;
}
.products h3 span{	text-decoration: underline;
}
.products h4 {	margin: 10px 0;	font-size: 14px;	color: #c00
}
.products p {	color: #222;	font-size: 14px;	line-height: 1.4em;	margin: 5px 0
}
/* CUSTOMERS */
.customers {	margin-bottom: 50px;	position: relative;
}
.customers h2 {	font-family: "CrimsonSemibold", serif;	color: #232323;	font-size: 48px;	line-height: 1.1em;	letter-spacing: -1px;	text-align: center;
}
.customers p {	font-family: "CrimsonRoman", serif;	color: #666;	font-size: 22px;	margin-bottom: 20px;	line-height: 1.3em;
}
/* MEET SOME CUSTOMERS */
.meet {	position: absolute;	left: -140px;	top: 70px;
}
.meet a {	display: block;	width: 143px;	height: 104px;	background: url("../img/img-customers.png") no-repeat 0 0;	text-indent: -1000em;
}
.meet a:hover {	background-position: 0 100%;
}
.meet p {	font-size: 14px;	text-align: center;	color: #369;
}
.meet p:hover{	color: #69c;	text-decoration: underline;
}
/* RED ARROW IMAGE */
.arrow-left {	width: 69px;	height: 36px;	position: relative;	top: -35px;
}
/* GLOBE IMAGE */
.globe {	float: right;
}
/* MANIFESTO */
.manifesto {	margin-bottom: 50px;	padding-left: 15px;	overflow: hidden;	text-align: center;	font-family: "CrimsonRoman", serif;
}
.manifesto h2 {	font-family: "CrimsonSemibold", serif;	color: #232323;	font-size: 48px;	line-height: 1.1em;	letter-spacing: -1px;	margin: 30px 0;
}
.column,
.column-end {	float: left;	color: #222;	font-size: 18px;	line-height: 1.5em;
}
.column {	width: 380px;	margin-right: 40px;
}
.column-end {	margin-right: 0;	width: 380px;
}
.manifesto h3 {	float: left;	font-size: 58px;	line-height: normal;	margin: -10px 15px 0 0;	color: #ccc;
}
.manifesto h4 {	font-family: "Lucida Grande", sans-serif;	font-size: 16px;	margin: 5px 0;	color: #c00;	text-align: left;
}
.manifesto p {	font-family: "Lucida Grande", sans-serif;	text-align: left;	line-height: 1.4em;	font-size: 12px;
}
/*REWORK */
.rework {	height: 500px;	position: relative;
}
.rework h2 {	font-family: "CrimsonSemibold", serif;	margin: 30px 0;	font-size: 48px;	line-height: 1.1em;	letter-spacing: -1px;	text-align: center;
}
/*BOOK IMAGE */
.book {	float: left;
}
/* QUOTES */
.quotes {	padding-top: 5px;	text-align: center;
}
.quotes h3 {	color: #888;	font-weight: normal;	font-family: "CrimsonRomanItalic", serif;	font-style: italic;	font-size: 22px;	margin-top: 35px;	margin-bottom: 10px;
}
.quotes p {	font-family: "Lucida Grande", sans-serif;	font-size: 12px;
}
/* ARROW RIGHT IMAGE */
.arrow-right {	width: 69px;	position: absolute;	top: 140px;	right: 5px;
}
/* CRUMPLED PAPER IMAGE */
.crumple {	position: absolute;	top: 50px;	right: -125px;
}
.crumple p {	font-size: 12px;	text-align: center;
}
.crumple p:hover {	color: #69c;	text-decoration: underline;
}
/* OFFERINGS */
.offerings h2 {	font-family: "CrimsonSemibold", serif;	margin: 30px 0;	font-size: 48px;	text-align: center;
}
.main-offerings {	width: 570px;	height: 213px;	margin: auto;
}
.main-offerings a {	width: 160px;	margin: 5px;	float: left;	padding: 0 10px;	font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;	text-align: center;	line-height: 1.5em;
}
.main-offerings h3 {	font-size: 21px;	margin: 3px 0 0 10px;	color: #222;
}
.main-offerings h3:hover {	color: #69c;
}
.main-offerings h4 {	margin: 5px 0;	font-size: 14px;	color: #c00;
}
.main-offerings p {	color: #666;	font-size: 12px;	line-height: 1.4em;
}
.offerings .column h3,
.offerings .column-end h3 {	border-bottom: 1px solid #E8E8E8;	font-family: "Lucida Grande", sans-serif;	font-size: 14px;	margin: 5px 0;	color: #c00;
}
.offerings .column {	float: left;	width: 300px;	margin-right: 30px;	margin-left: 110px;	text-align: center;
}
.offerings .column-end {	float: left;	width: 300px;	padding: 0;	margin-right: 0;	margin-left: 0;	text-align: center
}
.offerings .column li,
.offerings .column-end li {	list-style-type: none;	padding: 5px;
}
.offerings .column a,
.offerings .column-end a {	font-size: 22px;	font-weight: bold;	color: #222;
}
.offerings .column small,
.offerings .column-end small {	color: #666;	font-size: 12px;	font-family: "Lucida Grande", sans-serif;
}
/* FOOTER */
footer {	margin: 30px auto;	text-align: center;	line-height: 1.5em;	font-family: "Lucida Grande", sans-serif;
}
footer h3 {	font-size: 14px;	color: #c00;
}
footer a {	text-decoration: none;
}
footer li {	font-size: 12px;	padding: 5px 0;
}
footer a:hover {	color: #69c;
}
footer p {	font-size: 10px;	color: #999;	margin-top: 50px;
}
/* MEDIA QUERIES */
@media (max-width: 825px) {	header img {	max-width:	}
}
@media (max-width: 570px) {	nav ul {	float: none;	text-align: center;	}	nav li:nth-child(3),	nav li:nth-child(4) {	display: none;	}	nav li {	margin-right: 15px;	}
}
HTML and CSS - Script Codes
HTML and CSS - Script Codes
Home Page Home
Developer Raquel Lorenzana
Username raquellorenzana
Uploaded January 20, 2023
Rating 3
Size 6,300 Kb
Views 8,096
Do you need developer help for HTML and CSS?

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
Banner Ad
JS Form
A Pen by Raquel Lorenzana
Input Answer and View Results
API Search App
Material Design
Create amazing sales emails 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!