Octavia/odin-recipes
Watch
1
0
Fork
You've already forked odin-recipes
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Change header and link fonts

Browse source
This commit is contained in:
lolabird 2023-08-18 20:05:25 -06:00
commit 1ab7c14f65
5 changed files with 26 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

1
index.html
View file

@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Recipes</title>
<link rel="stylesheet" href="style.css" />
<link href='https://fonts.googleapis.com/css?family=Alegreya Sans SC' rel='stylesheet'>
</head>
<body>
<h1>Odin Recipes</h1>

5
recipes/avocado-toast.html
View file

@ -5,18 +5,19 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Recipes - Avocado Toast</title>
<link rel="stylesheet" href="../style.css" />
<link href='https://fonts.googleapis.com/css?family=Alegreya Sans SC' rel='stylesheet'>
</head>
<body>
<h1>Odin Recipes</h1>
<h2>Avocado Toast</h2>
<ul class="recipe-menu">
<li><a href="../index.html">Home</a></li>
<li><a href="./greenbean-casserole.html"> Green Bean Casserole</a></li>
<li><a href="./avocado-toast.html">Avocado Toast</a></li>
<li><a href="./stove-popped-popcorn.html">Stove Popped Popcorn</a></li>
</ul>
<h2>Avocado Toast</h2>
<img src="../images/avocado-toast.jpg" alt="Avocado Toast">
<h3>Description</h3>

4
recipes/greenbean-casserole.html
View file

@ -5,11 +5,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Recipes - Green Bean Casserole</title>
<link rel="stylesheet" href="../style.css" />
<link href='https://fonts.googleapis.com/css?family=Alegreya Sans SC' rel='stylesheet'>
</head>
<body>
<h1>Odin Recipes</h1>
<h2>Green Bean Casserole</h2>
<ul class="recipe-menu">
<li><a href="../index.html">Home</a></li>
@ -17,6 +16,7 @@
<li><a href="./avocado-toast.html">Avocado Toast</a></li>
<li><a href="./stove-popped-popcorn.html">Stove Popped Popcorn</a></li>
</ul>
<h2>Green Bean Casserole</h2>
<img src="../images/GreenBeanCasserole.jpg" alt="Green Bean Casserole">
<h3>Description</h3>

4
recipes/stove-popped-popcorn.html
View file

@ -5,12 +5,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Recipes - Stove Popped Popcorn</title>
<link rel="stylesheet" href="../style.css" />
<link href='https://fonts.googleapis.com/css?family=Alegreya Sans SC' rel='stylesheet'>
</head>
<body>
<h1>Odin Recipes</h1>
<h2>Stove Popped Popcorn</h2>
<ul class="recipe-menu">
<li><a href="../index.html">Home</a></li>
<li><a href="./greenbean-casserole.html"> Green Bean Casserole</a></li>
@ -18,6 +17,7 @@
<li><a href="./stove-popped-popcorn.html">Stove Popped Popcorn</a></li>
</ul>
<h2>Stove Popped Popcorn</h2>
<img src="../images/popcorn.jpg" alt="Stove Popped Popcorn">
<h3>Description</h3>

23
style.css
View file

@ -1,7 +1,7 @@
body{
max-width: 60%;
margin: auto;
background-color: rgb(203, 247, 203);
background-color: rgb(220, 248, 220);
}
img{
@ -9,21 +9,34 @@ img{
height: auto;
}
ul{
list-style-type: none;
}
a{
text-decoration: none;
}
h1, h2, h3, h4, h5, h6, .recipe-menu{
font-family: 'Alegreya Sans SC', sans-serif;
}
h1{
font-size: 50px;
}
h2{
font-size: 40px;
}
h3{
font-size: 30px;
}
.recipe-menu{
padding: 0;
border: 5px solid green;
text-align: center;
list-style-type: none;
width: fit-content;
margin: auto;
}
.recipe-menu li{
margin: 8px;
display: inline-block;
font-size: 20px;
}