-
Notifications
You must be signed in to change notification settings - Fork 11
/
Copy pathtemplate.html
133 lines (109 loc) · 4.9 KB
/
template.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html class="no-js" lang="">
<head>
<!-- Meta tags. Specify text-encoding, site info, site size -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="<<YOURNAME>>'s Byte Club Member Page!">
<meta name="keywords" content="Mundelein,High,School,Programming,Byte,Club,Farmer">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Site title. Shows up on tab. -->
<title>***YOUR NAME*** - Byte Club Member</title>
<!-- Stylesheets. Specify how the content of the site should look and feel, e.g. { color: red; font-family: Comic Sans MS; } -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<!--This is where the main part of your webpage is held, inside this handy container -->
<div class="container">
<div >
<img class="avatar" src="https://upload.wikimedia.org/wikipedia/commons/f/f3/Nicolas_Cage_-_66%C3%A8me_Festival_de_Venise_%28Mostra%29.jpg" alt="YOURNAME's avatar"/>
<img src=""/>
</div>
<!--The main membership info goes here-->
<div class="member-info">
<h3>EXAMPLE MEMBER</h3>
<h5><a href="https://www.mhsbyte.org">Byte Club</a> member since 201#</h5>
<div class='teams'>
<p>Member of Python, HTML/CSS, ProcessingJS Team</p>
</div>
<div class="quote">
<h5>"Comic Sans is just the worst." - Abraham Lincoln (probably)</h5>
</div>
<div class="about-me">
<h5>About Me</h5>
<p>Here's information about me but it's mostly gibberish. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sapien mauris, blandit vel ipsum sit amet, dictum ornare turpis. Nunc vitae urna vitae odio fringilla rutrum. Praesent sit amet lobortis velit, eget consequat diam. Integer vitae lectus massa. Ut rhoncus, urna mollis tempor ornare, ante erat commodo lorem, vitae ultricies lectus mi a tortor. Nullam tincidunt dui non vehicula tristique. Sed at odio in risus rhoncus feugiat.</p>
<p>Here's stuff I'm interested in</p>
<ul>
<li>Coding</li>
<li>Memes</li>
<li>CVS Pharmacy</li>
<li>Smooth Jazz</li>
<li>Tacos</li>
</ul>
</div>
</div>
<!--Here's a container to hold your 'cards' about your projects!-->
<div class="projects-container">
<!--Here are the actual cards!-->
<div class="project-card">
<h4>Project #1 Title</h4>
<p>Brief Description about project 1</p>
<a href="#" class='project-button'>See project 1</a>
</div>
<div class="project-card">
<h4>Project #2 Title</h4>
<p>Brief Description about project 2</p>
<a href="#" class='project-button'>See project 2</a>
</div>
<div class="project-card">
<h4>Project #3 Title</h4>
<p>Brief Description about project 3</p>
<a href="#" class='project-button'>See project 3</a>
</div>
</div>
<hr>
<footer>Take me back to <a href="https://www.mhsbyte.org">Byte Club</a></footer>
</div>
<script>
//Now I'm writing javascript, right in with my HTML!
//This is called in-line script and it's not really a great idea, but it's a great way to get started.
</script>
<style>
/*Now I'm writing CSS, right in with my HTML!
This is called in-line styling and it's also not a great idea, but we'll learn how to do other stuff with it later
*/
body{
text-align:CENTER;
background-color:#26959A;
font-family: sans-serif;
}
.container{
width:700px;
margin-left: auto;
margin-right: auto;
background-color:#fff;
padding:15px;
border-radius:10px;
}
.about-me{
text-align:left;
}
.project-card {
border: solid 1px black;
border-radius: 5px;
margin-top:10px;
padding:5px;
}
.avatar {
width:200px;
height:200px;
border-radius:100px;
overflow: auto;
}
.quote {
font-family:cursive;
color:#cc2029;
}
</style>
</body>
</html>