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.

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

Submitting Lab 10 - sberthely #211

Open
wants to merge 20 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
108 changes: 108 additions & 0 deletions Assignment/Homework_1 - HTML/myFirstPage_V1.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
<style>
div.container {
width: 100%;
border: 1px solid gray;
}

header {
color: white;
background-color: red;
clear: left;
}

h2 {
color: white;
background-color: blue;
}

nav {
width: 100%;
float: center;
background-color: blue;
}

.pok_insights {
margin: auto;
width: 20%;
border: 3px solid #73AD21;
padding: 10px 0;
text-align: center;
}

.pok_descript {
height: 100px;
margin: center;
width: 50%;
border: 8px solid red;
text-align: center;
}

a.button {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
text-decoration: none;
color: initial;
}
</style>
</head>

<header>
<p><button type="button">Dropdown</button>
<h1>Pokedex</h1>
<img src="assets/icons/pokeball_icon.png" align="BOTTOM"></p>
</header>

<body background="assets/backgrounds/background_home.png">
<div>
<input type="text">
</div>

<div>
<img src="assets/images/pickahu.png" align="LEFT">
<div class="pok_insights">
<h2>No. 001 Pickahu</h2>
<ul>
<p><b>Electric type</b></p>
<p><b>Gentle Temperment</b></p>
<p><b>Grasslands</b></p>
</ul>
</div>
</div>

<section class="pok_descript">
<article>
<p>Pickahu can be seen napping in a bright sunlight. It has two
<span style="color:red">red</span> dots
on its cheeks. By practicing html and css Pickahu can learn confusion.
Pickahu likes to steal computer chargers from sleeping college students.
</p>
</article>
</section>
</div>

<div>
<img src="assets/images/abra.png">
<img src="assets/images/charmander.png">
<img src="assets/images/charmeleon.png">
</div>

<nav>
<a href="/html/" class="button">BACK</a> |
<a href="/css/">MAP</a> |
<a href="/js/">AREA</a> |
<a href="/jquery/">NEXT</a>
</nav>

</body>

<footer>
<p>
<li><a href="http://www.w3schools.com/html/tryit.asp?filename=tryhtml_layout_float">Reference for Header Style</a>
<li><a href="http://www.w3schools.com/css/tryit.asp?filename=trycss_align_container">Reference for pok_descript</a></p>
</footer>
</html>
131 changes: 131 additions & 0 deletions Assignment/Homework_2 - CSS_ResponsiveDesign/main.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,131 @@
/*----------------- CSS RESET ------------------*/
body{
width: 900px;
height: 1200px;
margin: 0 auto;
background-image: url("assets/backgrounds/background_home.png");
background-repeat: no-repeat;
background-size:900px;
background-position: center
}

div.container {
width: 100%;
border: 1px solid gray;
}

/*
a.button {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
text-decoration: none;
color: initial;
display: inline-block;
height: 50%;
border: 3px solid black;
box-sizing: content-box;
}
*/
button {
display: inline-block;
height: 30px;
width: 100px;
/* border: 2px solid black; */
/* box-sizing: content-box; */
border-radius: 10px;
}

header {
color: white;
background-color: #BE5959;
font-family: calibri;
display: flex;
justify-content: space-around;
}

h2 {
color: white;
background-color: #5C90CC;
margin-top: 0;
text-align: center;
}

.search_text{
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
font-family: calibri;
}

#inputSearchText{
width: 100%;
height: 100%;
font-size: 40px;
padding-left: 20px;
}

ul{
list-style-type:none;
}

nav {
background-color: #5C90CC;
width: 100%;
height: 5%;
float: center;
}

.pok_insights {
margin: auto;
width: 94%;
border: 2px solid #646262;
padding: 0;
text-align: left;
font-family: calibri;
background-color: white;

}


.pok_descript {
/* height: 100px; */
margin: auto;
width: 90%;
border: 8px solid #BE5959;
border-radius: 20px 20px 20px 20px;
text-align: center;
font-family: calibri;
background-color: white;

}

#lblPokedex{
alignment-adjust:central;
}

.grid{
border: 2px solid black;
}


ul#main_menu li{
display: inline-block;
background-color: red;
border: 5px solid;
list-style: none;
padding: 3px;
border-radius: 5px 5px;
}


/** flex stuff **/
.grid-parent{
display: flex;
flex-wrap: wrap;
}

.grid{
width: 16%
}
1 change: 1 addition & 0 deletions Assignment/Homework_2 - CSS_ResponsiveDesign/medium.css
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
/*Your tablet targeted CSS should go in this file*/
Loading