Skip to content

Commit d0ea49c

Browse files
author
Bee Crouch
committed
Semantic Tags and Media Queries
Finishing up HTML, Semantic Markup, and Attempting to link a Google Font.
1 parent adab5a2 commit d0ea49c

File tree

3 files changed

+87
-60
lines changed

3 files changed

+87
-60
lines changed

.DS_Store

0 Bytes
Binary file not shown.

css/styles.css

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,39 @@
1-
/*Basic Styles*/
2-
1+
/*Base Styles*/
32
* {
4-
box-sizing: border-box
3+
box-sizing: border-box;
54
}
65

76
body {
8-
7+
font-family: 'Raleway', sans-serif;
98

109
}
1110

12-
/*Link Styles*/
1311

14-
a {
1512

1613

17-
}
14+
/* ===== Base Layout Styles=====*/
1815

19-
a:hover {
2016

17+
/*Navigation*/
2118

22-
}
2319

2420

21+
/* =====Media Queries=====*/
2522

26-
/* Media Queries*/
2723
/* Note: Hide Footer Nav on Mobile - only display "back to top" */
2824

29-
@media [min-width=] {
30-
31-
25+
@media (min-width: 769px) {
26+
.container {
27+
width: 70%;
28+
max-width: 1000px;
29+
margin:0 auto;
30+
}
3231

3332

3433
}
3534

36-
@media [min-width=] {
35+
@media (min-width: 1024px) {
36+
3737

3838

3939

index.html

Lines changed: 73 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -4,64 +4,91 @@
44

55
<head>
66
<link rel="stylesheet" href="styles.css">
7+
<link href="https://fonts.googleapis.com/css2?family=Raleway" rel="stylesheet">
78
<meta charset="UTF-8">
89
<meta name="viewport" content="width=device-width, initial-scale=1.0">
910
<title>My Portfolio</title>
1011
</head>
1112

12-
<!-- BODY OF PROJECT-->
1313

1414
<body>
15-
16-
<!-- Main Nav-->
17-
18-
<nav class="main-nav">
19-
<ul>
20-
<li class="name" href="#">Bee Crouch</li>
21-
<li><a>Home</a></li>
22-
<li><a>Portfolio</a></li>
23-
<li><a>Contact</a></li>
24-
25-
</ul>
26-
</nav>
27-
28-
<!--Header -->
29-
<header>
30-
<img src="images/responsive-layout-profile.png" alt="A cartoon portrait of a person." class="img">
31-
<p>Hi! I'm a front-end developer who loves responsive design and css. I recently finished a degree in front-end web development at Treehouse and am excited to put all my skills to use!</p>
32-
</header>
33-
34-
<!--Main Content Area-->
35-
<main>
36-
<section id="portfolio">
37-
38-
39-
</section>
40-
41-
42-
</main>
43-
44-
45-
<!--Contact-->
46-
<section id="contact">
47-
<p>If you're interested in chatting or want more information about what I've been working on, I'd love to hear from you!</p>
48-
<p>Phone +1 (111) 555-1234</p>
49-
<p>Email email@yoursite.com</p>
50-
</section>
51-
15+
<!-- HEADER/MAIN NAV-->
16+
17+
<header id="top" class="main-header">
18+
<div class="container">
19+
<h1 class="name" href="#">Bee Crouch</h1>
20+
<nav>
21+
<ul class="main-nav">
22+
<li><a href="#">Home</a></li>
23+
<li><a href="#portfolio">Portfolio</a></li>
24+
<li><a href="#contact">Contact</a></li>
25+
26+
</ul>
27+
</nav>
28+
</div>
29+
</header>
30+
31+
<!--PAGE CONTENT-->
32+
<div class="container">
33+
<main>
34+
<!-- Intro Top of Page-->
35+
<section id="intro">
36+
<img src="images/responsive-layout-profile.png" alt="A cartoon portrait of a person." class="intro-img">
37+
<p>Hi! I'm a front-end developer who loves responsive design and css. I recently finished a degree in front-end web development at Treehouse and am excited to put all my skills to use!</p>
38+
</section>
39+
40+
<!-- All the Portfolio Goodness-->
41+
<section id="portfolio">
42+
<h2>Portfolio</h2>
43+
<div>
44+
45+
<img src="images/portfolio-1.png">
46+
<headline>Marketing Page</headline>
47+
<p>This project shows the front page of a marketing website meant for a specific business I'm interested in.</p>
48+
49+
<img src="images/portfolio-2.png">
50+
<headline>Search Page</headline>
51+
<p>This project searches through a specific database to find information that the user is trying to look up.</p>
52+
53+
<img src="images/portfolio-3.png">
54+
<headline>Travel App</headline>
55+
<p>This project compares travel times based on different transportation methods and tells you the best one.</p>
56+
57+
<img src="images/portfolio-4.png">
58+
<headline>Map of Favorite Spots</headline>
59+
<p>This project uses mapping apis to plot points for my favorite spots in the city for a do-it yourself walking tour.</p>
60+
61+
<img src="images/portfolio-5.png">
62+
<headline>Photo Gallery</headline>
63+
<p>This project shows pictures from a recent trip to the view and allows them to easily navigate through photos.</p>
64+
65+
<img src="images/portfolio-6.png">
66+
<headline>Calculator</headline>
67+
<p>Someone can enter in the numbers they want, and press the big blue button and get the result.</p>
68+
69+
</div>
70+
71+
</section>
72+
73+
<!--Contact-->
74+
<section id="contact">
75+
<h2>Contact</h2>
76+
<p>If you're interested in chatting or want more information about what I've been working on, I'd love to hear from you!</p>
77+
<p>Phone +1 (111) 555-1234</p>
78+
<p>Email email@yoursite.com</p>
79+
</section>
80+
</main>
81+
</div>
5282
</body>
5383

5484
<!-- FOOTER -->
5585
<footer>
56-
<ul>
57-
<li class="name" href="#">Bee Crouch</li>
58-
<li><a>Home</li>
59-
<li>Portfolio</li>
60-
<li>Contact</li>
86+
<h1 class="name" href="#">Bee Crouch</h1>
87+
<ul class="footer-nav">
88+
<li><a href="#top">Home</a></li>
89+
<li><a href="#portfolio">Portfolio</a></li>
90+
<li><a href="#contact">Contact</a></li>
6191
</ul>
62-
63-
64-
6592
</footer>
6693

6794
</html>

0 commit comments

Comments
 (0)