Skip to content
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

Jump to bottom

changed css and added responsiveness #11

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

changed css and added responsiveness #11

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
43 changes: 41 additions & 2 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,42 @@
.myDiv{

.container {
position: relative;
height: 100%;
border: 3px solid green;
background-color: burlywood;
margin: 0;
padding: 0;
}
.myDiv {
position: relative;
border: 3px solid green;
}
.pic {
align-items: center;
display: block;
margin-left: 350px;
}
.c1 {
height: 50px;
position: relative;
margin-left: 670px;
}
.c2 {
height: 20px;
margin-left: 60px;
}
@media screen and (max-width: 1200px) {
.pic {
align-items: center;
display: block;
margin: 10%;
}
.c1 {
margin-left: 40%;
margin-top: 5%;
margin-bottom: 0%;
}
.c2 {
align-items: center;
margin: 10% 10%;
}
}
84 changes: 45 additions & 39 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,34 +1,38 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Site Title</title>

<!-- Below is a link to your stylesheet, which should be located within your css folder -->
<link rel="stylesheet" type="text/css" href="css/style.css" />
<head>
<meta charset="UTF-8">
<title>My Site Title</title>

</head>
<body>
<!-- Below is a link to your stylesheet, which should be located within your css folder -->
<link rel="stylesheet" type="text/css" href="css/style.css" />

<!--
</head>

<body>

<!--
A DIV is a major structural element representing a division or a section in HTML,
allowing you to group together other elements within it. If you have a panel,
or a group of elements that pertain to one section of the page, wrap them in
a div like this.
-->
<div id="container">
<div class="myDiv">
<div class="container">
<div class="myDiv">

<!--
<!--
An H1 serves as the main title for the page. It is not the site title, which you
will want to update in the head section of your HTML.

An H1 should reflect what THIS page is about, and it is very important to adhere to
this standard for search engines.
-->
<h1>My Page Title</h1>
<p>
<h1 class="c1">My Page Title</h1>
</p>

<!--
<!--
An IMG tag will allow you to display an image, either on your computer, or from
a url.

Expand All @@ -42,49 +46,51 @@ <h1>My Page Title</h1>

<img src="http://lorempixel.com/400/200" alt="My random image"/>
-->
<img src="img/Peggy.jpg" alt="A picture of my grumpy cat, Peggy"/>
<img class="pic" src="img/Peggy.jpg" alt="A picture of my grumpy cat, Peggy" />

<!--
<!--
A P tag designates a paragraph of text. It will allow you to automatically indent sections,
and will format the text correctly for content.
-->
<p>
This is a paragraph. It will have line breaks if there is enough text. This is a fundamental element for creating page content.
Sometimes you will need <strong>bold</strong> text, and sometimes you will need <em>italicized</em> text.
</p>
</div>
<p class="c2">
This is a paragraph. It will have line breaks if there is enough text. This is a fundamental element for
creating page content.
Sometimes you will need <strong>bold</strong> text, and sometimes you will need <em>italicized</em> text.
</p>
</div>

<div class="myDiv">
<h2>My Second Most Important Heading</h2>
<div class="myDiv">
<h2>My Second Most Important Heading</h2>

<!--
<!--
A UL tag designates an UNORDERED LIST. You can fill these with <li> elements, which
represent LIST ITEMS, which by default will be displayed with bullet points.
-->
<ul>
<li>An unordered list item</li>
<li>An unordered list item</li>
<li>An unordered list item</li>
</ul>
<ul>
<li>An unordered list item</li>
<li>An unordered list item</li>
<li>An unordered list item</li>
</ul>

<!--
<!--
An OL tag designates an ORDERED LIST. This is similar to a UL, but will be shown with
numbers to their left instead of bullet points.
-->
<ol>
<li>My first list item</li>
<li>My second list item</li>
<li>My third list item</li>
</ol>
</div>
<ol>
<li>My first list item</li>
<li>My second list item</li>
<li>My third list item</li>
</ol>
</div>
</div>

<!--
<!--
Below we link to a javascript file, located within our js folder

It is important to include your scripts here at the bottom of your body, allowing the
entire page to load before calling any of your javascript methods. It also speeds up page load times.
-->
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
<script type="text/javascript" src="js/script.js"></script>
</body>

</html>
24 changes: 2 additions & 22 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,3 @@
body{
color:orange;
}

.myDiv-1{
background-color:red;
}

.myDiv-1 h1{

}

.myDiv-1 p{

}

.myDiv-2{
background-color:green;
}

.myDiv-2 h2{

body {
background-color: blue;
}