Landing Page 1.1

Developer
Gunnar Guddal
Size
2,558 Kb
Views
4,048
  1. Landing Page 1.1 Previews
  2. Landing Page 1.1 HTML Codes
  3. Landing Page 1.1 CSS Codes

How do I make an landing page 1.1?

What is a landing page 1.1? How do you make a landing page 1.1? This script and codes were developed by Gunnar Guddal on 06 January 2023, Friday.

Landing Page 1.1 Previews
IQ Test

Landing Page 1.1 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Landing Page 1.1</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="topbar"> <img src="http://placehold.it/350x150" alt="" class="logo">
</div>
<div class="content"> <img class="logo" src="http://placehold.it/350x150" alt=""> <h1 class="center">Start Your Adventure</h1> <p class="center">Get the inside scoop on next summer"s classes in Zen Biology, Quantum Flyfishing, and Non-Newtonian Paddleboarding.</p> <hr> <h2>Connect with us today</h2> <div class="form"> <form> <input name="name" placeholder="Name" type="text"> <input name="email" placeholder="Email" type="text"> <input class="button" type="button" value="Let's Talk"> </form> </div> <p class="small"> Read our <a href="#">privacy policy.</a> </p> <hr> <h3>More Program Information</h3> <ul> <li>Discount for field chemistry juniors</li> <li>That mountain sure looks cool</li> <li>None of these courses actually exist</li> <li>It would be cool though if they did</li> </ul> <h3>Get Outdoors</h3> <p>Terms and conditionas apply, see fictional environmental courses pamphlet for details. Adventure fees will be applied after the trip conditional on amount of fun extracted from nature. Anyone caught not having an adventure will be sent home and will not recieve college credit.</p> <hr> <p>Copyright Western Washington University 2016</p>
</div>
</body>
</html>

Landing Page 1.1 - Script Codes CSS Codes

/* CSS Document */
@import url(https://fonts.googleapis.com/css?family=Khula|Biryani:700|Fjord+One);
body{ font-family: 'Khula', sans-serif; background: url(https://static.pexels.com/photos/111182/pexels-photo-111182-large.jpeg); background-size: cover; background-position:50% 50%; background-attachment: fixed; margin:0px;
}
h1,h2,h3,h4,h5{ font-family: 'Fjord One', sans-serif;
}
h1{ font-size:34px;
}
.topbar{ width:100%; background:#fff;
}
.topbar img{ width:auto; height:60px; padding:10px;
}
.content{ width:340px; max-width:100%; background:rgba(20,20,20,0.8); color:#fff; padding:20px; margin:60px 60px 60px auto; border-radius:3px;
}
.center{ text-align:center;
}
.logo{ width:240px; max-width:100%; height:auto; margin:10px auto; display:block;
}
hr{ border-color:#0083D6;
}
a{ color:#0083D6;
}
a:hover{ color:#30A3F6;
}
p,li{ font-size:18px; line-height:28px; font-weight: 300;
}
p.small{ font-size:14px;
}
input{ font-family: 'Khula', sans-serif; font-size:14px;
}
h1,h3{ color:#bad80a; font-weight:300;
}
.form{ width:90%; margin:auto;
}
input{ width:100%; padding:8px; box-sizing:border-box; margin:0px 0px 5px 0px; border:0px; -webkit-appearance:none; border-radius:2px;
}
.form p{ margin:5px 0px 0px 0px;
}
.button{ background:#0083D6; color:#fff; cursor:pointer; font-size:1em;
}
.button:hover{ background:#30A3F6;
}
Landing Page 1.1 - Script Codes
Landing Page 1.1 - Script Codes
Home Page Home
Developer Gunnar Guddal
Username thegunnar
Uploaded January 06, 2023
Rating 3
Size 2,558 Kb
Views 4,048
Do you need developer help for Landing Page 1.1?

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!

Gunnar Guddal (thegunnar) Script Codes
Name
Simple Landing Page 1.1
Video Landing Page Skeleton
Custom Bulleted List Template Skeleton
Product Slider
Classic Soup Landing Page
A Pen by Gunnar Guddal
Flex Image Grid with Titles
Green and Healthy Rebranding
Neon Signs
Pure CSS Sailboat and Clouds
Create amazing blog posts 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!