Skip to content

Commit 9d05775

Browse files
acmarsalaacmarsala
committed
Added name to HTML head
1 parent 5c42901 commit 9d05775

File tree

2 files changed

+251
-0
lines changed

2 files changed

+251
-0
lines changed

‎index.html

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Mockup Resources</title>
6+
<!-- Alyssa Marsala -->
7+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700">
8+
<link href="styles.css" rel="stylesheet">
9+
</head>
10+
<body>
11+
<header>
12+
<h1>Mockup Resources for GIT Students</h1>
13+
</header>
14+
<main>
15+
<h2 class="sr-only">Links Included Here by Topic</h2>
16+
<section>
17+
<h3>Device Mockups</h3>
18+
<a href="https://www.mockupworld.co/free/category/imac/" target="_blank">Mockup World - Mac Mockups</a>
19+
<a href="https://www.invisionapp.com/inside-design/free-device-mockups/" target="_blank">InVision - 23 Free Device Mockups</a>
20+
<a href="https://www.freepik.com/free-photos-vectors/device-mockup" target="_blank">Freepik Device Mockups</a>
21+
<a href="https://www.figma.com/community/file/786708730400780813">Figma: 100 Device Mockups</a>
22+
</section>
23+
<section>
24+
<h3>Poster/Photo Mockups</h3>
25+
<a href="https://www.mockupworld.co/free/category/posters-pictures/" target="_blank">Mockup World - Posters &amp; Pictures</a>
26+
<a href="https://www.anthonyboyd.graphics/poster/" target="_blank">Anthony Boyd - Poster Mockups</a>
27+
<a href="https://www.freepik.com/free-photos-vectors/poster-mockup" target="_blank">Freepik - Poster Mockups</a>
28+
<a href="https://mockuptree.com/free/category/poster-mockup/" target="_blank">MockupTree - Poster Mockups</a>
29+
</section>
30+
<section>
31+
<h3>Book/Print Mockups</h3>
32+
<a href="https://www.mockupworld.co/free/category/paper-books/" target="_blank">Mockup World - Paper and Books</a>
33+
<a href="https://www.mockupworld.co/free/category/packaging/" target="_blank">Mockup World - Packaging</a>
34+
<a href="https://www.mockupworld.co/free/category/food-beverages/" target="_blank">Mockup World - Food and Beverages</a>
35+
<a href="https://unblast.com/mockups/books/" target="_blank">Unblast - Book Mockups</a>
36+
</section>
37+
<section>
38+
<h3>Clothing/Accessory Mockups</h3>
39+
<a href="https://www.mockupworld.co/free/category/fashion-apparel/" target="_blank">Mockup World - Fashion and Apparel</a>
40+
<a href="https://www.freepik.com/free-photos-vectors/clothing-mockup" target="_blank">Freepik - Clothing &amp; Accessories</a>
41+
</section>
42+
<section class="span">
43+
<h3>Mixed and Miscellaneous Mockup Types</h3>
44+
<a href="https://graphicburger.com/mock-ups/" target="_blank">Graphic Burger</a>
45+
<a href="https://www.designdb.co/mockups" target="_blank">Design DB</a>
46+
<a href="https://www.mockupworld.co/free/tag/animated/" target="_blank">Mockup World - Animated Mockups</a>
47+
<a href="https://www.anthonyboyd.graphics/mockups/" target="_blank">Anthony Boyd</a>
48+
<a href="https://www.pixeden.com/psd-mock-up-templates" target="_blank">Pixeden</a>
49+
<a href="https://freebiesbug.com/psd-freebies/mockups/" target="_blank">Freebies bug</a>
50+
<a href="https://themockup.club/" target="_blank">The Mockup Club</a>
51+
<a href="https://www.free-mockup.com/" target="_blank">Free Mockups</a>
52+
<a href="https://www.adobe.com/products/dimension.html" target="_blank">Create Mockups with Adobe Dimension</a>
53+
<a href="https://mediamodifier.com/mockup-api" target="_blank">MediaModifier</a>
54+
</section>
55+
</main>
56+
<footer>
57+
<p>Questions? <a href="mailto:[email protected]">Email Prof. Barnett</a></p>
58+
</footer>
59+
</body>
60+
</html>

‎styles.css

Lines changed: 191 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,191 @@
1+
/* http://meyerweb.com/eric/tools/css/reset/
2+
v2.0 | 20110126
3+
License: none (public domain)
4+
*/
5+
6+
html, body, div, span, applet, object, iframe,
7+
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
8+
a, abbr, acronym, address, big, cite, code,
9+
del, dfn, em, img, ins, kbd, q, s, samp,
10+
small, strike, strong, sub, sup, tt, var,
11+
b, u, i, center,
12+
dl, dt, dd, ol, ul, li,
13+
fieldset, form, label, legend,
14+
table, caption, tbody, tfoot, thead, tr, th, td,
15+
article, aside, canvas, details, embed,
16+
figure, figcaption, footer, header, hgroup,
17+
menu, nav, output, ruby, section, summary,
18+
time, mark, audio, video {
19+
margin: 0;
20+
padding: 0;
21+
border: 0;
22+
font-size: 100%;
23+
font: inherit;
24+
vertical-align: baseline;
25+
}
26+
/* HTML5 display-role reset for older browsers */
27+
article, aside, details, figcaption, figure,
28+
footer, header, hgroup, menu, nav, section {
29+
display: block;
30+
}
31+
body {
32+
line-height: 1;
33+
}
34+
ol, ul {
35+
list-style: none;
36+
}
37+
blockquote, q {
38+
quotes: none;
39+
}
40+
blockquote:before, blockquote:after,
41+
q:before, q:after {
42+
content: '';
43+
content: none;
44+
}
45+
table {
46+
border-collapse: collapse;
47+
border-spacing: 0;
48+
}
49+
50+
/* Code written by Jessica Barnett */
51+
/* CUSTOM STYLES */
52+
:root{
53+
--red: #bf3636;
54+
--orange: #d04936;
55+
--yellow: #ffcc14;
56+
--green: #5a5a23;
57+
--blue: #303464;
58+
--lighter-blue: #414686;
59+
--pink: #fe4b7a;
60+
--purple: #741a60;
61+
--brown: #40130e;
62+
--light-gray: #eaeaea;
63+
--med-gray: #555;
64+
--dark-gray: #222;
65+
font-size: 16px;
66+
}
67+
68+
body{
69+
background-color: var(--light-gray);
70+
font-family: Montserrat, sans-serif;
71+
line-height: 1.3;
72+
}
73+
74+
header, footer{
75+
padding: 2rem;
76+
background-color: var(--blue);
77+
color: white;
78+
}
79+
80+
header{
81+
box-shadow: 3px 3px 3px #aaa;
82+
}
83+
84+
footer{
85+
box-shadow: -3px -3px 3px #aaa;
86+
}
87+
88+
main{
89+
width: calc(100% - 2rem);
90+
max-width: 1200px;
91+
margin: 2rem auto;
92+
padding: 1rem;
93+
display: grid;
94+
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
95+
grid-gap: 1rem;
96+
}
97+
98+
h1{
99+
font-size: 2rem;
100+
}
101+
102+
h1, h2, h3{
103+
text-align: center;
104+
margin: 0.25rem 0;
105+
font-weight: bold;
106+
}
107+
/*
108+
h2{
109+
grid-column: 1/-1;
110+
font-size: 1.4rem;
111+
background-color: white;
112+
padding: 1rem;
113+
box-shadow: 5px 5px 5px #aaa;
114+
} */
115+
116+
h3{
117+
font-size: 1.2rem;
118+
}
119+
120+
.sr-only {
121+
position: absolute;
122+
left: -10000px;
123+
top: auto;
124+
width: 1px;
125+
height: 1px;
126+
overflow: hidden;
127+
}
128+
129+
section{
130+
width: calc(100% - 2rem);
131+
min-height: 300px;
132+
margin: 0 auto;
133+
background-color: white;
134+
box-shadow: 5px 5px 5px #aaa;
135+
padding: 1rem;
136+
}
137+
138+
a{
139+
display: block;
140+
font-size: 1.1rem;
141+
padding: 0.75rem;
142+
margin: 1rem 0;
143+
background-color: var(--blue);
144+
color: white;
145+
text-decoration: none;
146+
box-shadow: 3px 3px 6px var(--med-gray);
147+
}
148+
149+
a:hover{
150+
background-color: var(--lighter-blue);
151+
box-shadow: 6px 6px 10px var(--med-gray);
152+
}
153+
154+
.span{
155+
grid-column: 1/-1;
156+
display: grid;
157+
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
158+
grid-column-gap: 1rem;
159+
width: calc(100% - 2rem);
160+
max-width: calc(1200px - 4rem);
161+
}
162+
163+
.span h3{
164+
grid-column: 1/-1;
165+
}
166+
167+
.span a{
168+
margin: 0.5rem 0;
169+
}
170+
171+
p{
172+
padding: 1em;
173+
font-size: 1.1em;
174+
}
175+
176+
footer a{
177+
display: inline;
178+
box-shadow: none;
179+
background-color: var(--blue);
180+
}
181+
182+
footer a:hover{
183+
text-decoration: underline;
184+
box-shadow: none;
185+
}
186+
187+
@media screen and (min-width: 964px){
188+
.span{
189+
grid-column: 2/-1;
190+
}
191+
}

0 commit comments

Comments
 (0)