I have a question regarding HTML. Since I'm quite new to this I'm not sure if my way of coding is efficient. The main issue for me is how the page looks when the page is zoomed in on the browser, everything will become clustered and overlapped with each other. How should I code to fix this with just pure HTML and CSS?
Here's some links to images:
At 100% zoom, the page looks like this: http://i.imgur.com/yW7OWlN.jpg
At 150% zoom, the page looks like this: http://i.imgur.com/kmv9e3k.jpg
Here's my code for the HTML:
<!DOCTYPE html>
<html>
<head>
<title>Sample Site</title>
<link rel="stylesheet" type="text/css" href="Site.css">
</head>
<body>
<div class="logo">
<img src="Website Logo.png" alt="Website Logo" height="180px" width="300px">
</div>
<div class="slogan">
<font color="#bfbfbf"><p>Good music, good friends, the rich aroma of
<font color="red">Strawberry</font>, <font color="blue">Blueberry</font>,
<font color="orange">Peach</font>, <font color="purple">Grape</font>, and cool
<font color="green">Menthol</font>.</p>
<p>Let our flavours enthrall you, as you rock the night away.</p></font>
</div>
<div class="sloganFooter">
<font class="part1" color="#bfbfbf">Come and </font>
<font class="part2" color="aqua">DISCOVER EXCITEMENT!</font></h3>
</div>
<div class="navigation">
<ul>
<li><p>HOME</p></li>
<li><p>PRODUCTS</p></li>
<li><p>VENDORS</p></li>
<li><p>FAQ</p></li>
<li><p>CONTACT</p></li>
</ul>
</div>
<div class="mainPageImage">
<img src="Main Page.png" alt="Main Page Image">
</div>
<div class="socialMediaLinks">
<img src="facebook.png" alt="Facebook" height="40px" width="40px"
style="margin-right:15px;">
<img src="twitter.png" alt="Twitter" height="40px" width="40px" style="margin-right:15px;">
<img src="instagram.png" alt="Instagram" height="40px" width="40px"
style="margin-right:15px;">
</div>
<div class="copyright">
<font color="#bfbfbf">©2014 E-Clear Limited. All rights reserved.</font>
</div>
</body>
</html>
Here's my code for the CSS:
body
{
background-image: url("Website BG.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-color: black;
}
ul
{
list-style-type: none;
}
.logo
{
margin-left: 17.500em;
margin-top: 2.500em;
}
.slogan
{
position: absolute;
left: 43%;
top: 5%;
font-size: 1.250em;
font-family: Calibri;
line-height: 50%;
}
.sloganFooter
{
position: absolute;
left: 65%;
top: 15%;
}
.part1
{
font-size: 1.250em;
}
.part2
{
font-size: 1.500em;
font-weight: bold;
}
.navigation
{
position: absolute;
color: #bfbfbf;
left: 12%;
top: 25%;
font-size: 2.188em;
}
.mainPageImage
{
position: absolute;
left: 26%;
top: 25%;
}
.socialMediaLinks
{
position: absolute;
top: 90%;
left: 50%;
}
.copyright
{
position: absolute;
top: 95%;
left: 46.5%;
}
You should use relative position for "mainPageImage" div. Chrome has also known problems with the zoom. Meta viewport i do not think changes anything.
Put this line in your HTML <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">
If you don't want the user to scale, you can set the user-scalable attribute to "no":
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
Use these tags to get your site to scale however you want.
Also, if your site is designed with good responsive design in mind, then zooming and scaling won't be as much of an issue.
Hope this helps!
Related
My thing is not working i can't figure out any errors too.As far as i know i tried to separate those mountains and cloud on different level which seems not to be working rather they're sitting beside on their parent element
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="icon" href="images/icon2.ico">
<title>Farhan Sadiq</title>
</head>
<body class="body">
<div class="top-container">
<img class: "top-cloud" src="images/cloud.png" alt="cloud-img">
<h1>Farhan Sadiq</h1>
<p><span class="underline">WebDevloper</span> and <span class="underline">GameDevloper</span></p>
<img class: "bottom-cloud" src="images/cloud.png" alt="cloud-img">
<img src="images/mountain.png" alt="mountain-img">
</div>
<div class="middle-container">
</div>
<div class="bottom-container">
</div>
</body>
</html>
.body {
margin: 0;
text-align: center;
}
h1 {
margin-top: 0;
}
.top-container {
background-color: #CEE5D0;
}
.middle-container {
background-color: pink;
width: 200px;
height: 200px;
}
.bottom-container {
background-color: yellow;
width: 200px;
height: 200px;
}
.underline {
text-decoration: underline;
}
.bottom-cloud {
position: absolute;
}
you have a typo in the section, the property class uses = instead of : , then what does the output you expect mean, how do you separate it?
There is a typo class in the tag. You have to change the class in this img tag class: "top-cloud" so it looks like this class="top-cloud".
I have started trying to code my first website after learning for about 2 days.. and have run into some problems (inevitably):
When viewing the page from a phone, everything gets moved way out of position
I can see the home screen absolutely fine on the live server but after importing the files to host the website, the background isn't coming up
When zooming in/out of the page elements move around
Any help or advice would be appreciated, thank you in advance!
The website in question where I have uploaded the home page is: http://btbco.co.uk/
What I've coded in the index.html and styles.css files (in Visual Studio Code) is copied below:
(Please bare in mind I am very much as beginner as you can get and my terminology and knowledge will be very limited)
html {
margin: 0;
padding: 0;
height: 100%;
}
img.logo {
max-width: 31rem;
position: absolute;
left: 85rem;
margin: 0 auto;
}
h1.hometitle {
color: rgba(255, 0, 0, 0);
}
footer {
color: white;
position: absolute;
bottom: 0%;
width: 99%;
text-align: center;
background: black;
margin: 0 auto;
}
ul.home-list {
list-style: none;
position: absolute;
top: 21rem;
left: 88rem;
color: white;
width: 25rem;
}
li.homenav {
color: #ffbd59;
font-size: 3rem;
text-decoration: underline;
text-decoration-color: #000000;
background-color: black;
border: groove;
padding-top: 0.1px;
max-width: 25rem;
position: static;
}
body {
background-image: url(/Images/Home\ page.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
margin: 0;
padding: 0;
height: 100%;
overflow-y: hidden;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/Images/Browser logo.png" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="robots" content="index,follow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0," />
<meta
name="keywords"
content="burgers, beef burgers, halal, halal burgers, food, halal food"
/>
<meta
name="description"
content="The new home of fresh juicy burgers. We use halal 100% pure beef in our patties."
/>
<link rel="stylesheet" href="styles.css">
<title>Bun The Burger | The new home of fresh juicy beef burgers</title>
</head>
<div class="logo">
</div>
<h1 class="hometitle">
<em>Bun The Burger ©</em>
</h1>
<!-- Logo-->
<a href="http://buntheburger.co.uk">
<img class="logo" src="images/LOGO.png" alt="Bun The Burgers Logo" />
</a>
<!--Navigation Menu-->
<div class="Navigation"> <nav>
<ul class="home-list">
<li class="homenav">Menu</li>
<li class="homenav">Order</li>
<li class="homenav">About Us</li>
<li class="homenav">Testimonials</li>
<li class="homenav">Contact Us</li>
</nav>
</div>
<!--Footer-->
<footer>
<p> 2022 Bun The Burger © – All Rights Reserved</p>
<p> Home • Menu • Order • About Us • Contact Us • Privacy Policy • Terms and Conditions</p>
</footer>
</body>
</html>
I adjusted your background-positioning and also, the biggest thing I would suggest when trying to make your site responsive is to stay away from absolute positioning as much as possible. For example, on your ul and logo you have left: 88rem. 88rem is going to be different on all media devices so on mobile devices (smaller screens) it will be completely out of the screen and will cause overflow on the x-axis. I removed that absolute positioning and added a container so that I could use a flexbox on your content. Your content is now responsive without any x-axis overflow. I also adjusted your footer so it was 100 % width of all devices.
Also, you had a few errors which will cause semantic issues later on. You don't have an opening body tag and you forgot to close your unordered list ul. Be sure to avoid these errors as much as possible in the future, cause they won't accurately affect the live front-end if they are present, which could cause CSS that is unnecessary. This should get you started on a responsive build, however.
Also, I suggest using a good IDE editor that formats your code properly, so these semantic errors can be greatly reduced. For a beginner, I would recommend VS code.
html {
margin: 0;
padding: 0;
height: 100%;
}
img.logo {
max-width: 31rem;
position: absolute;
right: 0;
margin: 0 auto;
}
h1.hometitle {
color: rgba(255, 0, 0, 0);
}
footer {
color: white;
position: absolute;
bottom: 0%;
width: 100vw;
text-align: center;
background: black;
margin: 0 auto;
}
ul.home-list {
list-style: none;
position: relative;
color: white;
width: 25rem;
}
li.homenav {
color: #ffbd59;
font-size: 3rem;
text-decoration: underline;
text-decoration-color: #000000;
background-color: black;
border: groove;
padding-top: 0.1px;
position: static;
}
body {
background-image: url('https://dummyimage.com/1000/507c8c/fff');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-position: center;
margin: 0;
padding: 0;
overflow-y: hidden;
}
.container {
display: flex;
justify-content: right;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/Images/Browser logo.png" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="robots" content="index,follow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0," />
<meta name="keywords" content="burgers, beef burgers, halal, halal burgers, food, halal food" />
<meta name="description" content="The new home of fresh juicy burgers. We use halal 100% pure beef in our patties." />
<link rel="stylesheet" href="styles.css">
<title>Bun The Burger | The new home of fresh juicy beef burgers</title>
</head>
<body>
<div class="container">
<div class="logo">
<!-- Logo-->
<a href="http://buntheburger.co.uk">
<img class="logo" src="images/LOGO.png" alt="Bun The Burgers Logo" />
</a>
<!--Navigation Menu-->
<div class="Navigation">
<nav>
<ul class="home-list">
<a href="http://menu.buntheburger.co.uk">
<li class="homenav">Menu</li>
</a>
<a href="http://order.buntheburger.co.uk">
<li class="homenav">Order</li>
</a>
<a href="http://aboutus.buntheburger.co.uk">
<li class="homenav">About Us</li>
</a>
<a href="http://testimonials.buntheburger.co.uk">
<li class="homenav">Testimonials</li>
</a>
<a href="http://contactus.buntheburger.co.uk">
<li class="homenav">Contact Us</li>
</a>
</ul>
</nav>
</div>
</div>
<h1 class="hometitle">
<em>Bun The Burger ©</em>
</h1>
</div>
<!--Footer-->
<footer>
<p> 2022 Bun The Burger © – All Rights Reserved</p>
<p> Home • Menu • Order • About Us • Contact Us • Privacy Policy • Terms and Conditions</p>
</footer>
</body>
</html>
I’m somewhat of a newbie with HTML and CSS, trying to replicate a more 90s CSS style by using iframes for a simple test site I’ve been working on recently. However, the text that I’m attempting to display within the iframe is always cut off, despite a scroll bar being coded in and visible. The scroll only adjusts a short way and doesn’t allow you to see the full contents of the text. Please advise. I’m sure I’ve made a simple error that you’ll notice in a few seconds, thanks in advance!
My html for the index (iframe and base)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Pen and Parchment</title>
<link href="/style.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<div id="mapp">
<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="https://img.nickpic.host/5woiL6.png" usemap="#image-map">
<map name="image-map">
<area target="_pnp" alt="my homepage" title="my homepage" href="/home.html" coords="616,500,655,507,683,513,688,494,639,481,610,476" shape="poly">
<area target="_pnp" alt="about me" title="about me" href="/about.html" coords="600,535,648,535,683,545,695,526,637,515,611,511" shape="poly">
<area target="_pnp" alt="who i'm showing off right now" title="who i'm showing off right now" href="/showing.html" coords="613,559,685,571,691,555,613,543" shape="poly">
<area target="_pnp" alt="my whole crew" title="my whole crew" href="/crew.html" coords="608,588,680,597,677,581,607,567" shape="poly">
<area target="_pnp" alt="what's coming next" title="what's coming next" href="/plans.html" coords="600,618,671,626,667,607,602,599" shape="poly">
<area target="_pnp" alt="your way outta here" title="your way outta here" href="/links.html" coords="595,653,664,656,664,636,600,631" shape="poly">
</map>
<div id="cont"><iframe width="500px" height="260px" name="_pnp" frameborder="0" scrolling="auto" src="/home.html"></iframe></div>
<div id="bernard"><img src="https://img.nickpic.host/5wv65b.png"></div>
</div>
</div>
</body>
</html>
CSS
body {
position:fixed;
}
#mapp {
width: 450px;
height: 400px;
position: relative;
margin: auto;
left: 0;
right: 300px;
top: 0;
bottom: 0;
z-index: 1;
}
#cont {
height: 250px;
width: 500px;
position: relative;
margin: 10px;
top: -630px;
left: 150px;
z-index: 2;
overflow-y: scroll;
overflow-x: clip;
}
#bernard {
height: 245px;
width: 196px;
position: relative;
margin: auto;
top: -830px;
left: 472px;
z-index: 3;
}
#text {font-size:12pt; color:#000; font-family: courier, serif; z-index: 10; padding-bottom: 10px; min-height:250px; height:100%}
#text img {max-width:500px;}
#text h1 {text-align:center;font-size:25pt;border-bottom:1px solid #819176;color:#a7b487;text-shadow:1px 1px 0px #819176;margin-top:-15px; letter-spacing:3px;}
#text h2 {font-weight:normal;text-align:center;font-size:20pt;letter-spacing:-1.5px;color:#8A906E;text-decoration:underline;}
#text a {text-decoration:none;color:#a7b487;}
#text a:hover {font-style:italic;}
#text b {font-size:10pt;letter-spacing:0.5px;}
#text i {font-size:12pt;}
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-track {
background: #EFEFEC;
}
::-webkit-scrollbar-thumb {
background: #000;
}
And then then HTML that I’m trying to get to show on the main page (within the iframe)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pen and Parchment</title>
<link href="/style.css" rel="stylesheet" type="text/css" media="all">
</head>
<div id="text">
<h1>W E L C O M E </h1>
<p> to <b>Pen and Parchment</b> a site catalogging the various pets and goings-on of various catz, dogz, horzes, and hexiez projects. I'm Ink - the proprietor and owner of PnP, and we're happy to have you here. As always, please excuse any construction mess. </p>
<center><p> Don't know what Petz is? <br>
check out these resources and forums for more information! Welcome to the Petz Community<br>
<img src="https://i.ibb.co/BGMtdL9/petzforum-banner-tiny.gif"> <img src="https://i.ibb.co/F3WSBCJ/wwbeach.gif"> <img src="https://i.ibb.co/kSZK6YJ/pugzlink.png"> <img src="https://i.ibb.co/b7YJbyz/sy-Sikuum-o.png"> <img src="https://i.ibb.co/JqMV9dr/23-PJyih-I-o.png"> <img src="https://i.ibb.co/t8KHSWr/3-Ivdp-Oj-G-o.png"> <img src="https://i.ibb.co/q9mQ0YL/Petzcord.png">
I don't play babyz myself, but if you think that might be your cup of tea, feel free to also check out:<br>
<img src="https://i.ibb.co/jzPHv27/1-UFYIsl0-o.png"><br>
for more information!</p></center>
<p>
<h2> recent updates:</h2>
<p><b>06.20.21</b> PnP is officially back up and running! While the dust settles, please excuse the site changing a fair bit. </p>
</div></div>
</html>
Edit: thanks for editing my grammar, and not helping with the question, I guess...
I'm creating a website for my school programming class and my css won't show up past my homepage, my pattern of creating css doesn't change, and so far 5 people in my class have checked and none know the reason
Homepage
<head>
<link rel= "stylesheet" href="css1.css">
<meta charset = "utf-8">
<meta name= "keywords" content= "photo">
<title> "trash" </title>
</head>
<body bgcolor="#F5F6E9">
<div class="header">
<div class="container">
<div class="logo">
<h1><a href="index.html">LEGALIZE RANCH</h1>
</div>
<div class= "nav">
<ul>
<li>RANCH!</li>
<li>WHY?????</li>
<li>BROTENDO NATION</li>
</ul>
</div>
</div>
</div>
<div class= "mainpart">
<div class="statement">
<p>
WHATS UP BROTENDOS
</p>
</div>
<div class= "god">
<center> <img src= "god.png" alt="ranch dude"> </center>
</div>
<div class= "statement2">
<p>
RANCH IS THE #1 MOST RARE RESOURCE EVER!!!! THAT MEANS OUR GOVERNMENT IS LIMITING IT FOR DUDES LIKE THIS!!!!!
</p>
<p>
THIS NEEDS TO BE ADDRESSED AT THE NINTENDO CONVENTION!!!!!
</p>
</div>
<div class= birdup>
<center><img src= "birdup.jpg" alt= "bir ddup"></center>
</div>
</body>
CSS
body {
width: 100%;
margin : auto;
}
.container {
width: 960px:
margin: 0 auto:
}
.header {
background: #94DD6E;
height: 100px;
width: 100%;
top: 0;
position: fixed;
}
.logo {
float: left;
font-family: "Helvetica";
font-size: 15px;
margin-left:15px;
padding-top:10px;
}
a {
text-decoration: none;
color: #fff
}
li {
list-style: none;
float: left;
margin-left: 15px;
padding-top: 15px;
font-family: Arial, Helvetica, sans-serif;
margin-right: 15px;
}
.nav {
float: right;
padding-top: 10px;
}
.content {
background: #e7e8e1;
}
.statement {
padding-top: 100px;
text-align: center;
font-family: "Helvetica";
font-size: 25px;
}
.statement2 {
text-align: center;
.god {
text-align: center;
}
.pimplepete {
margin-top: 50%;
text-align: center;
color: orange;
}
.mainpart {
background-color: #F5F6E9;
}
.video {
padding-top: 25px;
}
.donation {
text-align: center;
font-family: "Papyrus";
font-size: 50px;
}
Page that the CSS isn't working on
<!doctype html>
<head>
<link rel= "stylesheet" href="css1.css">
<meta charset = "utf-8">
<meta name= "keywords" content= "photo">
<title> "trash" </title>
</head>
<body bgcolor="#F5F6E9">
<div class="header">
<div class="container">
<div class="logo">
<h1><a href="index.html">LEGALIZE RANCH</h1>
</div>
<div class= "nav">
<ul>
<li>RANCH!</li>
<li>WHY?????</li>
<li>BROTENDO NATION</li>
</ul>
</div>
</div>
</div>
<div class= "video">
<center>
<iframe width="640" height="360" src="https://www.youtube.com/embed/0V7FGCtnoJo" frameborder="0" allowfullscreen></iframe>
</center>
</div>
<div class= "donation">
<p>
OUR MOVEMENT IS GROWING!!! SPORT SOME <i>RANCHY</i> MERCH
</p>
<p>
LEGAL RANCH MERCH
</p>
</div>
</body>
Don't worry I know that the formatting isn't good.
Your CSS is linked relatively.
<link rel= "stylesheet" href="css1.css">
If your other pages are perhaps in different folders - folders that don't also have a css1.css alongside the html files inside them, it won't understand the reference to css1.css.
Try adding a leading slash /css1.css if you're accessing the site via a URL, rather than the filesystem, and the css is in the web root.
If you're loading the pages via the filesystem, adjust the reference to the css based on the file calling it. You might traverse up a level by referring to it as ../css1.css, instead.
To illustrate further, given a filesystem like:
public_html/
- index.html
- css1.css
- about/
- index.html
public_html/index.html knows about css1.css because they live in the same directory.
However, in public_html/about/index.html, if the <link> tag references css1.css, the browser will look for a file called public_html/about/css1.css, which I imagine doesn't exist.
Ok so I'm just playing around with web development and i'm making my personal site just to get experience. Currently I am having two issues.
I have my "About" section I can't seem to be able to move my picture in the center and making the radius 100%. It's really bugging me because it won't work. I already put the CSS border-radius: 100% and Margin: 0 auto; but nothings working. I then tried the Text-align: center; and it didn't work.
I have a solid border that extends from the "#section" ID. But I want it not to cover my footer. In the index page it includes the footer which I don't want, but on my other pages like About, and Contact it does not cover the footer like i initially intended it to do.
Also on my header I have an H1 and H3 element that goes back to my home page. My problem with it is that when I move the mouse away from the header to the left or right horizontally it still shows that there's a link even though the letters are not there. I want the link to end where the word ends.
Can somebody find out what am I doing wrong and how i can do to avoid it?
I will include my HTML index page, then About page and then my CSS.
Index page where i want to exclude the footer from solid border.
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="stylesheet.css">
<link href='http://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'>
<title>Dalexis The Great Critic</title>
</head>
<body>
<header >
<a href="index.html" class="headersection">
<h1>Dalexis Peguero</h1>
</a>
<a href="index.html" class="headersection">
<h3>Designing Websites Since Last Month</h3>
</a>
<nav class="navsection">
<ul id="nav">
<li>
Home
</li>
<li>
About
</li>
<li>
Portfolio
</li>
<li>
Contact Us
</li>
</ul>
</nav>
</header>
<div id="section">
<section >
<div id="statement">
<h2>We are so confident in our abilites to satisfy you that we'll give you your money back if you weren't satisfied!</h2>
<h4>Get Invoces: We provide the quickest way to get people to buy your shit! </h4>
<h4>Make them happy: We'll make sure your customers are all happy! </h4>
</div>
<div id="testimonies">
<h2> Client Testimonies </h2>
<hr style="width:90%; />
<p class="paragraph"> <img src="teona.jpg" class="clients"/>He was amazing with services! He did everything right!" </p>
<h6>Home Town Loser </h3>
<hr style="width:90%; />
<p class="paragraph"> <img src="marvin.jpg" class="clients"/>"As a rapper I enjoyed his services. He made my website look hella dope and I loved it! Will return to him"</p>
<h6>MArvelous Marv</h3>
<hr style="width:90%; />
<p class="paragraph"> <img src="jon.jpg" class="clients"/>"He was quick and succint! He helped me make my own dispensary website and now all my clients are so satisfied! Thanks Dalexis! !"</p>
<h6>Another Home Town Loser </h3>
<hr style="width:90%; />
</div>
</section>
</div>
<footer>
<img src="IMG/facebook-logo.png" alt="facebook" class="socialicon">
<img src="IMG/twitter-logo.png" alt="twitter" class="socialicon">
<p>© Dalexis Industries </p>
</footer>
</body>
</html>
This is my about page where i want to center my picture and make the radius 100%.
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="stylesheet.css">
<link href='http://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'>
<title>Dalexis The Great Critic</title>
</head>
<body>
<header >
<a href="index.html" class="headersection">
<h1>Dalexis Peguero</h1>
</a>
<a href="index.html" class="headersection">
<h3>Designing Websites Since Last Month</h3>
</a>
<nav class="navsection">
<ul id="nav">
<li>
Home
</li>
<li>
About
</li>
<li>
Portfolio
</li>
<li>
Contact Us
</li>
</ul>
</nav>
</header>
<img src="IMG/dalexis.jpg" alt="my photo" class="about-photo" >
<h3>About<h3>
<p> This is my Web Design website. If you are interested in my services you can either call me or email me. I've been desiging websites for five weeks and my costumers love their sites"</p>
<p> If you like to follow me on facebook you can find me at Dalexis.
</div>
<footer>
<img src="IMG/facebook-logo.png" alt="facebook" class="socialicon">
<img src="IMG/twitter-logo.png" alt="twitter" class="socialicon">
<p>© Dalexis Industries </p>
</footer>
</body>
</html>
CSS
body {
font-family: abel;
}
h1, h3 {
text-align:center;
}
a {
text-decoration: none;
color: #373737;
}
ul {
list-style: none;
}
img {
max-width: 100%;
}
html {
color: #373737;
background-image:url('bkg-blu.jpg');
}
/******************************
HEADER
***********************************/
}
#nav li { display:inline; border-style:groove; }
#nav {text-align:center; }
/******************************
nav
***********************************/
/******************************
SECTION
***********************************/
#statement {
text-align: center;
}
#testimonies {
text-align: center;
}
section h2 {
margin: 0 20px;
padding: 0px 60px;
}
#section {
border-style:solid;
border-width: 1px;
width: 90%;
height: 100%;
padding: 5px 5px;
margin:15px 5px 15px 100px;
}
section div p img {
font-style:italic;
color: blue;
}
.clients {
width: 40px;
height: 40px;
margin: 0 10px;
padding: 10px;
font-style: italic;
}
/******************************
footer
***********************************/
.socialicon {
width: 20px;
height: 20px;
margin: 0 5px;
}
footer img {
margin: 0;
color: fff;
clear: both;
}
.selected, a:hover {
color: grey;
}
/******************************
PAGE: ABOUT
/***************************/
.about-photo {
width: 250px;
height: 200px;
display: block;
display: block;
margin: 0 auto 30px;
max-width: 150px;
border-radius: 100%;
}
The answer for question 1.
Change this
<img src="IMG/dalexis.jpg" alt="my photo">
To this
<div class="about-photo"><img src="IMG/dalexis.jpg" alt="my photo"></div>
CSS
.about-photo {
width: 250px;
height: 200px;
margin: 0 auto;
}
.about-photo img {
width: 100%;
height: 100%;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
}