-
Notifications
You must be signed in to change notification settings - Fork 155
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
Cheetahs - Alyssa R. #112
base: master
Are you sure you want to change the base?
Cheetahs - Alyssa R. #112
Changes from all commits
c04116b
0e6ce90
7a4a8b1
375fee5
bef46a2
9512d73
5c25b81
e7a0245
6546a6f
0510f4d
445cc12
26ee4f8
202a53b
7aa2401
059efc8
fb94278
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -4,9 +4,41 @@ | |
<meta charset="UTF-8"> | ||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<title>Document</title> | ||
<title>a. reyes</title> | ||
<link rel="stylesheet" href="/styles/style.css"> | ||
<link rel="stylesheet" href="/styles/index.css"> | ||
</head> | ||
<body> | ||
|
||
<section class="page"> | ||
Comment on lines
11
to
+12
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The
|
||
<!-- Header and Navigation --> | ||
<div id="menu_container"> | ||
<div class="menu_padding"> | ||
<header class="header_container"> | ||
<div id="head_logo"> | ||
<h1><a href="index.html">Alyssa Reyes</a></h1> | ||
</div> | ||
<nav class="nav"> | ||
<ul class="menu_list"> | ||
<li><a href="about.html">My Story</a></li> | ||
<li><a href="portfolio.html">Projects</a></li> | ||
<li><a href="#">GitHub</a></li> | ||
<li><a href="#">Twitter</a></li> | ||
</ul> | ||
|
||
</nav> | ||
</header> | ||
</div> | ||
</div> | ||
<!-- Content --> | ||
<div class="container"> | ||
<div class="title">Web developer and designer.</div> | ||
<p class="info">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pulvinar erat dui, et dictum justo interdum quis. Nunc id sapien sed tortor scelerisque cursus. Nulla efficitur vel orci quis pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis congue dui, a interdum tellus.</p> | ||
</div> | ||
<!-- Footer --> | ||
<footer> | ||
<p id="disclaimer">Designed and built by Alyssa Reyes</p> | ||
</footer> | ||
</section> | ||
</body> | ||
</html> | ||
</html> | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
#photo-container { | ||
max-width: 60%; | ||
} | ||
|
||
.container ul { | ||
display: flex; | ||
flex-wrap: nowrap; | ||
} | ||
Comment on lines
+5
to
+8
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 👍 |
||
|
||
li { | ||
list-style: none; | ||
text-align: center; | ||
display: inline; | ||
} | ||
|
||
li img { | ||
max-width: 80%; | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
.container .title { | ||
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; | ||
font-weight: normal; | ||
color: rgb(147, 147, 147); | ||
font-size: 30px; | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,43 @@ | ||
.portfolio { | ||
display: grid; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Nice use of grid! |
||
height: 100%; | ||
grid-template-rows: repeat(2, 1fr); | ||
grid-template-columns: repeat(2, 1fr); | ||
grid-gap: 20px; | ||
width: 90%; | ||
} | ||
|
||
.portfolio-item { | ||
border: solid; | ||
border-color: rgb(147, 147, 147); | ||
} | ||
|
||
.portfolio-item:hover { | ||
border-color: #75bedb; | ||
} | ||
|
||
.portfolio-item h2 { | ||
text-align: center; | ||
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; | ||
font-size: 18px; | ||
color: rgb(130, 129, 129); | ||
} | ||
|
||
.portfolio-item a { | ||
color: rgb(130, 129, 129); | ||
text-decoration: none; | ||
} | ||
|
||
.portfolio-item a:hover { | ||
background-color: #75bedb; | ||
color: white; | ||
padding: .5em; | ||
} | ||
.portfolio-item p { | ||
text-align: center; | ||
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; | ||
font-size: 14px; | ||
color: rgb(147, 147, 147); | ||
padding: .2em; | ||
} | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,96 @@ | ||
body .page { | ||
min-height: 100%; | ||
display: flex; | ||
flex-direction: column; | ||
justify-content: flex-start; | ||
} | ||
|
||
#menu_container { | ||
position: static; | ||
width: 100%; | ||
margin:auto; | ||
text-align: center; | ||
background-color: white; | ||
} | ||
|
||
#menu_container .menu_padding { | ||
padding: 1.5em 2em; | ||
} | ||
|
||
#header_container { | ||
display: block; | ||
} | ||
|
||
#head_logo { | ||
float: left; | ||
padding-right: 40px; | ||
width: 40%; | ||
max-width: 430px; | ||
text-align: left; | ||
min-height: 30px; | ||
max-height: 150px; | ||
box-sizing: border-box; | ||
} | ||
#head_logo h1 a { | ||
display: inline-block; | ||
text-decoration: none; | ||
color: #75bedb; | ||
font-family: 'Courier New', Courier, monospace; | ||
font-size: 32px; | ||
font-weight: bolder; | ||
} | ||
|
||
.nav { | ||
text-align: right; | ||
box-sizing: border-box; | ||
max-width: 900px; | ||
width: 60%; | ||
overflow: hidden; | ||
} | ||
|
||
ul.menu_list { | ||
list-style: none; | ||
vertical-align: baseline; | ||
margin: 0; | ||
padding: 30px; | ||
} | ||
|
||
ul.menu_list > li { | ||
display: inline-block; | ||
} | ||
|
||
.menu_list li a { | ||
font-size: 14px; | ||
font-family: 'Courier New', Courier, monospace; | ||
color: black; | ||
padding: .7em; | ||
display: block; | ||
line-height: .3em; | ||
text-decoration: none; | ||
} | ||
|
||
.menu_list li a:hover { | ||
background-color: #75bedb; | ||
color: white; | ||
} | ||
|
||
.container { | ||
width: 100%; | ||
margin:auto; | ||
padding: 2em; | ||
} | ||
|
||
.container .info { | ||
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; | ||
font-size: 14px; | ||
color: rgb(130, 129, 129); | ||
max-width: 60%; | ||
line-height: 1.5em; | ||
} | ||
|
||
#disclaimer { | ||
font-size: 12px; | ||
font-family: 'Courier New', Courier, monospace; | ||
text-align: center; | ||
padding: 2em; | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I recommend using a semantic tag like
<main>
here: