I have a web development assignment due soon. I really need help putting the course info paragraph below the non-repeat background. I do not want it to be on the same 2 pics the Computer Engineering Title is on. Also, how can I change the
font of it? Any help will be appreciated :). This is due very soon.
body,
html {
height: 100%;
margin: 0;
font-size: 16px;
font-family: "Lato", sans-serif;
font-weight: 400;
line-height: 1.8em;
}
.jumbotron {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-image: url(image.jpg);
background-position: 0% 25%;
background-size: cover;
background-repeat: no-repeat;
border: 2px;
}
.navigation {
background-color: #330;
overflow: hidden;
display: grid;
grid-template-columns: auto auto auto auto auto;
}
.navigation a {
font-size: 20px;
text-decoration: none;
color: #f2f2f2;
text-align: center;
float: left;
}
.navigation a:hover {
background-color: #dddddd;
color: black;
}
.navigation a.active {
background-color: #4CAF50;
color: white;
}
body {
background-image: url("Engineering.jpg");
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
background-color: rgba(0, 0, 0, 0.5);
}
h1 {
margin: auto;
z-index: 4;
text-align: center;
width: 100%;
color: white;
font-size: 100px;
padding: 10px;
line-height: 1.8em;
}
.courseinfo {}
<!DOCTYPE html>
<html>
<head>
<title>
Home - Hasan's Website
</title>
</head>
<body>
<div class="navigation">
<a class="active" href="#home">Home</a>
About Me
Careers
Contact Us
Web Development
</div>
<div class="intro">
<div class="jumbotron">
<h1>Computer Engineering</h1>
</div>
</div>
<div class="courseinfo">
<p>This course examines computer systems and control of external devices. Students will develop knowledge and skills in electronics, interfacing, programming, and networks, will build systems that use computer programs and interfaces to control and respond
to external devices. Students will develop an awareness of related environmental and societal issues, and will learn about college and university programs leading to careers in computer technology.</p>
</div>
</body>
</html>
Is this how you want it.. removed
position:absolute and transform: translate(-50%, -50%);
added background image to .intro
body,
html {
height: 100%;
margin: 0;
font-size: 16px;
font-family: "Lato", sans-serif;
font-weight: 400;
line-height: 1.8em;
}
.jumbotron {
top: 50%;
left: 50%;
background-image: url(image.jpg);
background-position: 0% 25%;
background-size: cover;
background-repeat: no-repeat;
border: 2px;
}
.navigation {
background-color: #330;
overflow: hidden;
display: grid;
grid-template-columns: auto auto auto auto auto;
}
.navigation a {
font-size: 20px;
text-decoration: none;
color: #f2f2f2;
text-align: center;
float: left;
}
.navigation a:hover {
background-color: #dddddd;
color: black;
}
.navigation a.active {
background-color: #4CAF50;
color: white;
}
.intro {
background-image: url("Engineering.jpg");
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
background-color: rgba(0, 0, 0, 0.5);
height: 90vh;
display: flex;
align-items: center;
}
h1 {
margin: auto;
z-index: 4;
text-align: center;
width: 100%;
color: white;
font-size: 100px;
padding: 10px;
line-height: 1.8em;
}
.courseinfo {}
<!DOCTYPE html>
<html>
<head>
<title>
Home - Hasan's Website
</title>
</head>
<body>
<div class="navigation">
<a class="active" href="#home">Home</a>
About Me
Careers
Contact Us
Web Development
</div>
<div class="intro">
<div class="jumbotron">
<h1>Computer Engineering</h1>
</div>
</div>
<div class="courseinfo">
<p>This course examines computer systems and control of external devices. Students will develop knowledge and skills in electronics, interfacing, programming, and networks, will build systems that use computer programs and interfaces to control and respond
to external devices. Students will develop an awareness of related environmental and societal issues, and will learn about college and university programs leading to careers in computer technology.</p>
</div>
</body>
</html>
Related
I've set a blue background image, added some content and was done. I've tried zooming in the site, and whenever I zoom in, the background image automatically pushes itself up and does not cover the founders and half of the yellow arrow.
How it looks normally
How it looks when I zoom in
Any idea on how to fix this?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
max-width: 100%;
height: auto;
}
.container {
max-width: 900px;
margin: 0 auto;
}
.post-header {
background-color: #20cfcf;
background-image: url("../img2/header_background.png");
background-size: cover;
background-position: center center;
height: 60Vh;
text-align: center;
}
.post-header h2 {
text-align: center;
padding-top: 2em;
font-weight: 800;
font-size: 1.7em;
color: #172025
}
.post-header h1 {
font-size: 92pt;
font-weight: 900;
color: white;
margin: 0;
margin-top: em;
}
.founders {
margin-top: -6em;
}
.arrow-box {
position: relative;
background: url("https://i.imgur.com/gp3z7z5.png") no-repeat center center;
background-size: contain;
margin: auto;
width: 400px;
height: auto;
margin-top: -3em;
}
.arrow {
position: relative;
display: flex;
text-decoration: none;
align-items: center;
justify-content: center;
font-size:1.7rem;
height:80px;
color: black;
}
.dev-description {
font-size: 1.4em;
font-weight: 300;
line-height: 1.3em;
}
.recognize {
margin-top: 3em;
text-transform: uppercase;
font-weight: 700;
}
.images {
padding: 1em;
display: inline;
margin-top: 2em;
}
.images:hover,
.images:focus {
color: white;
}
.img-container {
margin-top: 1.3em;
}
<section class="post-header">
<div class="wrapper">
CHYBA TU
<h2>HI. WE'RE TILDE.</h2>
<h1>WE LIVE AND <br> BREATHE CODE.</h1>
<img src="img2/founders.png" class="founders" height="294px" width=425px alt="">
<div class="arrow-box">
Meet the team
</div>
<div class="container">
<p class="dev-description">
We're a small team of developers who are passionate about crafting great software.
We're some of the faces behind Ember.js, Ruby on Rails, jQuery and more. <br>
We're here to help you build the products and tools of the future.
</p>
<p class="recognize">
you may recognize us from around town
</p>
<div class="img-container">
<div class="images">
<img src="img2/rails.png" alt="">
</div>
<div class="images">
<img src="img2/jquery.png" alt="">
</div>
<div class="images">
<img src="img2/ember.png" alt="">
</div>
<div class="images">
<img src="img2/handlebars.png" alt="">
</div>
<div class="images"></div>
<img src="img2/bundler.png" alt="">
</div>
</div>
</div>
</div>
</section>
Thanks in advance. Let me know if something is unclear.
I think you can do like this.
.post-header {
background-color: #20cfcf;
background-image:
url("../img2/header_background.png");
background-size: cover;
background-position: center center;
height: 582px;
text-align: center;
}
An alternate solution is to adjust the markup of your hero so that the people and arrow images are positioned at the bottom of the background, this means it will work on mobile/desktop and all heights, widths and zoom levels.
In this solution, we create a .hero container and place everything that is meant to be in front of the blue background inside of it. We position the images absolutely, from the bottom, transforming the arrow down 50%.
If you run into issues with the hard-coded height from the other answer then this will work for you.
.hero {
background-color: #20cfcf;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 100px 0 200px;
position: relative;
text-align: center;
}
.preheading {
font-size: 1.7em;
font-weight: 800;
text-transform: uppercase;
}
.heading {
color: #fff;
font-size: 92pt;
font-weight: 900;
text-transform: uppercase;
}
.people {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.arrow {
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 50%);
}
img {
border: 1px solid black;
}
<div class="hero">
<div class="preheading">Hi. We're Tilde.</div>
<div class="heading">We live and<br>breate code.</div>
<img class="people" src="https://via.placeholder.com/400x300">
<img class="arrow" src="https://via.placeholder.com/200x80">
</div>
Im currently working on making onesie scrolling website but i came accross the problem. I want my text be on the centre of first "page" but i cant make it to looks good on phone and desktop at the same time.
With padding-top: 50% it looks good at mobile but terrible at desktop, on the other hand padding-top: 7 looks good on desktop but not much at phone. Can someone help me finding the golden mean?
my html code:
section {
width: 100%;
height: 100vh;
}
.main section.page1 {
background: #81D4FA;
}
.main section.page2 {
background: #F5F5F5;
}
.main section.page3 {
background: #81D4FA;
}
h1 {
font-size: 8vw;
color: #efefef;
text-align: top;
padding-top: 50%;
padding-left: 15%;
}
h2
{
list-style-type: none;
font-size: 4vw;
color: #efefef;
text-align: center;
padding-top: 2%;
}
a.read-more{
border: 2px solid #efefef;
text-decoration: none;
color: inherit;
}
.notnav {
list-style-type: none;
font-size: 3vw;
padding-top: 2%;
padding-left: 5%;
padding-right: 15%;
}
<div class="main">
<section class="page1">
<h1>
ABOUT ME
<li class="notnav">
I am John, 19 years old computer science student. Mainly coding in python, but I am quick lerner and flexible person. I am currently intrested in Artificial Intelligence, Big Data and Design
</li>
</h1>
<h2>
<a class="read-more" href='/about'>Read More</a>
</h2>
</section>
<section class="page2">
<h1>
PROJECTS
</h1>
</section>
<section class="page3">
<h1>
CONTACT
</h1>
</section>
</div>
Try this(without the use of media-query);Sorry late to the party
section {
width: 100%;
height: 100vh;
}
.main section.page1 {
background: #81D4FA;
}
.main section.page2 {
background: #F5F5F5;
}
.main section.page3 {
background: #81D4FA;
}
.page1{
display:flex;
min-height: 100%;
align-items: center;
text-align: center;
flex-direction: column;
justify-content:center;
}
h1 {
font-size: 8vw;
color: #efefef;
}
h2
{
list-style-type: none;
font-size: 4vw;
color: #efefef;
text-align: center;
}
a.read-more{
border: 2px solid #efefef;
text-decoration: none;
color: inherit;
}
.notnav {
list-style-type: none;
font-size: 3vw;
clear: both;
}
Based on your code, here is example of adaption for section.page1 with Media queries. This is what you should use to make your code adapting and responsive.
#media screen and (min-width: 400px){
section {
width: auto;
height: auto;
}
section.page1{
padding: 20px;
}
h1 {
font-size: 8vw;
color: #efefef;
text-align: top;
padding-top: 10px;
padding-left: 15%;
}
}
Here is a large explication about it : Mozilla Developper Using_media_queries
Get more practice and Examples with w3Schools
You can also use bootstrap to get easy css with their grid system : Bootstrap Grid
section {
width: 100%;
height: 100vh;
}
.main section.page1 {
background: #81D4FA;
}
.main section.page2 {
background: #F5F5F5;
}
.main section.page3 {
background: #81D4FA;
}
h1 {
font-size: 8vw;
color: #efefef;
text-align: top;
padding-top: 50%;
padding-left: 15%;
}
h2
{
list-style-type: none;
font-size: 4vw;
color: #efefef;
text-align: center;
padding-top: 2%;
}
a.read-more{
border: 2px solid #efefef;
text-decoration: none;
color: inherit;
}
.notnav {
list-style-type: none;
font-size: 3vw;
padding-top: 2%;
padding-left: 5%;
padding-right: 15%;
}
#media screen and (min-width: 400px){
section {
width: auto;
height: auto;
}
section.page1{
padding: 20px;
}
h1 {
font-size: 8vw;
color: #efefef;
text-align: top;
padding-top: 10px;
padding-left: 15%;
}
}
<div class="main">
<section class="page1">
<h1>
ABOUT ME
</h1>
<div class="notnav">
I am John, 19 years old computer science student. Mainly coding in python, but I am quick lerner and flexible person. I am currently intrested in Artificial Intelligence, Big Data and Design
</div>
<h2>
<a class="read-more" href='/about'>Read More</a>
</h2>
</section>
<section class="page2">
<h1>
PROJECTS
</h1>
</section>
<section class="page3">
<h1>
CONTACT
</h1>
</section>
</div>
I have been working on this website and I have it coded looking perfect on my computer and perfect when I shrink it to mobile size. But, when I look at it on my laptop, the DIV with the text on the left is always either bumped up or bumped down out of place. Also on the laptop, in mobile size there is an unwanted space between the image/boxes. What would be the easiest way to work around this ? Am I setting everything up wrong? Plus, how can I account for every screen size and resolution? It seems maybe the text box could be done differently or something, to make it stay in place easier.
Any help would be GREATLY appreciated!
Head:
<!DOCTYPE html>
<html>
<title>Jesse Ellis | Personal Chef</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Merriweather&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Caladea&display=swap" rel="stylesheet">
CSS:
<style>
html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
body, html {
height: 100%;
line-height: 1.8;
margin: 0;}
.firstrowpad{padding-top:0px; height: 50%; padding-bottom:0px;}
h1,h4,h5,h6 {font-family: 'Caladea', serif;}
h3{
font-family: 'Caladea', serif;
font-weight: normal;
font-size: 4em;
}
h2{
font-family: 'Caladea', serif;
font-weight: normal;
font-size: 2em;
}
.bgoverlay {
position: relative;
background-image: url("https://eaternalzest.com/wp-content/uploads/2019/04/08.0_Seafire_180219.jpg");
background-size: auto;
}
.bgimg-1 {
background-position: center top;
background-repeat: no-repeat;
top: 0;
background-size: 100%;
min-height: 71%;
}
.bgoverlay:before {
content: '';
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
opacity: 0.9;
background-color: #053426;
}
.FirstRow{
background-image: url("https://miro.medium.com/max/9792/1*-xHF1a7BT8hN8KsHbQCDSw.jpeg");
background-position: right;
background-color: #f1f1f1;
background-repeat: no-repeat;
background-size: 50%;
}
.HeaderFont{
font-size: 1.5em;
top: 4%;
width: 20%;
left: 51%;
position: relative;
background: #ffffff;
opacity: 0.9;
line-height: 19pt;
padding: 20px;
padding-top: 30px;
padding-bottom: 30px;
letter-spacing: 2px;
font-family: 'Caladea', serif;
border-right: solid #ccc 0px;
border-radius: 25px;
}
.HeaderBlog{
font-size: 1.5em;
top: -24%;
width: 47.7%;
height: 91%;
overflow: hidden;
left: 1%;
position: relative;
background: #ffffff;
line-height: 30pt;
padding: 30px;
font-family: 'Caladea', serif;
padding-bottom: 240px;
padding-top: 90px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border: 20px solid #BF845C;
}
hr.solid {
border-top: 15px solid #733938;
content: '';
}
#media screen and (max-width: 900px) {
.FirstRow {
background-size: 100%;}
.HeaderFont{
display: none;}
.HeaderBlog{
display: none;}
.HeaderBlog2{
font-size: 1.5em;
top: 250%;
width: 100%;
height: 50%;
overflow: hidden;
position: static;
background: #ffffff;
padding: 30px;
display: inline-block;
}
.bgimg-1 {
background-position: center top;
background-repeat: no-repeat;
top: 0;
background-size: 100%;
min-height: 51%;
}
}
#media screen and (min-width: 1024px) {
.HeaderBlog2{
display: none;}
}
</style>
HTML:
<header class="bgimg-1 bgoverlay">
</header>
<div class="FirstRow firstrowpad">
<div class="HeaderFont"><center> ❝ A dining experience <br>from the comfort of <br>your own <i>home</i>. ❞</center></div>
<div class="HeaderBlog">
<font style="font-size: 2em;"> J</font>esse Ellis is a personal chef for hire in Wilmington, NC and the surrounding area. Wether you are hosting, having a party, or just dinner with the family, he will cook in your kitchen
and deliver custom quality meals. All you have to do is sit back and enjoy the food!<p><p>
<hr class="solid"></hr>
</div>
</div>
<div class="HeaderBlog2">
<center>
Jesse Ellis is a personal chef for <br>hire in the Wilmington, NC area. <br>
Specializing in all types of foods, <br>
he cooks in your kitchen to deliver quality meals.<p><p>
</center>
<hr class="solid">
</div>
</div>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<title>
Home - Hasan's Website
</title>
<style>
body,
html {
height: 100%;
margin: 0;
font-size: 16px;
font-family: "Lato", sans-serif;
font-weight: 400;
line-height: 1.8em;
}
.jumbotron {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-image: url(image.jpg);
background-position: 0% 25%;
background-size: cover;
background-repeat: no-repeat;
border: 1px;
}
.navigation {
background-color: #330;
overflow: hidden;
display: grid;
grid-template-columns: auto auto auto auto auto;
}
.navigation a {
font-size: 20px;
text-decoration: none;
color: #f2f2f2;
text-align: center;
float: left;
}
.navigation a:hover {
background-color: #dddddd;
color: black;
}
.navigation a.active {
background-color: #4CAF50;
color: white;
}
body {
background-image: url("Engineering.jpg");
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
background-color: rgba(0, 0, 0, 0.5);
}
h1 {
margin: auto;
z-index: 4;
text-align: center;
width: 100%;
color: white;
font-size: 100px;
padding: 10px;
}
</style>
</head>
<body>
<div class="navigation">
<a class="active" href="#home">Home</a>
About Me
Careers
Contact Us
Web Development
</div>
<div class="intro">
<div class="jumbotron">
<h1>Computer Engineering</h1>
</div>
</div>
</body>
</html>
I got some help from someone and they used Bootstrap which the teacher did not allow. The bootstrap makes the words not compressed against each other. What can I do to achieve the same purpose without the bootstrap? Like I want to remove the bootstrap, but the title "Computer Engineering," then just compresses. How can remove the bootstrap, but still have the words still properly spaced out? Any help will be greatly appreciated! This is for my Grade 11 Engineering class.
I'm not giving a straight forward solution. But, a way to find the solution in your own way.
Run the page with bootstrap styles included. Open the page a modern browser like Google Chrome. Right click on the element in which you are interested & select Inspect element from the context menu. Now, you can see the CSS properties contributing to the look & feel of the element you are inspecting.
Copy those properties to your own project. Done.
That is happening due to
body, html{
line-height : 1.8em;
}
Just add line-height : 1em; in h1. It should solve the problem.
Guys I have this pen which works fine in desktop, but when I load the page in mobile the background-color:rgb(255,255,255,0.8) of with class='content' is not working.
I use chrome 63 mobile version.
Here is the pen: https://codepen.io/abhiramsanthosh/pen/yEKNOx
Full view: https://codepen.io/abhiramsanthosh/full/yEKNOx
* {
box-sizing: border-box;
}
body, html {
min-height: 100vh;
background-color: #000;
}
body {
margin: 0;
padding: 0;
background-image: url("joker-heath-ledger-monochrome-dark-wallpaper.jpg");
background-position: center;
background-size: cover;
-moz-background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
div {
margin: 0;
}
.title {
min-height: 100vh;
background-image: url("heath-monochrome.jpg");
background-position: top center;
background-size: cover;
-moz-background-size: cover;
background-repeat: no-repeat;
}
h1 {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 15vw;
color: white;
padding-left: 20px;
padding-top: 70vh;
margin: 0;
}
.content {
min-width: 100%;
min-height: 100%;
background-color: rgb(255,255,255,0.8);
}
p {
font-family: 'Montserrat', sans-serif;
font-size: 5vw;
margin: 0;
padding: 30px;
}
.grid {
display: grid;
grid-template-columns: repeat(1,1fr);
}
p.quote {
font-style: italic;
}
.content p {
text-indent: 30%;
text-align: justify;
}
div.extLinks {
min-height: 100vh;
}
.extLinks p {
font-size: 4vw;
color: white;
padding-top: 90vh;
text-align: center;
}
a {
text-decoration: none;
}
a:link {
color: red;
}
a:visited {
color: green;
}
a:hover {
color: green;
}
a:active {
color: green;
}
#media only screen and (min-width: 768px) {
.grid {
grid-template-columns: repeat(2,1fr);
}
h1 {
font-size: 10vw;
padding-left: 30px;
padding-top: 70vh;
}
p {
font-size: 1.5vw;
}
.extLinks p {
font-size: 1.5vw;
}
<html>
<body>
<div class="title">
<h1>HEATH LEDGER</h1>
</div>
<div class="content">
<p>Heath Ledger was an Academy Award-winning, Australian actor best known for his roles in Brokeback Mountain and The Dark Knight. Heath Ledger was born on April 4, 1979, in Perth, Australia. His breakout role was in the film 10 Things I Hate About You with Julia Stiles. Ledger received Academy Award and Golden Globe nominations for his role in Brokeback Mountain.
<br><br>In 2008, after completing filming on Christopher Nolan's The Dark Knight, Ledger died as the result of an accidental prescription drug overdose. He received a posthumous Best Actor Academy Award for his performance as "The Joker."</p>
<div class="grid">
<div>
<blockquote><p class="quote">"I've never felt as old as I did watching Heath explore his talents."</p>-Christopher Nolan</blockquote>
</div>
<div>
<blockquote><p class="quote">"Working with Heath was one of the purest joys of my life. He brought to the role of Ennis more than any of us could have imagined - a thirst for life, for love and for truth, and a vulnerability that made everyone who knew him love him."</p>-Ang Lee</blockquote>
</div>
<div>
<blockquote><p class="quote">"I have an impression, a strong impression, I would have liked him very much as a man if I had. I'd already marveled at some of his work, and had looked forward so much to seeing the work that he would do in the future."</p>-Daniel Day-Lewis</blockquote>
</div>
<div>
<blockquote><p class="quote">"I hope people remember what a good actor he was."</p>-Leonard Maltin</blockquote>
</div>
</div>
</div>
<div class="extLinks">
<p>To know more about this great actor check out his wikipedia page</p>
</div>
</body>
</html>
Thanks in advance for any help :)
Replace
background-color: rgb(255,255,255,0.8)
With
background-color: rgba(255,255,255,0.8)
RGB is a 3-channel format containing data for Red, Green, and Blue.
RGBA is a 4-channel format containing data for Red, Green, Blue, and Alpha.
I found the problem. rgba() is the function for opacity, not rgb().
(Stabbing myself right now for not learning things right >_<