Skip to content

my lab 1 #6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
alogan15 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

my lab 1 #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 68 additions & 0 deletions NewLab1.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@

h1 {
background: darkgray;
left: 0%;
top: 0%;
font-size: 5000;
font-family: Arial;
padding: 50px;
margin-top: 1px;

}

h2 {
padding: 50px;

}

/* h3 {
float: left;
} */

.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: darkgray;
color: white;
text-align: center;
}

ul {
color: orange;
}

.container{
width: 100%;
}

.mainbody{
width:75%;
float: left;
}

.image{
float: left;
margin-right: 7.5%;
}

.blog{
align-self: auto;
height: 100%;
}

.sidebar{
width:20%;
height: 100%;
float: right;
background-color: gray;
}

/*see if you can get the viewport height and set the sidebar height to viewport height*/






56 changes: 56 additions & 0 deletions NewLab1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="NewLab1.css">
<title>Document</title>

</head>

<body>
<header style="background-color:dimgrey;"> <h1 style="color:orange;">My Website</h1></header>

<div class="container">
<div class="mainbody">
<div class="image">
<img src="https://images.unsplash.com/photo-1593845006124-1e10fde373a1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" width="500" height="333">
</div>

<div class="blog">
<h2>This is a Loerm Ispum Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut</p>
<h3 style="color:orange;"><a href="http://google.com">Read more</a></h3>
</div>
</div>

<div class="sidebar">
<h3>Sidebar Links</h3>
<hr>

<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>

<h3>Other Widgets</h3>
<hr>

<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus lacinia, est vel vestibulum bibendum, ex massa porta metu. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas</p>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias</p>

</div>
</div>

<div class="footer">
<p>Copyright Your Site. All rights reserved.</p>
</div>

</body>
</html>