Landing Page

Developer
Arcadio
Size
4,357 Kb
Views
24,288
  1. Landing Page Previews
  2. Landing Page HTML Codes
  3. Landing Page CSS Codes

How do I make an landing page?

What is a landing page? How do you make a landing page? This script and codes were developed by Arcadio on 17 October 2022, Monday.

Landing Page Previews
IQ Test

Landing Page - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Landing Page</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="header"> <label for="menu"></label> <input type="checkbox" id="menu" /> <ul class="navbar"> <li> <a href="https://codepen.io/arcadiomj/live/PPrvLg/"> <i class="fa fa-home"></i> <br> Home </a> </li> <li><a href="https://veterans.rutgers.edu/events"><i class="fa fa-calendar"></i> <br> Events</a></li> <li><a href="https://veterans.rutgers.edu/news"><i class="fa fa-newspaper-o"></i> <br> News</a></li> <li> <a href="http://ucc.rutgers.edu/veterans"> <i class="fa fa-cogs"></i> <br> Services</a> </li> <li><a href="https://veterans.rutgers.edu/donations"><i class="fa fa-usd"></i> <br> Donate</a></li> <li><a href="https://codepen.io/arcadiomj/live/Vevbwq/"><i class="fa fa-question-circle"></i> <br>FAQ</a></li> <li> <a href="https://codepen.io/arcadiomj/live/XmLwQR/"> <i class="fa fa-phone"></i> <br> Contact Us</a> </li> </ul> <!-- end of navbar list !-->
</div>
<!-- end of header !-->
<div class="body"> <div class="r1"> <div class ="c1"> <span>Rutgers, where Veterans and Military are a priority! </span> <img src="https://veterans.rutgers.edu/sites/veterans.rutgers.edu/files/uploads/imports/IMG_4233.JPG"/> </div> <!-- end of column 1!--> <div class = "c2"> <span> Check out Rutgers Veterans on Social Media: </span> <ul> <li> <a href = ""><i class="fa fa-facebook-square"></i> </a> </li> <!-- currently the Facebook page is not active, I have left a spot to place the link later!--> <li> <a href = "https://twitter.com/ruservs" target="_blank"> <i class="fa fa-twitter-square"></i> </a> </li> </ul> <span> Follow/Like us to get up to date information </span> </div> <!-- end of column 2 !--> </div> <!-- end of row 1 !--> <div class="r2"> <div class="c1"> <span> About This Site </span> <img src ="https://veterans.rutgers.edu/sites/veterans.rutgers.edu/files/uploads/imports/14lafayette.jpg" /> <span> <br> We support veteran, military, and eligible family members through a comprehensive program. </span> <a href = "https://veterans.rutgers.edu/office-veteran-and-military-programs-and-services" target="_blank"> Read more here... </a> </div> <!-- end of row 2 column 1 !--> <div class="c2"> <span> Military Times Best for Vets </span> <img src ="https://drive.google.com/uc?export=view&id=0B6od18BhWGl5b3kyOFRjR09lYXM" /> <span> Rutgers was ranked #5 in the Military Times Best for Vets: Colleges 2016 rankings! </span> <a href = "http://www.militarytimes.com/story/veterans/best-for-vets/2015/11/09/best-vets-colleges-2016-our-top-175-schools/75311832/" target="_blank"> Check out the story! </a> </div> <!-- end of row 2 column 2 !--> <div class="c3"> <span> Welcome to Rutgers Veteran Services </span> <iframe src="https://player.vimeo.com/video/80412543" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <span> Rutgers Veterans House from RU Center for Digital Filmmaking </span> </div> <!-- end of row 2 column 3 !--> </div> <!-- end of row 2 !--> <div class = "r3"> <div class = "c1"> <img src = "https://drive.google.com/uc?export=view&id=0B6od18BhWGl5WG5jZFV5eDdpVnM" /> </div> <!-- end of row 3 column 1 !--> <div class = "c2"> <span> Purchase a hooodie or t-shirt to support R.U. S.E.R.V.S. <br> <br> Prices </span> <ul> <li> Hoodies $25 </li> <li> Dri-fits $20 </li> <li> T-shirts $15 </li> </ul> <!-- end of list !--> <a href="mailto:[email protected]?Subject=Shirt%20Order" target="_top">E-mail us to order</a> </div> <!-- end of row 3 column 2 !--> </div> <!-- end of row 3 !-->
</div> <!-- end of body !-->
<div class="footer"> <ul class="contact"> <li> RU S.E.R.V.S. </li> <li> <a href="mailto:[email protected]?Subject=Website%20Contact" target="_top">E-mail Us</a> </li> <li> 848-932-VETS </li> </ul> <div class="copyright"> Copyright © 2015, Rutgers, The State University of New Jersey, an equal opportunity, affirmative action institution. </ul> </div> <!-- end of footer !-->
</body>
</html>

Landing Page - Script Codes CSS Codes

/* import the fonts needed */
@import url("https://fonts.googleapis.com/css?family=Cookie");
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
/* reset global default */
* { margin: 0; padding: 0; box-sizing: border-box;
}
/* header settings */
.header { width: 100%; height: 4em; background-color: #0C1323; opacity: 0.9; background-repeat: no-repeat; background-position: right; background-size: auto 4em; position: fixed; top: 0px; z-index: 1000; background-image: url("https://drive.google.com/uc?export=view&id=0B6od18BhWGl5YWN3emwyelRyUUE");
}
.header > input { display: none; }
.header > label { display: none; width: 3em; height: 3em; margin-left: 1em; margin-top: .5em; background-size: contain; background-image: url("https://drive.google.com/uc?export=view&id=0B6od18BhWGl5eWhtZzJUaFA0SjA"); background-repeat: no-repeat;
}
.header > .navbar { width: auto;
}
.header > .navbar > li { display: inline-block; width: auto; height: auto; font-size: 130%; padding: 10px 12px 5px 12px; text-align: center;
}
.header > .navbar > li > a { color: white; text-decoration: none; font-family: Trebuchet MS, Charcoal, sans-serif; text-shadow: 2px 2px grey;
}
.header > .navbar > li > a:hover { color: #C21814;
}
/* end of header settings*/
/* body settings */
.body { margin-top: 3em; z-index: -1000; width: 100vw; height: 205vh; font-family: Trebuchet MS, Charcoal, sans-serif; font-size: 130%; color: #0C1323; background-size: 100%; background-repeat: repeat-y; background-image: url("https://drive.google.com/uc?export=view&id=0B6od18BhWGl5elFiRTlubVZfN0k");
}
.body > .r1{ display: block; width: 100vw; margin: 0 auto; text-align: center; vertical-align:top;
}
.body > .r1 > .c1 { display: inline-block; width: 40%; margin: 0 auto; padding: 25px; vertical-align:middle;
}
.body > .r1 > .c2 { display: inline-block; width: 40%; margin: 0 auto; vertical-align:middle;
}
.body > .r1 > .c2 > ul { list-style-type: none; font-size: 290%;
}
.body > .r1 > .c2 > ul > li { display: inline;
}
.body > .r1 > .c2 > ul > li > a { text-decoration: none;
}
.body > .r1 > .c2 > ul > li > a > .fa-facebook-square { color: #3a5795;
}
.body > .r1 > .c2 > ul > li > a > .fa-facebook-square:hover { color: #C21814;
}
.body > .r1 > .c2 > ul > li > a > .fa-twitter-square { color: #28A9E0;
}
.body > .r1 > .c2 > ul > li > a > .fa-twitter-square:hover { color: #C21814;
}
.body > .r1 > .c1 > img { width: 100%; height: auto; padding: 10px; border-radius: 5%;
}
.body > .r2{ display: block; width: 97vw; margin: 0 auto; text-align: center; padding: 10px 0px 0px 0px;
}
.body > .r2 > .c1{ display: inline-block; width: 33%; vertical-align:top; opacity: .9; border-right: double #0C1323; padding: 5px;
}
.body > .r2 > .c1 > img { width: 90%; padding: 5px; border-radius: 5%;
}
.body > .r2 > .c2{ display: inline-block; width: 33%; vertical-align:top; opacity: .9; border-right: double #0C1323; padding: 5px;
}
.body > .r2 > .c2 > img { width: 90%; max-height: 350px; padding: 5px; border-radius: 5%;
}
.body > .r2 > .c3{ display: inline-block; width: 33%; vertical-align: top; opacity: .9;
}
.body > .r2 > .c3 > iframe { width: 90%; padding: 5px; border-radius: 5%;
}
.body > .r2 > .c1 > a{ text-decoration: none;
}
.body > .r2 > .c2 > a{ text-decoration: none;
}
.body > .r2 > .c1 > a:visited{ color: #0C1323;
}
.body > .r2 > .c2 > a:visited{ color: #0C1323;
}
.body > .r2 > .c1 > a:hover{ color: #C21814;
}
.body > .r2 > .c2 > a:hover{ color: #C21814;
}
.body > .r3 { display: block; width: 97vw; margin: 0 auto; text-align: center; padding: 10px 0px 0px 0px;
}
.body > .r3 > .c1 { display: inline-block; width: 45%; vertical-align: middle;
}
.body > .r3 > .c1 > img{ width: 80%; height: auto; border-radius: 5%;
}
.body > .r3 > .c2 { display: inline-block; width: 45%; vertical-align: middle;
}
.body > .r3 > .c2 > a { background-color: #0C1323; border-radius: 65%; text-decoration: none; color: white; padding: 10px 35px 10px 35px; text-shadow: 2px 2px grey;
}
.body > .r3 > .c2 > a:hover { color: #C21814;;
}
.body > .r3 > .c2 > ul{ list-style-type: none; margin: 5px 0px 25px 0px;
}
/* end of body settings */
/* footer settings */
.footer { display: block; width: 100%; color: #242B39; text-align: center; position: fixed; bottom: 0px; background-color: white; padding: 5px; z-index: 16; opacity: .9;
}
.footer > .contact { padding: 0px 0px 5px 0px;
}
.footer > .contact > li > a { text-decoration: none; color: #242B39;
}
.footer > .contact > li > a:hover { text-decoration: underline; text-transform: uppercase; color: #C21814;
}
.footer > .contact > li { display: inline; padding: 0px 8px 0px 8px; border-right: 1px solid #242B39;
}
.footer > .contact > li:last-child{ border-right: 0;
}
/* end of footer settings */
/* <= 600px settings */
@media (max-width: 600px) { .header > label { display: inline-block; } .header > .navbar { display: none; } .header > input:checked + .navbar { display: block; width: 220px; height: 110vh; position: absolute; top: 4em; z-index: 100; background-color: #0C1323; } .header > input:checked + .navbar > li { width: 250px; padding: 15px 0px 15px 15px; } .body { height: 200vh; font-size: 90%; } .footer { display: inline-block; width: 100%; z-index: 10; text-align: center; position: fixed; bottom: 0px; padding: 0px 0px 2px 0px; } .body > .r2 > .c1{ display: block; width: 50%; margin: 0 auto; border-right: none; border-bottom: double #0C1323; padding: 5px 0px 5px 0px; } .body > .r2 > .c2{ display: block; width: 50%; margin: 0 auto; border-right: none; border-bottom: double #0C1323; padding: 5px 0px 5px 0px; } .body > .r2 > .c3{ display: block; width: 50%; margin: 0 auto; border-right: none; border-bottom: double #0C1323; padding: 5px 0px 5px 0 }
}
/* 601-749px settings */
@media all and (min-width:601px) and (max-width:749px) { .header > label { display: inline-block; } .header > .navbar { display: none; } .header > input:checked + .navbar { display: block; width: 200px; height: 130vh; position: absolute; top: 4em; z-index: 100; background-color: #0C1323; } .header > input:checked + .navbar > li { width: 250px; padding: 15px 0px 15px 15px; } .body { height: 270vh; font-size: 100%; } .body > .r2 > .c1{ display: block; width: 50%; margin: 0 auto; border-right: none; border-bottom: double #0C1323; padding: 5px 0px 5px 0px; } .body > .r2 > .c2{ display: block; width: 50%; margin: 0 auto; border-right: none; border-bottom: double #0C1323; padding: 5px 0px 5px 0px; } .body > .r2 > .c3{ display: block; width: 50%; margin: 0 auto; border-right: none; border-bottom: double #0C1323; padding: 5px 0px 5px 0px; }
}
/* 750-799px settings */
@media all and (min-width:750px) and (max-width:799px) { .body { height: 250vh; font-size: 100%; } .body > .r2 > .c1{ display: block; width: 50%; margin: 0 auto; border-right: none; border-bottom: double #0C1323; padding: 5px 0px 5px 0px; } .body > .r2 > .c2{ display: block; width: 50%; margin: 0 auto; border-right: none; border-bottom: double #0C1323; padding: 5px 0px 5px 0px; } .body > .r2 > .c3{ display: block; width: 50%; margin: 0 auto; border-right: none; border-bottom: double #0C1323; padding: 5px 0px 5px 0px; }
}
/* 800-1300px settings */
@media all and (min-width:800px) and (max-width:1300px) { .body { height: 300vh; font-size: 100%; } .body > .r2 > .c1{ display: block; width: 50%; margin: 0 auto; border-right: none; border-bottom: double #0C1323; padding: 5px 0px 5px 0px; } .body > .r2 > .c2{ display: block; width: 50%; margin: 0 auto; border-right: none; border-bottom: double #0C1323; padding: 5px 0px 5px 0px; } .body > .r2 > .c3{ display: block; width: 50%; margin: 0 auto; border-right: none; border-bottom: double #0C1323; padding: 5px 0px 5px 0px; }
}
Landing Page - Script Codes
Landing Page - Script Codes
Home Page Home
Developer Arcadio
Username arcadiomj
Uploaded October 17, 2022
Rating 3
Size 4,357 Kb
Views 24,288
Do you need developer help for Landing Page?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Arcadio (arcadiomj) Script Codes
Name
Ex3Page1
A Pen by Arcadio
Hello World
In Class Border Example
HTML Lab
RU S.E.R.V.S. Page
Online - sci html
ContactPage
FAQ Page
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!