Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit8fcf02f

Browse files
add files
0 parents  commit8fcf02f

14 files changed

+372
-0
lines changed

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
#Building Websites With HTML, CSS, and #"region" aria-labelledby="heading-:R1dlab:">

‎contact.html

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<htmllang="en">
3+
4+
<head>
5+
<metacharset="UTF-8">
6+
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
7+
<metaname="viewport"content="width=device-width, initial-scale=1.0">
8+
<linkrel="stylesheet"href="site.css"type="text/css">
9+
<title>Contact | SynBio Ltd</title>
10+
</head>
11+
12+
<body>
13+
<header>
14+
<nav>
15+
<ul>
16+
<li><ahref="/">Home</a></li>
17+
<li><ahref="services.html">Services</a></li>
18+
<li><ahref="contact.html">Contact</a></li>
19+
</ul>
20+
</nav>
21+
</header>
22+
<main>
23+
<aside><imgsrc="images/logo.png"alt="SynBio logo"></aside>
24+
<article>
25+
<h1>Contact</h1>
26+
<p>We are always glad to hear from you!</p>
27+
<p>
28+
<ahref="mailto:info@synbio.com.ng?subject=interested%20in%20your%20offer">send us an email</a> and let us know how we can support you.
29+
</p>
30+
</article>
31+
</main>
32+
<footer>
33+
<nav>
34+
<ul>
35+
<li><ahref="/">Home</a></li>
36+
<li><ahref="services.html">Services</a></li>
37+
<li><ahref="contact.html">Contact</a></li>
38+
</ul>
39+
</nav>
40+
</footer>
41+
</body>
42+
43+
</html>

‎favicon.ico

105 KB
Binary file not shown.

‎images/apple-pie.png

56.5 KB
Loading

‎images/background.png

1.7 KB
Loading

‎images/banner.png

380 KB
Loading

‎images/cherry-pie.png

57.6 KB
Loading

‎images/logo.png

22 KB
Loading

‎index.html

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!DOCTYPE html>
2+
<htmllang="en">
3+
4+
<head>
5+
<metacharset="UTF-8">
6+
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
7+
<metaname="viewport"content="width=device-width, initial-scale=1.0">
8+
<linkrel="stylesheet"href="site.css"type="text/css">
9+
<title>SynBio Ltd</title>
10+
<style>
11+
h1 {
12+
font-size:3em;
13+
margin-top:0.5em;
14+
}
15+
16+
.banner {
17+
max-width:100%;
18+
}
19+
20+
.sub-title {
21+
background-color:#fff;
22+
font-size:1.5em;
23+
padding:10px;
24+
}
25+
</style>
26+
</head>
27+
28+
<body>
29+
<header>
30+
<nav>
31+
<ul>
32+
<li><ahref="/">Home</a></li>
33+
<li><ahref="services.html">Services</a></li>
34+
<li><ahref="contact.html">Contact</a></li>
35+
</ul>
36+
</nav>
37+
</header>
38+
<main>
39+
<aside><imgsrc="images/logo.png"alt="SynBio logo"></aside>
40+
<article>
41+
<imgsrc="images/banner.png"class="banner"alt="SynBio Ltd"/>
42+
<h1>Welcome to SynBio</h1>
43+
<pclass="sub-title">
44+
Synthetic Biology Products, Molecular Biology Reagents, Labortory setup and Capacity Building Training.
45+
</p>
46+
</article>
47+
</main>
48+
<footer>
49+
<nav>
50+
<ul>
51+
<li><ahref="/">Home</a></li>
52+
<li><ahref="services.html">Services</a></li>
53+
<li><ahref="contact.html">Contact</a></li>
54+
</ul>
55+
</nav>
56+
</footer>
57+
</body>
58+
59+
</html>

‎interact.html

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<htmllang="en">
3+
4+
<head>
5+
<metacharset="UTF-8">
6+
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
7+
<metaname="viewport"content="width=device-width, initial-scale=1.0">
8+
<title>Document</title>
9+
</head>
10+
11+
<body>
12+
<script>
13+
functiongreet(name){
14+
return"Hello";
15+
}
16+
17+
letmessage=greet();
18+
console.log(message);
19+
</script>
20+
21+
</body>
22+
23+
</html>

‎order.html

Whitespace-only changes.

‎pies.html

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<!DOCTYPE html>
2+
<htmllang="en">
3+
4+
<head>
5+
<metacharset="UTF-8">
6+
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
7+
<metaname="viewport"content="width=device-width, initial-scale=1.0">
8+
<linkrel="stylesheet"href="site.css"type="text/css">
9+
<title>Pies | SynBio Ltd</title>
10+
</head>
11+
12+
<body>
13+
<header>
14+
<nav>
15+
<ul>
16+
<li><ahref="/">Home</a></li>
17+
<li><ahref="services.html">Services</a></li>
18+
<li><ahref="contact.html">Contact</a></li>
19+
</ul>
20+
</nav>
21+
</header>
22+
<main>
23+
<aside><imgsrc="images/logo.png"alt="SynBio logo"></aside>
24+
<article>
25+
<sectionclass="columns-desktop">
26+
<divclass="pie">
27+
<imgsrc="images/apple-pie.png"alt="Apple Pie"/>
28+
<divclass="columns">
29+
<divclass="title">Apple Pie</div>
30+
<divclass="price">N6,000</div>
31+
</div>
32+
<pclass="desc">Our famous apple pie</p>
33+
<buttondata-order="apple-pie">Order</button>
34+
</div>
35+
<divclass="pie">
36+
<imgsrc="images/cherry-pie.png"alt="Cherry Pie"/>
37+
<divclass="columns">
38+
<divclass="title">Cherry Pie</div>
39+
<divclass="price">N7,500</div>
40+
</div>
41+
<pclass="desc">A summer classic</p>
42+
<buttondata-order="cherry-pie">Order</button>
43+
</div>
44+
</section>
45+
</article>
46+
</main>
47+
<footer>
48+
<nav>
49+
<ul>
50+
<li><ahref="/">Home</a></li>
51+
<li><ahref="services.html">Services</a></li>
52+
<li><ahref="contact.html">Contact</a></li>
53+
</ul>
54+
</nav>
55+
</footer>
56+
</body>
57+
58+
</html>

‎resources.md

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
#Resources
2+
3+
The following resources can help you better understand the concepts, elements, and APIs presented in this course.
4+
5+
##HTML
6+
7+
-[Overview](https://developer.mozilla.org/docs/Web/HTML)
8+
-[`doctype` element](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode)
9+
-[Elements](https://developer.mozilla.org/docs/Web/HTML/Element)
10+
-[What is the difference between HTML tags and elements?](https://stackoverflow.com/questions/8937384/what-is-the-difference-between-html-tags-and-elements)
11+
-[HTML tags vs. elements vs. attributes](https://www.456bereastreet.com/archive/200508/html_tags_vs_elements_vs_attributes/)
12+
- Images
13+
-[`img` element](https://developer.mozilla.org/docs/Web/HTML/Element/Img)
14+
-[Responsive images](https://developer.mozilla.org/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)
15+
-[Links (anchor element)](https://developer.mozilla.org/docs/Web/HTML/Element/a)
16+
- Tables
17+
-[`table` element](https://developer.mozilla.org/docs/Web/HTML/Element/table)
18+
-[Table basics](https://developer.mozilla.org/docs/Learn/HTML/Tables/Basics)
19+
- Forms
20+
-[`form` element](https://developer.mozilla.org/docs/Web/HTML/Element/form)
21+
-[`input` element](https://developer.mozilla.org/docs/Web/HTML/Element/Input)
22+
-[`label` element](https://developer.mozilla.org/docs/Web/HTML/Element/label)
23+
-[Form basics](https://developer.mozilla.org/docs/Learn/Forms)
24+
-[Sending data](https://developer.mozilla.org/docs/Learn/Forms/Sending_and_retrieving_form_data)
25+
-[Difference between`name` and`id` attributes](https://stackoverflow.com/questions/1397592/difference-between-id-and-name-attributes-in-html)
26+
-[Validation](https://developer.mozilla.org/docs/Learn/Forms/Form_validation)
27+
-[Using the viewport meta tag to control layout on mobile browsers](https://developer.mozilla.org/docs/Mozilla/Mobile/Viewport_meta_tag)
28+
-[`meta` element](https://developer.mozilla.org/docs/Web/HTML/Element/meta)
29+
-[`http-equiv` attribute](https://stackoverflow.com/questions/6771258/what-does-meta-http-equiv-x-ua-compatible-content-ie-edge-do)
30+
31+
##CSS
32+
33+
-[Overview](https://developer.mozilla.org/docs/Web/CSS)
34+
-[`style` element](https://developer.mozilla.org/docs/Web/SVG/Element/style)
35+
-[`link` element](https://developer.mozilla.org/docs/Web/HTML/Element/link)
36+
-[How cascading works](https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance)
37+
-[Selectors](https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Selectors)
38+
-[Cheat sheet](https://frontend30.com/css-selectors-cheatsheet/)
39+
-[Layout techniques](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Introduction)
40+
-[Beginner's guide to media queries](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Media_queries)
41+
42+
##JavaScript
43+
44+
-[Overview](https://developer.mozilla.org/docs/Web/javascript)
45+
-[`script` element](https://developer.mozilla.org/docs/Web/HTML/Element/script)
46+
-[Client-side APIs](https://developer.mozilla.org/docs/Learn/JavaScript/Client-side_web_APIs/Introduction)
47+
-[`DOMContentLoaded` event](https://developer.mozilla.org/docs/Web/API/Document/DOMContentLoaded_event)
48+
-[List of Web APIs](https://developer.mozilla.org/docs/Web/API)
49+
-[Web Storage](https://developer.mozilla.org/docs/Web/API/Web_Storage_API)
50+
- localStorage
51+
- Geolocation
52+
-[API](https://developer.mozilla.org/docs/Web/API/Geolocation_API)
53+
-[`getCurrentPosition` method](https://developer.mozilla.org/docs/Web/API/Geolocation/getCurrentPosition)
54+
-[`GeolocationPosition` interface](https://developer.mozilla.org/docs/Web/API/GeolocationPosition)
55+
-[`GeolocationCoordinates` interface](https://developer.mozilla.org/docs/Web/API/GeolocationCoordinates)
56+
57+
##Tools
58+
59+
-[Visual Studio Code](https://code.visualstudio.com/)
60+
-[Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)
61+
-[Can I Use](https://caniuse.com/)
62+
-[HTML Validator](https://validator.w3.org/)
63+
-[CSS Validator](http://www.css-validator.org/)
64+
-[20 Best Emmet Tips to Help You Code HTML/CSS Crazy Fast](https://beebom.com/best-emmet-tips-to-code-htmlcss-fast/)

‎site.css

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
* {
2+
margin:0;
3+
}
4+
5+
html,
6+
body {
7+
height:100%;
8+
}
9+
10+
body {
11+
font-family: Arial, Helvetica, sans-serif;
12+
background-color:#999;
13+
}
14+
15+
p {
16+
margin:.5em0.5em0;
17+
}
18+
19+
header {
20+
display: block;
21+
position: fixed;
22+
top:0;
23+
left:0;
24+
width:100%;
25+
background-color:#a493c0;
26+
padding:10px;
27+
}
28+
29+
nava:visited,
30+
nava:link {
31+
color:#fff;
32+
text-decoration: none;
33+
}
34+
35+
nav>ul {
36+
display: inline;
37+
padding:0;
38+
}
39+
40+
nav>ul>li {
41+
display: inline-block;
42+
list-style: none;
43+
margin:05px05px;
44+
}
45+
46+
main {
47+
display: block;
48+
background-image:url("images/background.png");
49+
padding-top:3em;
50+
padding-bottom:3em;
51+
min-height:85%;
52+
}
53+
54+
footer {
55+
padding:15px;
56+
}
57+
58+
aside,
59+
article {
60+
padding:2em;
61+
}
62+
63+
aside {
64+
text-align: center;
65+
}
66+
67+
article {
68+
width:75%;
69+
}
70+
71+
.columns {
72+
display: flex;
73+
}
74+
75+
@mediaonly screenand (min-width:768px) {
76+
main {
77+
display: flex;
78+
}
79+
aside {
80+
margin-left:2%;
81+
}
82+
.columns-desktop {
83+
display: flex;
84+
}
85+
}
86+
87+
88+
/* Pies */
89+
90+
.pie {
91+
width:200px;
92+
padding:10px;
93+
margin:10px;
94+
background-color:#fff;
95+
border: solid1px#ccc;
96+
}
97+
98+
.pieimg {
99+
width:100%;
100+
}
101+
102+
.pie .title {
103+
font-weight: bold;
104+
}
105+
106+
.pie .columns {
107+
width:100%;
108+
}
109+
110+
.pie .price {
111+
text-align: right;
112+
}
113+
114+
.pie .columnsdiv {
115+
width:50%;
116+
}
117+
118+
.piebutton {
119+
background-color:#f6aeae;
120+
padding:10px;
121+
border: solid1px#f6aeae;
122+
border-radius:3px;
123+
color:#fff;
124+
}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp