I am doing a mock website for learning but I am struggling understanding certain concepts. At the moment it is particularly to do with the responsiveness of the website. I am not sure I have done the layout wrong or just haven't included the key code.
If anyone wouldn't mind just has a quick look at what I have so far, please?
Thank you!
body {
background-color: #F5F5F5;
background-size: cover;
margin: 0px;
}
#header_main {
font-family:'Jacques Francois Shadow';
color: #111;
font-size: 30px;
text-align: left;
padding-left: 10px;
padding-bottom: 35px;
padding-top: 5px;
text-shadow: 2px 2px 5px #708090;
text-decoration: underline;
height: 100px;
width: 100%;
margin-top: -40px;
background-color:#DCDCDC;
}
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
overflow: hidden;
background-color: #708090;
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.3)
}
li a {
float: right;
display: block;
color: white;
text-align: center;
padding: 8px 10px;
font-size: 20px;
font-family: "Courier New", Courier, monospace;
text-decoration: none;
}
li a:hover{
background-color: black;
color: #FF8C00;
}
.active {
background-color: #FF8C00;
color: black;
}
#top_side {
width: 100%;
height: 20px;
background-color:#FF8C00;
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.3)
}
#middle_head {
width: 520px;
text-align: center;
height: 50px;
font-size: 20px;
font-family: 'Jacques Francois Shadow';
text-shadow: 2px 2px 5px #708090;
text-decoration: underline;
border-left-style: solid;
border-right-style: solid;
border-radius: 5px;
border-width: 1px;
margin-top: 80px;
margin-left: 700px;
text-shadow: 2px 2px 5px #708090;
}
#img_1 {
width: 900px;
height: 500px;
margin-left: 110px;
margin-top: 70px;
border-style: solid;
border-color: black;
border-width: 1px;
border-radius: 5px;
}
#header_1 {
text-align: center;
font-size: 20px;
border-bottom-style: solid;
border-color: black;
border-width: 1px;
font-family: 'Jacques Francois Shadow';
text-shadow: 2px 2px 5px #708090;
}
#left_side {
float: left;
margin-left: 60px;
width: 300px;
height: 100%;
padding: 10px;
margin-top: 100px;
border-left-style: solid;
border-right-style: solid;
border-color: black;
border-radius: 5px;
border-width: 1px;
}
#header_2 {
text-align: center;
font-size: 20px;
border-bottom-style: solid;
border-color: black;
border-width: 1px;
font-family: 'Jacques Francois Shadow';
text-shadow: 2px 2px 5px #708090;
}
#right_side {
float: right;
width: 300px;
height: 100%;
padding: 10px;
margin-right: 80px;
margin-top: 100px;
border-left-style: solid;
border-right-style: solid;
border-color: black;
border-radius: 5px;
border-width: 1px;
}
footer {
margin-top: 100px;
padding: 1px;
text-align: center;
background-color:#708090;
opacity: 0.4;
font-family: 'Arial';
font-size: 20px;
font-weight: bold;
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<link href='https://fonts.googleapis.com/css?family=Jacques Francois Shadow' rel='stylesheet'>
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<title>Crafty Photography | Home</title>
</head>
<body>
<header id="header_main">
<h1>Crafty Photography | Home</h1>
</header>
<nav>
<ul>
<li><a href="contact.html">Contact</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="about.html">About</a></li>
<li><a class="active" href="home.html">Home</a></li>
</ul>
</nav>
<div id="top_side"></div>
<div id="middle_head">
<h2>Welcome to Crafty Photography</h2>
</div>
<div id="left_side">
<h2 id="header_1">Anyone is welcome here!</h2>
<p>Here at Crafty Photography we love to just take pictures. It can be just
of you in a beautiful scene. Or it can be of your family. We will do cater the
session to your specifications. Nothing is impossible. So have a look around and
see what takes your fancy!</p>
</div>
<div id="right_side">
<h2 id="header_2"> We love to take your photo!</h2>
<p> Here at Crafty Photography we love to just take pictures. It can be just
of you in a beautiful scene. Or it can be of your family. We will do cater the
session to your specifications. Nothing is impossible. So have a look around and
see what takes your fancy! </p>
</div>
<img id="img_1" src="images/img_woman.jpg" alt="Womam with Camera">
<footer>
<p>Crafty Photography Copyright 2020</p>
</footer>
</body>
</html>
<!-- end snippet -->
Aucun commentaire:
Enregistrer un commentaire