Skip to content

Commit 1a444d7

Browse files
FitzBrendanFitzBrendan
authored
copy to public FitzBrendan Four Page Website index.html
1 parent 58aadda commit 1a444d7

File tree

1 file changed

+207
-0
lines changed

1 file changed

+207
-0
lines changed

‎front-end/four-page-website/index.html

+207
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,207 @@
1+
<!DOCTYPE html>
2+
3+
<html lang="en">
4+
<head>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
8+
<!-- bootstrap css file-->
9+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
10+
<!-- custom css file -->
11+
<link href="./fitzstyles.css" rel="stylesheet">
12+
13+
<title>Fitz Digital Marketing</title>
14+
<meta name="description" content="Grow Your Business with Digital Marketing Best Practices for Webpage Designs, SEO, Pay per Click Advertising and more..."
15+
16+
<meta property="og:title" content="Digital Marketing Best Practices">
17+
<meta property="og:type" content="website">
18+
<meta property="og:url" content="https://www.s.../">
19+
<meta property="og:description" content="Grow Your Business with Digital Marketing Best Practices">
20+
<meta property="og:image" content=".png">
21+
22+
<!-- pop up scripts, when user clicks on pop up <div> text, open pop up -->
23+
<!-- popup1 for Privacy Policy-->
24+
<script>
25+
function myFunction1() {
26+
var popup1 = document.getElementById("myPopup1");
27+
popup1.classList.toggle("show");
28+
}
29+
</script>
30+
<!-- popup2 for Terms of Service-->
31+
<script>
32+
function myFunction2() {
33+
var popup2 = document.getElementById("myPopup2");
34+
popup2.classList.toggle("show");
35+
}
36+
</script>
37+
<!--popup3 for notes -->
38+
<script>
39+
function myFunction3() {
40+
var popup3 = document.getElementById("myPopup3");
41+
popup3.classList.toggle("show");
42+
}
43+
</script>
44+
45+
</head>
46+
47+
<body>
48+
49+
<!-- ========= HEADER ============ -->
50+
<!-- header with alert and nav bar Start -->
51+
<header style="margin-bottom:120px;">
52+
53+
<!-- sticky top div-->
54+
<div class="fixed-top">
55+
56+
<!-- warning bar active development web site bootstrap class-->
57+
<div class="alert alert-warning" role="alert" style="margin:0;">
58+
Not a production site, active development web site!
59+
</div>
60+
61+
<!-- div for logo and bootstrap nav class for nav bar-->
62+
<div class="container-fluid fitzgreenBG">
63+
64+
65+
<ul class="nav">
66+
<li class="nav-item m-1">
67+
<a class="nav-link square-logo-nav" href="index.html">
68+
<img src="fitz-logo-square.png" alt="Fitz-Logo"></a>
69+
</li>
70+
<li class="nav-item ms-auto m-3">
71+
<a class="nav-link active fitzgoldFont a-active" aria-current="page" href="index.html">Fitz Home</a>
72+
</li>
73+
<li class="nav-item m-3">
74+
<a class="nav-link fitzgoldFont" href="services.html">Services</a>
75+
</li>
76+
<li class="nav-item m-3">
77+
<a class="nav-link fitzgoldFont" href="about.html">About</a>
78+
</li>
79+
<li class="nav-item m-3">
80+
<a class="nav-link fitzgoldFont" href="contact.html">Contact</a>
81+
</li>
82+
</ul>
83+
</div>
84+
</div>
85+
86+
<!-- header with alert and nav bar End-->
87+
</header>
88+
89+
<!-- ====== MAIN ====== -->
90+
<main>
91+
<section>
92+
<div class="main-top">
93+
<h1>Get More Quality Customers for Your Business</h1>
94+
</div>
95+
96+
<div class="main-mid">
97+
<img class="main-mid-right-align main-mid-image" src="laptop-graphs-10-rs.jpg"/>
98+
<div>
99+
<h2>Businesses Online Grow Faster</h2>
100+
<h3>The Internet Rewards Winners</h3>
101+
</div>
102+
</div>
103+
104+
<div class="main-mid">
105+
<div class="main-mid-right-align">
106+
<h2>Desing & Improving Engaging Websites</h2>
107+
<h3>Digital Marketing & Advertising</h3>
108+
</div>
109+
<img class="main-mid-image" src="color-hand-mockups-10-rs.jpg"/>
110+
</div>
111+
112+
<div class="main-mid">
113+
<img class="main-mid-right-align main-mid-image" src="linegraph-clicks-10-rs.jpg"/>
114+
<div>
115+
<h2>SEO - Search Enging Optimization</h2>
116+
<h3>UI/UX - Best Designs for User Interfaces & User Experience</h3>
117+
</div>
118+
</div>
119+
120+
<div class="main-bottom">
121+
122+
</div>
123+
124+
</section>
125+
126+
</main>
127+
128+
<!-- ======= FOOTER ======= -->
129+
<footer class="fitzbrownBG" style="padding: 20px 0 1px 0">
130+
131+
<!-- div for logo and FITZ-->
132+
<div class="footer-logo">
133+
<a class="square-logo-footer footer-logo-link" href="index.html"><img src="fitz-logo-square.png" alt="Fitz-Logo"></a>
134+
<a class="footer-logo-link" href="index.html"><p style="color:#FFFF74; font-family:sans-serif; font-size:3em">FITZ</p></a>
135+
</div>
136+
137+
<!-- div for footer nav bar -->
138+
<div class="container-fluid" style="background-color:#2A658F;"></div>
139+
<ul class="nav footer-nav-copyrights">
140+
<li class="nav-item m-3">
141+
<a class="nav-link active fitzgoldFont a-active" aria-current="page" href="index.html">Fitz Home</a>
142+
</li>
143+
<li class="nav-item m-3">
144+
<a class="nav-link fitzgoldFont" href="services.html">Services</a>
145+
</li>
146+
<li class="nav-item m-3">
147+
<a class="nav-link fitzgoldFont" href="about.html">About</a>
148+
</li>
149+
<li class="nav-item m-3">
150+
<a class="nav-link fitzgoldFont" href="contact.html">Contact</a>
151+
</li>
152+
</ul>
153+
</div>
154+
155+
<!-- section for contact info and terms of service-->
156+
<section style="padding: 0 100px">
157+
<div class="footer-contact-terms">
158+
<p class="fitzgoldFont">(267) 555 - 5555</p>
159+
<div class="popup" onclick="myFunction1()">
160+
<p class="fitzgoldFont" style="font-size:0.8em;">Privacy Policy</p>
161+
<span class="popuptext" id="myPopup1">
162+
Like most website operators, Fitz collects non-personally-identifying information of the sort that web browsers and servers typically make available, such as the browser type, language preference, referring site, and the date and time of each visitor request. Fitz's purpose in collecting non-personally identifying information is to better understand how Fitz's visitors use its website. From time to time, Fitz may release non-personally-identifying information in the aggregate, e.g., by publishing a report on trends in the usage of its website.
163+
</span>
164+
</div>
165+
</div>
166+
<div class="footer-contact-terms">
167+
<p></p>
168+
<div class="popup" onclick="myFunction2()">
169+
<p class="fitzgoldFont" style="font-size:0.8em;">Terms of Service</p>
170+
<span class="popuptext" id="myPopup2">
171+
By selecting a product or service, you agree to pay Fitz the one-time and/or monthly or annual subscription fees indicated (additional payment terms may be included in other communications). Subscription payments will be charged on a pre-pay basis on the day you sign up for an Upgrade and will cover the use of that service for a monthly or annual subscription period as indicated. Payments are not refundable.
172+
</span>
173+
</div>
174+
</div>
175+
<div class="footer-contact-terms">
176+
<p></p>
177+
<div class="popup" onclick="myFunction3()">
178+
<p class="fitzgoldFont" style="font-size:0.8em;">Notes - Attributions</p>
179+
<span class="popuptext" id="myPopup3">
180+
Lists provided to acknowledge and express appreciation for the assets used to design, create, build and maintain Fitz Websites.<br>Stock Photos & Media<br>
181+
Unsplash - “Beautiful, free photos. Gifted by the world's most generous community of photographers.”<br>
182+
PEXELS - “Best free stock photos in one place.”<br>
183+
pixabay - “Beautiful Free Images, Discover over 1.3 million images and videos shared by our generous community.”</br>
184+
Web Stats from Oberlo - www.oberlo.com/blog/inernet-statistics
185+
</span>
186+
</div>
187+
</div>
188+
</section>
189+
190+
<hr class="fitzgoldFont">
191+
192+
<!-- div for copyrights-->
193+
<div class="footer-nav-copyrights">
194+
<p class="fitzgoldFont" style="font-size: 0.75em; font-style:italic;">Fitz</p>
195+
<p class="fitzgoldFont" style="font-size: 0.75em; font-style:italic;">All Rights Reserved</p>
196+
<p class="fitzgoldFont" style="font-size: 0.75em; font-style:italic;">Protected by Copyscape</p>
197+
198+
</div>
199+
200+
</footer>
201+
202+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
203+
<script src="js/scripts.js"></script>
204+
<script src="fitzjs.js"></script>
205+
</body>
206+
207+
</html>

0 commit comments

Comments
 (0)