So I have a school project due and my website will not display my text properly. Does anybody know the problem?
Here is the code
body {
background-image: image();
}
* {
box-sizing: border-box;
}
header {
background-color: navy;
padding: 34px;
}
.homestyle {
margin: 5px;
text-decoration: none;
color: white;
font-family: 'Prompt', sans-serif;
float: left;
}
.concertstyle {
margin: 5px;
text-decoration: none;
color: white;
font-family: 'Prompt', sans-serif;
float: left;
}
.sportstyle {
margin: 5px;
text-decoration: none;
color: white;
font-family: 'Prompt', sans-serif;
float: left;
}
.Receptenstyle {
margin: 5px;
text-decoration: none;
color: white;
font-family: 'Prompt', sans-serif;
float: left;
}
.Contactstyle {
margin: 5px;
text-decoration: none;
color: white;
font-family: 'Prompt', sans-serif;
float: left;
}
.foto_zwolle {
width: 150px;
float: right;
}
.knopanimatie a::after {
content: '';
width: 0%;
height: 2px;
background: #fff;
margin: auto;
transition: 0.5s;
display: block;
}
.knopanimatie a:hover::after {
width: 100%;
}
.footer {
color: white;
font-family: 'Prompt', sans-serif;
background-color: rgb(21, 108, 179);
text-align: center;
padding: 10px;
}
html,
body {
height: 100%;
margin: 0;
}
.wrapper {
min-height: 0%;
/* Equal to height of footer */
/* But also accounting for potential margin-bottom of last child */
margin-bottom: 0px;
z-index: 10;
}
.sticky {
top: 0;
padding: 0px;
font-size: 20px;
}
.grid-container {
display: grid;
grid-template-areas: 'header header header' 'zwolle zwolle zwolle' 'tekstlinks tekstmidden tekstrechts ' 'footer footer footer';
gap: 10px;
padding: 10px;
}
.tekstlinks {
grid-area: tekstlinks;
height: 100px;
width: 360px;
padding: 30px;
padding-top: 0px;
font-family: 'Prompt', sans-serif;
display: inline-block;
}
.tekstmidden {
grid-area: tekstmidden;
height: 100px;
display: inline-block;
width: 360px;
padding: 30px;
padding-top: 0px;
font-family: 'Prompt', sans-serif;
}
.zwolle {
grid-area: zwolle;
font-family: 'Prompt', sans-serif;
padding: 30px;
}
.tekstrechts {
grid-area: tekstrechts;
font-family: 'Prompt', sans-serif;
height: 100px;
width: 360px;
padding: 30px;
padding-top: 0px;
display: inline-block;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="stylejustin.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Prompt:ital,wght#1,100&display=swap" rel="stylesheet">
<title> Document </title>
</head>
<img class="foto_zwolle" src="logo_rechtop_klein.png" alt="tekst">
<body>
<header>
<div class="knopanimatie">
<a class="homestyle" href="home.html"> Home </a>
<a class="concertstyle" href="concerten.html"> Concerten </a>
<a class="sportstyle" href="sport.html"> Sport </a>
<a class="Receptenstyle" href="Recepten.html"> Recepten </a>
<a class="Contactstyle" href="contact.html"> Contact </a>
</div>
</header>
<div class="grid-container">
<div class="zwolle">
<h1> Nieuws uit Zwolle </h1>
</div>
<div class="tekstlinks">
<p> sapien et ligula ullamcorper. In aliquam sem fringilla ut morbius.</p>
</div>
<div class="tekstmidden">
<img src="/mainPags/Zwolle+op+hoogte.jpg" width="250px" style="z-index: 20;">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</p>
<div class="tekstrechts">
<p>
In aliquam sem fringilla ut morbius.</p>
</div>
</div>
</div>
<div class="wrapper">
<div class="push"></div>
</div>
<div class="sticky">
<footer class="footer">
<h3> Footer </h3>
<p>Footerinfo</p>
<p> infovanfooter </p>
</footer>
</div>
</body>
</html>
```
Please note that some of this has been written in dutch, so don't pay attention to it. That is just my main language.
I tried messing with the padding, margin and even the gridbox but nothing helped. Please help me.
Related
:root {
--clr-primary: #0F052F;
--clr-secondary: #43D9B8;
--clr-light: #EEEEEE;
--fw-light: 300;
--fw-regular: 400;
--fw-medium: 500;
--fw-bold: 700;
}
* {
margin: 0;
box-sizing: border-box;
background-color: #FFFFFF;
}
body {
font-family: 'Poppins', sans-serif;
}
.wrapper {
width: 1440px;
margin: 0 auto;
padding: 0 100px;
}
/* Header - Navigation */
.desktop-nav {
display: flex;
justify-content: space-between;
align-items: center;
width: 1240px;
position: fixed;
z-index: 200;
top: 44px;
padding-right: 0;
}
.desktop-nav .menu-items {
display: flex;
list-style: none;
}
.desktop-nav .menu-items li {
margin: 0 27.5px;
}
.desktop-nav .menu-items li:nth-last-of-type(1) {
margin-right: 0;
}
.desktop-nav .menu-items li a {
text-decoration: none;
color: var(--clr-primary);
font-size: 16px;
font-weight: var(--fw-medium);
position: relative;
}
.desktop-nav .menu-items li a.active::after {
content: "";
position: absolute;
height: 3px;
width: 100%;
background-color: var(--clr-secondary);
left: 0;
bottom: -2px;
}
.desktop-nav .menu-items li a.btn {
color: white;
background-color: var(--clr-primary);
border-radius: 10px;
padding: 10px 23px;
}
/* BIA section */
.bia-container {
height: 100vh;
display: flex;
align-items: center;
justify-content: space-between;
}
.bia-container .left h1 {
font-size: 80px;
font-weight: var(--fw-bold);
margin: 60px 190px 18px 105px;
}
.bia-container .left p {
font-size: 18px;
font-weight: var(--fw-regular);
margin: 18px 195px 57px 105px;
}
.bia-container .left a.btn {
text-decoration: none;
color: rgb(0, 0, 0);
border-radius: 10px;
padding: 10px 23px;
border: 1px solid #43D9B8;
margin: 0 0 0 105px;
}
.bia-container .right {
padding-right: 105px;
}
/* Background header */
.bia-bg {
position: absolute;
z-index: -1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Google Fonts-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#300;400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="wrapper">
<nav class="desktop-nav">
<div class="logo">
<a href="#">
<img src="Images/bia-logo.svg" alt="">
</div>
<ul class="menu-items">
<li>
Home
</li>
<li>
Services
</li>
<li>
Contact
</li>
<li>
Neem contact op
</li>
</ul>
</nav>
<!-- End of desktop navigation -->
<header class="bia-container">
<div class="left">
<h1>Make data work for you</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut neque faucibus gravida viverra
tristique. Morbi quis commodo interdum id risus. Vitae hac viverra dui quis lobortis parturient
purus. Libero pharetra tortor.</p>
Neem contact op header
</div>
<div class="right">
<img src="Images/header-analytics.svg" alt="">
</div>
<img class="bia-bg" src="Images/header-background.svg" alt="">
<!-- End of header section -->
</header>
</div>
<script src="main.js"></script>
</body>
</html>
I have a problem. I have a background image that I want to display, however when I give the image a z-index of -1, it becomes invisible and isn't displayed in the background. Does anyone have an idea why this might be happening?
<div class="right">
<img src="Images/header-analytics.svg" alt="">
</div>
.bia-bg {
position: absolute;
z-index: -1;
}
The class and image I'm talking about is found on line 56 (HTML) and the class and image is on line 117 (CSS).
For your reference, the code can be found here: JSFiddle.
Any help would be much appreciated!
What it's supposed to look like:
Design
To put a background on a div or other element you only need to use this on CSS:
background-image: url("./your_image.png");
Getting like this
html
<div class="bg_img">
<!-- something -->
</div>
css
.bg_img{
background-image: url("Images/header-analytics.svg");
}
You have given absolutely everything a default white background.
This means that something with z index -1 cannot be seen at all because elements with default 0 z index cover it in white.
Try removing that blanket setting.
I am trying to create a hero section for a layout. My problem is that the content (text and buttons) is being obscured by the overlay even after setting a higher z-index value.
Here's my code:
#import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght#0,700;0,900;1,300;1,400;1,700;1,900&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Staatliches&display=swap');
/* Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Base Styles */
:root {
--primary-color: #c72727;
--secondary-color: #f99500;
--light-color: #f3f3f3;
--dark-color: #333;
--max-width: 1100px;
}
body {
font-family: 'Lato', sans-serif;
line-height: 1.5;
background: var(--light-color);
}
img {
width: 100%;
height: auto;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: #777;
}
i.fab {
color: #777;
}
p {
font-weight: 100;
margin: 1rem 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Staatliches', cursive;
margin-bottom: 0.55rem;
line-height: 1.3;
margin: 0.5rem 0;
}
/* Utilities */
.container {
max-width: var(--max-width);
margin: auto;
padding: 20px;
}
.btn {
display: inline-block;
cursor: pointer;
padding: 13px 20px;
color: #fff;
}
.btn-primary,
.bg-primary {
background: var(--primary-color);
}
.btn-secondary,
.bg-secondary {
background: var(--secondary-color);
}
.btn-dark,
.bg-dark {
background: var(--dark-color);
}
.bg-light {
background: var(--light-color);
}
.category {
color: #fff;
text-transform: uppercase;
border-radius: 50%;
padding: 10px;
font-size: 10px;
}
.category-sports {
background: var(--secondary-color);
}
.category-entertainment {
background: #a66bbe;
}
.category-tech {
background: #009cff;
}
/* Header */
#header {
position: sticky;
top: 0;
left: 0;
right: 0;
}
#header .container {
display: grid;
grid-template-columns: 6fr 3fr 2fr;
align-items: center;
}
#header .logo {
width: 180px;
}
#header ul {
display: flex;
justify-content: center;
align-items: center;
}
#header ul li {
margin-right: 10px;
}
/* Showcase */
#showcase {
height: 500px;
color: #fff;
background: url('../images/featured.jpg') no-repeat center center/cover;
position: relative;
}
#showcase::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
}
#showcase * {
z-index: 10000;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>NewsGrid | The Leading Online News Website</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
/>
<link rel="stylesheet" href="./css/styles.css" />
</head>
<body>
<header id="header">
<div class="container">
<div class="logo">
<img src="./images/logo.png" alt="" />
</div>
<div class="social">
<i class="fab fa-facebook fa-2x"></i>
<i class="fab fa-twitter fa-2x"></i>
<i class="fab fa-instagram fa-2x"></i>
<i class="fab fa-youtube fa-2x"></i>
</div>
<nav>
<ul class="nav">
<li class="nav-item">
Home
</li>
<li class="nav-item">
About
</li>
</ul>
</nav>
</div>
</header>
<!-- Showcase -->
<section id="showcase">
<div class="container">
<div class="showcase-content">
<span class="category category-sports">Sports</span>
<h1>Some Sports Article</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus
rerum officia quibusdam mollitia deserunt animi soluta laudantium.
Quam sapiente a dolorum magnam necessitatibus quis tempore facere
totam. Dolor, sequi distinctio!
</p>
READ MORE
</div>
</div>
</section>
</body>
</html>
I did set the Z-index for the showcase content to be in front of the image, but it doesn't work. I have tried an identical approach elsewhere and that works.
Am I doing something incorrectly?
Please help, Thanks!
The problem is max-width(tm-section img ) is not scaling according to the browser. And before that I wanna ensure that it is not my browser problem as I had checked working of same with different code and its working.
the image is not changing according to the browser.
*{
margin: 0;
padding: 0;
}
body{
background:#ffd633;
background-color: pink;
}
.tm-header{
background: #80ffd4;
padding-bottom: 2px;
}
.tm-main{
width: 1200px;
margin: auto;
}
.tm-main::after{
content: " ";
display: block;
clear: both;
}
.tm-main img{
float: left;
display: block;
}
.tm-main .tm-nav{
float: right;
margin-right: 20px;
}
.tm-main .tm-nav ul li{
display: inline-block;
vertical-align: center;
}
.tm-main .tm-nav ul li a{
color: black;
font-family: 'Ubuntu', sans-serif;
text-decoration: none;
text-transform: capitalize;
padding-left: 5px;
padding-right: 15px;
text-align: center;
line-height: 74.5px;
}
.tm-main .tm-nav ul li a:hover{
color: brown;
}
.tm-section img{
max-width: 100%;
}
.tm-section{
overflow: hidden;
}
.tm-content{
font-family: 'IM Fell Great Primer SC', serif;
font-size: 35px;
width: 1500px;
}
h1,h2,h3{
padding-bottom: 15px;
padding-top: 15px;
}
p{
padding-bottom: 20px;
padding-top: 15px;
}
<!DOCTYPE html>
<html>
<head>
<title>css</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=IM+Fell+Great+Primer+SC&display=swap" rel="stylesheet">
</head>
<body>
<header class="tm-header">
<div class="tm-main">
<img src="logo.png" width="50px" height="auto">
<nav class="tm-nav">
<ul>
<li>home</li>
<li>about</li>
<li>services</li>
<li>contact</li>
</ul>
</nav>
</div>
</header>
<div class="tm-main tm-content">
<section class="tm-section">
<img src="msd.png" alt="" width="100%" height="600px" style="">
</section>
<article>
<h1>This is something about me</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<h2>My Aim</h2>
<p></p>
<h2>conclude</h2>
<p>
</p>
</article>
</div>
</header>
</body>
</html>
If your container is tm-section then you can use the following and it will resize to its container:
tm-section img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: auto;
}
%: Defines the maximum width in percent of the containing block.
You should set width for .tm-section
EX:
.tm-section {
width: 800px;
}
.tm-section img {
max-width: 100%;
}
So I have my header with a background image set and I want to create a div underneath it so I can write text there, but when I create the new div, the text I write inside of it appears on top of the already created header. I think it is due to the background image I have set. This is one of my first projects made all by my own so if you guys could help me it will be really appreciated.
These are the HTML and CSS files:
body {
margin: 0;
padding: 0;
background-color:#f4f4f4;
float: left;
}
header{
overflow: hidden;
margin: auto;
}
nav {
width: 100%;
height: 50px;
background-color: rgba(192,192,192,0.3);
margin: auto;
}
.wtf {
padding-right: 50px;
position: relative;
bottom: 3px;
}
#logo {
float: left;
color: white;
font-family: 'Concert One', cursive;
padding-left: 20px;
}
p.highlight {
margin: 0;
position: relative;
bottom: 7px;
}
ul {
float:right;
}
li {
display: inline;
padding: 0 10px 0 10px;
}
a {
text-decoration: none;
color: white;
font-size: 21px;
margin: 0 0 3px 0;
font-family: 'Montserrat', sans-serif;
}
li a:hover {
background-color: #ddd;
color: black;
}
.image {
background-image: url('nebula-stars-universe-galaxy-space-4k-kx-1920x1080.jpg');
}
.main {
width: 100%;
height: 400px;
color: white;
text-align: justify;
position: absolute;
font-family: 'Montserrat', sans-serif;
background-image: url('nebula-stars-universe-galaxy-space-4k-kx-1920x1080.jpg')
}
.main p,h1,h3 {
text-align: center;
position: relative;
}
.main h1 {
top: 100px;
font-size: 50px;
}
.main h3 {
top: 120px;
}
.main p {
top: 90px;
font-size: 20px;
}
.development {
position: relative;
}
.development p {
color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Упражнение</title>
<link rel="stylesheet"
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Concert+One" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/solid.css" integrity="sha384-+0VIRx+yz1WBc
</head>
<body>
<header>
<div class="image">
<nav>
<div id="logo">
<h1><p class="highlight">ATANAS DEVELOPING</p></h1>
</div>
<div class="wtf">
<ul>
<li class="current">
Home
</li>
<li>
Services
</li>
<li>
Clients
</li>
<li>
Team
</li>
<li>
Contact
</li>
</ul>
</div>
</nav>
<div class="main">
<p>Can you build the website of my dreams?</p>
<h1>YUP, WE CAN DO THAT.</h1>
<h3>Learn More</h3>
</div>
</div>
</header>
<br>
<div class="development">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquam lacus quis ex malesuada fermentum. Sed fringilla porttitor massa sit amet sollicitudin.</p>
</div>
</body>
</html>
You positioned your .main absolutely:
.main {
position: absolute;
}
With this styling you take .main out of the normal document flow and it is positioned in the top left corner. The other elements stay in regular flow and are right above it. Just get rid of this positioning and you are good to go.
body {
margin: 0;
padding: 0;
background-color:#f4f4f4;
float: left;
}
header{
overflow: hidden;
margin: auto;
}
nav {
width: 100%;
height: 50px;
background-color: rgba(192,192,192,0.3);
margin: auto;
}
.wtf {
padding-right: 50px;
position: relative;
bottom: 3px;
}
#logo {
float: left;
color: white;
font-family: 'Concert One', cursive;
padding-left: 20px;
}
p.highlight {
margin: 0;
position: relative;
bottom: 7px;
}
ul {
float:right;
}
li {
display: inline;
padding: 0 10px 0 10px;
}
a {
text-decoration: none;
color: white;
font-size: 21px;
margin: 0 0 3px 0;
font-family: 'Montserrat', sans-serif;
}
li a:hover {
background-color: #ddd;
color: black;
}
.image {
background-image: url('https://picsum.photos/200/300?image=15');
}
.main {
width: 100%;
height: 400px;
color: white;
text-align: justify;
/* position: absolute; <-- do not position this absolutely */
font-family: 'Montserrat', sans-serif;
background-image: url('https://picsum.photos/1920/1080?image=10')
}
.main p,h1,h3 {
text-align: center;
position: relative;
}
.main h1 {
top: 100px;
font-size: 50px;
}
.main h3 {
top: 120px;
}
.main p {
top: 90px;
font-size: 20px;
}
.development {
position: relative;
}
.development p {
color: red;
}
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Concert+One" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/solid.css" >
<div class="image">
<nav>
<div id="logo">
<h1><p class="highlight">ATANAS DEVELOPING</p></h1>
</div>
<div class="wtf">
<ul>
<li class="current">
Home
</li>
<li>
Services
</li>
<li>
Clients
</li>
<li>
Team
</li>
<li>
Contact
</li>
</ul>
</div>
</nav>
<div class="main">
<p>Can you build the website of my dreams?</p>
<h1>YUP, WE CAN DO THAT.</h1>
<h3>Learn More</h3>
</div>
</div>
<div class="development">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquam lacus quis ex malesuada fermentum. Sed fringilla porttitor massa sit amet sollicitudin.</p>
</div>
Your .main css class has an absolute position. Disabling that fixes the issue
Remove some position property from your css.
.development {
// remove
//position: relative;
}
.main {
width: 100%;
height: 400px;
color: white;
text-align: justify;
// remove
// position: absolute;
font-family: 'Montserrat', sans-serif;
background-image: url(nebula-stars-universe-galaxy-space-4k-kx-1920x1080.jpg);
}
Changing to above would work but your body is floated towards left so remove that too.
body {
margin: 0;
padding: 0;
background-color: #f4f4f4;
// remove
// float: left;
}
I have searched and tweek around and the last image still shows up very close to the second. This is a very simple responsive web layout that, for some mistake, it is not displaying properly. this keeps asking me for more details but I have no more details to give.
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
line-height: 1.5;
padding: 0;
margin: 0;
background-color: #f4f4f4;
}
/* Global */
.container {
widows: 80%;
margin: auto;
overflow: hidden;
}
ul {
margin: 0;
padding: 0;
}
.button_1 {
height: 38px;
background: #e8491d;
border: none;
padding-left: 20px;
padding-right: 20px;
color: #ffffff;
}
/* Header */
header {
background: #35424a;
color: #ffffff;
padding-top: 30px;
min-height: 70px;
border-bottom: #e8491d 4px solid;
}
header a {
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li {
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header #branding {
float: left;
}
header #branding h1 {
margin: 0;
}
header nav {
float: right;
margin-top: 12px;
}
header .current a {
color: #e8491d;
font-weight: bold;
}
header a:hover {
color: #cccccc;
font-weight: bold;
}
/* Showcase */
#showcase {
min-height: 400px;
background: url('../Assets/for\ rent.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
text-align: center;
color: #3433FF;
}
#showcase h1 {
margin-top: 100px;
font-size: 55px;
margin-bottom: 10px;
}
#showcase p {
font-size: 20px;
}
/* For Tenants */
#cozy {
padding: 15px;
background: #35424a;
}
.button_1 {
float: right;
margin-top: 15px;
}
/*Boxes*/
#boxes {
margin-top: 20px;
}
#boxes .box {
float: left;
text-align: center;
width: 30%;
padding: 10px;
}
#main {
margin-top: 20px;
}
#main .box {
float: left;
text-align: center;
width: 33%;
padding: 10px;
display: inline-block;
}
#main .box assets {
width: 100px;
}
/*Footer*/
footer {
padding: 20px;
margin-top: 20px;
color: #ffffff;
background-color: #e8491d;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width">
<meta name="description" content="Properties for lease">
<meta name="keywords" content="lakeland, oldsmar, lutz">
<meta name="author" content="SAGS PROPERTIES LLC">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>SAGS PROPERTIES</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="./css/style.css" />
<script src="main.js"></script>
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1><span>SAGS Properties LLC</span></h1>
</div>
<nav>
<ul>
<li class="current">Home</li>
<li>Lutz</li>
<li>Oldsmar</li>
<li>Lakeland</li>
</ul>
</nav>
</div>
</header>
<section id="showcase">
<div class="container">
<h1>Well Managed Properties</h1>
<p>In Lutz, Oldsmar and Lakeland</p>
</div>
</section>
<section id="cozy">
<div class="container">
<button type="submit" class="button_1">Tenants Click Here</button>
</div>
</section>
<section id="boxes">
<div class="container">
<div class="box">
<img src="./Assets/Entrance Lutz.jpg">
<h3>Lutz</h3>
<p>Lakeview at Calusa Trace</p>
</div>
<div class="container">
<div class="box">
<img src="./Assets/Entrance Lakeland.jpg">
<h3>Lakeland</h3>
<p>Cobblestone Landing</p>
</div>
<div class="container">
<div class="box">
<img src="./Assets/Entrance Oldsmar.jpg">
<h3>Oldsmar</h3>
<p>Gardens at Forrest Lakes</p>
</div>
</div>
</section>
<footer>
<p>SAGS PROPERTIES LLC © 2018</p>
</footer>
</body>
</html>
There are no more details to give. Making a question is as frustrating as learning this!!!