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?
Related
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>
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>
I can't seem to get my title and anything below to centre no matter what I use in CSS. Any help would be appreciated!
<div class="title"><h1>Places to Stay</h1></div>
<div id ="imageContainer">
<img src="../assets/images/barcelona.jpg" alt="barcelona image" width="300" height="300">
<!--img src="https://www.klm.com/destinations/gb/en/europe/spain/barcelona"-->
<img src="../assets/images/milan.jpg" alt="milan image" width="300" height="300">
<!--img src="https://www.timeout.com/milan-->
<img src="../assets/images/paris.jpg" alt="paris image" width="300" height="300">
<!--img src="https://www.archdaily.com/922278/23-places-in-paris-every-architect-must-visit"-->
</div>
CSS
/*This comment is for id imageContainer. It sets a display as flex in a row and spaces it evenly*/
#imageContainer {
display:flex;
flex-direction: row;
justify-content: space-evenly;
}
/*This is a comment for the id "title", it sets titles to a different size and centers it*/
.title {
font-size: 3em;
text-align: center;
padding: 1px 2px 1px 5px;
}
It works fine on my side, but You can spacify h1 h2 and p in css.
#imageContainer {
display:flex;
flex-direction: row;
justify-content: space-evenly;
}
.title {
font-size: 3em;
text-align: center;
padding: 1px 2px 1px 5px;
}
h1, h2, p {
font-size: 3em;
text-align: center;
padding: 1px 2px 1px 5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Places To Stay</title>
<meta charset="utf-8" />
<link href="../assets/css/first.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<img class="logo" src="../assets/images/mockz.jpg" alt="Mockz logo" />
</header>
<nav>
Home
</nav>
<main>
<div class="title"><h1>Places to Stay</h1></div>
<div id ="imageContainer">
<img src="../assets/images/barcelona.jpg" alt="barcelona image" width="300" height="300">
<!--img src="https://www.klm.com/destinations/gb/en/europe/spain/barcelona"-->
<img src="../assets/images/milan.jpg" alt="milan image" width="300" height="300">
<!--img src="https://www.timeout.com/milan-->
<img src="../assets/images/paris.jpg" alt="paris image" width="300" height="300">
<!--img src="https://www.archdaily.com/922278/23-places-in-paris-every-architect-must-visit"-->
</div>
<h2>Barcelona, Milan, Paris</h2>
<p>Just three of the fantastic locations we have on offer here at Mockz, the coolest hotels in Europe located in the heart of
these fantastic cities</p>
<div class="quote"><p>“Travel is the only thing you buy that makes you richer”</p></div>
<div class="quoteComment"><p>Here at Mockz we make sure that when you decide to travel, you do it in style</p></div>
</main>
<footer>
<p id = "footer"><span class="important">Contact Us</span> Email: booking#mockz.com Phone: 0191 268 9999 </p>
<!--img src for the logo is my own design based on ="https://news.marriott.com/brands/moxy-hotels/"-->
</footer>
</body>
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>
I'm new in HTML, CSS and I'm having trouble with editing the footer on my html page. I'm trying to resize the facebook and twitter icon too much smaller size (both the same size), they have them side by side in the bottom centre of the html page along with the copyright sign.
HTML:
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="homepageuni.css">
<meta charset="utf-8">
<meta name="homepage" content="a homepage for the survey website">
<title> Kingston University Survey Homepage</title>
<body>
<img src="kingstonunilogo.jpg" id="uni" alt="uni logo"/>
<div id = "buttons">
<button onclick="window.location='http://www.google.com'" type="button home-button">Home</button>
<button onclick="window.location='http://www.google.com'" type="button contact-button">Contact Us</button>
LogIn
</div>
<br/><br/><br/><br/><br/><br/>
<img src="homepagepic.jpg" alt="homepagepic" id="middlepic" />
<br/>
<div id="footer">
©
<img src="facebookpic.png" alt="facebookpic" />
<img src="twitterpic.jpg" alt="twitterpic"/>
</div>
</body>
</html>
CSS:
#middlepic {
display: block;
margin: 0 auto;
}
#uni {
display: block;
width: 250px;
height: 200px;
}
#footer {
width: 100%;
height:100px;
display: inline-block;
text-align: center;
}
button {
height: 30px;
width: 200px;
background-color: #ccc;
border-radius: 10px;
float:left;
}
a {
text-decoration: none;
color: #000;
}
just add css rule like bellow
#footer img {
width: 25px;
height: 25px
}
if you wish to change size just change width and height
I would add a class to each image and set their size that way.
HTML
<div id="footer">
©
<img class="social-badge" src="facebookpic.png" alt="facebook logo">
<img class="social-badge" src="twitterpic.jpg" alt="twitter logo">
</div>
CSS
.social-badge {
width: 200px;
}
try this.
#footer {
text-align: center;
}
.logos{
width: 25px;
height: 25px;
}
<img src="kingstonunilogo.jpg" id="uni" alt="uni logo" />
<div id="buttons">
<button onclick="window.location='http://www.google.com'" type="button home-button">Home</button>
<button onclick="window.location='http://www.google.com'" type="button contact-button">Contact Us</button>
LogIn
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<img src="homepagepic.jpg" alt="homepagepic" id="middlepic" />
<br/>
<div id="footer">
©
<img class="logos" src="facebookpic.png" alt="facebookpic" />
<img class="logos" src="twitterpic.jpg" alt="twitterpic" />
</div>
Just add an class to the img tag an add a style from css like this.
CSS:
.socialimg { width: 10px; }
HTML:
<img class="socialimg" src="facebookpic.png" alt="facebookpic">
<img class="socialimg" src="twitterpic.jpg" alt="twitterpic">