I am working on Path of Light Yoga Studio Case Study Chapter 6 and I cannot make it look right. This is what I have so far in HTML and CSS. Index - I cannot make it line up with the requirements. Where the navigation bars are on the left vertically, the photo is on the left side of the text and the contact information is below the image. The lilyheader is in the H1 background.
I am working on Path of Light Yoga Studio Case Study Chapter 6 and I cannot make it look right. This is what I have so far in HTML and CSS.
Index -
<!DOCTYPE html>
<html lang="en">
<head>
<title>Path of Light Yoga Studio</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="yoga.css">
</head>
<body>
<div id="wrapper">
<header><h1>Path of Light Yoga Studio</h1></header>
<div id="nav">
<nav>
<a href="index.html">Home</a>
<a href="classes.html">Classes</a>
<a href="schedule.html">Schedule</a>
<a href="contact.html">Contact</a>
</nav>
</div>
<div id="main">
<div id="image">
<img style="
margin-left: 50px;
margin-top: 15px;
"
src = "yogadoor2.jpeg" alt = "yoga door" height="300" width="200" class = "floatleft" >
<br><br><br>
<span style="margin-left:53px" class="studio">Path of Light Yoga Studio</span><br></span>
<span style="margin-left:53px" class="studio">612 Serentity Way</span><br>
<span style="margin-left:53px" class="studio">El Dorado, CA 86336</span><br>
<span style="margin-left:53px" class="studio">888-555-5555</span><br>
</div>
<div id="des">
<h2>Find Your Inner Light</h2>
<p> <span class="studio">Path of Life Yoga Studio</span> provides all levels of yoga pratice in a tranquil, peaceful environment. Whether you are new to yoga or an experienced practitioner, our dedicatedinstructors can develop a practice to meet your needs. Let your inner light shine
at the Path of Light Yoga Studio
<ul>
<li>Hatha, Vinyasa, and Restorative Yoga Classes</li>
<li>Drop-ins welcome</li>
<li>Mats, blocks, and blankets provided</li>
<li>Relax in our Serenity Lounge before or after your class</li>
</ul>
</div>
</div>
<div>
<br>
<br>
</div>
<footer>
Copyright © 2018 Path of Light Yoga Studio <br>
<a href="mailto:jacalynn@mayfield.com">jacalynn@mayfield.com</a>
</footer>
</div>
</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:20%;
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;}
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}
Floatleft {float:left;
margin-right:4em;}
I cannot make it line up with the requirements. Where the navigation bars are on the left vertically, the photo is on the left side of the text and the contact information is below the image. The lilyheader is in the H1 background. Thank you!
Trending now
This is a popular solution!
Step by step
Solved in 3 steps with 2 images
