How do I get the second picture to look like the first? I need the text to be left aligned with the picture and not center aligned on the page.
How do I get the second picture to look like the first? I need the text to be left aligned with the picture and not center aligned on the page.
HTML-
<!DOCTYPE html>
<html lang="en">
<head>
<title>Path of Light Yoga Studio:: Classes</title>
<meta charset="utf-8">
<link rel="stylesheet" href="yoga.css">
</head>
<body>
<div id="wrapper">
<header>
<h1>Path of Light Yoga Studio</h1>
</header>
<br>
<nav>
<a href="index.html">Home</a>
<a href="classes.html">Classes</a>
<a href="schedule.html">Schedules</a>
<a href="contact.html">Contact Us</a>
</nav>
<main>
<div id="hero">
<img id="yogamat" src="yogamat.jpeg" alt="yogamat picture" width="80%" height="25%">
<h2>Yoga Classes</h2>
<h3>Gentle Hatha Yoga</h3>
<p class="indent">
Intended for beginners and anyone wishing a grounded<br>
foundation in the practice of yoga, this 60 minute class of<br>
poses and slow movement focuses on asana (proper<br>
alignment and posture), pranayama (breath work), and<br>
guided meditation to foster you mind and body connection.
</p>
<h3>Vinyasa Yoga</h3>
</div>
<p class="indent">
Although designed for intermediate to advanced students, <br>
beginners are welcome to sample this 60 minute class that<br>
focuses on breath synchronized movement - you will<br>
inhale and exhale as you flow energetically through yoga poses.
</p>
<h3>Restorative Yoga</h3>
<p class="indent">
This 90 minute class features a very slow movement and long<br>
poses that are supported by a chair or wall. This calming,<br>
restorative experience is suitable for students of any level of<br>
experience. This practice is can be a perfect way to help rehabilitate an injury.
</p>
<br>
<br>
<footer>
<small> <i> Copyright © 2018 Path of Light Yoga Studio<br> <a href+"mailto:jacalynn@mayfield.com>Jacalynn@mayfield.com</a> </i> </small>
</div>
</footer>
</body>
</html>
CSS-
* {box-sizing: border-box;}
body {background-color: #3F2860;
font-family: Verdana,Arial, sans-serif;
color:#3F2860;}
#wrapper {background-color:#F5F5F5;
width:80%;
min-width:1200px;
max-width : 1480px;
margin-left : auto;
margin-right : auto;
color:#3F2860;}
#main {margin-left:170px;
padding-top:1em;
padding-right:2em;
Padding-left:1em;
background-color:#F5F5F5;
height: 500px;}
h2
{
margin-top:0px;
}
#nav{ float:left;
height:500px;
width:25%;
position:relative;
width:160px;
padding:1em;}
#image {float:left;
width:30%;
position:relative;}
span{
margin-left: 40px;
font-size: small;
}
#des{
float: right;
width: 70%;
position: relative;
}
#mathero { height: 300px;
background-image: url("yogamat.jpeg");
background-size: 100% 100%;
background-repeat: no-repeat;}
#loungehero { height: 300px;
background-image: url("yogalounge.jpeg");
background-size: 100% 100%;
background-repeat: no-repeat;}
header {background-color: #9BC1C2;
background-image: url("lilyheader.jpeg");
background-repeat: no-repeat;
background-position: right;
height: 150px;}
h1 {line-height:200%;
padding-top: 50px;
padding-left: 2em;}
nav {font-weight: bold;
text-align:center;
Padding: 1em;
float:Left;
width:190px}
nav ul {list-style-type:none;
padding-left:0;
font-size:1.2em;}
nav a {text-decoration: none ;
display: block;
text-align:center;
font-weight:bold;
border: inset 3px #CCCCCC;
padding:1em;
margin-bottom:1em;}
#yogamat { float: center;
margin: 0 0 5px 5px;
border: 1px solid #000000;
}
nav a:link {color:#3F2860;}
nav a:visited {color:#497777;}
nav a:hover {color:#A26100;
border:3px inset #333333;}
clear { clear:both;}
footer {background-color: #9BC1C2;
font-size: .60em;
font-style: italic;
text-align: center;
padding: 1em;}
li {line-height: 90%;
padding-left: 0;
font size: 1.2em}
header, nav, main, footer { display: block; }
Floatleft {float:left;
margin-right:4em;}
Trending now
This is a popular solution!
Step by step
Solved in 2 steps
