The code is below and it won't let me scroll.
[https://codepen.io/duggalverse/project/full/DkoeNr][1]
swdefrgtyhujiuhygtfrgthghhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
I also want to fix the transparency part so it only gets the text part-any help would be great!!
Last thing I need help in is the background image....it keeps getting repeated no matter what I try...
[1]: https://codepen.io/duggalverse/project/full/DkoeNr
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>About Me</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style type="text/css">
body{
background-image: url(https://i.ibb.co/S7jLZD8/IMG-20190904-WA0000.jpg);
background-size: cover;
background-position-y: center; /*add*/
font-family: tahoma;
overflow: auto;
margin: 0;
padding: 0;
}
.main-banner {
position: relative;
padding: 50px;
max-width: 800px;
/*max-width: 25%;*/ /*add*/
height: 100%;
background-repeat: no-repeat;
background-position: top center;
background-size: cover;
background: rgba(255, 255, 255,.2);
box-shadow: 0 50px 15px rgba(0,0,0,.5);
/*margin: 0 55% 0 auto;*/ /*add*/
margin: 10% auto; /*add*/
margin-right: 55%;
}
/*add class*/
.col-md-6 {
width: 100%;
}
.main-banner .text p{
color: white;
}
p, .text{
position: relative;
line-height: 1.8em;
font-family: tahoma;
text-align: justify;
}
.sec-title.light .title, .sec-title.light h2{
color: white;
}
.btn-style-one{
position: relative;
line-height: 30px;
color: white;
font-size: 15px;
font-weight: 700;
border: 1px solid #fdb30e;
background: #fdb40e;
text-transform: capitalize;
padding: 15px 50px 15px;
}
</style>
</head>x
<body>
<section class="main-banner container">
<div class="auto-con">
<div class="inner-container">
<div class="sec-title light col-md-6">
<div class="title">Hello</div>
<h2>ABOUT ME: <br>
<span style="font-size: 60px;">DUGGALverse</span>
</h2>
<br><br>
<div class="text">
<p>
I'm a self-taught coder utilizing the internet tools to teach myself. With proven communication and creative thinking skills I am always attempting to best myself. I am an aficionado in various innovation fields and plan to keep investigating different dialects in Computer Science. Meaning to use my capacities to effectively fill in the job in your organization/association. Much of the time applauded as persistent by my associates, I can be depended upon to support your organization/association to accomplish its objectives.
</p>
<p>
As a profoundly gifted studen with involvement in the community, I have an assortment of aptitudes and information that would be of incredible advantage to your company. This activity posting is an incredible open door for me to keep expanding on my experience while picking up introduction to a huge frameworks driven plan of action. I like to use my dynamic data innovation range of abilities alongside my group driven character to propel information handling within the role I have currently applied for. I accept that my appended resume will show that I am a brilliant contender for this position. My solid initiative capacities has permitted me to effectively combine and solidify numerous ventures as a candidate within the role I amjapplying for, and I am certain they will permit me to keep on settling on trustworthy choices as an ideal candidate. I approach my work with a hands-on perspective, taking on jobs all through the lifetime of an undertaking. I additionally have a solid scholarly foundation in the coding genre seen clearly.
</p>
</div>
<br>
<div class="btn-box">
Download My Resume
<br><br><br>
<div class="image">
<img src="">
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
First, the body is having overflow: hidden. Remove that and you should be able to scroll.
Secondly, you put the background-repeat on the .main-banner, when it should be on the body where you set the background-image. Also, your background-size doesn't have a '-' in the middle.
Related
For my project, I have created a fake beachside hotel accommodation website. As of now, I feel like I have successfully completed my website in terms of it's content. However, one issue still remains within the development of this website. I have recently discovered that when I reduce the size of the google window when displaying my website will cause the content within it to not display correctly (not be responsive). This specifically affects the header and the footer This is the same deal when I tested my website on a laptop with a much smaller resolution than my computer monitor, and in order for the website to look neat was to zoom out at around 75%. I've seen tutorials on how to do it, and it's mostly to do with using this meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I've also seen that using the min-height tag can help, but to me it doesn't work.
This is affecting mainly the header image and the footer since it has social media icons within it, along with a span tag to separate a link to a contact form. I think the issue might have to do with the placement of my code's more specifically in terms of where I have placed the div's and class's. It may also have to do with the two-column layout present within the code. I also think the solution is simple but I obviously can't figure it out. Any help is appreciated as always. Also keep in mind the code below is only for the Home Page. The styling for other pages are slightly different, but I think I might be able to figure out how to fix the other pages as well after the home page solution has been given to me. If you need screenshots of it I'll happily upload them.
<!DOCTYPE html>
<html>
<head>
<meta lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="styles.css">
<title>Home - Sorento by the Sea</title>
</head>
<div class="container">
<div id="header">
<a href="index.html" style="text-decoration: none;">
<img src="images/sorrento_by_the_sea_logo.jpg" alt="Our Logo" title="Our Logo">
</a>
</div>
<div id="nav">
<ul>
Home
|
Getting There
|
The Apartment
|
Pricing and T&C
</ul>
</div>
<body>
<div class="column-layout">
<div class="main-column">
<h1>Who are we?</h1>
<p><b>Sorrento by the Sea</b> is a luxary apartment located on the picturesque <b>Mornington Pennisula</b>, an approximate one-hour scenic drive from Melbourne, and right next door to Portsea.
Our apartment is a lazy 10-minute walk from the relaxed township of Sorrento that offers restaurants, cafes, a chemist, a supermarket, a butcher and lots more. It is located in a quiet avenue, just 4 houses from the beach. It is in easy walking distance of the ocean beaches and surf.</p>
<p>Your <b>private luxury apartment</b> consists of a spacious living area with <b>leather lounge suite</b> overlooking a sun drenched, tree-filled private garden.</p>
<p>A <b>separate kitchenette</b> has everything you need to make your stay relaxed and comfortable. A <b>queen sized bedroom</b> and an amazing bathroom complete with <b>free standing black bath</b> entices you to relax and unwind.</p>
<p>Two TVs are sure to make everyone happy! An <b>undercover BBQ area</b> with seating offers plenty of space to stretch out and enjoy that cup of freshly brewed coffee or a glass of wine.</p>
<h2 style="color:#4d1d18;padding-left:220px;font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;">This is the perfect place for a home away from home</h2>
<img src="images/back_beach.jpg" alt="Back Beach" title="Back Beach" style="width:690px;margin-left: 210px;">
<div class="pet">
<h1>Pet Friendly</h1>
<p>We understand that pets are an important part of the family.
<b>We are pet friendly by arrangement</b> - so please talk to us about your needs.
We offer a <b>fully enclosed backyard, shady trees, water bowls, food bowls and a lead if you forget one</b>.</p>
</div>
</div>
<div class="tests">
<h1>Testimonials</h1>
<q>So sorry we had to go home after only one night. We will definitely stay two nights next time!</q>
<br>
<q>This apartment is close to everything. We didn't need the car as the walks were amazing"</q>
<br>
<q>Your attention to detail made our stay so relaxed and comfortable. It was such a shame we had to drive back to our little flat, which is smaller than your apartment. We want to move in!</q>
<br>
<q>Cosy and comfortable. We imagined we owned it and enjoyed being spoilt. Thank you</q>
<br>
<q>What a magical stay at such an amazing place. Completely self-contained and very private. We loved it and will return again and again.</q>
<br>
<q>Never felt so spoilt. A perfect get away and so close to everything. We had the best bath ever!</q>
<br>
<q>A few minutes’ walk from the beach, picnic basket in hand and towel over the shoulder - can't think of anything better except that wonderful breakfast. That bacon is the best in Melbourne!</q>
<br>
<q>Relaxing in that sunny garden watching our dog chasing balls. Let me stay forever!</q>
</div>
</div>
<div class="flex-container">
<img src="images/ocean_beach.jpg" alt="Ocean Beach" title="Beach with Rocks" style="max-width:100%;height:auto;margin:0 60px 0 60px;">
<br>
<img src="images/back_beach_sorrento.jpg" alt="Ocean Beach 2" title="Beach Walkway" style="max-width:100%;height:auto;margin-right:60px;">
<br>
<img src="images/ocean_beach3.jpg" alt="Ocean Beach 3" title="Dark Blue Ocean" style="max-width:100%;height:auto;">
</div>
</body>
<footer>
<div class="social-media">
<ul>
<img src="images/facebook_small.png">
<img src="images/instagram_small.png">
<img src="images/twitter_small.png">
<img src="images/youtube-variation_small.png">
<img src="images/paypal_small.png">
</ul>
<span>
Contact form
</span>
</div>
</footer>
</div>
</html>
And this is the CSS:
* {
font-family: Helvetica, sans-serif;
background-color: lightsteelblue;
}
p {
line-height: 150%;
}
.container {
height:auto;
max-width: 100%;
}
#header {
margin: 220px, 250px;
}
#header img {
max-width:100%;
height:auto;
margin-left: 500px;
}
#nav {
text-decoration:none;
text-align:right;
padding-right:20px;
border: 3.55px solid #4d1d18;
border-radius:10px;
margin-top: 5px;
background-color: lightsteelblue;
max-width:100% ;
}
a {
text-decoration: none;
color:#4d1d18
}
a:visited {
color: #4d1d18;
}
a:hover {
color: #555;
}
a:active {
color: #555;
}
h1 {
color:#87423c;
font-size: 36px;
}
h2 {
font-size: 24px;
color: #4d1d18;
}
/*---------footer-----*/
footer {
background-color: lightsteelblue;
color: #443;
}
.social-media{
text-align: center;
border: 3px solid #4d1d18;
border-radius: 15px;
padding: 5px 15px;
margin-top: 15px;
}
.social-media span {
text-align: right;
margin-left: 1300px;
border: 1px solid #682721;
border-radius: 5px;
padding: 10px;
}
.social-media img {
padding-right: 20px;
}
/*--------Home----------*/
.column-layout {
line-height: 1.60;
padding: 20px 20px;
display:flex;
background-color: lightsteelblue;
border-radius: 10px;
border: 1px
}
.main-column {
display:flex;
flex-direction:column;
text-align:left;
margin-top:20px;
margin-bottom:30px;
margin-right:80px;
margin-left:20px;
}
.tests {
display: flex;
flex-direction: column;
margin-top: 140px;
border: 5px solid #4d1d18;
border-radius:20px;
height: 800px;
padding: 0px 30px 0px 30px;
}
q {font-style:italic;}
.flex-container {
display: flex;
background-color: lightsteelblue;
}
.pet {
border: dotted #4d1d18;
border-radius: 10px;
padding: 0px 20px 10px 30px;
margin-top: 50px;
}
ul {
display:inline-block;
}
Use max-height: 100%; on your image. As you did with max-widthon your image.
I think it is a good practice to wrap your image <img> in a container <div>. You have to set the container's width and height to some values (either with flex or percent values or fixed values) and then set the image's width and height as a percent, relative to its container. You can also try and use the object-fit: contain; css property on the image. You can also consider using media queries for different screen resolutions. I found this stackoverflow QA useful in this topic.
Edit: Along with object-fit: contain; you can use max-width: 100%; and max-height: 100%; on the image.
I'm trying to make a website where the main content is on the left and miscellaneous things on the right. The two divs are wrapped inside another div that centers the page and leave some white space on both side. However the right div always go below the left one even though there's clearly still room for the the right one to fit. I know this problem is pretty common but I tried many solutions like display:inline-block, and it doesn't work at all. Here's what my page looks like right now: https://hongweichen0.github.io/
body {
font-family: "Roboto", sans-serif;
margin: 0px;
padding: 0px;
background-color: rgb(220, 240, 230);
}
.banner {
text-align: center;
background: rgb(20, 16, 16);
position: fixed;
top: 0px;
width: 100%;
}
.banner h1 {
color: rgb(255, 255, 255);
font-weight: bold;
font-style: italic;
}
.centerPage {
background-color: rgb(255, 249, 249);
width: 80%;
margin: auto;
margin-top: 60px;
}
.content {
float: left;
width: 70%;
padding: 20px;
border: 5px solid black;
}
.contentRight {
width: 10%;
}
.clear {
width: 100%;
line-height: 0px;
clear: both;
}
.content p,
.content ul {
width: 100%;
line-height: 1.5em;
text-align: justify;
}
.content h2 {
width: 100%;
border-bottom: 2px solid black
}
.content img {
float: left;
margin: 10px;
margin-top: 0px;
clear: both;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hong Wei Chen's Website</title>
<link rel="stylesheet" type="text/css" href="main.css" />
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<div class="banner">
<h1>Hong Wei Chen</h1>
</div>
<div class="centerPage">
<div class="content">
<h2>Introduction</h2>
<p>
My name is Hong Wei Chen. I'm currently enrolled in Midwood High School as a Junior. I created this personal website for fun just to show off what I learned about HTML/CSS from KhanAcademy. Still pretty new to web design and I plan to learn more about
how to implement Javascript into websites. There's still a lot for me to learn but I plan to keep on going and become a badass programmer. My ultimate goal is to become expert in both front-end and back-end development. Now, let me show off as
much as I can. No one will visit this site anyway.
</p>
<h2>Useless Info (not personal)</h2>
<ul>
<li>First Name: Hong Wei</li>
<li>Last Name: Chen</li>
<li>Age: 16</li>
<li>Favorite Food: EGGS!!!</li>
<li>Favorite Movie: "Groundhog Day", "Interstellar"</li>
<li>Cats or Dogs: Dogs</li>
<li>Favorite Companies: SpaceX, Google, Tesla</li>
<li>Favorite Color: Blue</li>
</ul>
<h2>My Incredible Works</h2>
<img src="Abstract%20Fish.PNG" alt="Abstract Fish. A random fish painter program." width="200">
<p>This is an intro to Javascript project I made on Khan Academy during my early stages of learning. The idea is that when the user clicks on the canvas, a fish with random size and color will be drawn on the position of the cursor. This lesson is
about functions and how to call them with parameters. In this case, the parameter is the x and y position, which is provided by the user's mouse click. This worked out pretty well and I even took a screen shot of it and used it as my avatar for
many websites. It's a piece of art made with Processing JS.</p>
<img src="Shooting%20Star.PNG" alt="Shooting Star. A shooting star and explosion animation" width="200">
<p>This one is also from the Intro to Javascript course on Khan Academy. I love their free courses, probably the best ones out there. Anyway, this is actually an animation using the draw function. I did this on the second day I started this course
and it took me a solid 2 hours to finish. I went way pass the expectation and added a bunch of stuffs. At the end I was saying to myself, "hey, this is fun". I finally realized how amazing and fun programming can be.</p>
</div>
<div class="clear"></div>
<div class="contentRight">
<h1>Cool Buttons!</h1>
</div>
</div>
<script type="text/javascript" src=script.js></script>
</body>
</html>
You can use flexbox to handle the positioning of the left and right containers. Please see the code snippet below.
body {
font-family: "Roboto", sans-serif;
margin: 0px;
padding: 0px;
background-color: rgb(220, 240, 230);
}
.banner {
text-align: center;
background: rgb(20, 16, 16);
position: fixed;
top: 0px;
width: 100%;
}
.banner h1 {
color: rgb(255, 255, 255);
font-weight: bold;
font-style: italic;
}
.centerPage {
background-color: rgb(255, 249, 249);
width: 80%;
margin: auto;
margin-top: 60px;
display: flex;
flex-direction: row;
}
.content {
flex: 1 1 auto;
padding: 20px;
border: 5px solid black;
}
.contentRight {
flex: 0 0 80px;
padding: 20px 0 0 0;
}
.clear {
width: 100%;
line-height: 0px;
clear: both;
}
.content p,
.content ul {
width: 100%;
line-height: 1.5em;
text-align: justify;
}
.content h2 {
width: 100%;
border-bottom: 2px solid black
}
.content img {
float: left;
margin: 10px;
margin-top: 0px;
clear: both;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hong Wei Chen's Website</title>
<link rel="stylesheet" type="text/css" href="main.css" />
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<div class="banner">
<h1>Hong Wei Chen</h1>
</div>
<div class="centerPage">
<div class="content">
<h2>Introduction</h2>
<p>
My name is Hong Wei Chen. I'm currently enrolled in Midwood High School as a Junior. I created this personal website for fun just to show off what I learned about HTML/CSS from KhanAcademy. Still pretty new to web design and I plan to learn more about
how to implement Javascript into websites. There's still a lot for me to learn but I plan to keep on going and become a badass programmer. My ultimate goal is to become expert in both front-end and back-end development. Now, let me show off as
much as I can. No one will visit this site anyway.
</p>
<h2>Useless Info (not personal)</h2>
<ul>
<li>First Name: Hong Wei</li>
<li>Last Name: Chen</li>
<li>Age: 16</li>
<li>Favorite Food: EGGS!!!</li>
<li>Favorite Movie: "Groundhog Day", "Interstellar"</li>
<li>Cats or Dogs: Dogs</li>
<li>Favorite Companies: SpaceX, Google, Tesla</li>
<li>Favorite Color: Blue</li>
</ul>
<h2>My Incredible Works</h2>
<img src="Abstract%20Fish.PNG" alt="Abstract Fish. A random fish painter program." width="200">
<p>This is an intro to Javascript project I made on Khan Academy during my early stages of learning. The idea is that when the user clicks on the canvas, a fish with random size and color will be drawn on the position of the cursor. This lesson is
about functions and how to call them with parameters. In this case, the parameter is the x and y position, which is provided by the user's mouse click. This worked out pretty well and I even took a screen shot of it and used it as my avatar for
many websites. It's a piece of art made with Processing JS.</p>
<img src="Shooting%20Star.PNG" alt="Shooting Star. A shooting star and explosion animation" width="200">
<p>This one is also from the Intro to Javascript course on Khan Academy. I love their free courses, probably the best ones out there. Anyway, this is actually an animation using the draw function. I did this on the second day I started this course
and it took me a solid 2 hours to finish. I went way pass the expectation and added a bunch of stuffs. At the end I was saying to myself, "hey, this is fun". I finally realized how amazing and fun programming can be.</p>
</div>
<div class="clear"></div>
<div class="contentRight">
<h1>Cool Buttons!</h1>
</div>
</div>
<script type="text/javascript" src=script.js></script>
</body>
</html>
Why do you have div.clear between them? When I removed it, it works. Clear specifies on which side are floating elements not allowed to float. Also, you can use flexbox for this.
I am completely positive that my code causes my title to be in the center of my textbox, however, it doesn't look like it is! Can someone check that my code is sound?
.container {
width: 95%;
margin: 0 auto;
}
.home-about-textbox {
background-color: #232323;
padding: 4em;
width: 100vw;
margin-left: -2.65%;
outline: 2px solid #00ff6c;
outline-offset: -2.5em;
color: #FFF;
}
.home-about-textbox h1 {
text-align: center;
color: #00ff6c;
}
<div class="container">
<section class="home-about">
<div class="home-about-textbox">
<h1>Who I am</h1>
<p>I'm a young website developer who focusses on primarily making websites that are proven to have a <strong>high conversion rate</strong> so that my clients can experience that feeling of <strong>ever increasing cash flow!</strong></p>
<p>I usually like to spend a lot of my freetime working on either: a client's website design, or my personal website design. I am never the 'second-best' when it comes to website design which is why I offer numerous <strong>free</strong> design revisions
upon submission!</p>
</div>
</section>
</div>
Image of the Textbox:
Removing width: 100vwfrom .home-about-textbox seems fixed problem, no?
.container {
width: 95%;
margin: 0 auto;
}
.home-about-textbox {
background-color: #232323;
padding: 4em;
margin-left: -2.65%;
outline: 2px solid #00ff6c;
outline-offset: -2.5em;
color: #FFF;
}
.home-about-textbox h1 {
text-align: center;
color: #00ff6c;
}
<div class="container">
<section class="home-about">
<div class="home-about-textbox">
<h1>Who I am</h1>
<p>I'm a young website developer who focusses on primarily making websites that are proven to have a <strong>high conversion rate</strong> so that my clients can experience that feeling of <strong>ever increasing cash flow!</strong></p>
<p>I usually like to spend a lot of my freetime working on either: a client's website design, or my personal website design. I am never the 'second-best' when it comes to website design which is why I offer numerous <strong>free</strong> design revisions
upon submission!</p>
</div>
</section>
</div>
Why not write the <p> or <div> inside a <center> tag. It causes anything to be centered. In order to avoid further problems isolote the element to be centered from other elements.
body {
margin: 0px;
background-color: rgba(195, 246, 255, 0.48);
}
.nav {
background-color: rgba(190, 190, 190, 0.72);
position: fixed;
top: 0px;
right: 0px;
left: 0px;
text-align: center;
height: 85px;
border: 1px solid black;
}
ul {
position: relative;
top: 6px;
left: 360px;
width: 450px;
height: 60px;
margin: 0px auto;
font-family: "Cairo";
padding: 5px;
}
li {
position: relative;
top: 6px;
display: inline;
font-size: 25px;
text-transform: uppercase;
letter-spacing: .03em;
}
li.spacing1 {
margin-right: 25px;
}
li.spacing2 {
margin-left: 25px;
}
li:hover {
border: 1px solid red;
padding: 5px;
}
.content {
background-color: white;
width: 1100px;
margin: 87px auto 0px auto;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="../css/example.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Cairo" rel="stylesheet">
<title>My Portfolio</title>
</head>
<body>
<div class="nav">
<ul>
<li class="spacing1">About</li>
<li>Portfolio</li>
<li class="spacing2">Contact</li>
</ul>
</div>
<div class="content">
<p id="about">My name is Lawrence Yoon and I graduated from Cal Poly Pomona with a degree in Hospitality Management and minor in Business Marketing. After working in the hospitality industry for 5+ years, I wanted to expand my knowledge by trying out different
career paths and happened to find out about computer programming. I've been self-learning for 3+ months, and hope to become a front-end web developer soon! I am proficient with HTML and CSS, and have some knowledge of JavaScript. Once I get my first
job, I hope to continue studying and eventually learn back-end. My goal is to one day become a full-stack developer!</p>
<p>So far, I have knowledge of HTML, CSS, Bootstrap, JavaScript, and jQuery. I have used StackOverflow a couple times, and although I don't rely on this, it's great to ask questions and receive answers promptly from a loving community. Jon Duckett's
Introduction to HTML and CSS has been a great teacher to me thus far; although it's a bit dated, it contains detailed images and helped me greatly step foot into the world of web development. Following this book, I got his second book for JavaScript
and jQuery and have started to read through that. While I'm doing this, I'm learning from FreeCodeCamp, which immensely helped because through their projects, I'm able to make this file on Codepen, which will become my portfolio! I will definitely
try to finish all FCC challenges, and make a couple of apps to showcase my skills!</p>
<p>As of right now, I'm not looking for a job because I lack the skills necessary to get my first job in web development. In a couple of months, I hope to polish what I know so far as well as learn new skills to get my first job. In time, I will showcase
my skills by demonstrating my abilities through the makings of small apps. Thanks for reading! Please don't hesitate to reach out to me to provide tips, or if you want to talk about anything I'm all ears!</p>
<p id="portfolio">Portfolio:</p>
<img src="http://res.cloudinary.com/lyoon/image/upload/v1503300012/06_10_16_buqi65.jpg" alt="Beautiful sunset in Redondo Beach" width="300" height="300">
<img src="http://res.cloudinary.com/lyoon/image/upload/v1503299864/01_30_16_2_d1ntei.jpg" alt="Gray day in Redondo Beach" width="300" height="300">
<img src="http://res.cloudinary.com/lyoon/image/upload/v1503299922/02_01_16_wbmyow.jpg" alt="Water in Redondo Beach" width="300" height="300">
<img src="http://res.cloudinary.com/lyoon/image/upload/v1503300012/06_10_16_buqi65.jpg" alt="Beautiful sunset" width="300" height="300">
<p>Contact me here:</p>
<input type="text">
<br>
<input type="text">
<br>
<input type="text">
<br>
<input type="submit" value="Send">
<p id="contact">Here's where you can get in touch with me! Here, you can request for my resume, get more details on my experience, or learn more about my favorite hobbies! I will reply as soon as I am able, thanks!
</div>
</body>
</html>
Two questions:
I have my position: fixed nav-bar that is blocking my anchor tags (about, portfolio, contact), meaning when I click them, it takes me to their location but the nav-bar is blocking the start. When I click the links on the top, how can I make it so that it starts below my nav-bar?
I am using CSS li:visited {text-decoration: none;} but it changes to color purple and still have an underline. Why is that happening?
To resolve the issue with in-page anchors and a fixed header, what you need to do is to create and relatively position an anchor element above the content section.
Fiddle example: https://jsbin.com/dosalajotu/edit?html,css,output
For example, if your header was 50px tall:
header { height: 50px; }
.anchor { position: relative; top: -50px; }
<section>
<div id="about" class="anchor"></div>
</section>
With the :visited state, this would apply to a elements, not to li elements. If you update your CSS selector and also override the colour, that should resolve the issue.
li a:active, li a:visited { color: red; text-decoration: none; }
first of all my problem is . i am coding a in parllex website in bootstrap i have putted a background image on section . but when i aplly opacity on it, the opacity apply on whole section but i don't want to . i just want opacity to be effective on image only but not on text and i have tried every solution on stack overflow which i can understand. plz help me out . my project deadlines are close. here is the code .
the section with id quotes here i have to apply the image . but don't want opacity on my text .
<!-- inpirational quotes
===================================================================== -->
<section id="quotes" data-speed="10" data-type="background">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2 section-heading animated"
style="text-align:center" data-animation="fadeInUp"
data-animation-delay="0">
<h2>Financial Services</h2>
<h1>Dedicated to Creating the Best Mobile
Financial Services Platform</h1>
<p class="line"> </p>
<div class="quotes-p">
<div class="items">
<div class="text">Over 2.5 billion people globally are not
supported by the traditional banking methods; they do not
have access to a bank account. The good news is that these
people have mobile phones and in most cases all they need
to complete a financial transaction. It is also essential
that people have a secure, safe, and seamless way to
manage their cash which is First Global Data's strength.
</div>
</div>
<div class="items">
<div class="text">LEADING EDGE TECHNOLOGY First Global has
developed world class industry leading proprietary
technology which allows the company to deliver a multitude
of secure financial services such as International Money
m Remittance, Loyalty and Rewards Programs.<br><br></div>
</div>
<div class="items">
<div class="text">First Global Money Inc., enables you to
send money "At any Moment, From Anywhere, to Anyone Around
the World”! <br><br><br><br></div>
</div>
</div>
</div>
</div>
</div>
</section>
the css goes here
#quotes {
color: #fff;
}
#quotes {
background-attachment: fixed;
background: url(../../img/parallax/1.jpg);
background-repeat: repeat-y;
background-position: 50% 0;
background-size: cover;
}
#quotes h2 {
color: #FFF;
}
#quotes .line {
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #fff;
margin-bottom: 30px;
width: 100px;
margin-left: auto;
margin-right: auto;
}
#quotes .text {
font-size: 22px;
font-weight: 300;
text-align: center;
}
#quotes .name {
color: #FFF;
font-size: 22px;
font-weight: 300;
text-align: center;
font-style: italic;
margin-top: 20px;
margin-bottom: 20px;
}
background: url(../../img/parallax/1.jpg);
to
background: url(../../img/parallax/1.jpg) rgba(0,0,0,0.3);
I have applied .3 on opacity, try this, but RGBA in IE, yes be careful.
Use this
filter:alpha(opacity=x); /* IE */
-moz-opacity:x; /* Mozilla */
opacity: x; /* CSS3 */
below
background: url(../../img/parallax/1.jpg);
Change x to wanted value.
Check this link for more information