This page has been created to show the duplicate page of ZOOM.US with the use of HTML and CSS only except Menu that has been used with a little js.
CSS
body{
margin: 0px;
}
a{
color: #0E71EB;
text-decoration: none;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #555;
color: white;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
@media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
.nav1>ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #fff;
margin-right: 15px;
margin-left: 15px;
}
.nav1>ul>li {
float: left;
}
.nav1>ul>li>a {
display: block;
color: black;
text-align: center;
font-size: 15px;
padding: 14px 16px;
text-decoration: none;
}
.nav1>ul>li>a:hover {
color:blue;
}
.nav2>ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
margin-right: 15px;
margin-left: 15px;
}
.nav2>ul>li {
float: right;
}
.nav2>ul>li>a {
display: block;
color: white;
text-align: center;
font-size: 15px;
padding: 14px 16px;
text-decoration: none;
}
.topbar{
padding: 10px;
height: 50px;
background-color: #333;
}
.topbar2{
padding: 10px;
height: 50px;
background-color: #fff;
box-shadow: 0 0 2px rgba(0,0,0,0.2);
}
.section1{
background-color: #f4f4f8;
background-position: center top;
background-repeat: no-repeat;
background-size: cover!important;
-moz-background-size: cover!important;
-webkit-background-size: cover!important;
-o-background-size: cover!important;
width: 100%;
}
.section2{
height: 400px;
width: 100%;
text-align: center;
}
.section3{
height: 400px;
width: 100%;
background-color: #f4f4f8;
text-align: center;
}
.section4{
height: 400px;
width: 100%;
}
.section5{
height: 600px;
width: 100%;
}
.section6{
background-color: #f4f4f8;
padding-top: 40px;
padding-bottom: 47px;
height: 80px;
}
.section7{
width: 100%;
}
.section8{
width: 100%;
}
.sectionboxdata>.btnwhite>a
{
background-color: #fff;
color: #232333;
border: 1px solid #babacc;
min-width: 200px;
font-size: 18px;
height: 48px;
line-height: 48px;
border-radius: 12px;
font-weight: 600;
display: inline-block;
text-decoration: none;
margin-bottom: 15px;
margin-left: 10px;
margin-right: 10px;
vertical-align: middle;
padding: 0 12px;
text-align: center;
}
.sectionboxdata>.btnorange>a
{
background-color: #f26d21;
color: #fff;
border: 1px solid #f26d21;
font-weight: 600;
min-width: 200px;
font-size: 18px;
height: 48px;
line-height: 48px;
border-radius: 12px;
font-weight: 600;
display: inline-block;
text-decoration: none;
margin-bottom: 15px;
margin-left: 10px;
margin-right: 10px;
vertical-align: middle;
padding: 0 12px;
text-align: center;
}
footer{
width: 100%;
background-color: #39394d;
min-height: 80px;
}
.footerbody
{
height: 300px;
margin: 0 auto;
display: table;
}
.footer-1>ul{
list-style-type: none;
padding-left: 0px;
}
.footer-1>ul>li>a{
font-size: 12px;
color: white;
}
.footer-1>.h4>a{
font-size: 12px;
color: white;
}
.footer-1>.h4{
margin-top: 20px;
}
.footer-1
{
display: table-cell;
vertical-align: top;
padding-right: 50px;
}
.footercopyright
{
padding-top: 20px;
padding-bottom: 20px;
bottom: 0;
}
.info
{
font-size: 11px;
color: #fff;
text-align: center;
}
.sectitle{
line-height: 41px;
font-size: 30px;
font-weight: 300;
text-align: center;
color: #39394d;
padding: 50px 0 70px 0;
}
.sectionbox{
max-width: fit-content;
margin: 0 auto;
padding-bottom: 100px;
text-align: center;
}
.sectionlist{
display: table-row;
}
.sectionboxdata{
display: table-cell;
padding-right: 18px;
width: 300px;
text-align: center;
}
.himg
{
height: 600px;
width: 100%;
}
.sectionh3{
min-height: 24px;
margin-top: 25px;
font-size: 18px;
text-align: center;
color: #39394d;
}
.setcionp{
font-size: 14px;
color: #39394d;
opacity: .8;
margin-bottom: 10px;
min-height: 40px;
}
.sectionimg{
max-width: 100%;
height: auto;
width: auto;
}
.sectionvip{
display: block;
width: 20%;
float: left;
}
.imgvip
{
position: relative;
display: table-cell;
vertical-align: top;
}
.detailvip
{
width: calc(100% - 80px);
width: -moz-calc(100% - 80px);
width: -webkit-calc(100% - 80px);
text-align: left;
padding-left: 20px;
display: table-cell;
vertical-align: top;
}
.detailvip>p{
margin-top: 5px;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Externel Style Sheet -->
<link rel="stylesheet" href="style.css">
<!-- Fontaweseom if required -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Document</title>
</head>
<body>
<!-- Header For Slider -->
<header>
<!-- Top Menu -->
<div class="topbar">
<div class="topnav" id="myTopnav">
<div style="float: right;" class="dropdown">
<button class="dropbtn">RESOURCES
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Download Zoom Client</a>
<a href="#">Video Tutorials</a>
<a href="#">Live Training</a>
<a href="#">Live Training</a>
<a href="#">Webinars and Events</a>
<a href="#">Zoom Blog</a>
<a href="#">FAQ</a>
<a href="#">Privacy and Security</a>
<a href="#">Security Resources</a>
</div>
</div>
<a style="float: right;" href="#home">SUPPORT</a>
<a style="float: right;" href="#news">1.888.799.9666</a>
<a style="float: right;" href="#about">REQUEST A DEMO</a>
<a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a>
</div>
</div>
<!-- Second Menu -->
<div class="topbar2">
<nav class="nav1">
<ul>
<li> <img src="https://d24cgw3uvb9a9h.cloudfront.net/static/93994/image/new/ZoomLogo.png" width="150"></li>
<li><a href="#">SOLUTIONS</a></li>
<li><a href="#">PLANS & PRICING</a></li>
<li><a href="#">CONTACT SALES</a></li>
<li style="float: right;"><a href="#">JOIN A MEETING </a></li>
<li style="float: right;"><a href="#">HOST A MEETING</a></li>
<li style="float: right;"><a href="#">SIGN IN</a></li>
<li style="float: right;"><a href="#">SIGN UP IT'S FREE</a></li>
</ul>
</nav>
</div>
</header>
<!-- Main Section -->
<main class="main">
<!-- Slider Section -->
<section class="section1">
<img class="himg"
src="https://d24cgw3uvb9a9h.cloudfront.net/cms/5/872fc536-d3e9-4f0d-bf80-8b364daae63d.jpg">
</section>
<!-- Second Section -->
<section class="section2">
<div class="sectitle">One Consistent Enterprise Experience.</div>
<div class="sectionbox">
<div class="sectionlist">
<div class="sectionboxdata">
<div class="sectionimg">
<img src="https://d24cgw3uvb9a9h.cloudfront.net/static/93994/image/new/home/solution_collaboration_center.png"
alt="">
</div>
<div class="sectionh3">
Meetings
</div>
<div class="sectionp">
Online Meetings, Training & Technical Support
</div>
<div class="sectionp">
<a href="http://">Watch Video</a> | <a href="http://">Learn More</a>
</div>
</div>
<div class="sectionboxdata">
<div class="sectionimg">
<img src="https://d24cgw3uvb9a9h.cloudfront.net/static/93994/image/new/home/solution_video_webinar.png"
alt="" height="100px" width="100px">
</div>
<div class="sectionh3">
Video Webinar
</div>
<div class="sectionp">
Online Meetings, Training & Technical Support
</div>
<div class="sectionp">
<a href="http://">Watch Video</a> | <a href="http://">Learn More</a>
</div>
</div>
<div class="sectionboxdata">
<div class="sectionimg">
<img src="https://d24cgw3uvb9a9h.cloudfront.net/static/93994/image/new/home/solution_zoom_rooms.png"
alt="" height="100px" width="100px">
</div>
<div class="sectionh3">
Conference Rooms
</div>
<div class="sectionp">
Online Meetings, Training & Technical Support
</div>
<div class="sectionp">
<a href="http://">Watch Video</a> | <a href="http://">Learn More</a>
</div>
</div>
<div class="sectionboxdata">
<div class="sectionimg">
<img src="https://d24cgw3uvb9a9h.cloudfront.net/static/93994/image/new/home/solution_zoom_voice.png"
alt="" height="100px" width="100px">
</div>
<div class="sectionh3">
Phone System
</div>
<div class="sectionp">
Online Meetings, Training & Technical Support
</div>
<div class="sectionp">
<a href="http://">Watch Video</a> | <a href="http://">Learn More</a>
</div>
</div>
<div class="sectionboxdata">
<div class="sectionimg">
<img src="https://d24cgw3uvb9a9h.cloudfront.net/static/93994/image/new/home/solution_business_im.png"
alt="" height="100px" width="100px">
</div>
<div class="sectionh3">
Chat
</div>
<div class="sectionp">
Online Meetings, Training & Technical Support
</div>
<div class="sectionp">
<a href="http://">Watch Video</a> | <a href="http://">Learn More</a>
</div>
</div>
</div>
</div>
</section>
<!-- Third Section -->
<section class="section3">
<div class="sectitle">Zoom is Ranked #1 in Customer Reviews</div>
<div class="sectionbox">
<div class="sectionlist">
<div class="sectionboxdata">
<div class="sectionimg">
<img src="https://d24cgw3uvb9a9h.cloudfront.net/static/93994/image/new/home/Gartner.png"
alt="">
</div>
<div class="sectionh3">
<img src="https://d24cgw3uvb9a9h.cloudfront.net/static/94010/image/new/home/Four_Stars.png"
alt="">
</div>
<div class="sectionp">
4.7 out of 5
</div>
<div class="sectionp">
<a href="http://">Learn More > </a>
</div>
</div>
<div class="sectionboxdata">
<div class="sectionimg">
<img src="https://d24cgw3uvb9a9h.cloudfront.net/static/93994/image/new/home/trustradiusLogo.png "
alt="">
</div>
<div class="sectionh3">
<img src="https://d24cgw3uvb9a9h.cloudfront.net/static/94010/image/new/home/Four_Stars.png"
alt="">
</div>
<div class="sectionp">
8.7 out of 10
</div>
<div class="sectionp">
<a href="http://">Learn More > </a>
</div>
</div>
<div class="sectionboxdata">
<div class="sectionimg">
<img src="https://d24cgw3uvb9a9h.cloudfront.net/static/93994/image/new/home/g2crowd.png"
alt="">
</div>
<div class="sectionh3">
<img src="https://d24cgw3uvb9a9h.cloudfront.net/static/94010/image/new/home/Four_Stars.png"
alt="">
</div>
<div class="sectionp">
4.5 out of 5
</div>
<div class="sectionp">
<a href="http://">Learn More > </a>
</div>
</div>
</div>
</div>
</section>
<!-- Fourth Section -->
<section class="section4">
<div class="sectitle"><a href="http://zoom.us">Why Zoom?</a> </div>
<div class="sectionbox">
<div class="sectionlist">
<div class="sectionboxdata">
<div class="sectionimg">
<img src="https://d24cgw3uvb9a9h.cloudfront.net/static/94010/image/new/home/icon_1.png"
alt="">
</div>
<div class="sectionh3">
One consistent enterprise experience for all use cases
</div>
</div>
<div class="sectionboxdata">
<div class="sectionimg">
<img src="https://d24cgw3uvb9a9h.cloudfront.net/static/94010/image/new/home/icon_2.png"
alt="">
</div>
<div class="sectionh3">
Engineered & optimized to work reliably
</div>
</div>
<div class="sectionboxdata">
<div class="sectionimg">
<img src="https://d24cgw3uvb9a9h.cloudfront.net/static/94010/image/new/home/icon_3.png"
alt="">
</div>
<div class="sectionh3">
Up to 1,000 video participants & 10,000 viewers
</div>
</div>
<div class="sectionboxdata">
<div class="sectionimg">
<img src="https://d24cgw3uvb9a9h.cloudfront.net/static/94010/image/new/home/icon_4.png"
alt="">
</div>
<div class="sectionh3">
Easy-to-use, buy & scale
</div>
</div>
<div class="sectionboxdata">
<div class="sectionimg">
<img src="https://d24cgw3uvb9a9h.cloudfront.net/static/94010/image/new/home/icon_5.png"
alt="">
</div>
<div class="sectionh3">
Most affordable, straightforward pricing
</div>
</div>
</div>
</div>
</section>
<!-- Fifth Section -->
<section class="section5">
<img class="himg" src="https://d24cgw3uvb9a9h.cloudfront.net/static/94010/image/new/home/Zendesk.jpg"
alt="">
</section>
<!-- Sixth Section -->
<section class="section6">
<div class="sectionvip">
<div class="imgvip">
<img src="https://d24cgw3uvb9a9h.cloudfront.net/static/94010/image/new/home/20centuryfox.png"
alt="">
</div>
<div class="detailvip">
<p>Doug Goetz</p>
<img style="height:35px"
src="https://d24cgw3uvb9a9h.cloudfront.net/static/94010/image/new/home/logo-20centuryfox.png"
alt="">
</div>
</div>
<div class="sectionvip">
<div class="imgvip">
<img src="https://d24cgw3uvb9a9h.cloudfront.net/static/94010/image/new/home/abinbev.png" alt="">
</div>
<div class="detailvip">
<p>Jelena Joffe</p>
<img style="height:35px"
src="https://d24cgw3uvb9a9h.cloudfront.net/static/94010/image/new/home/logo-abinbev.png" alt="">
</div>
</div>
<div class="sectionvip">
<div class="imgvip">
<img src="https://d24cgw3uvb9a9h.cloudfront.net/static/94010/image/new/home/uber.png" alt="">
</div>
<div class="detailvip">
<p>Shobhana Ahluvalia</p>
<img style="height:35px"
src="https://d24cgw3uvb9a9h.cloudfront.net/static/94010/image/new/home/logo-uber.png" alt="">
</div>
</div>
<div class="sectionvip">
<div class="imgvip">
<img src="https://d24cgw3uvb9a9h.cloudfront.net/static/94010/image/new/home/rujul_pathak.png"
alt="">
</div>
<div class="detailvip">
<p>Rajul Pathak</p>
<img style="height:35px"
src="https://d24cgw3uvb9a9h.cloudfront.net/static/94010/image/new/home/logo_zendesk.png" alt="">
</div>
</div>
<div class="sectionvip">
<div class="imgvip">
<img src="https://d24cgw3uvb9a9h.cloudfront.net/static/94010/image/new/home/peter_gassner.png"
alt="">
</div>
<div class="detailvip">
<p>Peter Gassner</p>
<img style="height:35px"
src="https://d24cgw3uvb9a9h.cloudfront.net/static/94010/image/new/home/logo_veeva.png" alt="">
</div>
</div>
</section>
<!-- Seventh Section -->
<section class="section7">
<div class="sectitle"><a href="http://zoom.us">Our Customer Loves Us</a> </div>
<div class="sectionbox">
<div class="sectionlist">
<div class="sectionboxdata">
<div class="sectionimg">
<img src="https://d24cgw3uvb9a9h.cloudfront.net/static/94010/image/new/home/1LogoUber.jpg"
alt="">
</div>
</div>
<div class="sectionboxdata">
<div class="sectionimg">
<img src="https://d24cgw3uvb9a9h.cloudfront.net/static/94010/image/new/home/2LogoSlack.jpg"
alt="">
</div>
</div>
<div class="sectionboxdata">
<div class="sectionimg">
<img src="https://d24cgw3uvb9a9h.cloudfront.net/static/94010/image/new/home/logo-atlassian.png"
alt="">
</div>
</div>
<div class="sectionboxdata">
<div class="sectionimg">
<img src="https://d24cgw3uvb9a9h.cloudfront.net/static/94010/image/new/home/10Logo.png"
alt="">
</div>
</div>
<div class="sectionboxdata">
<div class="sectionimg">
<img src="https://d24cgw3uvb9a9h.cloudfront.net/static/94010/image/new/home/22Logo.png"
alt="">
</div>
</div>
</div>
</div>
</section>
<!-- Eighth Section -->
<section class="section8">
<div class="sectionbox">
<div class="sectionlist">
<div class="sectionboxdata">
<div class="btnwhite">
<a href="https://zoom.us/livedemo">Request a Demo</a>
</div>
</div>
<div class="sectionboxdata">
<div class="btnorange">
<a href="https://zoom.us/buy?plan=pro&from=pro">Buy Now</a>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer>
<div class="footerbody">
<div class="footer-1">
<div class="h4" role="heading"><a href="https://zoom.us/about">About</a></div>
<ul>
<li><a href="https://blog.zoom.us/" tracking-id="footerBlog" tracking-category="NavFooter">Zoom
Blog</a></li>
<li><a href="https://zoom.us/customer/all">Customers</a></li>
<li><a href="https://zoom.us/team">Our Team</a></li>
<li><a href="https://zoom.us/zoomisbetter">Why Zoom</a></li>
<li><a href="https://zoom.us/feature">Features</a></li>
<li><a href="https://zoom.us/careers">Careers</a></li>
<li><a href="https://zoom.us/integrations">Integrations</a></li>
<li><a href="https://zoom.us/partners">Partners</a></li>
<li><a href="https://investors.zoom.us/">Investors</a></li>
<li><a href="https://zoom.us/press">Press</a></li>
<li><a href="https://zoom.us/media-kit">Media Kit</a></li>
<li><a href="https://zoom.us/resources">How to Videos</a></li>
<li><a href="https://zoom.us/brandguidelines">Brand Guidelines</a></li>
</ul>
</div>
<div class="footer-1">
<div class="h4" role="heading"><a href="https://zoom.us/download">Download</a></div>
<ul>
<li><a href="https://zoom.us/download#client_4meeting" tracking-id="footerDownloadClient"
tracking-category="NavFooter">Meetings Client</a></li>
<li><a href="https://zoom.us/download#room_client" tracking-id="footerDownloadZR"
tracking-category="NavFooter">Zoom Rooms Client</a></li>
<li><a href="https://zoom.us/download#chrome_ext" tracking-id="footerDownloadExtension"
tracking-category="NavFooter">Browser Extension</a></li>
<li><a href="https://zoom.us/download#outlook_plugin" tracking-id="footerDownloadOPlugin"
tracking-category="NavFooter">Outlook Plug-in</a></li>
<li><a href="https://zoom.us/download#lync_plugin" tracking-id="footerDownloadLyncPlugin"
tracking-category="NavFooter">Lync Plug-in</a></li>
<li><a href="https://zoom.us/download#client_iphone" tracking-id="footerDownloadiOS"
tracking-category="NavFooter">iPhone/iPad App</a></li>
<li><a href="https://zoom.us/download#mobile_app" tracking-id="footerDownloadAndroid"
tracking-category="NavFooter">Android App</a></li>
</ul>
</div>
<div class="footer-1">
<div class="h4" role="heading"><a href="https://zoom.us/contactsales">Sales</a></div>
<ul>
<li><a href="tel:1.888.799.9666" class="support-phone">1.888.799.9666</a></li>
<li><a href="https://zoom.us/contactsales">Contact Sales</a></li>
<li><a href="https://zoom.us/pricing">Plans & Pricing</a></li>
<li><a href="https://zoom.us/livedemo" tracking-id="footerRequestDemo"
tracking-category="NavFooter">Request a Demo</a></li>
<li><a href="https://zoom.us/events" tracking-id="footerWebinars"
tracking-category="NavFooter">Webinars and Events</a></li>
</ul>
</div>
<div class="footer-1">
<div class="h4" role="heading"><a href="https://zoom.us/support">Support</a></div>
<ul>
<li><a href="https://zoom.us/test">Test Zoom</a></li>
<li><a href="https://zoom.us/account">Account</a></li>
<li>
<a href="https://support.zoom.us/hc/en-us" tracking-id="footerSupport2"
tracking-category="NavFooter" target="_blank">
Support Center</a>
</li>
<li><a href="https://zoom.us/livetraining" tracking-id="footerTraining"
tracking-category="NavFooter">Live Training</a></li>
<li><a href="https://zoom.us/feed">Feedback</a></li>
<li><a href="https://zoom.us/contact">Contact Us</a></li>
<li><a href="https://zoom.us/accessibility">Accessibility</a></li>
<li><a href="/docs/en-us/privacy-and-security.html">Privacy and Security</a></li>
</ul>
</div>
</div>
<div class="footercopyright">
<div class="info">
Copyright ©2020 Zoom Video Communications, Inc. All rights reserved. <a
href="https://zoom.us/legal">Privacy & Legal Policies</a>
<a href="https://zoom.us/privacy">About Ads</a>
<a id="teconsent" style="display: none;"></a>
</div>
</div>
</footer>
<!-- Navigation Menu JS -->
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>OUTPUT
