THIS IS A CAFE MENU PAGE
trying to make the "Est. 2020" text italicized by creating an established class selector and giving it the font-style property with the value italic.
THIS is the html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cafe Menu</title>
<link href="styles.css" rel="stylesheet"/>
</head>
<body>
<div class="menu">
<main>
<h1>CAMPER CAFE</h1>
<p>Est. 2020</p>
<section>
<h2>Coffee</h2>
<article class="item">
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
</article>
<article class="item">
<p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
</article>
<article class="item">
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
</article>
<article class="item">
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
</article>
<article class="item">
<p class="flavor">Mocha</p><p class="price">4.50</p>
</article>
</section>
<section>
<h2>Desserts</h2>
<article class="item">
<p class="dessert">Donut</p><p class="price">1.50</p>
</article>
<article class="item">
<p class="dessert">Cherry Pie</p><p class="price">2.75</p>
</article>
<article class="item">
<p class="dessert">Cheesecake</p><p class="price">3.00</p>
</article>
<article class="item">
<p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
</article>
</section>
</main>
</div>
</body>
</html>
THIS IS THE CSS CODE
body {
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
font-family: sans-serif;
}
.p-established {
font-style: italic;
}
h1, h2, p {
text-align: center;
}
.menu {
width: 80%;
background-color: burlywood;
margin-left: auto;
margin-right: auto;
padding: 20px;
max-width: 500px;
}
h1, h2 {
font-family: Impact, serif;
}
.item p {
display: inline-block;
}
.flavor, .dessert {
text-align: left;
width: 75%;
}
.price {
text-align: right;
width: 25%
}
trying to make the "Est. 2020" text italicized by creating an established class selector and giving it the font-style property with the value italic.
You need to edit your HTML to add a class to <p>Est. 2020</p> element.
It needs to be <p class="established">Est. 2020</p> for you to be able to customize it with CSS. The moment it has the .established class then you can add
.established {
font-style: italic;
}
If you are working only with CSS and can't change the HTML code then let me know.
//////////////////////////
body {
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
font-family: sans-serif;
}
h1,
h2,
p {
text-align: center;
}
.menu {
width: 80%;
background-color: burlywood;
margin-left: auto;
margin-right: auto;
padding: 20px;
max-width: 500px;
}
h1,
h2 {
font-family: Impact, serif;
}
.item p {
display: inline-block;
}
.flavor,
.dessert {
text-align: left;
width: 75%;
}
.price {
text-align: right;
width: 25%
}
.established {
font-style: italic;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cafe Menu</title>
<link href="styles.css" rel="stylesheet" />
</head>
<body>
<div class="menu">
<main>
<h1>CAMPER CAFE</h1>
<p class="established">Est. 2020</p>
<section>
<h2>Coffee</h2>
<article class="item">
<p class="flavor">French Vanilla</p>
<p class="price">3.00</p>
</article>
<article class="item">
<p class="flavor">Caramel Macchiato</p>
<p class="price">3.75</p>
</article>
<article class="item">
<p class="flavor">Pumpkin Spice</p>
<p class="price">3.50</p>
</article>
<article class="item">
<p class="flavor">Hazelnut</p>
<p class="price">4.00</p>
</article>
<article class="item">
<p class="flavor">Mocha</p>
<p class="price">4.50</p>
</article>
</section>
<section>
<h2>Desserts</h2>
<article class="item">
<p class="dessert">Donut</p>
<p class="price">1.50</p>
</article>
<article class="item">
<p class="dessert">Cherry Pie</p>
<p class="price">2.75</p>
</article>
<article class="item">
<p class="dessert">Cheesecake</p>
<p class="price">3.00</p>
</article>
<article class="item">
<p class="dessert">Cinnamon Roll</p>
<p class="price">2.50</p>
</article>
</section>
</main>
</div>
</body>
</html>
Related
I am doing a basic html course on freecodecamp and I made this work properly. When i tried doing some changes on my own and adding different stuff to it it acted weird. I then decided to delete all my changes and re-launch but then it just didn't look the same as before. I have tried messing with different setups for my articles, tried adding new sections, articles and paragraphs but to me, it seems as if the code doesn't act like it did before. I have not just double og triple but quintuple checked my code to make sure it's identical to the one on freecodecamp and it IS, but it doesn't look the same at all. I don't know if I'm missing something, but if someone could figure out where the problem occurs, maybe i could stop banging my head against my table.
I want the paragraphs to be on the same line and I want my articles to be separated on each line.
Result:
h1,
p,
h2 {
text-align: center;
}
.menu {
width: 80%;
background-color: cornflowerblue;
margin-left: auto;
margin-right: auto;
padding: 20px;
}
body {
background-image: url("Baggrund_2.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
font-family: sans-serif;
}
.på_linje {
display: inline-block;
}
.smag,
.sandwich {
text-align: left;
width: 75%;
}
.pris {
text-align: right;
width: 25%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<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>ProteinRiget</title>
<link rel="stylesheet" href="style.css"
</head>
<body>
<div class="menu">
<header>
<h1>ProteinRiget</h1>
<p>Est. 2027</p>
</header>
</body>
<main>
<section>
<h2>Shakes & Smoothies</h2>
<article class="på_linje">
<p class="smag">John F. Kennedy shake</p>
<p class="pris">50,-</p>
</article>
<article class="på_linje">
<p class="smag">John snow shake</p>
<p class="pris">50,-</p>
</article>
<article class="på_linje">
<p class="smag">John Wayne shake</p>
<p class="pris">50,-</p>
</article>
<article class="på_linje">
<p class="smag">John Cena shake</p>
<p class="pris">50,-</p>
</article>
<article class="på_linje">
<p class="smag">John Mayer shake</p>
<p class="pris">50,-</p>
</article>
</section>
<section>
<h2>Sandwiches</h2>
<article class="på_linje">
<p class="sandwich">John(ny) Depperoni</p>
<p class="pris">60,-</p>
</article>
<article class="på_linje">
<p class="sandwich">John(ny) Bravoioli</p>
<p class="pris">65,-</p>
</article>
<article class="på_linje">
<p class="sandwich">John(ny) Knoxckle</p>
<p class="pris">50,-</p>
</article>
<article class="på_linje">
<p class="sandwich">John(ny) Deluxe</p>
<p class="pris">70,-</p>
</article>
</section>
</div>
</main>
</html>
I want the paragraphs to be on the same line and I want my articles to be separated on each line.
For this, your paragraph needs to be inline-block and the article should be block.
I am very new to this so please be kind :)
I am creating a portfolio page with an image gallery, with a header on top and a footer at the bottom. As soon as I entered the code for a gallery, my footer moved - and now I can't see how I can make it all in one line (like it is on the home page I created! It seems fine!)
If anyone would like to give any advice on how to fix this, I'd be so happy! Also for some reason the footer is just floating in the middle of the page?!
Thank you.
#banner{
text-align: center;
}
#heading{
font-size: 25px;
text-align: center;
}
html * {
font-family: 'Quicksand', sans-serif;
text-decoration-color: #f13c20;
}
.navbar{
text-align: center;
font-size: 23px;
}
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
.column {
float: center;
width: 32%;
padding: 4px;
}
.row::after {
display: table;
}
.footer-navbar{
text-align: center
font-size: 20px;
position: fixed; bottom
}
#copyfoot{
text-align: center;
}
#footernav{
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<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>Maley Like Maybe</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Quicksand&display=swap" rel="stylesheet">
<link rel="stylesheet" href="portfolio.css">
</head>
<body>
<!-- <---Header--->
<div id=banner>
<img src="images/banner.jpg" width="1250px" height="159px"/></div>
<div id="heading">
<h1>Karen Maley</h1>
</div>
<nav class="navbar">
Home
<!-- Testimonials -->
Contact
</nav>
<hr />
<br>
<br>
<br>
<!-- <---Main -->
<div class="gallery">
<a target="_blank" href="images/portfolio/adviceteacher.jpg">
<img src="images/portfolio/adviceteacher.jpg" alt="Advice from my Art Teacher 2001">
</a>
<div class="desc">Advice from Art Teacher 2001</div>
</div>
<div class="gallery">
<a target="_blank" href="images/portfolio/epping.jpg">
<img src="images/portfolio/epping.jpg" alt="Forest">
</a>
<div class="desc">Epping Forest</div>
</div>
<div class="gallery">
<a target="_blank" href="images/portfolio/immaterial2022.jpg">
<img src="images/portfolio/immaterial2022.jpg" alt="I'mmaterial">
</a>
<div class="desc">I'mmaterial</div>
</div>
<div class="gallery">
<a target="_blank" href="images/portfolio/lifedrawing.jpg">
<img src="images/portfolio/lifedrawing.jpg" alt="Life Drawing">
</a>
<div class="desc">Life Drawing - Movement</div>
</div>
<br>
<div class="gallery">
<div style="padding:35% 0 0 0;position:relative;">
<iframe src="https://player.vimeo.com/video/721109316?h=07caa51b7c&badge=0&autopause=0&player_id=0&app_id=58479"
frameborder="0" allow="autoplay; fullscreen; picture-in-picture"
allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;"
title=""Peace is Exhausting" by Karen Maley 2022">
</iframe></div><script src="https://player.vimeo.com/api/player.js"> </script>
</div>
<div class="gallery">
<div style="padding:40% 0 0 0;position:relative;">
<iframe src="https://player.vimeo.com/video/721142192?h=bfcb05da44&badge=0&autopause=0&player_id=0&app_id=58479"
frameborder="0" allow="autoplay; fullscreen; picture-in-picture"
allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;"
title=""Mobile""></iframe></div>
<script src="https://player.vimeo.com/api/player.js"></script>
</div>
</div>
</div>
<br>
<br>
<br>
<br>
<!-- <---Footer -->
<footer>
<div id="footernav">
<div class="footer-content">
<nav class="footer-navbar">
Home
<!-- Testimonials -->
Portfolio
Contact
</nav>
</div>
<br>
<br>
<div class="row">
<div class="column">
<a href="mailto:maleylikemaybe#hotmail.com">
<img src="images/socialMedia/email.png" alt="maleylikemaybe#hotmail.com"
width="64px" height="64px"><p>maleylikemaybe#hotmail.com</p>
</a>
</div>
<div class="column">
<a href="https://www.instagram.com/maleylikemaybe/">
<img src="images/socialMedia/insta.jpg" alt="#maleylikemaybe"
width="64px" height="64px" ><p>#maleylikemaybe</p></a>
</a>
</div>
<div class="column">
<a href="https://www.youtube.com/channel/UC96yaCbQbhyck2mNY0lMU9Q">
<img src="images/socialMedia/youTube.png" alt="Maley Like Maybe"
width="64px" height="64px" ><p>Maley Like Maybe</p></a>
</div>
</div>
<div id="copyfoot">
<p class="footer-cpr"> © Karen Maley 2022</p></div>
</footer>
</body>
</html>
Hello I'm completely new to HTML and I was trying to make a little project for myself so that I can learn a little bit more, but I wanted to ask something about how I can change the height of this text I'm trying to make it like Twitter and so that the tweets are separate from the others.
So that the "tweets" are separate like this
<!DOCTYPE html>
<html>
<head>
<title>My first web page!</title>
<style>
img {
width: 66px;
border-radius: 50px;
float: left;
margin-right: 10px;
}
.username {
font-weight: bold;
margin-top: 30px;
}
</style>
</head>
<body>
<img src="images/reyna.png" />
<p class="username">#Reyna</p>
<p>Yeni profil fotom nasıl?</p>
<img src="images/killjoy.jpg" />
<p class="username">#Killjoy</p>
<p>Profil foton çok tatlı!</p>
<img src="images/reyna.png" />
<p class="username">#Reyna</p>
<p>Teşşekür ederim seninkiside öyle!</p>
<img src="images/reyna.png" />
<p class="username">#Reyna</p>
<p>Merhabaa! Jett bu gün çok üzgün :(</p>
</body>
</html>
<html>
<head>
<title>My first web page!</title>
<style>
img {
width: 66px;
border-radius: 50px;
float: left;
margin-right: 10px;
}
.chat {
margin: 100px 0;
}
.username {
font-weight: bold;
margin-top: 30px;
}
</style>
</head>
<body>
<div class="chat">
<img src="images/reyna.png" />
<p class="username">#Reyna</p>
<p>Yeni profil fotom nasıl?</p>
</div>
<div class="chat">
<img src="images/killjoy.jpg" />
<p class="username">#Killjoy</p>
<p>Profil foton çok tatlı!</p>
</div>
<div class="chat">
<img src="images/reyna.png" />
<p class="username">#Reyna</p>
<p>Teşşekür ederim seninkiside öyle!</p>
</div>
<div class="chat">
<img src="images/reyna.png" />
<p class="username">#Reyna</p>
<p>Merhabaa! Jett bu gün çok üzgün :(</p>
</div>
</body>
</html> ```
create a div that contain image and text and
give some margin or you want the last message to take all the remaining space?
I need to use absolute positioning to get these images, along with the text under them in rows of three. I am new to HTML/CSS and this requires me to use absolute or some other simple positioning method i cant use grid etc. I also need to make sure the news section stays where it is.
This is my HTML code -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Walton Hall Museum of Odds & Ends</title>
<link rel="stylesheet" href="styles.css"/>
<meta name="Tempany Johnson" content="zx813679"/>
</head>
<body>
<nav class="navigation">
<p>
Museum of Odds & Ends
Visit Us
Shop
Our History
</p>
</nav>
<div class="heading"><h1>Museum of Odds & Ends</h1>
<div class="subheading"><h2>Walton Hall, Milton Keynes</h2>
<div id="museumimages">
<a href="https://www.europeana.eu/en/item/440/item_UBMLSJFMKZCDOGRRMBW2UY5RDAL3V4IP">
<img src="1.jpeg" alt="Budapest Chainbridge 1907"/>
<p>Budapest Chainbridge 1907</p>
</a>
<a href="https://www.europeana.eu/en/item/369/_129030">
<img src="3.jpeg" alt="Three red-figure attic vases 5th centruy AD"/>
<p>Three red-figure attic vases</p>
</a>
<a href="https://www.europeana.eu/en/item/325/MG061">
<img src="4.jpeg" alt="Bronze Enamel Ring Pin Early Medieval"/>
<p>Bronze Enamel Ring Pin</p>
</a>
<a href="https://www.europeana.eu/en/item/9200271/BibliographicResource_3000058904600">
<img src="7.jpeg" alt="Glass-plate Slide by Erica Wagner"/>
<p>Glass-plate Slide</p>
</a>
<a href="https://www.europeana.eu/en/item/2058611/_kimbl_3cd913c5_b586_4dd7_813b_14708e134f5e">
<img src="10.jpeg" alt="Oilpainting of Ettingen Village by Alois Kron"/>
<p>Oilpainting of Ettingen Village</p>
</a>
<a href="https://www.europeana.eu/en/item/2058611/_kimbl_8a7b633f_8dfa_4bdb_ab43_5c7acb1d06ca">
<img src="11.jpeg" alt="Painting by Soja Feldmaier"/>
<p>Painting by Soja Feldmaier</p>
</a>
</div>
<article id=news>
<h2>News</h2>
<article>
<h2>News Entry Title</h2>
<h3>News Entry Date</h3>
<p>News Entry Text</p>
</article>
<article>
<h2>News Entry Title</h2>
<h3>News Entry Date</h3>
<p>News Entry Text</p>
</article>
</article>
</body>
</html>
This is my CSS file
body {
margin: 0;
padding: 0;
font-family: Times, "Times New Roman", Georgia, serif;
font-size: 14px;
color: #333333;
width: 1024px
}
.navigation {
background-color: #333333;
color: #fefefe;
width: 1024px;
font-size: 120%;
border-bottom: 3px solid #ff0000;
}
img {
width:200px;
height:100px;
}
#news {
position: absolute; right: 25px; top: 220px;
text-align: left;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
}
#museumimages {
position: absolute; left: 24px; top: 200px;
}
The easiest technique to have a grid-like display is using display: inline-block.
You can adapt it your case, but the fundamentals are here: https://jsfiddle.net/y6hgnv4f/1/
I need help with my contentbox. It was placed right below my header before but then I replaced the font of the title for my webpage in the header and for some reason this caused the content to fall down far below my header although this new font actually takes up even less space than the previous one and I have used the inspect-element on the webpage and nothing is in the way of content other than the box-<div>.
That content is inside of in my HTML so it wouldn’t make sense for the box-<div> to push content down, I think.
#content {
font-size: 16px;
display: inline-block;
margin-left: 30px;
font-family: "Times New Roman", Times;
text-align: center;
background-color: #1A1A1A;
margin: 30px;
width: 730px;
color: #F1F1F1;
float: right;
}
header {
margin: 0 auto;
color: #F1F1F1;
}
#titel {
float: right;
font-size: 70px;
font-family: 'Stalemate', cursive;
padding: 48px;
}
.box {
width: 1000px;
margin: auto;
}
<!DOCTYPE html>
<html>
<head>
<title> Page </title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href="https://fonts.googleapis.com/css?family=Stalemate" rel="stylesheet">
<meta charset="utf-8">
</head>
<body>
<div class="box">
<header>
<img src="#/#.png" alt="#">
<div id="titel">Page</div>
</header>
<aside>
<nav>
<ul>
<li>
#</li>
<li>
#</li>
<li>
#</li>
<li>
#</li>
<li>
#</li>
<li>
#</li>
</ul>
</nav>
</aside>
<div id="content">
<h1>Title</h1>
<p>Text.</p>
<h2>Title</h2>
<div id="img-wrapper">
<div class="img-box">
<img src="#/#.jpg" alt="#">
<p> <b>Text</b> </p>
</div>
<div class="img-box">
<img src="#/#.jpg" alt="#">
<p> <b>Text</b> </p>
</div>
<div class="img-box">
<img src="#/#.jpg" alt="#">
<p> <b>Text</b> </p>
<div>
</div>
</div>
</div>
</div>
</div>
<footer>©Text</footer>
</body>
</html>