Html page through the eyes of an application developer. Part 1: "Preparation"
I was faced with the task of updating the current site of one company, and in accordance with the trend, the choice fell on the landing page with the support of multilingualism.
Looking at the implementation presented on the Internet, I was horrified. In the body of the page a lot of text! It is impossible to work with such markup. And if you need to change the information? It is necessary to climb in html, search for the right, and change in several places. In short, the horror! And I thought it would be good to use the database, but is this a normal page and deploy a whole server for it? and base? like a bust! Working with Angular2, I thought that it would be cool to create a page with it, but it is very heavy and does not fit ... And then I remembered its analogue Vue.js. Easy library to create applications. I thought: "Why not create a website using vue and add a base simulation?".
Having considered all the pros and cons, looking at other approaches, I wanted to make a little bit of “beauty” in the html layout.
To explain the approach, I decided to make a small page, because I consider putting the full code of the existing page too "heavy".
But I still had to break the article into 2 parts, here only the preparation of a small page and the addition of a menu for changing the language are described.
So, let's begin!
We will create a folder in which we will work, then in it we will create a folder "css" and there we will add accordingly a file with our classes for the page: "style.css"
#main{ height:100%; width:100%; position:absolute; top:0; right:0; opacity:1; } #wrapper{ float:left; width:100%; height:100%; position: relative; z-index:4; } .content-holder{ vertical-align: top; float:left; width:100%; position:relative; height:100%; left: 0; top: 0; right: 0; z-index: 2; } <---------------header---------------> header { position: fixed; width: 100%; z-index:22; top:0; left:0; background:rgba(255,255,255,1); box-shadow: 0 0 10px rgba(0,0,0,.1); } .transition{ -webkit-transition: all 500ms linear; -moz-transition: all 500ms linear; -o-transition: all 500ms linear; -ms-transition: all 500ms linear; transition: all 500ms linear; } .tr-header{ background:rgba(255,255,255,0.0); border-bottom:1px solid rgba(255,255,255,0.4); } header.tr-header.sticky { background:rgba(255,255,255,1); box-shadow: 0 0 10px rgba(0,0,0,.1); } .header-height-emulator { float: left; width: 100%; position: relative; z-index: 1; } .container{ width:92%; max-width:100%; margin:20px auto; position: relative; zoom:1; z-index:3; } .nav-holder { display: flex; flex-wrap: wrap; flex-direction: row-reverse; position: relative; top: 0; left: 0; width: 100%; } .scroll-nav { float:right; } .scroll-nav li { display:inline-block; } .scroll-nav li a { background: #6dc77a; float: left; border-radius: 25px; padding: 10px 22px; font-weight: bold; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #fff; border:2px solid rgba(255,255,255,0); -webkit-transition: all 200ms linear; -moz-transition: all 200ms linear; -o-transition: all 200ms linear; -ms-transition: all 200ms linear; transition: all 200ms linear; } .scroll-nav li a:hover , .scroll-nav li.actscroll a { border:2px solid rgba(255,255,255,1.0); } <---------------end header---------------> Next, create index.html (in the main folder) with the following code:
<head> <!--=============== basic ===============--> <meta charset="UTF-8"> <title> My Company</title> <!--=============== css ===============--> <link rel="stylesheet" type="text/css" href="css/style.css" media="all"> </head> <body> <!--================= main start ================--> <div id="main"> <div id="wrapper"> <div class="content-holder"> <!--================= Header + Scroll navigation ================--> <header class="transition tr-header" id="header"> <div class="container"> <div class="nav-holder"> <nav class="scroll-nav"> <ul> <li class="actscroll"><a href="#sec1"> </a></li> <li><a href="#sec2"> </a></li> <li><a href="#sec3"> </a></li> <li><a href="#sec4"> </a></li> <li><a href="#sec5"> </a></li> <li><a href="#sec6"></a></li> <li><a href="#sec7"></a></li> <li><a href="#sec8"></a></li> </ul> </nav> </div> </div> </header> <!-- End header --> </div> </div> </div> </body> </html> For beauty, download any picture, and add it to the new folder "images". And place it at the top of the page.
<body> <!--================= main start ================--> <div id="main"> <div id="wrapper"> <div class="content-holder"> <!--================= Header + Scroll navigation ================--> <header class="transition tr-header" id="header"> ............ </header> <!-- End header --> <!--================= Photo home ================--> <section class="is_overlay page-title-bg" id="sec1" name="sec1"> <div class="bg bg-parallax run-par2" style="background-image: url(images/paraplan.jpg) "></div> <div class="overlay over-op6"></div> </section> <!-- section end --> </div> </div> </div> </body> </html> And the corresponding classes in "style.css"
<---------------photo home---------------> .page-title-bg { padding:250px 0; color:#fff; overflow:hidden; } .bg { position:absolute; top:0; left:0; width:100%; height:100%; background-size: cover; background-attachment: scroll; background-position: center; background-repeat:repeat; } .is_overlay{ position: inherit; display: block; width: 100%; height: 100%; } .overlay { position:absolute; top:0; left:0; width:100%; height:100%; z-index:2; background:#292929; opacity:0.4; } .over-op6 { opacity:0.6; } <---------------end photo---------------> Next, create another folder "scripts".
I prefer to download library files, so I downloaded Jquery.min and placed it in the "scripts" folder.
Also, to create a language selection menu, I downloaded round icons with country flags (in this case, I needed only 2 icons) that I placed in the new "flags" folder.
And I created classes that contain these icons, so as not to be confused, I added another css file to the appropriate folder. "multilanguage.css"
.flag { width: 2rem; height: 2rem; margin-right: 1rem } .flag-ru { background-image: url(../flags/russia.svg); } .flag-us { background-image: url(../flags/united-states-of-america.svg); } .flag:hover { -webkit-filter: grayscale(100%); filter: grayscale(100%); } .select-flag { -webkit-filter: brightness(205%); filter: brightness(205%); } .lang-dropdown { margin-right: 2rem } .flag-with-menu { display: flex; flex-direction: row; } .lang-menu { z-index: 1; position: absolute; background-color: var(--dark-element-color); border-radius: 8px; padding: 0.5rem; margin-top: 0.5rem; } .lang-first-init { display: none !important; } These all classes describe our language menu.
Do not forget to connect new files to the page !!!
<link rel="stylesheet" type="text/css" href="css/multilanguage.css" media="all"> Add our menu to the page in the header.
<header class="transition tr-header" id="header"> <div class="container"> <div class="nav-holder"> <nav class="scroll-nav"> ....... </nav> <div class="lang-dropdown"> <div class="flag-with-menu" id="flag-menu"> <div class="flag flag-ru" lang-value="ru-RU"></div> </div> <div id="lang-menu" class="lang-menu lang-first-init"> <div class="flag flag-us" lang-value="en-US"></div> </div> </div> </div> </div> </header> And also the animation classes in "multilanguage.css"
.animation-lang-show { overflow: hidden; animation: 0.8s ease showBlock; } @keyframes showBlock { from { max-height: 0px; padding-bottom: 0rem; padding-top: 0rem; } to { max-height: 20rem; } } .animation-lang-hide { animation-timing-function: linear; animation-name: hideBlock; animation-duration: 0.5s; animation-fill-mode: forwards; overflow: hidden; } @keyframes hideBlock { from { max-height: 20rem; } to { display: none; height: 0px; max-height: 0px; padding-bottom: 0em; padding-top: 0rem; margin-top: 0em; padding-left: 0em; margin-bottom: 0em } } Now let's take a description of this menu in JS.
I will give the most complete comments, in case someone does not understand.
In the "scripts" folder, create a new cookie.js file
There will be only two methods: Save cookies and Get cookies with the desired name.
function setCookie(key, value) { var expires = new Date(); expires.setTime(expires.getTime() + (1 * 24 * 60 * 60 * 1000)); document.cookie = key + '=' + value + ';expires=' + expires.toUTCString(); } function getCookie(key) { var keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)'); return keyValue ? keyValue[2] : null; } We connect this file on the page!
<script type="text/javascript" src="scripts/jquery.min.js"></script> <script type="text/javascript" src="scripts/cookie.js"></script> Create a file that will be responsible for the work of our menu.
In the folder "scripts" create a new file "multilanguage.js"
$(document).ready(function () { var language = navigator.language || navigator.browserLanguage; // var userLanguage = getCookie("language") || language; //, , . var isMenuClicked = false; var menu = $('#lang-menu'); // , replaceElementAndSelect(userLanguage); // , // $("#flag-menu").click(function () { isMenuClicked = true; showOrHideMenu(); }) // function showOrHideMenu() { if (menu.hasClass('lang-first-init')) { menu.removeClass('lang-first-init'); menu.addClass('animation-lang-show'); } else { if (menu.hasClass('animation-lang-show')) { hideMenu(); } else { showMenu(); } } } // function showMenu() { menu.removeClass('animation-lang-hide'); menu.addClass('animation-lang-show'); } function hideMenu() { menu.removeClass('animation-lang-show'); menu.addClass('animation-lang-hide'); } // $(document).on('click', '.flag', function () { if (!isMenuClicked) { // var newLang = $(this).attr('lang-value'); // language = newLang; setCookie("language", language); // languageChange(newLang); // hideMenu(); } isMenuClicked = false; }); // , function languageChange(lang) { replaceElementAndSelect(lang); $(document).trigger('onLanguageChange', [lang]); } function replaceElementAndSelect(lang) { var element = ".flag[lang-value='" + lang + "']"; // var selectLang = $(element).clone(true); // var defoultElement = $('.flag-with-menu').find('.flag').clone(true); // // $(element).replaceWith(defoultElement); $('.flag-with-menu').find('.flag').replaceWith(selectLang); // $('.lang-dropdown').children().children().removeClass('select-flag'); $(element).addClass('select-flag'); } }) We connect this file on the page!
<script type="text/javascript" src="scripts/jquery.min.js"></script> <script type="text/javascript" src="scripts/cookie.js"></script> <script type="text/javascript" src="scripts/multilanguage.js"></script> Let's go back to our page.
Add a few sections with any text. For example, I'll add one to save space:
<div class="content-holder"> <!--================= Header ================--> <header class="transition tr-header" id="header"> .......... </header> <!-- End header --> <!--================= Photo home ================--> <section class="is_overlay page-title-bg" id="sec1" name="sec1"> ........ </section> <!-- section end --> <section class="align-text" id="sec2" name="sec2"> <div class="content"> <div class="container"> <div class="row"> <div class="col-md-6 "> <h3> </h3> <div class="clearfix"></div> <div class="separator color-separator flt-l"></div> <div class="clearfix"></div> <p>«» — IT-, «». 2006- «» , 8 . «» , , , , , IT — . «» - — Geektimes, , .</p> </div> <div class="col-md-6 "> <h3>: </h3> <div class="clearfix"></div> <div class="separator color-separator flt-l"></div> <div class="clearfix"></div> <p> . , . , , . . . , , .</p> </div> </div> </div> </div> </section> </div> And add some classes in "style.css"
<---------------section--------------- > .align-text { text-align: left; } .align-text p , .align-text .separator{ float:left; } .align-text h3 { font-size:16px; text-transform:uppercase; font-family: 'Montserrat', sans-serif; color:#666; padding-bottom:20px; } section { float:left; width:100%; padding:50px 0; position:relative; z-index:12; background:#fff; } .col-md-6 { padding-left: 0px; padding-right: 0px; } <---------------section--------------- > That's all! We finally prepared our page for the most interesting! How to present all this more beautifully and make a language change without reloading the page.
')
Source: https://habr.com/ru/post/349462/
All Articles