I am working on chapter 6 path of light yoga studio study case and the classes page must have the yogadoor img in the center of the page with the nav bar going vertical on the left hand side. The text has to be below the img. Below is what I have so far. I can't figure out how to make the img smaller and the text display directly beneath it.
I am working on chapter 6 path of light yoga studio study case and the classes page must have the yogadoor img in the center of the page with the nav bar going vertical on the left hand side. The text has to be below the img. Below is what I have so far. I can't figure out how to make the img smaller and the text display directly beneath it.
HTM
<!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="100%" 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: right;
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 4 steps with 1 images
