Single page company website

Developer
Konstantin Minevich
Size
4,766 Kb
Views
68,816
  1. Single page company website Previews
  2. Single page company website HTML Codes
  3. Single page company website CSS Codes
  4. Single page company website JS Codes

How do I make an single page company website?

Simple and minimalist design.. What is a single page company website? How do you make a single page company website? This script and codes were developed by Konstantin Minevich on 07 July 2022, Thursday.

Single page company website Previews
IQ Test

Single page company website - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Single page company website</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://codepen.io/humbl3man/pen/pJpdZZ'>
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Roboto+Condensed|Roboto'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header id="top"> <div class="global-width"> <h1>Working <br> With Design Lab</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum, amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse quaerat explicabo eaque porro aspernatur doloremque!</p> <a href="#content" class="scroll"><span class="fa fa-chevron-down fa-3x"></span></a> </div>
</header>
<section id="content" class="top"> <div class="global-width container"> <h2 class="title">Why us?</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit placeat eos id optio. Deleniti, dolorem, distinctio. Commodi distinctio nulla iusto pariatur ut autem reiciendis assumenda error nam quam explicabo debitis ab reprehenderit, neque, veritatis at aperiam officia eveniet odit, excepturi quia obcaecati. Similique laboriosam natus, repellat sit nulla est animi!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus quibusdam nobis architecto quasi perspiciatis at iure accusamus, fugiat eos, magni!</p> </div>
</section>
<section> <div class="global-width container"> <h2 class="title">What we do</h2> <article> <span class="feat-icon fa fa-pencil-square-o fa-5x"></span> <h3>Design</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta molestiae quo vitae ipsam ab. Harum minus nisi, consequatur pariatur, quae at sit, adipisci qui nostrum quas in dignissimos sequi. Commodi voluptates veniam nobis quibusdam alias.</p> </article> <article> <span class="feat-icon fa fa-file-code-o fa-5x"></span> <h3>Development</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus necessitatibus, laudantium! Expedita est facere architecto harum quas, alias praesentium sint amet odit ducimus deserunt recusandae eaque ad quis culpa vero sit perferendis vel, minus at eius voluptate pariatur nesciunt commodi laboriosam. Eius necessitatibus eaque nemo totam, temporibus. Suscipit, alias, odio!</p> </article> <article> <span class="feat-icon fa fa-list-alt fa-5x"></span> <h3>Product Management</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero totam, quis necessitatibus nam sunt ipsa aliquam assumenda provident voluptate dolore quod incidunt, repudiandae ad omnis illum inventore quo odit sequi magnam minus, blanditiis et repellat rem atque ut. Voluptatem nisi id excepturi debitis voluptates nostrum.</p> </article> </div>
</section>
<section> <div class="global-width container"> <h2 class="title">Contact us</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus numquam distinctio, ea doloribus. Atque quidem sit voluptates dignissimos nisi incidunt doloribus dolor, quaerat voluptatem rerum. Magnam quod dicta, delectus eligendi!</p> <a href="" class="buttn">contact us</a> </div>
</section>
<footer> &copy; Design Lab LLC, All Rights Reserved.
</footer>
<a href="#top" class="scroll-top"><span class="fa fa-long-arrow-up fa-lg"></span></a> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Single page company website - Script Codes CSS Codes

body { font-family: "Roboto", sans-serif;
}
header { height: 100%; padding: 200px 0; text-align: center; background-image: linear-gradient(rgba(45, 45, 45, 0.7) 100%, transparent), url(https://s3.amazonaws.com/StartupStockPhotos/20140808_StartupStockPhotos/59.jpg); background-size: cover; background-position: center; background-repeat: no-repeat; color: #fff; text-transform: uppercase; position: relative; margin-bottom: 110px;
}
@media only screen and (max-width: 640px) { header { height: initial; padding-top: 70px; }
}
header h1 { font-size: 4em; font-family: "Roboto Condensed", serif;
}
@media only screen and (max-width: 640px) { header h1 { font-size: 3em; }
}
header p { line-height: 1.6; color: rgba(255, 255, 255, 0.8);
}
header .scroll { position: absolute; display: inline-block; bottom: 35px; right: 0; left: 0; color: #fff; z-index: 100; text-decoration: none; transition: .2s;
}
header .scroll:hover { opacity: .7;
}
section { padding: 105px 0; line-height: 1.4; color: #666;
}
section .container { padding: 30px 50px; border: 1px solid #333; position: relative;
}
section .container .title { position: relative; top: -45px; margin: 0 auto; display: block; background-color: #eee; padding-left: 25px; padding-right: 25px; max-width: 300px; width: 200px; text-transform: uppercase; text-align: center; color: #333; left: 0; right: 0;
}
section .container .buttn { padding: 10px 100px; max-width: 300px; width: 300px; margin: 40px auto; text-decoration: none; display: block; background-color: #333; color: #fff; text-transform: uppercase; font-family: inherit; transition: .25s;
}
section .container .buttn:hover { opacity: .84;
}
section .container .feat-icon { color: #333; display: block; margin: 25px 0 30px;
}
section .container article { text-align: center; padding: 20px 30px; line-height: 1.5;
}
section .container article h3 { text-transform: uppercase; color: #333;
}
.scroll-top { display: none; position: fixed; font-size: 1.2em; bottom: 15px; right: 10px; padding: 15px 20px; background-color: #333; color: #fff; transition: .2s; opacity: .75;
}
.scroll-top:hover { opacity: 1;
}
footer { text-align: center; color: #888; font-size: 14px; padding: 30px 0;
}

Single page company website - Script Codes JS Codes

$('.scroll, .scroll-top').click(function(event){ event.preventDefault(); var target = $(this).attr('href'); $('body').animate({ scrollTop : $( target ).offset().top },400);
});
$(window).on('scroll',function(){ if ( $(this).scrollTop() > 300 ){ $('.scroll-top').show(); }else{ $('.scroll-top').hide(); }
});
Single page company website - Script Codes
Single page company website - Script Codes
Home Page Home
Developer Konstantin Minevich
Username humbl3man
Uploaded July 07, 2022
Rating 3
Size 4,766 Kb
Views 68,816
Do you need developer help for Single page company website?

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!

Konstantin Minevich (humbl3man) Script Codes
Name
Website Template
Responsive monochrome menu
Simple company site.
Sticky nav example page
Gradients practice
Lightbox gallery
3D-ish button
Css phone
UI Login Form
Bootstrap_template
Create amazing sales emails 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!