<body>
<h1>The Brown Bear</h1>
<div id="introduction">
<h2>About Brown Bears</h2>
<p>The brown bear (<em>Ursus arctos</em>) is native to parts of northern Eurasia and North America. Its conservation status is currently <strong>Least Concern</strong>.<br /><br /> There are many subspecies within the brown bear species, including the Atlas bear and the Himalayan brown bear.</p>
<h3>Species</h3>
<ul>
<li>Arctos</li>
<li>Collarus</li>
<li>Horribilis</li>
<li>Nelsoni (extinct)</li>
</ul>
<h3>Features</h3>
<p>Brown bears are not always completely brown. Some can be reddish or yellowish. They have very large, curved claws and huge paws. Male brown bears are often 30% larger than female brown bears. They can range from 5 feet to 9 feet from head to toe.</p>
</div>
<div id="habitat">
<h2>Habitat</h2>
<h3>Countries with Large Brown Bear Populations</h3>
<ol>
<li>Russia</li>
<li>United States</li>
<li>Canada</li>
</ol>
<h3>Countries with Small Brown Bear Populations</h3>
<p>Some countries with smaller brown bear populations include Armenia, Belarus, Bulgaria, China, Finland, France, Greece, India, Japan, Nepal, Poland, Romania, Slovenia, Turkmenistan, and Uzbekistan.</p>
</div>
<div id="media">
<h2>Media</h2>
<img src="https://content.codecademy.com/courses/web-101/web101-image_brownbear.jpg" alt="A Brown Bear"/>
<video src="https://content.codecademy.com/courses/freelance-1/unit-1/lesson-2/htmlcss1-vid_brown-bear.mp4" width="320" height="240" controls>video not supported</video>
</div>
</body>
<!DOCTYPE html>
<html>
<head>
<title>Brown Bears</title>
</head>
<body>
<nav>
<a href="./index.html">Brown Bear</a>
<a href="./aboutme.html">About Me</a>
</nav>
<h1>The Brown Bear</h1>
<nav>
<ul>
<li><a href="#introduction">Introduction</a></li>
<li><a href="#habitat">Habitat</a></li>
<li><a href="#media">Media</a></li>
</ul>
</nav>
<div id="introduction">
<h2>About Brown Bears</h2>
<p>The brown bear (<em>Ursus arctos</em>) is native to parts of northern Eurasia and North America. Its conservation status is currently <strong>Least Concern</strong>.<br /><br /> There are many subspecies within the brown bear species, including the
Atlas bear and the Himalayan brown bear.</p>
<a href="https://en.wikipedia.org/wiki/Brown_bear" target="_blank">Learn More</a>
<h3>Species</h3>
<ul>
<li>Arctos</li>
<li>Collarus</li>
<li>Horribilis</li>
<li>Nelsoni (extinct)</li>
</ul>
<h3>Features</h3>
<p>Brown bears are not always completely brown. Some can be reddish or yellowish. They have very large, curved claws and huge paws. Male brown bears are often 30% larger than female brown bears. They can range from 5 feet to 9 feet from head to toe.</p>
</div>
<div id="habitat">
<h2>Habitat</h2>
<h3>Countries with Large Brown Bear Populations</h3>
<ol>
<li>Russia</li>
<li>United States</li>
<li>Canada</li>
</ol>
<h3>Countries with Small Brown Bear Populations</h3>
<p>Some countries with smaller brown bear populations include Armenia, Belarus, Bulgaria, China, Finland, France, Greece, India, Japan, Nepal, Poland, Romania, Slovenia, Turkmenistan, and Uzbekistan.</p>
</div>
<div id="media">
<h2>Media</h2>
<img src="https://content.codecademy.com/courses/web-101/web101-image_brownbear.jpg" />
<video src="https://content.codecademy.com/courses/freelance-1/unit-1/lesson-2/htmlcss1-vid_brown-bear.mp4" height="240" width="320" controls>Video not supported</video>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>About Me</title>
</head>
<body>
<nav>
<a href="/">Brown Bear</a>
<!-- web browsers respond to index.html and / the same way -->
<a href="./aboutme.html">About Me</a>
</nav>
<h1>About Me</h1>
<h3>Michael Doliner</h3>
<img src="https://content.codecademy.com/courses/web-101/htmlcss1-img_brown-bear-2.jpeg">
<!-- A section that describes the brown bear -->
<p>Hey, my name is Michael, and there's little I find more exciting than bears! I've spent most of my young life traveling to the edges of Earth to take videos of these wonderful creatures. <br /> <br />
Family, Country, Bears, <br /> <br />
Michael D.
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<table>
<thead>
</thead>
<tbody>
<tr>
<th scope="col">Company Name</th>
<th scope="col">Number of Items to Ship</th>
<th scope="col">Next Action</th>
<td colspan="2">Adam’s Greenworks</td>
<td rowspan="2">14</td>
<td>Package Items</td>
</tr>
<tr></tr>
</tbody>
<tfoot>
<td>Total</td>
<td>28</td>
</tfoot>
</table>
<title>Ship To It - Company Packing List</title>
<link href="https://fonts.googleapis.com/css?family=Lato: 100,300,400,700|Luckiest+Guy|Oxygen:300,400" rel="stylesheet">
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<ul class="navigation">
<li><img src="https://content.codecademy.com/courses/web-101/unit-9/htmlcss1-img_logo-shiptoit.png" height="20px;"></li>
<li class="active">Action List</li>
<li>Profiles</li>
<li>Settings</li>
</ul>
<div class="search">Search the table</div>
</body>
</html>body {
background: #EEE;
margin: 0;
padding: 0;
}
/* Navigation */
.navigation {
box-sizing: border-box;
background-color: #3587A4;
overflow: auto;
padding: 18px 50px;
position: relative;
top: 0;
width: 100%;
z-index: 999;
}
ul {
padding: 0;
margin: 0;
}
li {
color: #FFF;
display: inline-block;
font-family: 'Oxygen', sans-serif;
font-size: 16px;
font-weight: 300;
letter-spacing: 2px;
margin: 0;
padding: 20px 18px 10px 18px;
text-transform: uppercase;
}
.active {
color: #88CCF1;
}
/* Table */
table {
height: 40%;
left: 10%;
margin: 20px auto;
overflow-y: scroll;
position: static;
width: 80%;
}
thead th {
background: #88CCF1;
color: #FFF;
font-family: 'Lato', sans-serif;
font-size: 16px;
font-weight: 100;
letter-spacing: 2px;
text-transform: uppercase;
}
tr {
background: #f4f7f8;
border-bottom: 1px solid #FFF;
margin-bottom: 5px;
}
th, td {
font-family: 'Lato', sans-serif;
font-weight: 400;
font-size: 18px;
padding: 20px;
text-align: left;
width: 33.3333%;
}
.search {
background-color: #FFF;
border: 1px solid #DDD;
border-radius: 3px;
color: #AAA;
padding: 20px;
margin: 50px auto 0px auto;
width: 77%;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Rubik" rel="stylesheet">
<title>Forms Review</title>
</head>
<body>
<section id="overlay">
<img src="https://content.codecademy.com/courses/web-101/unit-6/htmlcss1-img_burger-logo.svg" alt="Davie's Burgers Logo" id="logo">
<hr>
<form action="submission.html" method="POST">
<h1>Create a burger!</h1>
<section class="protein">
<label for="patty">What type of protein would you like?</label>
<input type="text" name="patty" id="patty">
</section>
<hr>
<section class="patties">
<label for="amount">How many patties would you like?</label>
<input type="number" name="amount" id="amount">
</section>
<hr>
<section class="cooked">
<label for="doneness">How do you want your patty cooked</label>
<br>
<span>Rare</span>
<input type="range" name="doneness" id="doneness" value="3" min="1" max="5">
<span>Well-Done</span>
</section>
<hr>
<section class="toppings">
<span>What toppings would you like?</span>
<br>
<input type="checkbox" name="topping" id="lettuce" value="lettuce">
<label for="lettuce">Lettuce</label>
<input type="checkbox" name="topping" id="tomato" value="tomato">
<label for="tomato">Tomato</label>
<input type="checkbox" name="topping" id="onion" value="onion">
<label for="onion">Onion</label>
</section>
<hr>
<section class="cheesy">
<span>Would you like to add cheese?</span>
<br>
<input type="radio" name="cheese" id="yes" value="yes">
<label for="yes">Yes</label>
<input type="radio" name="cheese" id="no" value="yes">
<label for="no">No</label>
</section>
<hr>
<section class="bun-type">
<label for="bun">What type of bun would you like?</label>
<select name="bun" id="bun">
<option value="sesame">Sesame</option>
<option value="potatoe">Potato</option>
<option value="pretzel">Pretzel</option>
</select>
</section>
<hr>
<section class="sauce-selection">
<label for="sauce">What type of sauce would you like?</label>
<input list="sauces" id="sauce" name="sauce">
<datalist id="sauces">
<option value="ketchup"></option>
<option value="mayo"></option>
<option value="mustard"></option>
</datalist>
</section>
<hr>
<section class="extra-info">
<label for="extra">Anything else you want to add?</label>
<br>
<textarea id="extra" name="extra" rows="3" cols="40"></textarea>
</section>
<hr>
<section class="submission">
<input type="submit" value="Submit">
</section>
</form>
</section>
</body>
</html>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Sign Up Page</title>
<link rel="stylesheet" href="style.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet">
</head>
<body>
<section class="overlay">
<h1>Sign Up</h1>
<p>Create an account:</p>
<form action="submission.html" method="GET">
<label for="username">Username:</label>
<br>
<!--Add the pattern attribute to the input below-->
<input id="username" name="username" type="text" required minlength="3" maxlength="15" pattern="[a-zA-Z0-9]+">
<br>
<label for="pw">Password:</label>
<br>
<input id="pw" name="pw" type="password" required minlength="8" maxlength="15">
<br>
<input type="submit" value="Submit">
</form>
</section>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>Navigational Links</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#posts">Posts</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section>
<article>
<h2>Facts About Dogs</h2>
<p>
Dogs have a sense of time. It's been proven that they know the difference between a hour and five. If conditioned to, they can predict future events, such as regular walk times.
</p>
</article>
<aside>
<p>A study was conducted on dogs being away from their owners for varying hours and the studies show that dogs who were away from their owners the longest showed the greatest amount of affection!
</p>
</aside>
</section>
<figure>
<img src="https://content.codecademy.com/courses/SemanticHTML/dogimage.jpeg"/>
<figcaption>A cute dog.</figcaption>
</figure>
<audio controls>
<source src="https://content.codecademy.com/courses/SemanticHTML/dogBarking.mp3" type="audio/mp3">
</audio>
<video src="https://content.codecademy.com/courses/SemanticHTML/dog-video.mp4" controls>
</video>
<embed src="https://content.codecademy.com/courses/SemanticHTML/dog-on-beach.gif"/>
</main>
<footer>
<p>Contact me at +1 234 567 8910 </p>
</footer>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Vacation World</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<img src="https://content.codecademy.com/courses/freelance-1/unit-2/explorer.jpeg" />
<h1 class="title cursive capitalize" >Top Vacation Spots</h1>
<h5>By: Stacy Gray</h5>
<h6 class="publish-time">Published: 2 Days Ago</h6>
<p>The world is full of fascinating places. Planning the perfect vacation involves packing up, leaving home, and experiencing something new.</p>
<h2 class="destination">1. Florence, Italy</h2>
<div class="description">A city-size shrine to the Renaissance, Florence offers frescoes, sculptures, churches, palaces, and other monuments from the richest cultural flowering the world has known. Names from its dazzling historical pastDante, Michelangelo, Galileo, Machiavelliare some of the most resonant of the medieval age. <a href="http://travel.nationalgeographic.com/travel/city-guides/florence-italy/" target="_blank">Learn More</a>.
<h5>Top Attractions</h5>
<ul>
<li>Museums</li>
<li>Bike Tours</li>
<li>Historical Monuments</li>
</ul>
</div>
<h2 class="destination">2. Beijing, China</h2>
<div class="description">A city in the midst of reinventing itself and continuing to build on the success of the 2008 Summer Olympics, Beijing is a place of frenzied construction. New housing, new roads, and new sports venues seem to spring up overnight. At the same time, the capital of the Peoples Republic of China remains an epicenter of tradition, with the treasures of nearly 2,000 years as the imperial capital still on viewin the famed Forbidden City and in the luxuriant pavilions and gardens of the Summer Palace.
<a href="http://travel.nationalgeographic.com/travel/city-guides/beijing-china/" target="_blank">Learn More</a>.
<h5>Top Attractions</h5>
<ul>
<li>Biking</li>
<li>Historical Sites</li>
<li>Restaurants and Dining</li>
</ul>
</div>
<h2 class="destination">3. Seoul, South Korea</h2>
<div class="description">The Korean capital is a city of contrasts. Fourteenth-century city gates squat in the shadow of 21st-century skyscrapers, while the broad Han River is back-dropped by granite mountains rising in the city centercomplete with alpine highways speeding around their contours and temples nestling among their crags. Fashionable, gadget-laden youths battle for sidewalk space with fortune-tellers and peddlers, while tiny neighborhoods of traditional cottages contrast with endless ranks of identical apartments.
<a href="http://travel.nationalgeographic.com/travel/city-guides/seoul-south-korea/" target="_blank">Learn More</a>.
<h5>Top Attractions</h5>
<ul>
<li>Parasailing</li>
<li>Segway Tours</li>
<li>Spas and Resorts</li>
</ul>
</div>
<h2> More Desinations </h2>
<ul>
<li><h4 class="destination">Jackson Hole, Wyoming</h4></li>
<li><h4 class="destination">Cape Town, South Africa</h4></li>
<li><h4 class="destination">La Paz, Bolivia</h4></li>
</ul>
<p>—Best of luck with your travels, and be sure to send pictures and stories. We"d love to hear them!</p>
</body>
</html>p {
font-family: Arial;
}
h1 {
color: maroon;
}
h2.destination {
font-family: cursive;
}
.title {
color: teal;
}
.uppercase {
text-transform: uppercase;
}
.publish-time {
color: gray;
}
.cursive {
font-family: cursive;
}
.capitalize {
text-transform: capitalize;
}
.description h5 {
color: teal;
}
h5 {
color: rebeccapurple;
}
h5,
.p {
font-family: Georgia;
} 
<!DOCTYPE html>
<html>
<head>
<title>The Rise of Soccer in The US</title>
<link href="style.css" type="text/css" rel="stylesheet">
<link href="style-library.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="content">
<img src="https://content.codecademy.com/courses/web-101/unit-4/htmlcss1-img_writer-avatar.jpg" class="writer-img">
<h3 class="byline">Article By: Jane Dover</h3>
<h1>How the Rise of Soccer in the US Is Changing the Face of Youth Sports</h1>
<h2>The focus on soccer in youth sports programs is exploding nation-wide</h2>
<p>When the first World Cup arrived in the US in the 90's everyone officially declared that soccer was it. Well it's taken it's time but we can definitely see the influence of soccer, especially women's soccer, across the US. This year, 3 million kids
played in youth soccer leagues with 2/3 of those leagues for girls. In fact, in the 12-17 age range the MLS has surpassed the MLB and NFL in popularity.</p>
<p>Part of this meteoric rise can be attributed to the impressively soaring ad dollars being pumped into the Women's World Cup games in 2014. The women's games generated $40 million for Fox, that's definitely not chump change. And those advertisers,
like ATT, Coca Cola, Verizon, Nike, Visa, and other heavy hitters, are working to make sure they see those numbers grow year after year by investing in youth soccer facilities and promoting programs across the country. </p>
<p>Now that big business is involved you can be assured you'll see a continued rise in popularity in soccer across the country for years to come. </p>
</div>
<div class="image">
<p class="caption">The local semi- pro soccer team in Seattle, WA plays an international friendly</p>
</div>
</body>
</html>body {
/* Old browsers */
background: #141E30;
/* Chrome 10-25, Safari 5.1-6 */
background: -webkit-linear-gradient(-45deg, #35577D, #141E30);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
background: linear-gradient(-45deg, #35577D, #141E30);
margin: 0;
padding: 0;
}
h1 {
color: #FFF !important;
font-size: 2em;
padding-top: 100px;
width: 100%;
font-family: Georgia;
text-align: center;
}
h2 {
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
color: rgba(255, 255, 255, 0.5);
font-weight: 100;
font-size: 22px;
line-height: 24px;
padding-bottom: 30px;
text-align: left;
width: 70%;
font-family: Georgia;
}
p {
color: AliceBlue;
line-height: 1.3em;
text-align: left;
width: 100%;
font-family: Helvetica;
font-size: 18px;
font-weight: bold;
}
.byline {
font-family: Helvetica;
color: rgba(255, 255, 255, 0.5);
float: left;
font-size: 14px;
padding-left: 10px;
text-transform: uppercase;
}
.caption {
display: block;
font-family: 'Playfair Display', serif;
font-size: 14px;
font-style: italic;
line-height: 14px;
margin-left: 20px;
padding: 10px;
position: relative;
top: 80%;
width: 60%;
background-color: white;
color: black;
opacity: 0.75;
}
.content {
padding: 40px;
}
.image {
background-image: url("https://content.codecademy.com/courses/freelance-1/unit-2/soccer.jpeg");
background-size: cover;
background-position: center;
height: 300px;
}
.writer-img {
-webkit-box-shadow: 5px 0px 5px 0px rgba(0, 0, 50, 0.97);
-moz-box-shadow: 5px 0px 5px 0px rgba(0, 0, 50, 0.97);
box-shadow: 5px 0px 5px 0px rgba(0, 0, 50, 0.97);
float: left;
width: 50px;
}
<!DOCTYPE html>
<html>
<head>
<title>The Terminal - Your Source for Fact-Based News</title>
<link href="https://fonts.googleapis.com/css?family=Amatic+SC|Raleway:100,200,600,700" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav class="navigation">
<ul>
<li>LOCAL</li>
<li>NATIONAL</li>
<li class="logo">THE TERMINAL</li>
<li>GLOBAL</li>
<li>OPED</li>
<li class="donate">DONATE</li>
</ul>
</nav>
<div id="banner">
<div class="content">
<h1>Conservation Efforts at Lake Tahoe Being Praised by Nation's Leaders</h1>
</div>
</div>
<div id="main" class="content">
<h3>THE STATE'S LATEST CONSERVATION EFFORTS ARE BEING HERALDED BY NATION'S TOP LEADERS AS GROUNDBREAKING AND FORWARD THINKING.</h3>
<span class="byline">WRITTEN BY: JAMES JAYCE</span>
<p>Until recently, construction on the banks of the Lake had been largely under the control of real estate developers. Construction activities have resulted in a clouding of the lake's blue waters. Currently, the Tahoe Regional Planning Agency is regulating construction along the shoreline and has won two Federal Supreme Court battles over recent decisions. These regulations are unpopular with many residents, especially those in the Tahoe Lakefront Homeowners Association.</p>
<p>The League to Save Lake Tahoe (Keep Tahoe Blue) has been an environmental watchdog in the Lake Tahoe Basin for 50 years. Founded when a proposal to build a four-lane highway around the lake (with a bridge over the entrance to Emerald Bay) was proposed in 1957, the League has thwarted poorly designed development projects and environmentally unsound planning. The League embraces responsible and diversified use of the Lake's resources while protecting and restoring its natural attributes.</p>
<div class="pull-quote">
<h2>"THE LEAGUE EMBRACES RESPONSIBLE AND DIVERSIFIED USE OF THE LAKE'S RESOURCES WHILE PROTECTING AND RESTORING ITS NATURAL ATTRIBUTES"</h2>
</div>
<p>Since 1980, the Lake Tahoe Interagency Monitoring Program (LTIMP) has been measuring stream discharge and concentrations of nutrients and sediment in up to 10 tributary streams in the Lake Tahoe Basin, California-Nevada. The objectives of the LTIMP are to acquire and disseminate the water quality information necessary to support science-based environmental planning and decision making in the basin. The LTIMP is a cooperative program with support from 12 federal and state agencies with interests in the Tahoe Basin. This data set, together with more recently acquired data on urban runoff water quality, is being used by the Lahontan Regional Water Quality Control Board to develop a program (mandated by the Clean Water Act) to limit the flux of nutrients and fine sediment to the Lake.</p>
<p>UC Davis remains a primary steward of the lake. The UC Davis Tahoe Environmental Research Center is dedicated to research, education and public outreach, and to providing objective scientific information for restoration and sustainable use of the Lake Tahoe Basin. Each year, it produces a well-publicized "State of the Lake" assessment report.</p>
</div>
<div class="share">
<a href="#">SHARE</a>
<a href="#">FAVORITE</a>
<a href="#">READ</a>
</div>
</body>
</html>body {
background-color: white;
font-family: 'Raleway', sans-serif;
}
.navigation ul {
margin: 0;
padding: 0;
text-align: center;
}
.navigation li {
font-weight: 100;
letter-spacing: 2px;
padding: 20px;
}
.navigation li.logo {
color: black;
font-size: 18px;
font-weight: 700;
letter-spacing: 4px;
}
#banner {
background-image: url("https://content.codecademy.com/courses/web-101/unit-6/htmlcss1-img_tahoe.jpeg");
background-size: cover;
background-position: bottom center;
height: 700px;
width: 100%;
}
#banner .content h1 {
border: 3px solid white;
position: relative;
top: 50px;
width: 400px;
margin: 0 auto;
}
#main {
margin: 0 auto;
padding: 40px;
text-align: center;
width: 400px;
height: 1000px;
overflow: scroll;
}
h1 {
color: white;
font-size: 42px;
font-weight: 600;
text-align: center;
}
h2 {
border: 1px dotted red;
color: red;
font-size: 14px;
line-height: 48px;
padding: 20px 30px;
margin: 30px 20px;
text-align: center;
}
h3 {
color: red;
font-size: 26px;
font-weight: 700;
padding: 20px 10px;
}
p {
color: grey;
font-size: 16px;
line-height: 48px;
margin-top: 60px;
padding: 10px 20px;
}
.pull-quote {
margin: 0 auto;
width: 400px;
}
.byline {
border-bottom: 1px solid LightGrey;
border-top: 1px solid LightGrey;
color: DarkGrey;
font-size: 14px;
font-weight: 200;
}
.share {
border: 1px solid LightGrey;
padding: 40px 0px;
position: relative;
text-align: center;
width: 100%;
}
.share a {
background: red;
border: 1px solid red;
border-radius: 3px;
color: white;
display: inline-block;
margin: 10px;
padding: 14px;
text-decoration: none;
}
.share a:hover {
background: white;
border: 1px solid red;
color: red;
}
<!DOCTYPE html>
<html>
<head>
<title>Please Participate in Our Survey!</title>
<link href="https://fonts.googleapis.com/css?family=Oswald:300,700|Varela+Round" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<ul>
<li>Question 1</li>
<li>Question 2</li>
<li>Question 3</li>
<li>Question 4</li>
<li>Question 5</li>
<li>Question 6</li>
</ul>
</header>
<div class="welcome">
<h1><strong>Welcome</strong> to our survey!</h1>
<p>We're looking forward to getting your answers so we can make sure our products and services are the best they can be!</p>
</div>
<div class="question">
<h4>Question 1</h4>
<h2>I like participating in physical activity such as running, swimming, or biking.</h2>
<div class="answer">
<h3>Disagree</h3>
</div>
<div class="answer">
<h3>Neutral</h3>
</div>
<div class="answer">
<h3>Agree</h3>
</div>
</div>
<div class="question">
<h4>Question 2</h4>
<h2>I try to keep up to date with the latest fashion in active wear.</h2>
<div class="answer">
<h3>Disagree</h3>
</div>
<div class="answer">
<h3>Neutral</h3>
</div>
<div class="answer">
<h3>Agree</h3>
</div>
</div>
<div class="question">
<h4>Question 3</h4>
<h2>I purchase clothing online regularly.</h2>
<div class="answer">
<h3>Disagree</h3>
</div>
<div class="answer">
<h3>Neutral</h3>
</div>
<div class="answer">
<h3>Agree</h3>
</div>
</div>
<div class="question">
<h4>Question 4</h4>
<h2>I try to buy goods that are designed and/or manufactured in my home country.</h2>
<div class="answer">
<h3>Disagree</h3>
</div>
<div class="answer">
<h3>Neutral</h3>
</div>
<div class="answer">
<h3>Agree</h3>
</div>
</div>
<div class="question">
<h4>Question 5</h4>
<h2>I look to famous athletes when trying to choose what to wear when training.</h2>
<div class="answer">
<h3>Disagree</h3>
</div>
<div class="answer">
<h3>Neutral</h3>
</div>
<div class="answer">
<h3>Agree</h3>
</div>
</div>
<footer>
<h3>“Thanks for taking our survey!”</h3>
</footer>
</body>
</html>body {
background-color: #FFF;
margin: 0 auto;
}
header {
background-color: #466995;
border-bottom: 1px solid #466995;
position: fixed;
width: 100%;
z-index: 10;
}
ul {
margin: 30px auto;
padding: 0 20px;
text-align: center;
}
li {
color: #FFF;
font-family: 'Oswald', sans-serif;
font-size: 16px;
font-weight: 300;
text-transform: uppercase;
display: inline-block;
width: 80px;
}
li:hover {
color: #DBE9EE;
}
h1 {
color: #466995;
font-family: 'Oswald', sans-serif;
font-size: 32px;
font-weight: 300;
text-transform: uppercase;
}
h2 {
color: #333;
font-family: 'Varela Round', sans-serif;
font-size: 26px;
font-weight: 100;
margin: 0 auto 20px auto;
}
h3 {
color: #466995;
font-family: 'Oswald', sans-serif;
font-size: 18px;
text-align: center;
font-weight: 700;
text-transform: uppercase;
padding: 30px;
}
h4 {
color: #466995;
font-family: 'Oswald', sans-serif;
font-size: 18px;
font-weight: 300;
letter-spacing: 2px;
text-align: center;
text-transform: uppercase
}
p {
color: #333;
font-family: 'Varela Round', sans-serif;
font-size: 18px;
}
footer {
background-color: #DBE9EE;
text-align: center;
height: 100px;
}
.welcome {
background-color: #DBE9EE;
box-sizing: border-box;
padding: 40px;
text-align: center;
width: 100%;
position: relative;
top: 50px;
}
.question {
text-align: center;
position: relative;
top: 40px;
}
.answer {
border: 1px solid #466995;
margin: 20px;
display: inline-block;
}
.answer:hover {
background: #C0D6DF;
color: #FFF;
}
body {
padding: 0;
margin: 0;
background: #F7F7F7;
/* Old browsers */
background: -moz-linear-gradient(45deg, #F7F7F7 0%, #EAE0D5 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(45deg, #F7F7F7 0%, #EAE0D5 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg, #F7F7F7 0%, #EAE0D5 100%);
}
/** Header styles **/
.header {
background-image: url(https://images.unsplash.com/photo-1455267847942-f4fdb784f0c5?dpr=1&auto=format&crop=entropy&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb);
height: 400px;
background-position: center center;
}
.roasting {
margin: 40px auto;
padding: 20px 30px 40px 30px;
background-color: #FFFFFFFFF;
overflow: auto;
width: 75%;
border-radius: 4px;
align-self: center;
}
.roasting p {
color: #938E89;
text-align: center;
line-height: 24px;
font-family: 'Raleway', sans-serif;
font-size: 16px;
font-weight: 400;
}
.spectrum div {
font: inherit;
padding: 0 20px;
color: #FFFFFF;
overflow: auto;
opacity: 0.9;
}
.spectrum p {
color: #FFFFFF;
text-align: left;
}
/* Roast types */
.green {
background-color: #9EB599;
}
.light {
background-color: #683C2C;
}
.city {
background-color: #4C352D;
}
.vienna {
background-color: #352926;
}
.italian {
background-color: #141212;
}
/* Typography */
h1 {
color: MidnightBlue;
font-family: 'Covered By Your Grace', sans-serif;
font-size: 100px;
line-height: 76px;
margin: 0;
position: relative;
text-align: center;
top: 20%;
background-color: Aqua;
}
h2 {
color: #E4BB97;
font-family: 'Raleway', sans-serif;
font-size: 28px;
font-weight: 500;
text-align: left;
text-transform: uppercase;
}
h3 {
color: #41292C;
font-family: 'Raleway', sans-serif;
font-size: 22px;
font-weight: 500;
text-align: center;
}
h4 {
font-family: 'Raleway', sans-serif;
font-size: 28px;
font-weight: 700;
line-height: .2em;
}
h5 {
font-family: 'Raleway', sans-serif;
font-size: 20px;
line-height: .2em;
font-weight: 300;
}
/* Page elements */
ul {
margin: 0 auto;
padding: 0;
width: 75%;
}
li {
border-bottom: 1px solid #E4BB97;
list-style: none;
margin: 100px 0px;
padding-bottom: 60px;
}
p {
color: #444444;
line-height: 32px;
font-family: 'Raleway', sans-serif;
font-size: 20px;
font-weight: 100;
}
a {
color: #214E34;
font-family: 'Raleway', sans-serif;
font-size: 13px;
font-weight: 900;
text-align: left;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 2px;
}
html,
body {
margin: 0;
height: 100%;
}
.wrapper {
position: relative;
margin: auto;
padding: 0;
max-width: 75vw;
}
.midground, .foreground {
position: absolute;
top: 0;
left: 0;
display: inline-block;
margin: 15vh 0 0 15vw;
padding: 0;
width: 35vw;
height: 59vh;
}
body {
background-color: rgba(0, 255, 0, 0.1);
}
.midground {
background-color: hsla(225, 100%, 25%, 0.4);
}
.foreground {
background-color: hsla(325, 50%, 50%, 0.6);
}
<!DOCTYPE html>
<html>
<head>
<title>Typography Blog</title>
<link rel="stylesheet" type="text/css" href="styles/reset.css">
<link rel="stylesheet" type="text/css" href="styles/style.css">
</head>
<body>
<!-- Header -->
<nav class="header">
<ul>
<li><a class="home" href="#top">FAVORITE FONTS</a></li>
<li><a class="pagelink" href="#serif">SERIF</a></li>
<li><a class="pagelink" href="#sans">SANS-SERIF</a></li>
<li><a class="pagelink" href="#mono">MONOSPACED</a></li>
</ul>
</nav>
<!-- Banner Section -->
<div class="banner">
<h1>Typography</h1>
<p>While typography has been practiced for many centuries, digital font design is a relatively new discipline. There are some great examples of old-school fonts (also called typefaces) which have been adapted for use on digital displays. However, I would like to highlight a few of my favorite fonts that were created with screens in mind.</p>
</div>
<!-- Serif Section -->
<div id="serif">
<!-- Editorial Section - Serif -->
<div class="editorial">
<h2>Serif</h2>
<p>Serifs are the small features at the end of strokes within letters. These features are <strong>functional as well as decorative</strong>. Serif fonts are widely used for body text (eg. articles) because they are considered easier to read than sans-serif fonts in print.</p>
<p><em>Serif fonts can often create a feeling of traditionalism and antiquity, due to their common use in printed materials for many years.</em></p>
</div>
<!-- Font Card - Serif -->
<div class="font-card garamond">
<h2>Garamond</h2>
<p class="creator">by Claude Garamond (16th Century)</p>
<div class="garamond">
<span class="sample">
<h2>Bold</h2>
<span class="bold text">Abc</span>
</span>
<span class="sample">
<h2>Regular</h2>
<span class="regular text">Abc</span>
</span>
<span class="sample">
<h2>Italic</h2>
<span class="italic text">Abc</span>
</span>
</div>
</div>
</div>
<!-- Sans-Serif Section -->
<div id="sans">
<!-- Editorial Section - Sans-Serif -->
<div class="editorial">
<h2>Sans-Serif</h2>
<p>Sans-Serif ("without serif") describes fonts with characters which lack flourishes at the ends of the strokes. Sans-serif fonts have become the most prevalent for display of text on computer screens, as on lower-resolution digital displays, fine details like serifs may disappear or appear too large.</p>
<p><em>Sans-serif fonts are often used to project an image of simplicity, modernity or minimalism.</em></p>
</div>
<!-- Font Card - Sans-Serif -->
<div class="font-card">
<h2>Helvetica</h2>
<p class="creator">by Max Miedinger & Eduard Hoffman (1957)</p>
<div class="helvetica">
<span class="sample">
<h2>Bold</h2>
<span class="bold text">Abc</span>
</span>
<span class="sample">
<h2>Regular</h2>
<span class="regular text">Abc</span>
</span>
</div>
</div>
</div>
<!-- Monospaced Section -->
<div id="mono">
<!-- Editorial - Monospaced -->
<div class="editorial">
<h2>Monospaced</h2>
<p>A monospaced font's characters each occupy the same amount of horizontal space. This contrasts with most fonts, where the letters and spacings have different widths. For example, the two high-use letters "I" and "E" do not need the same footprint. The first monospaced Western typefaces were designed for typewriters.</p>
<p><em>Many text editors (like those used to write computer code) use monospaced fonts, which aid in distinguishing between potentially similar characters (like "l" and "1") and in counting the number of characters in a line.</em></p>
</div>
<!-- Font Card - Monospaced -->
<div class="font-card">
<h2>Space Mono</h2>
<p class="creator">by Colophon Foundry (2016)</p>
<div class="space">
<span class="sample">
<h2>Bold</h2>
<span class="bold text">Abc</span>
</span>
<span class="sample">
<h2>Regular</h2>
<span class="regular text">Abc</span>
</span>
</div>
</div>
</div>
</body>
</html>/* Universal Styles */
@font-face {
font-family: "Glegoo";
src: url(../fonts/Glegoo-Regular.ttf) format('truetype');
}
@font-face {
font-family: 'Space Mono';
font-style: normal;
font-weight: 400;
src: local('Space Mono'), local('SpaceMono-Regular'), url(https://fonts.gstatic.com/s/spacemono/v1/adVweg3BJhE6r8jYmXseHQzyDMXhdD8sAj6OAJTFsBI.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
@font-face {
font-family: 'Space Mono';
font-style: normal;
font-weight: 700;
src: local('Space Mono Bold'), local('SpaceMono-Bold'), url(https://fonts.gstatic.com/s/spacemono/v1/vdpMRWfyjfCvDYTz00NEPGaVI6zN22yiurzcBKxPjFE.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
html {
font-size: 16px;
font-family: "Arial", sans-serif;
}
body {
background-color: #F2F2F2;
}
h1 {
color: white;
font-size: 28px;
font-family: Georgia;
text-transform: uppercase;
}
h2 {
font-size: 24px;
font-weight: 700;
line-height: 2.5;
font-family: Georgia;
word-spacing: 0.05em;
letter-spacing: 0.02em;
}
a {
text-decoration: none;
}
p {
margin: 16px 0;
font-family: Helvetica;
}
strong {
font-weight: bold;
}
#serif, /* Offset linked sections to account for header. */
#sans,
#mono {
padding-top: 77px;
margin-top: -77px;
}
/* Header */
.header {
font-family: "Arial", sans-serif;
font-size: 14px;
line-height: 1.25;
background-color: #fff;
position: fixed;
top: 0;
width: 100%;
font-weight: 900;
}
.header li {
display: inline-block;
}
.header a {
display: block;
color: #4A4A4A;
padding: 30px 20px;
}
a.home {
color: #4D00FF;
}
/* Banner Section */
.banner {
background-color: #4D00FF;
padding: 100px 0;
margin-top: 77px;
text-align: center;
}
.banner p {
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
padding: 10px;
color: #ffffff;
font-weight: bold;
line-height: 1.4;
font-family: "Glegoo";
font-size: 20px;
}
/* Editorial Sections */
.editorial {
padding: 20px;
margin: 20px 0;
text-align: center;
color: #4C4C4C;
}
/* Font Card Sections */
.font-card {
background-color: #ffffff;
margin: 50px 0;
padding: 20px 50px;
}
.font-card .creator {
font-size: 20px;
line-height: 1.25;
font-style: italic;
}
.sample {
display: inline-block;
padding: 0 20px;
margin: 20px;
}
.sample h2 {
line-height: 1.5;
}
.sample .text {
color: #4D00FF;
font-size: 100px;
}
/* Add styles for the Garamond font here */
.garamond .sample .text {
font-family: Garamond, serif;
}
/* Add styles for the Helvetica font here */
.helvetica .sample .text {
font-family: Helvetica, sans-serif;
}
/* Add styles for the Space Mono font here */
.space .sample .text {
font-family: "Space Mono", monospace;
}
.bold {
font-weight: 900;
}
.regular {
font-weight: normal;
}
.italic {
font-weight: normal;
font-style: italic;
}
/* Media Queries */
@media only screen and (max-width: 535px) {
.header {
font-size: 14px;
}
.header a {
padding: 30px 20px;
}
a.home {
display: none;
}
}
<!doctype html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Libre+Baskerville:400,700,400italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<div class="container">
<h1>Headlines.</h1>
<ul>
<li><a href="3">About</a></li>
<li><a href="#expertise">Our Services</a></li>
<li><a href="3">Our Team</a></li>
<li><a href="#footer">Contact Us</a></li>
</ul>
</div>
</div>
<div class="jumbotron">
<div class="container">
<h2>We <span>collect and curate</span>
articles, opinions, and images
from around the world.</h2>
</div>
</div>
<div class="banner">
<div class="container">
<h2>The Bottom Line.</h2>
<p>We deliver the news that is relevant to you.</p>
</div>
</div>
<div class="container">
<h2 id="expertise">Our Expertise.</h2>
<div class="main">
<div class="spacer">
<div class="cards">
<div class="col">
<img src="https://content.codecademy.com/projects/headlines/p1.jpg">
<img src="https://content.codecademy.com/projects/headlines/p6.jpg">
<img src="https://content.codecademy.com/projects/headlines/p8.jpg">
</div>
<div class="col">
<img src="https://content.codecademy.com/projects/headlines/p2.jpg">
<img src="https://content.codecademy.com/projects/headlines/p5.jpg">
<img src="https://content.codecademy.com/projects/headlines/p7.jpg">
</div>
<div class="col">
<img src="https://content.codecademy.com/projects/headlines/p3.jpg">
<img src="https://content.codecademy.com/projects/headlines/p4.jpg">
<img src="https://content.codecademy.com/projects/headlines/p9.jpg">
<img src="https://content.codecademy.com/projects/headlines/p10.jpg">
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<h3>Headlines.</h3>
<p>1000 7th Avenue</p>
<p>New York, NY</p>
<p>(484) 192 - 8372</p>
</div>
</body>
</html>html, body {
margin: 0;
padding: 0;
font-family: 'Libre Baskerville', sans-serif;
}
img {
margin: 10px auto;
height: auto;
width: auto;
}
ul {
text-align: right;
}
h1 {
font-size: 20px;
}
/*Sizing*/
.container {
margin: 0 auto;
}
.spacer {
max-width: 1200px;
margin: auto;
}
.main {
background-color: #ffc200;
}
/*Header Section*/
.header {
padding: 30px 0px 40px;
margin-left: 50px;
margin-right: 50px;
}
.header li {
list-style: none;
display: inline-block;
}
.header li a {
color: #333;
margin:0;
border:0px;
}
/*Jumbotron Section*/
.jumbotron {
background-color: #fff;
max-width: 1200px;
margin-left: 50px;
}
.jumbotron h2 {
font-size: 50px;
margin-bottom: 70px;
}
.jumbotron h2 span {
color:#ffc200;
}
.jumbotron p {
text-shadow: 0 0;
font-size: 16px;
color: #666;
margin-bottom: 0;
}
/*Banner Section*/
.banner {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
/*Expertise Section*/
.cards {
background-color: #ffc200;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.col {
display: inline-flex;
flex-direction: column;
justify-content: space-between;
}
#expertise {
padding: 20px;
background-color: #ffc200;
margin: 0;
text-align: center;
}
/*Footer Section*/
.footer {
padding: 60px 0px;
background-color: #000;
color: #fff;
}
.footer h3 {
font-size: 20px;
margin-left: 20px;
}
.footer p {
font-size:12px;
margin-bottom: 0;
margin-left: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Savory</title>
<link rel="stylesheet" type="text/css" href="reset.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<link href="https://fonts.googleapis.com/css?family=Poppins:400,600" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">
</head>
<body>
<div class="container">
<header>
<img src="https://content.codecademy.com/courses/learn-css-grid/lesson-ii/savory.svg" class="logo">
</header>
<main>
<div class="recipe e">
<img src="https://content.codecademy.com/courses/learn-css-grid/lesson-ii/image-3.png" />
<h2>SWEET CHURROS</h2>
<img src="https://content.codecademy.com/courses/learn-css-grid/lesson-ii/time.svg" class="time" />
<p class="mins">90 mins</p>
<p class="description">
Making this classic summer treat at home will remind you of a childhood spent in the park.</p>
</div>
<div class="recipe f">
<img src="https://content.codecademy.com/courses/learn-css-grid/lesson-ii/image-6.png" />
<h2>BERRY PARFAIT</h2>
<img src="https://content.codecademy.com/courses/learn-css-grid/lesson-ii/time.svg" class="time" />
<p class="mins">10 mins</p>
<p class="description">
This low-calorie, vitamin-packed parfait is great for breakfast, dessert, or post-workout!</p>
</div>
<div class="recipe a">
<img src="https://content.codecademy.com/courses/learn-css-grid/lesson-ii/image-1.png" />
<h2>CHOCOLATE MOUSSE</h2>
<img src="https://content.codecademy.com/courses/learn-css-grid/lesson-ii/time.svg" class="time" />
<p class="mins">20 mins</p>
<p class="description">
This delicious chocolate mousse will delight dinner guests of all ages!</p>
</div>
<div class="recipe b">
<img src="https://content.codecademy.com/courses/learn-css-grid/lesson-ii/image-2.png" />
<h2>SMOKED LAMB WITH RICE</h2>
<img src="https://content.codecademy.com/courses/learn-css-grid/lesson-ii/time.svg" class="time" />
<p class="mins">120 mins</p>
<p class="description">
Want to feel like your favorite relative came over and made you dinner? This comfort meal of smoked lamb and rice will quickly become a weekend favorite!
</p>
</div>
<div class="recipe c">
<img src="https://content.codecademy.com/courses/learn-css-grid/lesson-ii/image-5.png" />
<h2>GOAT CHEESE SALAD</h2>
<img src="https://content.codecademy.com/courses/learn-css-grid/lesson-ii/time.svg" class="time" />
<p class="mins">25 mins</p>
<p class="description">
In addition to the full flavor of goat cheese, this salad includes kale, avocado, and farro to balance it out.</p>
</div>
<div class="recipe d">
<img src="https://content.codecademy.com/courses/learn-css-grid/lesson-ii/image-4.png" />
<h2>CHICKEN SANDWICH</h2>
<img src="https://content.codecademy.com/courses/learn-css-grid/lesson-ii/time.svg" class="time" />
<p class="mins">45 mins</p>
<p class="description">
We've packed a lot into this one - shredded cabbage, carmalized onions, deep-fried chicken, chipotle mayo, half-sour pickles, and a toasted sesame bun will leave you thoroughly satisfied!</p>
</div>
<div class="recipe e">
<img src="https://content.codecademy.com/courses/learn-css-grid/lesson-ii/image-3.png" />
<h2>SWEET CHURROS</h2>
<img src="https://content.codecademy.com/courses/learn-css-grid/lesson-ii/time.svg" class="time" />
<p class="mins">90 mins</p>
<p class="description">
Making this classic summer treat at home will remind you of a childhood spent in the park.</p>
</div>
<div class="recipe f">
<img src="https://content.codecademy.com/courses/learn-css-grid/lesson-ii/image-6.png" />
<h2>BERRY PARFAIT</h2>
<img src="https://content.codecademy.com/courses/learn-css-grid/lesson-ii/time.svg" class="time" />
<p class="mins">10 mins</p>
<p class="description">
This low-calorie, vitamin-packed parfait is great for breakfast, dessert, or post-workout!</p>
</div>
</main>
<footer>
<img src="https://content.codecademy.com/courses/learn-css-grid/lesson-ii/savory.svg" class="logo">
</footer>
</div>
</body>
</html>header, footer {
background-color: #ffa500;
text-align: center;
min-width: 500px;
}
main {
display: grid;
grid-template-columns: 250px 250px;
grid-template-rows: repeat(3, 450px);
grid-gap: 20px;
margin-top: 44px;
grid-auto-rows: 500px;
justify-items: center;
justify-content: center;
align-items: stretch;
align-content: center;
grid-auto-rows: 500px;
grid-auto-flow: column;
}
h2 {
font-family: Poppins;
font-size: 18px;
font-weight: 600;
letter-spacing: 0.3px;
text-align: left;
color: #ffa500;
padding: 10px 0px 10px 10px;
}
img {
width: 100%;
height: auto;
}
.recipe {
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.5);
width: 200px;
}
.a {
}
.c {
}
.time {
padding-left: 10px;
padding-top: 10px;
width: 20px;
height: auto;
}
.mins {
display: inline-block;
font-family: Poppins;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.3px;
text-align: left;
color: #4a4a4a;
position: relative;
bottom: 5px;
}
.description {
font-family: Work Sans;
font-size: 14px;
font-weight: 300;
line-height: 1.29;
letter-spacing: 0.1px;
text-align: left;
color: #4a4a4a;
padding: 10px 0px 10px 10px;
border-top: 1px solid #4a4a4a;
}
.logo {
width: 115px;
height: 21.1px;
object-fit: contain;
padding: 20px;
}
.container {
min-width: 500px;
margin: auto;
}
footer {
margin-top: 44px;
}
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css);
/* Main Styles */
body {
min-width: 300px;
background-color: #ecf0f1;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
}
.button {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: block;
overflow: hidden;
margin: auto;
border-radius: 5px;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3);
width: 300px;
height: 100px;
line-height: 100px;
background-color: #34B3A0;
color: #fff;
}
.button span,
.button div,
.button i {
transition: all 1.2s ease-out 0.2s;
}
.button span,
.button .icon {
position: absolute;
display: block;
height: 100%;
text-align: center;
}
.button span {
width: 72%;
left: 0px;
line-height: inherit;
font-size: 22px;
}
.button .icon {
right: 0;
width: 28%;
}
.button .icon .fa {
font-size: 30px;
vertical-align: middle;
}
.icon {
width: 200px;
background-color: #1A7B72;
}
.button:hover span {
left: -72%;
}
.button:hover .icon {
width: 100%;
}
.button:hover .icon .fa {
font-size: 45px;
}이건 추가 참고용.
a {
display: block;
width: 300px;
padding: 31px 5px;
border-radius: 5px;
margin: 20% auto;
background-color: orange;
text-align: center;
font-family: Helvetica;
font-size: 32px;
color: MintCream;
transition-property: background-color;
transition-duration: 750ms;
}
a:hover {
background-color: LimeGreen;
}