Skip to content

Module 2 solution #3

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

Draft
Aami786786 wants to merge 3 commits into
base: master
Choose a base branch
from
Draft

Module 2 solution #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
78af332
Create Index.html
Aami786786 Jan 28, 2021
e0d5568
Rename Index.html to Module 2 solution
Aami786786 Jan 28, 2021
d7a5cfa
Create Module 2 solution css
Aami786786 Jan 28, 2021
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
35 changes: 35 additions & 0 deletions Module 2 solution
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="stylee.css">
<meta charset="utf-8">
<meta name='viewport' content='width=device-width, initial-scale=1'>
<title>Module 2 solution</title>
</head>
<body>
<h1>Our Menu</h1>
<div class='row'>
<div class='col-lg-4 col-md-6 sx-12'>
<div class='section'>
<span id='pp1'>Chicken</span>
<p>As far back as I can remember, I have always liked going out to eat. Two of my favorite restaurants are Jake’s and McDonald’s. Though both are places to dine they have their differences in their ambiance, waiting, and expense. When deciding where to go to eat, I have three things to think about. I must consider the atmosphere or where I want to go. The amount of time I have is another consideration. The amount of money that I am able to spend is a big influence.
</p>
</div>
</div>
<div class='col-lg-4 col-md-6 sx-12'>
<div class='section'>
<span id='pp2'>Beef</span>
<p>As far back as I can remember, I have always liked going out to eat. Two of my favorite restaurants are Jake’s and McDonald’s. Though both are places to dine they have their differences in their ambiance, waiting, and expense. When deciding where to go to eat, I have three things to think about. I must consider the atmosphere or where I want to go. The amount of time I have is another consideration. The amount of money that I am able to spend is a big influence.
</p>
</div>
</div>
<div class='col-lg-4 col-md-12 sx-12'>
<div class='section'>
<span id='pp3'>Sushi</span>
<p>As far back as I can remember, I have always liked going out to eat. Two of my favorite restaurants are Jake’s and McDonald’s. Though both are places to dine they have their differences in their ambiance, waiting, and expense. When deciding where to go to eat, I have three things to think about. I must consider the atmosphere or where I want to go. The amount of time I have is another consideration. The amount of money that I am able to spend is a big influence.
</p>
</div>
</div>
</div>
</body>
</html>
91 changes: 91 additions & 0 deletions Module 2 solution css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
{
box-sizing: border-box;
}
body{
background-color:rgb(51,232,255);
}


h1 {
font-size: 27px;
font-family: Georgia serif;
text-align: center;
color: rgb(0, 0, 0);
margin-bottom: 30px;

}

p {
padding: 15px 5px 0px 5px;
font-family: Georgia sans-serif;
font-size: 16px;
position: relative;
}

.section {
background-color: rgb(150, 150, 150);
border: 2px solid black;
margin-top: 20px;
margin-right: 20px;
padding: 3px;
text-align: justify;
position: relative;
}

span {
font-size: 20px;
width: 150px;
border: 1px solid black;
font-weight: bold;
text-align: center;
float: right; top :0; right: 0; margin: 0;
position: absolute;
}
#pp1 {
background-color: rgb(250, 150, 150);
color: rgb(0, 0, 0);
}
#pp2 {
background-color: rgb(250, 0, 0);
color: rgb(250, 250, 250);
}
#pp3 {
background-color: rgb(200, 200, 100);
color: rgb(0, 0, 0);
}
}

.row {
width: 100%;
}

/* PC view */

@media (min-width: 992px) {

.col-lg-4 {
width: 33.33%;
float: left;
}
}

/* Tablet view */
@media (min-width: 768px) and (max-width: 991px) {

.col-md-6 {
width: 50%;
float: left;
}
.col-md-12 {
width: 100%;
float: left;
}
}
/*for very small screens or mobile devices */
@media (max-width: 767px) {

.col-sx-12 {
float: left;
width: 100%;
}
}