Would you like to create a great landing page using just plain HTML, CSS, and JavaScript programming languages?
If your answer is yes, I would say, you have made the right decision.
One of the ways to design a web is to establish yourself in the internet world. On the landing page of a website, you can easily create simple HTML, CSS, and JavaScript programming languages. Also various programming languages like data structure, SQL, etc. are used to make a website. But I will show you step by step how you can easily create a protocol landing page using HTML, CSS, and JavaScript programming languages. The landing page is the main page of the website. When a website is opened, this page will open first. There will be various options related to your website. Such as top menu bar, footer credits, etc. Here I have shown you the complete step by step how to create the web landing page shown below. Below are all the programming languages used to create this landing page and how. You can download the source code from below or copy it and use it for your own purposes. In addition, the source code will help you to understand and learn a lot. You can watch the live demo of this website landing page by clicking on the live demo option below. Hope you like this landing page.
Some information about this landing page
This is a great website landing page built entirely using simple programming code. This landing page is all about the quality of a complete website. The background of this landing page has been completely animated and orange color has been used here first.
Menu Bar: Here is a top menu bar. This top-menu bar has been fixed. This means that when you scroll down the web page, this menu bar will always be in the same place.
Also added hover effect on this menu bar. When you hover or click on the menus in this menu bar, a white underline will be created under the menus.
Registration Button: An awesome animated registration button has been used here. From here users can register on your website. A little animation has been added here. When you move the mouse over or click on that button, this button will vibrate for two seconds.
Site Description: Here is a little space to give you some basic description of your website or some information about the website. There are also options to share on Twitter and Facebook below.
<div class="home-content">
<h1>The Conference</h1>
<h2 class="section-heading">Milano • Sat 20 September 2018 • Sala Pastore</h2>
<p>
With a warning label this big, you know they gotta be fun! Probably you're ready to do any of those.
</p>
<div class="social-icon">
<a href="https://www.twitter.com" target="_blank"><i class="fab fa-twitter"></i></a>
</div>
Protocol: Here you can give pictures and information of some customers of your website or some employees associated with your website. It's designed with some of your customers and their reviews in mind. Here you can show pictures of some of your top customers and some of the information they say here.
Time Table: This is basically a list of your website or how your website works. This means a time table of when they will be able to find out any information from this website.
<div class="event-hours-container">
<p class="event-hours">8:00 AM</p>
<p class="event-hours">8:30 AM</p>
<p class="event-hours">9:00 AM - 12:00 AM</p>
<p class="event-hours">12:30 PM - 1:30 PM</p>
<p class="event-hours">1:30 PM - 5:30 PM</p>
<p class="event-hours">5:00 PM</p>
<p class="event-hours">6:00 PM - 9:00 PM</p>
<p class="event-hours">9:00 PM</p>
<p class="event-hours">7:30 PM - 9:00 PM</p>
</div>
Contact Form: The contact form is designed with this contact ID in mind so that the viewers who come to your website can contact you. Here you can basically give your name, address, picture, email id, mobile number, etc.
<div class="content">
<img class="auditorium-icon" src="https://image.ibb.co/iekv68/basic_geolocalize_01.png" alt="" />
<h2 class="section-heading">Auditorium</h2>
<p class="section-subtitle">The Location</p>
<p class="auditorium-address">
Corso Magenta, 52 20123 Milano
</p>
<p class="auditorium-phone">
Tel. +39 02 92881877 Mob. +39 373 8126235
</p>
<p class="auditorium-email">
E-Mail: info@salapastore.it
</p>
</div>
Sponsor-box: In many cases, many web sites have many sponsors, that is, some donations to run this website properly. You can show the name of that company or its information here. Which will help to increase the quality of the website a lot. When your users see the names of big companies on this list, they will be able to trust each of your products a lot more. With this in mind, I have added it here.
Registration Form: I have given the registration form below to register. So that your user can register on your web site. There are also various options for sharing on social media such as Twitter, Instagram, Facebook, etc.
Footer Credit: Each website has its own footer credit. In other words, it is understood from here who is the original owner of a website. It is a must-have, for any Affiliate, promoting any program. With that in mind, here I have given footer credit below.
All in all, it can be called a complete web landing page. I have tried to put everything on the entire website on this website page. I hope you like this landing page. Below I have shown you how to create or learn how to create this landing page. I have used simple programming code so that you can learn very easily.
How to Create a landing page Using HTML, CSS, JavaScript
I used basic HTML, CSS, and JavaScript programming language to create this landing page. When creating it I used completely simple code with new programmers in mind. So that everyone can understand and learn.
I would like to make a special request to you before copying the following codes. You can download the codes from here by clicking on the download button above without copying the codes. I encountered some issues with Google when I uploaded these codes. I have added some comments in this code for this problem. If you use these codes, you will not have any problems. Because these comments do not change your programming in any way. But it would be best if you download the codes by clicking on the download button above.
HTML TAGS (<body> Add Code </body>)
This code is an HTML code (rename.html). Put this code in the head tags of your project and also in the head tags in the HTML file.
<div class="container">
<section id="home">
<div class="menu-btn">Menu</div>
<nav>
<a href="#home">Home</a>
<a href="#speakers">Speakers</a>
<a href="#agenda">Agenda</a>
<a href="#auditorium">Auditorium</a>
<a href="#sponsors">Sponsors</a>
</nav>
<div class="home-content">
<h1>The Conference</h1>
<h2 class="section-heading">Milano • Sat 20 September 2018 • Sala Pastore</h2>
<p>
With a warning label this big, you know they gotta be fun! Probably you're ready to do any of those.
</p>
<div class="social-icon">
<a href="https://www.twitter.com" target="_blank"><i class="fab fa-twitter"></i></a>
</div>
<!--
if i had more time i would make:
1) the menu collapse into three bars that:
a) animates when clicked on
b) expands into a sidebar style menu
2) make the footer more detailed (using CSS3 grid)
-->
<div class="social-icon">
<a href="https://www.facebook.com" target="_blank"><i class="fab fa-facebook-f"></i></a>
</div>
<a class="register-btn hvr-buzz-out" href="#">Register Now</a>
</div>
</section>
<!-- home section -->
<section id="speakers">
<img class="speaker-icon" src="https://image.ibb.co/ixMeYo/music_microphone_old.png" alt="Microphone Icon" />
<h2 class="section-heading">Speakers</h2>
<p>
Have you ever tried just turning off the TV, sitting down with your children, and hitting them? Noooooo! You can crush me but you can't crush my spirit! Uh, is the puppy mechanical in any way?
</p>
<div class="main-speaker">
<div class="main-speaker-img-container">
<img src="https://images.pexels.com/photos/897314/pexels-photo-897314.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Photo of a woman" />
</div>
<!--
if i had more time i would make:
1) the menu collapse into three bars that:
a) animates when clicked on
b) expands into a sidebar style menu
2) make the footer more detailed (using CSS3 grid)
-->
<div class="main-speaker-info">
<h3>Whatever Whomever</h3>
<p>And remember, don't do anything that affects anything, unless it turns out you were supposed to, in which case, for the love of God, don't not do it!</p>
<a href="https://www.twitter.com" target="_blank"><i class="fab fa-twitter"></i></a>
<span class="tip1"></span>
</div>
</div>
<!-- main speaker -->
<div class="speakers-container">
<div class="speaker">
<div class="speaker-img-container">
<img src="https://images.pexels.com/photos/953266/pexels-photo-953266.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Photo of a woman" />
</div>
<!--
if i had more time i would make:
1) the menu collapse into three bars that:
a) animates when clicked on
b) expands into a sidebar style menu
2) make the footer more detailed (using CSS3 grid)
-->
<div class="speaker-info">
<h3>Whatever Whomever</h3>
<p>And remember, don't do anything that affects anything, unless it turns out you were supposed to.</p>
<a href="https://www.twitter.com" target="_blank"><i class="fab fa-twitter"></i></a>
<span class="tip2"></span>
</div>
</div>
<!--
if i had more time i would make:
1) the menu collapse into three bars that:
a) animates when clicked on
b) expands into a sidebar style menu
2) make the footer more detailed (using CSS3 grid)
-->
<div class="speaker">
<div class="speaker-img-container">
<img src="https://images.pexels.com/photos/253758/pexels-photo-253758.jpeg?h=350&auto=compress&cs=tinysrgb" alt="Photo of a woman" />
</div>
<div class="speaker-info">
<h3>Whatever Whomever</h3>
<p>Unless it turns out you were supposed to, in which case, for the love of God, don't not do it!</p>
<a href="https://www.twitter.com" target="_blank"><i class="fab fa-twitter"></i></a>
<span class="tip3"></span>
</div>
</div>
</div>
<!--
if i had more time i would make:
1) the menu collapse into three bars that:
a) animates when clicked on
b) expands into a sidebar style menu
2) make the footer more detailed (using CSS3 grid)
-->
<div class="speakers-container">
<div class="speaker">
<div class="speaker-info">
<h3>Whatever Whomever</h3>
<p>And remember, don't do anything that affects anything, unless it turns out you were supposed to.</p>
<a href="https://www.twitter.com" target="_blank"><i class="fab fa-twitter"></i></a>
<span class="tip4"></span>
</div>
<div class="speaker-img-container">
<img src="https://images.pexels.com/photos/818819/pexels-photo-818819.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" alt="Photo of a woman" />
</div>
</div>
<!--
if i had more time i would make:
1) the menu collapse into three bars that:
a) animates when clicked on
b) expands into a sidebar style menu
2) make the footer more detailed (using CSS3 grid)
-->
<div class="speaker">
<div class="speaker-info">
<h3>Whatever Whomever</h3>
<p>Unless it turns out you were supposed to, in which case, for the love of God, don't not do it!</p>
<a href="https://www.twitter.com" target="_blank"><i class="fab fa-twitter"></i></a>
<span class="tip5"></span>
</div>
<div class="speaker-img-container">
<img src="https://images.pexels.com/photos/871495/pexels-photo-871495.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Photo of a woman" />
</div>
</div>
</div>
<!-- speakers container -->
</section>
<!--
if i had more time i would make:
1) the menu collapse into three bars that:
a) animates when clicked on
b) expands into a sidebar style menu
2) make the footer more detailed (using CSS3 grid)
-->
<section id="agenda">
<img class="agenda-icon" src="https://image.ibb.co/gpBreT/basic_alarm.png" alt="Alarm Icon" />
<h2 class="section-heading">Agenda</h2>
<p class="section-subtitle">Conference Schedule</p>
<h2 class="agenda-subheading">Milano • Sat 20 September 2018 Sala Pastore</h2>
<div class="events-container">
<div class="event-hours-container">
<p class="event-hours">8:00 AM</p>
<p class="event-hours">8:30 AM</p>
<p class="event-hours">9:00 AM - 12:00 AM</p>
<p class="event-hours">12:30 PM - 1:30 PM</p>
<p class="event-hours">1:30 PM - 5:30 PM</p>
<p class="event-hours">5:00 PM</p>
<p class="event-hours">6:00 PM - 9:00 PM</p>
<p class="event-hours">9:00 PM</p>
<p class="event-hours">7:30 PM - 9:00 PM</p>
</div>
<!--
if i had more time i would make:
1) the menu collapse into three bars that:
a) animates when clicked on
b) expands into a sidebar style menu
2) make the footer more detailed (using CSS3 grid)
-->
<div class="event-title-container">
<p class="event-title">Check In</p>
<p class="event-title">Breakfast / Coffee</p>
<p class="event-title">Pre-Conference Trainings</p>
<p class="event-title">Lunch</p>
<p class="event-title">Pre-Conference Trainings</p>
<p class="event-title">City tour & Activities</p>
<div class="featured-event">
<img class="event-icon" src="https://image.ibb.co/frOF68/basic_todo_txt.png" alt="" />
<p class="feat-event-heading">The Conference talks</p>
<p class="feat-event">Oh dear! She's stuck in an infinite loop, and he's an idiot! Well, that's love for you. Uhh… also, comes with double prize money. It doesn't look so shiny to me.</p>
</div>
<p class="event-title">Welcome Dinner</p>
<p class="event-title">Sponsors Reception</p>
</div>
</div>
</section>
<!--
if i had more time i would make:
1) the menu collapse into three bars that:
a) animates when clicked on
b) expands into a sidebar style menu
2) make the footer more detailed (using CSS3 grid)
-->
<section id="auditorium">
<div class="content-container">
<div class="content">
<img class="auditorium-icon" src="https://image.ibb.co/iekv68/basic_geolocalize_01.png" alt="" />
<h2 class="section-heading">Auditorium</h2>
<p class="section-subtitle">The Location</p>
<p class="auditorium-address">
Corso Magenta, 52 20123 Milano
</p>
<!--
if i had more time i would make:
1) the menu collapse into three bars that:
a) animates when clicked on
b) expands into a sidebar style menu
2) make the footer more detailed (using CSS3 grid)
-->
<p class="auditorium-phone">
Tel. +39 02 92881877 Mob. +39 373 8126235
</p>
<p class="auditorium-email">
E-Mail : info@salapastore.it
</p>
</div>
</div>
</section>
<!--
if i had more time i would make:
1) the menu collapse into three bars that:
a) animates when clicked on
b) expands into a sidebar style menu
2) make the footer more detailed (using CSS3 grid)
-->
<section id="sponsors">
<img class="sponsors-icon" src="https://image.ibb.co/maSmDo/basic_bookmark.png" alt="" />
<h2 class="section-heading">Sponsors</h2>
<p class="section-subtitle">The Conference Partners</p>
<div class="sponsor-logo-container">
<img class="hp-logo" alt="HP logo" src="https://cdn2.iconfinder.com/data/icons/metro-uinvert-dock/256/HP.png" />
<img class="microsoft-logo" alt="Microsoft logo" src="https://cdn4.iconfinder.com/data/icons/flat-brand-logo-2/512/microsoft-256.png" />
<img class="blogger-logo" alt="Blogger logo" src="https://cdn2.iconfinder.com/data/icons/social-media-icon-set-6/94/blogger-256.png" />
<img class="vimeo-logo" alt="Vimeo logo" src="https://prowly-uploads.s3.amazonaws.com/uploads/PressRoom/563/cover_photo/large_slack-imgs.com.png" />
<img class="mastercard-logo" alt="Mastercard logo" src="https://www.shareicon.net/download/2015/09/18/103190_card.ico" />
<img class="bausch-logo" alt="Bausch logo" src="https://crunchbase-production-res.cloudinary.com/image/upload/c_lpad,h_256,w_256,f_auto,q_auto:eco/v1397197824/d7f92ce66c7bc544df29784bb933ed82.gif" />
</div>
<a class="become-sponsor-btn" href="#">Become a Sponsor</a>
</section>
<!--
if i had more time i would make:
1) the menu collapse into three bars that:
a) animates when clicked on
b) expands into a sidebar style menu
2) make the footer more detailed (using CSS3 grid)
-->
<footer>
<p class="footer-title">The Conference</p>
<div class="social-icon-container">
<a href="mailto:best@email.com" target="_blank"><img class="email-icon" src="https://image.ibb.co/c1n8R8/basic_mail.png" alt=""/></a>
<div class="footer-icon">
<a href="https://www.facebook.com" target="_blank"><i class="fab fa-facebook-f"></i></a>
</div>
<div class="footer-icon">
<a href="https://www.twitter.com" target="_blank"><i class="fab fa-twitter"></i></a>
</div>
</div>
<a class="register-today-btn" href="#">Register Today</a>
<span class="copyright">Copyright © 2015 Pixeden. All Rights Reserved.</span>
</footer>
<!--
if i had more time i would make:
1) the menu collapse into three bars that:
a) animates when clicked on
b) expands into a sidebar style menu
2) make the footer more detailed (using CSS3 grid)
-->
</div>
CSS CODE (<head><style> Add code</style></head>)
This code is a CSS code (rename.css). You enter this code in the style tags in the head tags of your project. Also, you put in the style tags in the CSS file.
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
font-family: sans-serif;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-ms-overflow-style: scrollbar;
-webkit-tap-highlight-color: transparent;
}
/*stroke-dasharray: 700;
stroke-dashoffset: 1000;*/
@-ms-viewport {
width: device-width;
}
article,
aside,
dialog,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
display: block;
}
/*stroke-dasharray: 700;
stroke-dashoffset: 1000;*/
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol";
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: left;
background-color: #fff;
}
[tabindex="-1"]:focus {
outline: 0 !important;
}
/*stroke-dasharray: 700;
stroke-dashoffset: 1000;*/
hr {
box-sizing: content-box;
height: 0;
overflow: visible;
}
h1,
h2,
h3,
h4,/*stroke-dasharray: 700;
stroke-dashoffset: 1000;*/
h5,
h6 {
margin-top: 0;
margin-bottom: 0.5rem;
}
p {
margin-top: 0;
margin-bottom: 1rem;
}
/* display: inline-block;
border-radius: 5px;
padding: 8px 20px;
margin: 3px;*/
abbr[title],
abbr[data-original-title] {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
cursor: help;
border-bottom: 0;
}
address {
margin-bottom: 1rem;
font-style: normal;
line-height: inherit;
}
ol,
ul,
dl {
margin-top: 0;
margin-bottom: 1rem;
}
/*stroke-dasharray: 700;
stroke-dashoffset: 1000;*/
ol ol,
ul ul,
ol ul,
ul ol {
margin-bottom: 0;
}
dt {
font-weight: 700;
}
dd {
margin-bottom: 0.5rem;
margin-left: 0;
}
blockquote {
margin: 0 0 1rem;
}
/*stroke-dasharray: 700;
stroke-dashoffset: 1000;*/
dfn {
font-style: italic;
}
/* display: inline-block;
border-radius: 5px;
padding: 8px 20px;
margin: 3px;*/
b,
strong {
font-weight: bolder;
}
small {
font-size: 80%;
}
sub,
sup {
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline;
}
/*stroke-dasharray: 700;
stroke-dashoffset: 1000;*/
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
a {
color: #007bff;
text-decoration: none;
background-color: transparent;
-webkit-text-decoration-skip: objects;
}
/* display: inline-block;
border-radius: 5px;
padding: 8px 20px;
margin: 3px;*/
a:hover {
color: #0056b3;
text-decoration: underline;
}
a:not([href]):not([tabindex]) {
color: inherit;
text-decoration: none;
}
/*stroke-dasharray: 700;
stroke-dashoffset: 1000;*/
a:not([href]):not([tabindex]):hover,
a:not([href]):not([tabindex]):focus {
color: inherit;
text-decoration: none;
}
a:not([href]):not([tabindex]):focus {
outline: 0;
}
/* display: inline-block;
border-radius: 5px;
padding: 8px 20px;
margin: 3px;*/
pre,
code,
kbd,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
pre {
margin-top: 0;
margin-bottom: 1rem;
overflow: auto;
-ms-overflow-style: scrollbar;
}
figure {
margin: 0 0 1rem;
}/*stroke-dasharray: 700;
stroke-dashoffset: 1000;*/
img {
vertical-align: middle;
border-style: none;
}
svg:not(:root) {
overflow: hidden;
}
table {
border-collapse: collapse;
}
/*stroke-dasharray: 700;
stroke-dashoffset: 1000;*/
caption {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
color: #6c757d;
text-align: left;
caption-side: bottom;
}
th {
text-align: inherit;
}
label {
display: inline-block;
margin-bottom: 0.5rem;
}
button {
border-radius: 0;
}
/*stroke-dasharray: 700;
stroke-dashoffset: 1000;*/
button:focus {
outline: 1px dotted;
outline: 5px auto -webkit-focus-ring-color;
}
input,
button,
select,
optgroup,
textarea {
margin: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
button,
input {
overflow: visible;
}
/*stroke-dasharray: 700;
stroke-dashoffset: 1000;*/
button,
select {
text-transform: none;
}
button,
html [type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
padding: 0;
border-style: none;
}
/*stroke-dasharray: 700;
stroke-dashoffset: 1000;*/
input[type="radio"],
input[type="checkbox"] {
box-sizing: border-box;
padding: 0;
}
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
-webkit-appearance: listbox;
}
textarea {
overflow: auto;
resize: vertical;
}
/*stroke-dasharray: 700;
stroke-dashoffset: 1000;*/
fieldset {
min-width: 0;
padding: 0;
margin: 0;
border: 0;
}
/* display: inline-block;
border-radius: 5px;
padding: 8px 20px;
margin: 3px;*/
legend {
display: block;
width: 100%;
max-width: 100%;
padding: 0;
margin-bottom: 0.5rem;
font-size: 1.5rem;
line-height: inherit;
color: inherit;
white-space: normal;
}
progress {
vertical-align: baseline;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/*stroke-dasharray: 700;
stroke-dashoffset: 1000;*/
[type="search"] {
outline-offset: -2px;
-webkit-appearance: none;
}
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/* display: inline-block;
border-radius: 5px;
padding: 8px 20px;
margin: 3px;*/
::-webkit-file-upload-button {
font: inherit;
-webkit-appearance: button;
}
output {
display: inline-block;
}
/*stroke-dasharray: 700;
stroke-dashoffset: 1000;*/
summary {
display: list-item;
cursor: pointer;
}
template {
display: none;
}
/*stroke-dasharray: 700;
stroke-dashoffset: 1000;*/
[hidden] {
display: none !important;
}
/*end of reboot styling */
.container {
color: #464646;
}
.container a:hover {
text-decoration: none;
}
#home {
background-image: url(https://image.ibb.co/kPHQpT/bg.png);
background-repeat: no-repeat;
background-position: 50% 0;
background-attachment: fixed;
color: #fff;
width: 100%;
}
#home .section-heading {
padding-bottom: 1.4em;
}
/*stroke-dasharray: 700;
stroke-dashoffset: 1000;*/
@media all and (min-width: 768px) {
#home {
background-size: cover;
}
#home .section-heading {
margin-top: -15px;
}
#home .section-heading:after {
left: 11px;
}
}
nav {
text-transform: uppercase;
width: 100%;
display: none;
font-weight: 600;
position: fixed;
margin: 0 auto;
text-align: center;
z-index: 10;
transition: margin-top 0.3s ease-in-out, background-color 0.3s ease-in-out;
}
/*stroke-dasharray: 700;
stroke-dashoffset: 1000;*/
nav a {
display: block;
position: relative;
color: #fff;
padding: 1em 0;
margin: 0 0.7em;
font-family: Montserrat, sans-serif;
font-size: 0.9em;
letter-spacing: 1px;
}
nav a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #fff;
visibility: hidden;
transform: scaleX(0);
transition: all 0.2s ease-in-out 0s;
}
/*stroke-dasharray: 700;
stroke-dashoffset: 1000;*/
nav a:hover {
color: #fff;
}
nav a:hover:before {
visibility: visible;
transform: scaleX(1);
}
@media all and (min-width: 768px) {
nav {
display: block;
text-align: right;
margin-top: 1em;
padding: 0.5em 2em;
}
nav a {
display: inline-block;
}
}
/*stroke-dasharray: 700;
stroke-dashoffset: 1000;*/
.nav-scrolled {
background-color: #fff;
margin-top: 0;
}
.nav-scrolled a {
color: #000;
}
.nav-scrolled a:before {
background-color: #000;
}
/* display: inline-block;
border-radius: 5px;
padding: 8px 20px;
margin: 3px;*/
.nav-scrolled a:hover {
color: #000;
}
.home-content {
width: 90%;
margin: 0 auto;
text-align: center;
padding-bottom: 0.5em;
transition: margin-top 0.5s ease;
}
/*stroke-dasharray: 700;
stroke-dashoffset: 1000;*/
@media all and (min-width: 768px) {
.home-content {
padding: 9em 4.5em;
margin: 0;
text-align: left;
}
}
.push-content {
margin-top: 250px;
}
.open-nav {
transition: display 1s ease;
display: block;
}
/*stroke-dasharray: 700;
stroke-dashoffset: 1000;*/
.menu-btn {
text-transform: uppercase;
cursor: pointer;
padding: 1em;
font-size: 1.5em;
max-width: 130px;
display: inline-block;
}
@media all and (min-width: 768px) {
.menu-btn {
display: none;
}
}
/*stroke-dasharray: 700;
stroke-dashoffset: 1000;*/
h1 {
text-transform: uppercase;
font-family: "Allerta", sans-serif;
font-size: 4.5em;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.2;
}
@media all and (min-width: 768px) {
h1 {
margin-left: -10px;
padding-bottom: 10px;
}
}
.section-heading {
text-transform: uppercase;
position: relative;
font-family: Montserrat, sans-serif;
font-size: 1.3em;
font-weight: 800;
letter-spacing: 1px;
}
/*stroke-dasharray: 700;
stroke-dashoffset: 1000;*/
.section-heading:after {
content: "";
position: absolute;
width: 20px;
height: 1px;
bottom: 0;
left: 50%;
transform: translateX(-50%);
background-color: #fff;
}
.home-content p {
padding: 0.7em 0;
}
@media all and (min-width: 768px) {
.home-content p {
font-size: 1.3em;
max-width: 550px;
}
}
/*stroke-dasharray: 700;
stroke-dashoffset: 1000;*/
.social-icon {
display: inline-block;
font-size: 1.3em;
width: 35px;
height: 35px;
border-radius: 50%;
text-align: center;
margin: 0 4px;
color: tomato;
background-color: #fff;
}
.social-icon span {
display: inline-block;
margin: 7px 0;
}
.social-icon a {
color: tomato;
transition: color 0.3s ease-in-out;
}
.social-icon a:hover {
color: #42a8bf;
}
/*stroke-dasharray: 700;
stroke-dashoffset: 1000;*/
.register-btn {
text-transform: uppercase;
margin: 2em auto;
width: 230px;
display: block;
border: 1px solid #fff;
color: #fff;
padding: 1em;
text-align: center;
font-size: 1.3em;
transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}
.register-btn:hover {
text-decoration: none;
color: tomato;
background-color: #fff;
}
/*stroke-dasharray: 700;
stroke-dashoffset: 1000;*/
@media all and (min-width: 768px) {
.register-btn {
margin: 2em 0;
background-color: #42a8bf;
border: 2px solid #fff;
}
}
/* display: inline-block;
border-radius: 5px;
padding: 8px 20px;
margin: 3px;*/
@keyframes hvr-buzz-out {
10% {
transform: translateX(3px) rotate(2deg);
}/* display: inline-block;
border-radius: 5px;
padding: 8px 20px;
margin: 3px;*/
20% {
transform: translateX(-3px) rotate(-2deg);
}
30% {
transform: translateX(3px) rotate(2deg);
}
40% {
transform: translateX(-3px) rotate(-2deg);
}
50% {
transform: translateX(2px) rotate(1deg);
}
60% {
transform: translateX(-2px) rotate(-1deg);
}
70% {
transform: translateX(2px) rotate(1deg);
}
80% {
transform: translateX(-2px) rotate(-1deg);
}
90% {
transform: translateX(1px) rotate(0);
}
100% {
transform: translateX(-1px) rotate(0);
}
}
/*stroke-dasharray: 700;
stroke-dashoffset: 1000;*/
.hvr-buzz-out {
vertical-align: middle;
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
}
.hvr-buzz-out:hover,
.hvr-buzz-out:focus,
.hvr-buzz-out:active {
animation-name: hvr-buzz-out;
animation-duration: 0.75s;
animation-timing-function: linear;
animation-iteration-count: 1;
}
/*stroke-dasharray: 700;
stroke-dashoffset: 1000;*/
h3,
.register-btn,
.section-subtitle,
.agenda-subheading,
.become-sponsor-btn,
.register-today-btn {
font-family: Montserrat, sans-serif;
}
/* display: inline-block;
border-radius: 5px;
padding: 8px 20px;
margin: 3px;*/
p,
.copyright {
font-family: "Open Sans", sans-serif;
}
#speakers {
padding-top: 4em;
}
/*stroke-dasharray: 700;
stroke-dashoffset: 1000;*/
#speakers h3 {
font-weight: 600;
}
#speakers a {
font-size: 1.3em;
color: #000;
transition: color 0.3s ease-in-out;
}
/* display: inline-block;
border-radius: 5px;
padding: 8px 20px;
margin: 3px;*/
#speakers a:hover {
color: #4ca6de;
}
@media all and (min-width: 768px) {
#speakers {
padding-top: 4.5em;
}
}
/*stroke-dasharray: 700;
stroke-dashoffset: 1000;*/
.speaker-icon {
display: block;
margin: 0 auto;
width: 40px;
padding-bottom: 1em;
}
#speakers .section-heading,
#speakers > p {
text-align: center;
width: 80%;
margin: 0 auto;
font-size: 1.1em;
}
@media all and (min-width: 768px) {
#speakers .section-heading,
#speakers > p {
width: 60%;
}
}
/*stroke-dasharray: 700;
stroke-dashoffset: 1000;*/
#speakers > p {
padding-bottom: 4em;
}
.main-speaker,
.speakers-container,
.speaker {
display: flex;
flex-direction: column;
}
@media all and (min-width: 576px) {
.speakers-container {
flex-direction: row;
}
.speaker {
width: 50%;
}
.speaker-info {
height: 350px;
width: 100%;
}
}
/*stroke-dasharray: 700;
stroke-dashoffset: 1000;*/
@media all and (min-width: 768px) {
.main-speaker {
flex-direction: row;
}
}
/* display: inline-block;
border-radius: 5px;
padding: 8px 20px;
margin: 3px;*/
.speaker-img-container {
width: 100%;
height: 350px;
overflow: hidden;
}
.speaker-info:nth-child(odd) {
order: 2;
}
.speaker-img-container:nth-child(even) {
order: 1;
}
/*stroke-dasharray: 700;
stroke-dashoffset: 1000;*/
@media all and (min-width: 768px) {
.main-speaker-img-container,
.main-speaker-info {
width: 50%;
}
}
@media all and (min-width: 992px) {
.speaker {
flex-direction: row;
width: 50%;
}
.speaker-info:nth-child(odd) {
order: 1;
}
.speaker-img-container:nth-child(even) {
order: 2;
}
}
/* display: inline-block;
border-radius: 5px;
padding: 8px 20px;
margin: 3px;*/
.main-speaker-img-container {
height: 350px;
overflow: hidden;
}
.main-speaker img,
.speaker img {
height: 100%;
width: 100%;
object-fit: cover;
filter: grayscale(100%);
}
/*stroke-dasharray: 700;
stroke-dashoffset: 1000;*/
.main-speaker-info,
.speaker-info {
text-align: center;
padding: 2em 1em;
}
.main-speaker-info h3,
.speaker-info h3 {
text-transform: uppercase;
}
/* display: inline-block;
border-radius: 5px;
padding: 8px 20px;
margin: 3px;*/
@media all and (min-width: 768px) {
.main-speaker-info h3,
.speaker-info h3 {
padding-top: 4.5em;
}
.main-speaker-info,
.speaker-info {
padding: 0;
}
}
.main-speaker-info p,
.speaker-info p {
position: relative;
padding: 1.5em;
}
/*stroke-dasharray: 700;
stroke-dashoffset: 1000;*/
.main-speaker-info p:after,
.speaker-info p:after {
content: "";
position: absolute;
width: 70px;
height: 1px;
bottom: 0;
left: 50%;
transform: translateX(-50%);
background-color: black;
}
.main-speaker,
.speaker {
position: relative;
transition: background-color 0.3s ease-in-out;
}/* display: inline-block;
border-radius: 5px;
padding: 8px 20px;
margin: 3px;*/
.main-speaker,
.speaker:hover {
background-color: #fff1e2;
}
/*stroke-dasharray: 700;
stroke-dashoffset: 1000;*/
.tip1,
.tip2,
.tip3,
.tip4,
.tip5 {
opacity: 0;
position: absolute;
width: 125px;
padding: 5px;
z-index: 1;
transition: opacity 0.3s ease-in-out;
top: 48.9%;
left: 50%;
}
.tip1 {
opacity: 1;
top: 45.5%;
}
/*stroke-dasharray: 700;
stroke-dashoffset: 1000;*/
.tip1:before,
.tip2:before,
.tip3:before,
.tip4:before,
.tip5:before {
content: "";
display: block;
width: 0;
height: 0;
position: absolute;
left: -8px;
top: 7px;
border-width: 15px;
border-style: solid;
border-color: transparent transparent #fff1e2 transparent;
}
/* display: inline-block;
border-radius: 5px;
padding: 8px 20px;
margin: 3px;*/
@media all and (min-width: 768px) {
.tip1 {
left: 47.2%;
}
.tip1:before {
border-color: transparent #fff1e2 transparent transparent;
}
}
/*stroke-dasharray: 700;
stroke-dashoffset: 1000;*/
@media all and (min-width: 992px) {
.tip2,
.tip3 {
top: 45%;
left: 46.8%;
}
.tip2:before,
.tip3:before {
border-color: transparent #fff1e2 transparent transparent;
}
.tip4,
.tip5 {
top: 45%;
left: 51.2%;
}
.tip4:before,
.tip5:before {
border-color: transparent transparent transparent #fff1e2;
}
}
/*stroke-dasharray: 700;
stroke-dashoffset: 1000;*/
@media all and (min-width: 1400px) {
.tip2,
.tip3 {
left: 47.5%;
}
.tip4,
.tip5 {
left: 51%;
}
}
@media all and (min-width: 1700px) {
.tip2,
.tip3 {
left: 47.7%;
}
.tip4,
.tip5 {
left: 50.5%;
}
}
/*stroke-dasharray: 700;
stroke-dashoffset: 1000;*/
.speaker:hover .tip2,
.speaker:hover .tip3,
.speaker:hover .tip4,
.speaker:hover .tip5 {
opacity: 1;
}
/* display: inline-block;
border-radius: 5px;
padding: 8px 20px;
margin: 3px;*/
@media all and (min-width: 321px) {
.tip1 {
top: 47.2%;
}
}
@media all and (min-width: 370px) {
.tip1 {
top: 49%;
}
}
@media all and (min-width: 457px) {
.tip1 {
top: 51%;
}
}
/*stroke-dasharray: 700;
stroke-dashoffset: 1000;*/
@media all and (min-width: 620px) {
.tip1 {
top: 53%;
}
}
@media all and (min-width: 800px) {
.tip1 {
left: 47.7%;
}
}
@media all and (min-width: 920px) {
.tip1 {
left: 48.4%;
}
}
@media all and (min-width: 1400px) {
.tip1 {
left: 48.9%;
}
}
/* display: inline-block;
border-radius: 5px;
padding: 8px 20px;
margin: 3px;*/
@media all and (min-width: 2200px) {
.tip1 {
left: 49.1%;
}
}
/*stroke-dasharray: 700;
stroke-dashoffset: 1000;*/
@media all and (min-width: 2500px) {
.tip1 {
left: 49.2%;
}
}
@media all and (min-width: 321px) {
.tip2,
.tip4 {
top: 49%;
}
.tip3,
.tip5 {
top: 51%;
}
}
/* display: inline-block;
border-radius: 5px;
padding: 8px 20px;
margin: 3px;*/
@media all and (min-width: 336px) {
.tip2,
.tip4 {
top: 51%;
}
}
@media all and (min-width: 430px) {
.tip3,
.tip5 {
top: 53%;
}
}
/*stroke-dasharray: 700;
stroke-dashoffset: 1000;*/
@media all and (min-width: 458px) {
.tip2,
.tip4 {
top: 53%;
}
}
@media all and (min-width: 576px) {
.tip2,
.tip3,
.tip4,
.tip5 {
top: 44.8%;
}
}
/* display: inline-block;
border-radius: 5px;
padding: 8px 20px;
margin: 3px;*/
#agenda {
text-align: center;
padding: 5em 1em;
}
#agenda .section-heading,
#agenda .agenda-subheading {
font-size: 1.4em;
padding-bottom: 0;
margin: 0 auto;
}
/*stroke-dasharray: 700;
stroke-dashoffset: 1000;*/
#agenda .agenda-subheading {
text-transform: uppercase;
padding-bottom: 1em;
max-width: 450px;
font-weight: 600;
}
@media all and (min-width: 576px) {
#agenda {
padding: 8em 2em;
}
}
.agenda-icon {
width: 40px;
}
/* display: inline-block;
border-radius: 5px;
padding: 8px 20px;
margin: 3px;*/
.section-subtitle {
font-weight: 800;
font-style: italic;
font-size: 0.8em;
margin-top: -5px;
color: #9a9a9a;
}
.events-container {
display: flex;
}
/*stroke-dasharray: 700;
stroke-dashoffset: 1000;*/
.event-hours-container,
.event-title-container {
width: 50%;
}
.event-title-container {
display: flex;
flex-direction: column;
align-items: flex-start;
}
/* display: inline-block;
border-radius: 5px;
padding: 8px 20px;
margin: 3px;*/
.event-icon {
width: 40px;
display: inline-block;
}
.event-hours {
font-weight: 600;
font-family: Montserrat, sans-serif;
border: 1px solid transparent;
text-align: right;
}
.event-hours:nth-child(8) {
margin-top: 137px;
}
/*stroke-dasharray: 700;
stroke-dashoffset: 1000;*/
@media all and (max-width: 400px) {
.event-hours:nth-child(3),
.event-hours:nth-child(4) {
margin-top: 83px;
}
.event-hours:nth-child(5) {
margin-top: -20px;
}
.event-hours:nth-child(6) {
margin-top: 80px;
}
.event-hours:nth-child(7) {
margin-top: 120px;
}
}
/* display: inline-block;
border-radius: 5px;
padding: 8px 20px;
margin: 3px;*/
@media all and (max-width: 322px) {
.event-hours:nth-child(8) {
margin-top: 340px;
}
.event-hours:last-child {
margin-top: 80px;
}
}
@media all and (min-width: 323px) {
.event-hours:nth-child(8) {
margin-top: 275px;
}
.event-hours:last-child {
margin-top: 80px;
}
}
/*stroke-dasharray: 700;
stroke-dashoffset: 1000;*/
@media all and (min-width: 380px) {
.event-hours:nth-child(8) {
margin-top: 255px;
}
.event-hours:last-child {
margin-top: 60px;
}
}
@media all and (min-width: 586px) {
.event-hours:nth-child(8) {
margin-top: 140px;
}
.event-hours:last-child {
margin-top: 55px;
}
}
@media all and ( min-width: 498px) and (max-width: 544px) {
.event-hours:nth-child(8) {
margin-top: 198px;
}
}
/* display: inline-block;
border-radius: 5px;
padding: 8px 20px;
margin: 3px;*/
@media all and (min-width: 464px) and (max-width: 544px) {
.event-hours:nth-child(4) {
margin-top: 82px;
}
.event-hours:nth-child(6) {
margin-top: 85px;
}
}
@media all and (min-width: 545px) and (max-width: 677px) {
.event-hours:nth-child(8) {
margin-top: 180px;
}
}
/*stroke-dasharray: 700;
stroke-dashoffset: 1000;*/
@media all and (min-width: 677px) and (max-width: 839px) {
.event-hours:nth-child(8) {
margin-top: 160px;
}
}
.event-title {
border: 1px solid #2f2f2f;
position: relative;
}
/* display: inline-block;
border-radius: 5px;
padding: 8px 20px;
margin: 3px;*/
.event-title:after {
content: "";
position: absolute;
width: 1px;
height: 30px;
bottom: -45px;
left: -1px;
background-color: #2f2f2f;
}
.event-title:last-child:before {
content: "";
position: absolute;
width: 8px;
height: 8px;
bottom: -90px;
left: -5px;
background-color: #2f2f2f;
}
/*stroke-dasharray: 700;
stroke-dashoffset: 1000;*/
.event-title,
.event-hours {
padding: 1.5em 1em;
font-size: 1.15em;
margin-bottom: 3em;
}
/* display: inline-block;
border-radius: 5px;
padding: 8px 20px;
margin: 3px;*/
.featured-event {
color: #fff;
background-color: #2f2f2f;
margin-bottom: 3em;
position: relative;
text-align: left;
padding: 1.5em 1em;
max-width: 560px;
}
.featured-event:after {
content: "";
position: absolute;
width: 1px;
height: 30px;
bottom: -40px;
left: 0;
background-color: #2f2f2f;
}/*stroke-dasharray: 700;
stroke-dashoffset: 1000;*/
.featured-event .feat-event-heading {
display: inline-block;
}
.featured-event .feat-event {
font-size: 0.9em;
}
/* display: inline-block;
border-radius: 5px;
padding: 8px 20px;
margin: 3px;*/
#auditorium {
width: 100%;
padding-top: 8em;
padding-bottom: 20em;
background-image: url(https://image.ibb.co/mFFEYo/photo_1477281765962_ef34e8bb0967.jpg);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
#auditorium .content-container {
padding: 3em;
background-color: #fff;
margin: 0 auto;
position: relative;
}
/*stroke-dasharray: 700;
stroke-dashoffset: 1000;*/
#auditorium .content {
text-align: center;
max-width: 160px;
margin: 0 auto;
}
@media all and (min-width: 768px) {
#auditorium .content-container {
width: 80%;
}
}
/* display: inline-block;
border-radius: 5px;
padding: 8px 20px;
margin: 3px;*/
@media all and (min-width: 992px) {
#auditorium {
height: 900px;
}
#auditorium .content-container {
width: 500px;
top: 20%;
transform: translateY(-20%);
}
}
@media all and (min-width: 1200px) {
#auditorium .content-container {
width: 580px;
}
}
.auditorium-icon {
width: 40px;
}
/*stroke-dasharray: 700;
stroke-dashoffset: 1000;*/
.auditorium-address {
font-style: italic;
}
.auditorium-phone {
font-size: 0.9em;
}
.auditorium-email {
font-size: 0.8em;
}
#sponsors {
padding: 4.5em 2em;
text-align: center;
margin-bottom: 3em;
}
/* display: inline-block;
border-radius: 5px;
padding: 8px 20px;
margin: 3px;*/
#sponsors img {
margin: 0 0.5em;
filter: grayscale(100%);
}
/*stroke-dasharray: 700;
stroke-dashoffset: 1000;*/
@media all and (min-width: 768px) {
.sponsor-logo-container {
margin-top: -30px;
}
}
.sponsors-icon {
width: 40px;
padding-bottom: 20px;
}
.hp-logo {
width: 60px;
}/* display: inline-block;
border-radius: 5px;
padding: 8px 20px;
margin: 3px;*/
.microsoft-logo,
.bausch-logo {
width: 180px;
}
.blogger-logo {
width: 50px;
}
/*stroke-dasharray: 700;
stroke-dashoffset: 1000;*/
.mastercard-logo,
.vimeo-logo {
width: 100px;
}
.become-sponsor-btn {
text-transform: uppercase;
margin: 2em auto;
padding: 1.5em;
text-align: center;
font-size: 1.1em;
font-weight: 800;
transition : background-color 0.3s ease-in-out, color 0.3s ease-in-out;
color: #464646;
border: 1px solid #464646;
}
/* display: inline-block;
border-radius: 5px;
padding: 8px 20px;
margin: 3px;*/
.become-sponsor-btn:hover {
color: #fff;
background-color: #464646;
text-decoration: none;
}
footer {
padding-top: 3em;
text-align: center;
background-color: #fff1e2;
color: #464646;
}
/*stroke-dasharray: 700;
stroke-dashoffset: 1000;*/
.footer-title {
font-family: Allerta, sans-serif;
font-size: 3.2em;
text-transform: uppercase;
}
.social-icon-container {
margin-bottom: 3em;
}
.email-icon {
width: 40px;
margin-top: -5px;
}
/*stroke-dasharray: 700;
stroke-dashoffset: 1000;*/
.footer-icon {
display: inline-block;
font-size: 1.3em;
width: 35px;
height: 35px;
border-radius: 50%;
text-align: center;
margin: 0 4px;
color: #fff;
background-color: #464646;
}
.footer-icon span {
display: inline-block;
margin: 7px 0;
}
.footer-icon a {
color: #fff;
transition: color 0.3s ease-in-out;
}
/*stroke-dasharray: 700;
stroke-dashoffset: 1000;*/
.register-today-btn {
text-transform: uppercase;
margin: 2em auto;
padding: 1.5em;
text-align: center;
font-size: 1.1em;
font-weight: 800;
transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
color: #464646;
border: 1px solid #464646;
}
/* display: inline-block;
border-radius: 5px;
padding: 8px 20px;
margin: 3px;*/
.register-today-btn:hover {
color: #fff;
background-color: #464646;
text-decoration: none;
}
.copyright {
display: block;
padding: 5em;
font-size: 0.8em;
font-style: italic;
}
/*stroke-dasharray: 700;
stroke-dashoffset: 1000;*/
JavaScript CODE (<head><script> Add code</script></head>)
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > 700) {
$("nav").addClass("nav-scrolled");
} else {
$("nav").removeClass("nav-scrolled");
}
});
/* display: inline-block;
border-radius: 5px;
padding: 8px 20px;
margin: 3px;*/
$(".menu-btn").on("click", function() {
$("nav").fadeToggle("fast", function() {});
// Pushes content down when nav is opened
$(".home-content").toggleClass("push-content");
});
/* display: inline-block;
border-radius: 5px;
padding: 8px 20px;
margin: 3px;*/
$("a").on("click", function(event) {
if (this.hash !== "") {
event.preventDefault();
var hash = this.hash;
$("html, body").animate(
{
scrollTop: $(hash).offset().top
},
800,
function() {
/* display: inline-block;
border-radius: 5px;
padding: 8px 20px;
margin: 3px;*/
window.location.hash = hash;
}
);
}
});
Hope you learned how I created the landing page. If you encounter any problems while creating this web landing page, you can definitely let me know by commenting below or by emailing me at my email id. I will totally help you to learn and know how I created this landing page.
