Simple company site.

Developer
Konstantin Minevich
Size
5,924 Kb
Views
26,312
  1. Simple company site. Previews
  2. Simple company site. HTML Codes
  3. Simple company site. CSS Codes
  4. Simple company site. JS Codes

How do I make an simple company site.?

Now has some animations. Angular added to show different pages.. What is a simple company site.? How do you make a simple company site.? This script and codes were developed by Konstantin Minevich on 07 July 2022, Thursday.

Simple company site. Previews
IQ Test

Simple company site. - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple company site.</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Dosis:400,700,800,300'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div ng-app="brandSite">
<div class="page-wrap" ng-controller="contentCtrl"> <header> <div class="logo"><a href="#"><h1>m design</h1></a></div> <nav role='navigation'> <ul ng-init="content = 'home'"> <li><a ng-class="{active:isShowing('home')}" ng-click="showContent('home')" class="active" href="#">Home</a></li> <li><a ng-class="{active:isShowing('clients')}" ng-click="showContent('clients')" href="#">Clients</a></li> <li><a ng-class="{active:isShowing('contact')}" ng-click="showContent('contact')" href="#">Contact Us</a></li> <li><a ng-class="{active:isShowing('blog')}" ng-click="showContent('blog')" href="#">Our Blog</a></li> </ul> </nav> </header> <div id="home" class="content" ng-show="isShowing('home')"> <div class="container"> <h2 class="headln text-center">Welcome.</h2> <div class="content-block greeting"> <p class="lead">We are yet another company that specializes in creating beautiful UI. We build all kind of cool stuff. We are currently looking for new opportunities. If you are interested in our services you can <a href="" ng-click="content = 'contact'">contact us</a> without any hesitation.</p> </div> </div> </div> <div id="about" class="content" ng-show="isShowing('blog')"> <div class="container"> <h2 class="headln">Blog</h2> <div class="content-block"> <h3 class="subheadln">Ummmm...</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum possimus corporis odio id voluptatum fuga praesentium dignissimos perferendis velit architecto excepturi atque aspernatur fugit accusamus ex libero, mollitia eaque. Labore, ad eos, id, quo accusantium distinctio, deleniti in fugit natus repellendus vero reiciendis earum! Reiciendis explicabo quo ratione, accusamus qui.</p> <p class="readmore"> <a href="">Read more</a> </p> </div> <div class="content-block"> <h3 class="subheadln">Hmmm...</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab nisi necessitatibus, quis. Voluptatibus tenetur est culpa quod quibusdam soluta delectus dolorem illum impedit eaque, reprehenderit incidunt quasi velit alias, similique dignissimos ratione omnis excepturi sequi perspiciatis tempore fugiat reiciendis. Adipisci rem ad consequuntur ipsum, consequatur velit iure pariatur nihil ab.</p> <p class="readmore"> <a href="">Read more</a> </p> </div> </div> </div> <div id="clients" class="content" ng-show="isShowing('clients')"> <div class="container"> <h2 class="headln">Clients</h2> <div class="content-block"> <h3 class="subheadln">Page is coming soon. Stay tuned...</h3> </div> </div> </div> <div id="contactus" class="content" ng-show="isShowing('contact')"> <div class="container"> <h2 class="headln">Contact us.</h2> <h3 class="subheadln"><span class="text-muted">Please...</span></h3> <div class="content-block" ng-controller="contactCtrl"> <form name="contactForm" novalidate> <fieldset> <label for="yourname" class="form-label">Your name:</label> <input type="text" name="yourname" ng-model="contactCtrl.contactName" id="yourname" class="form-ctrl" required/> </fieldset> <fieldset> <label for="yourmessage" class="form-label">Your message:</label> <textarea name="yourmessage" ng-model="contactCtrl.contactMessage" cols="30" rows="10" class="form-ctrl" required></textarea> </fieldset> COntact form valid: {{contactForm.$valid}} <p><input type="submit" class="form-btn" value="Contact now!" ng-submit="contactForm.$valid && submitForm()" ng-class="{disabled: contactForm.$valid}"/></p> </form> </div> </div> </div>
</div>
<footer> <p>&copy; All Rights Reserved.</p>
</footer>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Simple company site. - Script Codes CSS Codes

header nav ul { list-style: none; padding: 0; margin: 0;
}
header nav li { display: inline-block; margin-right: 14px;
}
header,
.content, header .logo h1, header nav, footer { padding-top: 30px; padding-bottom: 20px;
}
.text-muted { color: #aaaaaa;
}
.text-center { text-align: center;
}
.page-wrap { min-height: calc(100vh - 96px);
}
header,
.content { font-family: "Dosis", "Helvetica Neue", helvetica, sans-serif;
}
@-webkit-keyframes slideUp { from { -webkit-transform: translateY(100%); transform: translateY(100%); } to { -webkit-transform: translateY(0); transform: translateY(0); }
}
@keyframes slideUp { from { -webkit-transform: translateY(100%); transform: translateY(100%); } to { -webkit-transform: translateY(0); transform: translateY(0); }
}
@-webkit-keyframes slideDown { from { -webkit-transform: translateY(-400px); transform: translateY(-400px); } to { -webkit-transform: translateY(0); transform: translateY(0); }
}
@keyframes slideDown { from { -webkit-transform: translateY(-400px); transform: translateY(-400px); } to { -webkit-transform: translateY(0); transform: translateY(0); }
}
@-webkit-keyframes fadeIn { from { visibility: hidden; opacity: 0; } to { visibility: visible; opacity: 1; }
}
@keyframes fadeIn { from { visibility: hidden; opacity: 0; } to { visibility: visible; opacity: 1; }
}
header { background-color: #e9e9e9; text-align: center; -webkit-animation: slideDown .6s, fadeIn .2s; animation: slideDown .6s, fadeIn .2s; box-shadow: inset 0 -4px 0 #dddddd;
}
header .logo h1 { margin-top: 0; display: inline-block; text-transform: uppercase; font-weight: 900; padding-left: 13px; padding-right: 13px; background-color: #5d5d5d; color: #fff; border-radius: 8px; -webkit-transition: background 0.1s ease-in-out; transition: background 0.1s ease-in-out; box-shadow: inset 0 -4px 0 #444444;
}
header .logo h1:hover { background-color: #369; box-shadow: inset 0 -4px 0 #264d73;
}
header nav li:last-child { margin-right: 0;
}
header nav a { display: block; font-size: 18px; text-transform: uppercase; color: #5d5d5d; text-decoration: none; padding-bottom: 3px; border-bottom: 3px solid transparent; -webkit-transition: 0.2s ease; transition: 0.2s ease;
}
header nav a.active, header nav a:hover { color: #369; border-color: #3973ac;
}
.container { max-width: 800px; margin: auto;
}
.content { -webkit-animation: fadeIn .35s; animation: fadeIn .35s; margin-left: 15px; margin-right: 15px;
}
.content a { color: darkorange;
}
.content .content-block { margin-bottom: 1.32em; border-bottom: 1px solid #f6f6f6; opacity: .65; -webkit-transition: opacity .775s ease, -webkit-transform .275s ease-out; transition: opacity .775s ease, -webkit-transform .275s ease-out; transition: opacity .775s ease, transform .275s ease-out; transition: opacity .775s ease, transform .275s ease-out, -webkit-transform .275s ease-out;
}
.content .content-block:hover { opacity: 1; -webkit-transform: translateY(-5px); transform: translateY(-5px);
}
.content .headln { font-size: 42px; text-transform: uppercase; color: #111111; margin-bottom: 42px;
}
.content .subheadln { font-size: 20px; margin-bottom: 14px; margin-top: 32px; text-transform: uppercase; color: #373737;
}
.content .greeting { padding: 12px 20px; border: 1px solid #5d5d5d; border-top-width: 3px;
}
.content .lead { font-size: 1.42em;
}
.content .content-block:hover .readmore a { visibility: visible; opacity: 1;
}
.content .readmore a { color: darkorange; text-transform: uppercase; text-decoration: none; padding-bottom: .25em; border-bottom: 1px solid transparent; visibility: hidden; opacity: 0; -webkit-transition: border .25s, opacity .275s; transition: border .25s, opacity .275s;
}
.content .readmore a:hover { border-color: inherit;
}
fieldset { margin: 10px 0; padding: 5px 0 10px; border: 0;
}
.form-ctrl,
.form-label { display: block;
}
.form-label { font-weight: bold; color: #7c7c7c; margin-bottom: .5em;
}
.form-ctrl { border: 1px solid #ccc; padding: 12px; width: 100%; border-radius: 5px;
}
.form-ctrl:focus { border-color: #369;
}
.form-ctrl.ng-dirty.ng-valid { border-color: lightgreen;
}
.form-ctrl.ng-dirty.ng-invalid { border-color: #BC1111;
}
.form-btn { padding: 7px 12px; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 1px solid #369; border-bottom: 3px solid #264d73; background-color: #369; color: #fff; border-radius: 5px;
}
.form-btn .disabled { opacity: .75; pointer-events: none; cursor: not-allowed;
}
footer { font-family: "Dosis", "Helvetica Neue", helvetica, sans-serif; font-size: 14px; text-align: center; color: #fff; border-top: 1px solid #e9e9e9; background-color: #5d5d5d;
}

Simple company site. - Script Codes JS Codes

(function() { var brandSiteApp; brandSiteApp = angular.module('brandSite', []); brandSiteApp.controller('contentCtrl', function($scope) { $scope.content = 'home'; $scope.showContent = function(contentToShow) { $scope.content = contentToShow; }; $scope.isShowing = function(c) { return $scope.content === c; } }); brandSiteApp.controller('contactCtrl', function($scope) { $scope.contact = {}; $scope.submit = function () { $scope.contact.name = $scope.contact.name; $scope.contact.email = $scope.contact.email; } });
}());
Simple company site. - Script Codes
Simple company site. - Script Codes
Home Page Home
Developer Konstantin Minevich
Username humbl3man
Uploaded July 07, 2022
Rating 3.5
Size 5,924 Kb
Views 26,312
Do you need developer help for Simple company site.?

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
Loading overlay
Clean and simple landing page
Short survey form with validation
Stacked paper effect
Single page company website
UI Login Form
Simple flexbox site
Sliding login form
Animation on scroll
Responsive monochrome menu
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!