I am trying to create my first website from scratch using HTML/CSS. The problem I am having is that text I have on a page exceeds the bounds of the background image and when I scroll downwards, the container (.violence) seems to stop displaying the linear-gradient and moves on to a white background. Is there any way I can extend and fit the gradient to match the amount of text I put in?
Thanks in advance.
I have tried searching the web for solutions but my lack of knowledge and understanding of HTML/CSS have prevented me from resolving the issue.
* {
margin: 0;
padding: 0;
}
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(background.jpg);
height: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: 100%;
}
.main-nav {
float: right;
list-style: none;
margin-top: 30px;
}
.main-nav li {
display: inline-block;
}
.main-nav li a {
color: white;
text-decoration: underline;
padding: 5px 10px;
font-family: "Trajan Pro", sans-serif;
font-size: 15px;
}
.main-nav li.active a {
border: 1px solid white;
}
.main-nav li a:hover {
border: 1px solid white;
}
.logo img {
width: 150px;
height: auto;
float: left;
}
body {
font-family: monospace;
}
.row {
max-width: 1200px;
margin: auto;
}
.welcome {
position: absolute;
width: 1200px;
margin-left: 375px;
margin-top: 425px;
}
h1 {
color: white;
font-family: "Trajan Pro", sans-serif;
font-size: 50px;
text-align: center;
margin-top: 0px;
}
h2 {
color: white;
font-family: "Trajan Pro", sans-serif;
font-style: italic;
font-size: 22px;
text-align: center;
margin-top: 0px;
}
.violence {
position: absolute;
width: 1200px;
margin-left: 375px;
margin-top: 75px;
}
h3 {
color: white;
font-family: "Trajan Pro", sans-serif;
font-style: italic;
font-size: 20px;
text-align: center;
margin-top: 0px;
}
h4 {
color: white;
font-family: "Trajan Pro", sans-serif;
font-size: 15px;
text-align: left;
margin-top: 25px;
}
h5 {
color: white;
font-family: "Trajan Pro", sans-serif;
font-style: italic;
font-size: 20px;
text-align: center;
margin-top: 0px;
}
h6 {
color: white;
font-family: "Trajan Pro", sans-serif;
font-size: 15px;
text-align: left;
margin-top: 0px;
}
h7 {
color: white;
font-family: "Trajan Pro", sans-serif;
font-style: italic;
font-size: 20px;
text-align: center;
margin-top: 0px;
}
h8 {
color: white;
font-family: "Trajan Pro", sans-serif;
font-size: 15px;
text-align: left;
margin-top: 0px;
}
h9 {
color: white;
font-family: "Trajan Pro", sans-serif;
font-style: italic;
font-size: 20px;
text-align: center;
margin-top: 0px;
}
<html>
<head>
<title>The Quest for Arrakis: The Second Imperial Renaissance</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="row">
<div class="logo">
<img src="logo.png">
</div>
<ul class="main-nav">
<li> HOME </li>
<li class="active"> GAME SETTING </li>
<li> CHARACTERS AND ENTITIES </li>
<li> WRITING SAMPLES </li>
<li> GAME FEATURES </li>
<li> JOIN </li>
<li> CONTACT US </li>
</ul>
</div>
<div class="violence">
<h3>
<p>"There is no escape—we pay for the violence of our ancestors." <br>- Frank Herbert, Dune</p>
</h3>
<h4>
<p>Quest for Arrakis II continues the decade long history and political machinations of the original Quest for Arrakis. It is an intense setting that stays true to the canon as set forth by Frank Herbert and focuses primarily on power politics and
grand story telling. Much like the in the novels most anything is possible…if the player is willing to pay the right price.</p><br>
<p>The setting is an alternative universe to the world as designed by Frank Herbert and taking place some twelve centuries before the time of Paul Atreides. The Corrino Empire has suffered through a devastating war which has taken the life of the
previous Emperor and plunged the human race into a period of economic collapse and massive social unrest. Old houses have fallen or been reduced in power leaving a vacuum for the ambitious to make a name for themselves. Under the watchful eye
of a new soverign the Empire begins the long road back to prosperity. New houses seek to establish themselves as old ones try to return to glory.</p><br>
<p>We offer an intense gaming atmosphere with motivated players, helpful staff and well detailed game environment. Everything is story driven and the opportunities are endless for writers willing to be active. Will you raise your banner in this brave
new age? The perils are daunting and the road will be hard but do you have what it takes to rise to power in the Quest for Arrakis II?</p>
<h5><br>
<p>"Beginnings are such delicate times." <br>-Princess Irulan</p>
</h5>
<h6><br>
<p>In the Year 8760 A.G., The Imperium has emerged from a devestating conflict known as The Second Muadru Incursion. Houses have fallen, and widespread economic collapse have devastated the fortunes of the Houses of the Imperium. As the Empire
returns to glory beneath the Rule of Padishah-Emperor Ezhar the Seventh, Houses New and Old seek to stablise themselves in a turbulent epoch of Imperial History with plenty of opportunity to do so.</p>
</h6>
<h7><br>
<p>"Control the coinage and the courts - let the rabble have the rest." Thus the Padishah Emperor advises you. And he tells you; "If you want profits, you must rule." There is truth in these words, but I ask myself: "Who are the rabble and who
are the ruled?"<br>-Princess Irulan</p>
</h7>
<h8>
<p><br>The Quest for Arrakis II offers many paths to power.</p>
<p><br>The Landsraad acts as the Political Hub of the Imperium with the Houses and Players generating most of our Game's Laws and Rule Sets.</p>
<p><br>If economics piques your interest, then CHOAM serves as the legislature that defines the economic fortunes of the Empire with its Board of Directors governing In Character Policy.</p>
<p><br>If it is the Favour of the Corrino that drives your ambitions, then the Court of the Emperor will provide you with the opportunity to make a name and reputation for yourself beneath the watchful eye of the Emperor.
<p><br>Regardless of the path you choose, all roads leads to Arrakis and the fortunes that lie hidden beneath its sands, guarded by Fremen and Worm alike. The journey will not be easy but with enough patience, perseverance and determination,
you may one day rule the Desert Planet and harness the riches and power for yourself!</p>
</h8>
<h9>
<p><br>"One must always keep the tools of statecraft sharp and ready. Power and fear –sharp and ready." <br>- Baron Vladimir Harkonnen</p>
</h9>
</div>
</header>
</body>
</html>
I expect the text to continue being visible.
Your question was too vague but I still tried so here is my answer for you.You should apply the background-image property to the violence class itself instead of the header class.
I understand you are new to HTML/CSS but you should check on the web for quality resources to learn the languages as well as best practises.Your code has very basic errors which should not be there.
HTML has heading tags <h1> to <h6> but you have used headings tags beyond that which HTML does not recognise or support.
From what I can see you have used headings tags for styling purposes which is wrong.In this case you should remove all the heading tags except <h3> which is actually used as a heading.
I can also see your knowledge about semantic tags is shallow so it would be better if you spend a little time reading about them.
Related
I'm having this problem, when I added a background image to a flexbox column, I can see that there is a big blank space at the bottom at the bottom. I tried to inspect the page but could not find the problem. I have no idea how to fix the problem, what I want to do is remove the blank space or make the picture go down all the way.
body {
background-color: rgb(245, 245, 245);
font-family: 'Roboto', sans-serif;
padding: 0;
margin: 0;
overflow: auto;
}
.main {
display: flex;
justify-content: space-evenly;
}
.row {
flex: 50%;
padding: 3em;
padding-left: 15em;
}
.row1 {
flex: 50%;
}
.row-text-top {
padding-bottom: 1em;
font-size: 21px;
}
.row-text-mid {
padding-bottom: 3em;
font-size: 16px;
}
.row-text-mid1 {
font-size: 25px;
border-left: 5px solid #ff9b7c;
padding: 0.5em;
padding-top: 0.1em;
padding-bottom: 0.1em;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
}
.row-text-low {
padding-top: 3em;
}
.row1 {
background-image: url(earth.jpg);
background-size: cover;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>City</title>
<link href="wwd.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="index.js"></script>
</head>
<body>
<div class="main">
<div class="row">
<h1>Overview</h1>
<div class="row-text-top">
One of the most urgent issues of our time, climate change has widespread implications — from the exacerbation of
poverty, to the breakdown of infrastructure, to the loss of environmental, political, economic and social security.
Experts agree that climate change threatens to set back development efforts by decades, placing least developed countries
and already-vulnerable populations in an even more precarious position.
</div>
<div class="row-text-mid">
The latest Intergovernmental Panel on Climate Change (IPCC) Fifth Assessment Report (AR5), signed
off by almost 200 nations, concludes with 95% certainty or more that humans have caused the majority
of climate change since the 1950s. It predicts global surface temperature to continue to rise, along
with increased sea level rise, melting of glaciers and ice sheets, acidification of oceans, increase
in the intensity of tropical storms and changes in precipitation patterns.
</div>
<div class="row-text-mid1">
In other words; the science on climate change is clearer than ever, and so is the urgency for human action.
</div>
<div class="row-text-low">
As a global community, we all have a role in developing and implementing solutions toward significant
transformation in our development patterns. It requires not only a shift in awareness and accountability
for our own individual choices but in a social, political and economic shift towards enabling conditions
for these sustainable choices to be made– and in turn, a more just, equal and healthy planet.
</div>
</div>
<div class="row1">
</div>
</div>
</body>
</html>
It's a bit hard to see because of the image not being there but I will add a picture as well:
The issue is here:
.row {
flex: 50%;
padding: 3em; <---- This line
padding-left: 15em;
}
You're adding additional padding all around the row element, including the bottom. After removing this padding, the space at the bottom of the screen is gone.
Here's a working demo: https://codepen.io/Lissy93/pen/yLvBJLe
Tip: I recommend using the developer tools, with the element selector you can hover over the space, and it will show exactly which element is causing it, and show whether it is (green for) padding and (orange for) margin.
View this snippet fullscreen. The dashed red border is the limit of your flexbox. The space below the image (based on your image) is elsewhere.
body {
background-color: rgb(245, 245, 245);
font-family: 'Roboto', sans-serif;
padding: 0;
margin: 0;
overflow: auto;
}
.main {
display: flex;
justify-content: space-evenly;
border: 5px dashed red;
}
.row {
flex: 50%;
padding: 3em;
/* padding-left: 15em;*/
}
.row1 {
flex: 50%;
}
.row-text-top {
padding-bottom: 1em;
font-size: 21px;
}
.row-text-mid {
padding-bottom: 3em;
font-size: 16px;
}
.row-text-mid1 {
font-size: 25px;
border-left: 5px solid #ff9b7c;
padding: 0.5em;
padding-top: 0.1em;
padding-bottom: 0.1em;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
}
.row-text-low {
padding-top: 3em;
}
.row1 {
background-image: url(https://picsum.photos/id/1/200/300);
background-size: cover;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>City</title>
<link href="wwd.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="index.js"></script>
</head>
<body>
<div class="main">
<div class="row">
<h1>Overview</h1>
<div class="row-text-top">
One of the most urgent issues of our time, climate change has widespread implications — from the exacerbation of poverty, to the breakdown of infrastructure, to the loss of environmental, political, economic and social security. Experts agree that climate
change threatens to set back development efforts by decades, placing least developed countries and already-vulnerable populations in an even more precarious position.
</div>
<div class="row-text-mid">
The latest Intergovernmental Panel on Climate Change (IPCC) Fifth Assessment Report (AR5), signed off by almost 200 nations, concludes with 95% certainty or more that humans have caused the majority of climate change since the 1950s. It predicts global
surface temperature to continue to rise, along with increased sea level rise, melting of glaciers and ice sheets, acidification of oceans, increase in the intensity of tropical storms and changes in precipitation patterns.
</div>
<div class="row-text-mid1">
In other words; the science on climate change is clearer than ever, and so is the urgency for human action.
</div>
<div class="row-text-low">
As a global community, we all have a role in developing and implementing solutions toward significant transformation in our development patterns. It requires not only a shift in awareness and accountability for our own individual choices but in a social,
political and economic shift towards enabling conditions for these sustainable choices to be made– and in turn, a more just, equal and healthy planet.
</div>
</div>
<div class="row1">
</div>
</div>
</body>
</html>
I dont see any space on the bottom. I using firefox on linux.
body {
background-color: rgb(245, 245, 245);
font-family: 'Roboto', sans-serif;
padding: 0;
margin: 0;
overflow: auto;
}
.main {
display: flex;
justify-content: space-evenly;
}
.row {
flex: 50%;
padding: 3em;
padding-left: 15em;
}
.row1 {
flex: 50%;
}
.row-text-top {
padding-bottom: 1em;
font-size: 21px;
}
.row-text-mid {
padding-bottom: 3em;
font-size: 16px;
}
.row-text-mid1 {
font-size: 25px;
border-left: 5px solid #ff9b7c;
padding: 0.5em;
padding-top: 0.1em;
padding-bottom: 0.1em;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
}
.row-text-low {
padding-top: 3em;
}
.row1 {
background-image: url(https://via.placeholder.com/200);
background-size: cover;
}
<div class="main">
<div class="row">
<h1>Overview</h1>
<div class="row-text-top">
One of the most urgent issues of our time, climate change has widespread implications — from the exacerbation of
poverty, to the breakdown of infrastructure, to the loss of environmental, political, economic and social security.
Experts agree that climate change threatens to set back development efforts by decades, placing least developed countries
and already-vulnerable populations in an even more precarious position.
</div>
<div class="row-text-mid">
The latest Intergovernmental Panel on Climate Change (IPCC) Fifth Assessment Report (AR5), signed
off by almost 200 nations, concludes with 95% certainty or more that humans have caused the majority
of climate change since the 1950s. It predicts global surface temperature to continue to rise, along
with increased sea level rise, melting of glaciers and ice sheets, acidification of oceans, increase
in the intensity of tropical storms and changes in precipitation patterns.
</div>
<div class="row-text-mid1">
In other words; the science on climate change is clearer than ever, and so is the urgency for human action.
</div>
<div class="row-text-low">
As a global community, we all have a role in developing and implementing solutions toward significant
transformation in our development patterns. It requires not only a shift in awareness and accountability
for our own individual choices but in a social, political and economic shift towards enabling conditions
for these sustainable choices to be made– and in turn, a more just, equal and healthy planet.
</div>
</div>
<div class="row1">
</div>
</div>
I have below for my code. It is posting it on my entire webpage instead of just on that image and I can't quite figure out why.
dt {
font: Arial, Helvectica, sans-serif;
size: .9em;
weight: bold;
color: (dark red (#6b1101);
line-height: 2em;
}
dd {
font: Arial, Helvectica, sans-serif;
size: .9em;
weight: bold;
color: (dark red (#6b1101);
line-height: 2em;
}
#Wrapper {
width: 700px;
text-align: left;
margin: auto;
background-color: #F7EED7;
}
#imgtop {
width: 700px;
}
#leftnav {
background-color: #F7EED7;
padding: 10px;
float: left;
width: 150px;
}
#leftnav a:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: bold;
text-transform: uppercase;
color: #000033;
text-decoration: none;
text-indent: 0px;
display: block;
}
#leftnav a:visited {
font-family: Arial, Helvetica, sans=serif;
font-size: 1em;
font-weight: bold;
text-transform: uppercase;
color: #660066;
text-decoration: none;
text-indent: 0px;
display: block;
}
#leftnav a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: bold;
text-transform: uppercase;
color: #000033;
text-decoration: none;
text-indent: 0px;
display: block;
background-color: #CCCCCC;
}
body {
background-color: #FFFFFF;
}
#maintext {
background-color: #F7EED7;
float: right;
width: 500px;
padding: 10px;
}
h1 {
color: red
}
<!doctype html>
<head>
<title>Cafe Townsend: Wine Tasting Terms </title>
<link type="text/css" rel="stylesheet" href="cafe.css">
<meta charset="utf-8">
</head>
<div id="leftnav">
<p>Home</p>
<p>Menu</p>
<p>Location</p>
<p>Restaurant Infomation</p>
<p>Restaurant Review</p>
<p>Special Events</p>
<p>DVD</p>
<p>
<a href="wine-list.html">
<img src="../images/wine_header.jpg" alt="Wine Ad" width="150" height="100" border="0" /></a>
</p>
</div>
<p>Greeting: "Hello, World!"</p>
<h1>Knowing your wines</h1>
<dl>
<dt>Acid, acidity</dt>
<dd>The tart (or in excess, sour) quality that wine's natural acidity imparts and that gives the wine a sense of body and structure. Required for proper balance; too much or too little constitutes a flaw.</dd>
<dt>Almond</dt>
<dd>A light bitter, nutlike quality sometimes noted in Italian white wines.</dd>
<dt>Anise</dt>
<dd>Faint licorice, a pleasant element in some Spanish reds; may indicate, however, that the wine has been artificially acidified, a practice that may improve short-term enjoyment but tends to make wines that cellar poorly.</dd>
<dt>Attack</dt>
<dd>A technical term for the first impression the wine makes as it reaches your palate, distinguished (in time sequence) from "middle" or ""mid-palate"" and "finish" or "aftertaste."</dd>
<dt>Bouquet, bottle bouquet</dt>
<dd>As a technical term, the smells that develop with age in the wine bottle, as opposed to "aroma," the smells associated with the fruit. I have little use for distinctions this narrow and try to avoid using them in my wine notes.</dd>
<dt>Earthy</dt>
</dd>Generic term for a range of aromas and flavors associated with organic qualities like "barnyard," "forest floor," "merde," and "tree bark." May be associated with brettanomyces (see above) but can also result
from oak aging or the nature of specific grapes. Mourvedre, for instance, imparts a characteristic earthy aroma. Again, not necessarily a fault, but "earthy" wines tend to be controversial, and a little bit is usually enough.</dd>
</dl>
</body>
</html>
So for some reason my html is not getting the dt and dd and changing the colors from normal to red. I dont get it, it goes to file (it should) but is doing nothing. have tried checking file names, making sure the paths are correct (they are). They are in the same exact folder.
Take out the weight: bold; This is breaking the CSS below. It should be font-weight:bold.
font-dd {font: Arial, Helvectica, sans-serif;
size: .9em;
font-weight: bold;
color:red;
line-height: 2em; }
It is because you are trying to use a value that is not a valid color (dark red (#6b1101) is not correct. Find the available value types here https://www.w3schools.com/cssref/pr_text_color.asp
body {
margin:0;
padding:0;
box-sizing:border-box;
}
.about-title {
background-color: #fc0321;
color:#ffffff;
padding: 5px;
font-family: 'PT Sans Narrow', sans-serif;
font-weight: 400;
text-align: center;
border-radius: 100px;
}
#media only screen and (max-width:400px) {
.about {
width:100%;
}
}
<div class="about">
<h3 class="about-title">Welcome to Mahasakthi Harvester Spares</h3>
<p style="font-weight: 200;">MAHASAKTHI HARVESTER SPARES, established in the year 2017 by high end professionals in the field of Combine Harvester Manufacturing and Repairing. We are leading wholesaler, retailer and manufacturer of combine harvester spares dealing in Standard,Balkar,Kartar,Preet and Claas Combine Harvesters.Our Product ranges from Machined spares, Fabricated spares, sheet metal spares, Rubber spares,Shafts,Bearings,Belts, Oils ,Grease,Filters,Rubber Tracks,Rollers,Sprockets to all miniature spares.</p>
Read More...
</div>
In the above code I tried for the responsive design but i'm not getting it.
I mentioned width as 87% for the desktop screens and then I changed the width to 100% for the smaller screens.But the width is not changing.I'm having trouble with this.
<head>
<style>
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.about-title {
background-color: #fc0321;
color: #ffffff;
padding: 5px;
font-family: 'PT Sans Narrow', sans-serif;
font-weight: 400;
text-align: center;
border-radius: 100px;
}
//--------------
.about {
width: 87%
}
//--------------
#media only screen and (max-width:400px) {
.about {
width: 100%;
}
}
</style>
</head>
You didn't write the default width value in your code
Here is the example that #AFF did in a snippet. As you can see it is working. If you are still having issues, then there is likely some conflicting CSS that is overriding your CSS. Please try and reproduce the issue you are having in a snippet using the width:85% for desktop widths, so we can help with your specific issue.
If seeing this working example helps solve your issue, then please accept #AFF answer.
body {
margin:0;
padding:0;
box-sizing:border-box;
}
.about-title {
background-color: #fc0321;
color:#ffffff;
padding: 5px;
font-family: 'PT Sans Narrow', sans-serif;
font-weight: 400;
text-align: center;
border-radius: 100px;
}
.about {
width:85%;
}
#media only screen and (max-width:400px) {
.about {
width:100%;
}
}
<div class="about">
<h3 class="about-title">Welcome to Mahasakthi Harvester Spares</h3>
<p style="font-weight: 200;">MAHASAKTHI HARVESTER SPARES, established in the year 2017 by high end professionals in the field of Combine Harvester Manufacturing and Repairing. We are leading wholesaler, retailer and manufacturer of combine harvester spares dealing in Standard,Balkar,Kartar,Preet and Claas Combine Harvesters.Our Product ranges from Machined spares, Fabricated spares, sheet metal spares, Rubber spares,Shafts,Bearings,Belts, Oils ,Grease,Filters,Rubber Tracks,Rollers,Sprockets to all miniature spares.</p>
Read More...
</div>
I've watched some videos and copied what they did but it's not working. I have my file in the same folder as my documents. Ugh, the site wants me to add more "details" or it won't let me post. I had my html and my css pages separated but it put them together. If you know how feel free to break them apart.
.float-img {
float: left;
margin-right: 10px;
margin-left: 5px;
margin-bottom: 0px;
margin-top: 10px;
padding: 2px;
border: none;
}
.potato {
margin-left: 250px;
margin-top: 40px;
margin-right: 20px;
line-height: 38px;
font-family: 'lazyspringday';
}
.p1 {
font-family: 'lazyspringday';
}
body {
margin: 0;
padding: 0;
font-family: 'lazyspringday', serif;
}
#font-face {
font-family: "lazyspringday";
src: url('lazyspringday.ttf') format:('truetypefont');
}
.nav {
background-color: #ffb6c1;
color: #ffffff list-style: none;
text-align: center;
padding: 20px 0 20px 0;
}
.nav>li {
display: inline-block;
padding-right: 50px;
font-size: 16px;
}
.nav>li>a {
text-decoration: none;
color: #ffffff
}
.nav>li>a:hover {
color: #C0C0C0
}
.banner {
width: 100;
display: block;
}
.banner>.bannerimage {
width: 100;
height: 100;
display: block;
}
ul.nav {
margin: 0;
}
div.left {
width: 50%;
padding: 0 0 0 5%;
margin-right: 5px;
margin-top: 10px;
float: left
}
div.right {
width: 50%;
padding: 0 5% 0 0;
float: right
}
p {
padding-top: 25px;
text-align: left;
}
.potato {
color: #00b8e6;
font-size: 15px;
font-family: 'lazyspringday';
font-weight: 100;
}
<div class="header">
<img class="banner-image" src="ccc.png" width="100%" height="150px">
</div>
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Menu</li>
<li>Enter to Win</li>
<li>Merchandise</li>
<li>Events</li>
<li>Contact Us</li>
</ul>
<img src="british-shorthair-3055340_1920.jpg" width: "400" height="400" class="float-img">
<p class="potato">
Step into a magical world of cats at Cat Corner Cafe. Enjoy eating cute cat themed foods and drinks in a relaxing environment. Spend some quality time playing with some feline friends. Enjoy watching the cats have fun in an environment made just for them.
All cats will be adoptable and provided by the local shelter. Cat Corner Cafe will also have fun events like cat yoga, art with cats and game days. Come by yourself, with your meetup group or have your next birthday party here! We look forward to seeing
you. To be alerted when we open please sign up with your email on our homepage.
</p>
first of all define #font face on the top and remove ":" from format and rename turetypefont to truetype
#font-face {
font-family: "lazyspringday";
src: url('lazyspringday.ttf') format('truetype');
}
Hope this will help
first and foremost, put your fonts in fonts folder seperately and css stylesheet in css folder, then include/import fonts in your css at top like this.
#font-face {
font-family: 'lazyspringday';
src: url('../fonts/lazyspringday.eot');
src: url('../fonts/lazyspringday.eot?#iefix') format('embedded-opentype'),
url('../fonts/lazyspringday.woff2') format('woff2'),
url('../fonts/lazyspringday.woff') format('woff'),
url('../fonts/lazyspringday.ttf') format('truetype'),
font-weight: normal;
font-style: normal;
}
we use woff and woff2 for using fonts in web.
you can also use web fonts generator to generate webfonts just uploading your .ttf file there.
In the head tag of your html file (index?) place something like this:
<link href="(your file location)" rel="stylesheet">
After importing the font you can do it in several different ways. I'd recommend you to use a body tag that would contain everything on that html file.
If you chose to use the body tag, simply add this line to your css file:
body {
font-family: 'Montserrat', serif;
}
Example:
Use Google Fonts. https://fonts.google.com
Then copy this code into the <head> of your HTML document.
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
Then use the following CSS rules to specify these families:
font-family: 'Roboto', sans-serif;
Yesterday I posted a question and some people responded very nicely. However I have tried everything you said and nothing seems to be working.
It does work if I give the image a width, but only if that width is smaller than the actual parragraph (500px). My image is bigger than that. I have tried to change the width in the image (adding a class to the image and then specifying the image's width in the css and still not working, even writing !important before the semicolon)
I am gonna paste the entire's "website" (is an easy one page Resume) code so you can see more clearly what might be wrong.
I want the image to be centered and maintain its original size:
<!DOCTYPE html>
<html>
<head>
<title>My Resume</title>
<link href="http://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Playfair+Display:900" rel="stylesheet" type="text/css">
<style type="text/css">
body, h1, h2, h3, p {
margin: 0;
}
header {
padding-top: 120px;
padding-bottom: 120px;
background-image: url('http://bit.ly/1FV66V8');
background-size: cover;
font-family: 'Playfair Display';
text-align: center;
color: #DB5175;
}
h1 {
font-size: 72px;
}
h2 {
margin-bottom: 40px;
font-size: 24px;
}
h3 {
margin-top: 70px;
margin-bottom: 70px;
border: 2px solid #ffffff;
display: inline-block;
padding-right: 30px;
padding-left: 30px;
padding-top: 15px;
padding-bottom: 15px;
text-transform: uppercase;
letter-spacing: 2px;
}
main {
padding-bottom: 100px;
background-color: #DB5175;
font-family: 'Roboto';
color: white;
text-align: center;
}
p {
padding-bottom: 20px;
width: 500px;
margin-left: auto;
margin-right: auto;
line-height: 160%;
}
</style>
</head>
<body>
<header>
<h1>Name Surname</h1>
<h2>Blogger</h2>
<p>
<img src="https://lh4.googleusercontent.com/-AhzOzjiqgqg/UMIP9ONtHsI/AAAAAAAACzM/GzwcSFumocs/s65/facebook.png" alt="Facebook Icon" />
<img src="https://lh5.googleusercontent.com/-E4DPgG0jOhk/UMIP81ijQ1I/AAAAAAAACzI/5jFodl9F9N4/s65/twitter_bird.png" alt="Twitter Icon" />
<img src="https://lh6.googleusercontent.com/-mswXpGilY98/Ugp9MeFO_pI/AAAAAAAAER0/nhReers_OJg/s64/instagram.png" alt="Instagram Icon" />
<img src="https://lh5.googleusercontent.com/-DMXeFEjNoV8/UMIP9F6SnJI/AAAAAAAACzQ/itYWZIxvOuw/s65/pintrest.png" alt="Pinterest Icon" />
</p>
</header>
<main>
<h3>Background</h3>
<p>I've been rolling solo since 2014, but previously jammed with a bunch of tech startups like Dropbox, Codecademy, and Treehouse. My recent work is a departure from my product-centric past, focusing on 3D illustration, animation, and motion design.</p>
<p><img src="http://los40tuxtla.com/wp-content/uploads/2015/05/nrm_1410437342-blake-lively-gucci-hp.jpg" alt="Foto Blanca"/></p>
<p>That's kind of what it's all about, y'know? Feeling out our path, taking creative risks, and knocking it out of the park without taking it too seriously. I get into specific tactics and proven strategies, but it's also an ongoing conversation about growth, meaning, and happiness.</p>
<p>I've met lots of creative and curious people through my newsletter, where we talk shop and share experiences. I'd love to meet you, too!</p>
<h3>Philosophy</h3>
<p>I'm a lifelong learner and love to gather new skills and study extraordinary people. I believe 1) being exceptional is often just putting in more effort than anyone expects, 2) releasing our ego is a prerequisite for growth, and 3) life is too important to take seriously. Party on!</p>
</main>
</body>
</html>
Thanks!
Just set the width 100% in image. It will automatically adapt with the parent width.
body, h1, h2, h3, p {
margin: 0;
}
header {
padding-top: 120px;
padding-bottom: 120px;
background-image: url('http://bit.ly/1FV66V8');
background-size: cover;
font-family: 'Playfair Display';
text-align: center;
color: #DB5175;
}
h1 {
font-size: 72px;
}
h2 {
margin-bottom: 40px;
font-size: 24px;
}
h3 {
margin-top: 70px;
margin-bottom: 70px;
border: 2px solid #ffffff;
display: inline-block;
padding-right: 30px;
padding-left: 30px;
padding-top: 15px;
padding-bottom: 15px;
text-transform: uppercase;
letter-spacing: 2px;
}
main {
padding-bottom: 100px;
background-color: #DB5175;
font-family: 'Roboto';
color: white;
text-align: center;
}
p {
padding-bottom: 20px;
width: 500px;
margin-left: auto;
margin-right: auto;
line-height: 160%;
}
<header>
<h1>Name Surname</h1>
<h2>Blogger</h2>
<p>
<img src="https://lh4.googleusercontent.com/-AhzOzjiqgqg/UMIP9ONtHsI/AAAAAAAACzM/GzwcSFumocs/s65/facebook.png" alt="Facebook Icon" />
<img src="https://lh5.googleusercontent.com/-E4DPgG0jOhk/UMIP81ijQ1I/AAAAAAAACzI/5jFodl9F9N4/s65/twitter_bird.png" alt="Twitter Icon" />
<img src="https://lh6.googleusercontent.com/-mswXpGilY98/Ugp9MeFO_pI/AAAAAAAAER0/nhReers_OJg/s64/instagram.png" alt="Instagram Icon" />
<img src="https://lh5.googleusercontent.com/-DMXeFEjNoV8/UMIP9F6SnJI/AAAAAAAACzQ/itYWZIxvOuw/s65/pintrest.png" alt="Pinterest Icon" />
</p>
</header>
<main>
<h3>Background</h3>
<p>I've been rolling solo since 2014, but previously jammed with a bunch of tech startups like Dropbox, Codecademy, and Treehouse. My recent work is a departure from my product-centric past, focusing on 3D illustration, animation, and motion design.</p>
<p><img src="http://los40tuxtla.com/wp-content/uploads/2015/05/nrm_1410437342-blake-lively-gucci-hp.jpg" width="100%" alt="Foto Blanca"/></p>
<p>That's kind of what it's all about, y'know? Feeling out our path, taking creative risks, and knocking it out of the park without taking it too seriously. I get into specific tactics and proven strategies, but it's also an ongoing conversation about growth, meaning, and happiness.</p>
<p>I've met lots of creative and curious people through my newsletter, where we talk shop and share experiences. I'd love to meet you, too!</p>
<h3>Philosophy</h3>
<p>I'm a lifelong learner and love to gather new skills and study extraordinary people. I believe 1) being exceptional is often just putting in more effort than anyone expects, 2) releasing our ego is a prerequisite for growth, and 3) life is too important to take seriously. Party on!</p>
</main>
Thanks to all.
I wanna answer what I did in the end in case it helps someone else in the future.
The teacher/class said to "wrap" the image in a p. Following #Fabian Lurtz's adice in changed the p for a div.
Then in the css, following #Alvin Pascoe's advice in this thread: http://bit.ly/1OniMMl
I added:
.div {
display: block;
margin-left: auto;
margin-right: auto;
}
If my "website" would have had more divs I could have just setup a class or id
Hope it helps. Thanks again to all!
If you want to set the width to 100%, just set the width to-
max-width: 100%