Full sait

Developer
Evgen Kaban
Size
5,615 Kb
Views
6,072
  1. Full sait Previews
  2. Full sait HTML Codes
  3. Full sait JS Codes

How do I make an full sait?

What is a full sait? How do you make a full sait? This script and codes were developed by Evgen Kaban on 07 January 2023, Saturday.

Full sait Previews
IQ Test

Full sait - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Full sait</title>
</head>
<body> <html>
<head> <meta charset="utf-8"> <title>ARTBOOK</title> <link href="https://fonts.googleapis.com/css?family=Fjalla+One|Lobster+Two|Monda|Oswald|Pathway+Gothic+One|Play|Source+Sans+Pro" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://use.fontawesome.com/622cc25ba3.js"></script>
</head>
<body>
<!-- контент/////////////////////////////////////////////////////////// -->
<div class="content"> <!-- скелетон/////////////////////////////////////////////////////////// --> <div class="sceleton"> <div class="sceleton_left_top_text">ART</div> <div class="sceleton_left_bottom_text"> <span class="sceleton_text_artbook">artbook</span> <span class="sceleton_text_french">french professional photographer</span> </div> <div class="sceleton_text_name">Daniel Knafo</div> <!-- <div><img src="http://st.gde-fon.com/wallpapers_original/581409_stil_makiyaj_devushka_maska_1920x1200_www.Gde-Fon.com.jpg" width="100%" alt="lorem"></div> --> </div> <!-- welckom/////////////////////////////////////////////////////////// -->
<div class="welcome"> <div class="welcome_left"> <div class="welcome_left_white_backround"> <span class="welcome_left_big_text">well</span> <span class="welcome_left_big_text">come</span> </div> <div class="welcome_left_small_text">inspiring / cool / stylish / simple / creative</div> </div> <div class="welcome_right"> <div class="welcome_right_small_text">Our main goal is to make you feel better in the modern world. If you want to make every picture of you incredibly beautiful, then you are to us! <a href="#">Do it now!</a></div> </div>
</div> <!-- who we are/////////////////////////////////////////////////////////// --> <div class="who_we_are"> <div class="who_left_part"> <div class="who_left_part_foto"> <!-- <div><img src="http://st.gde-fon.com/wallpapers_original/581409_stil_makiyaj_devushka_maska_1920x1200_www.Gde-Fon.com.jpg" width="100%" alt="lorem"></div> --> </div> <div class="who_text"> <div class="who_big_text"> <span class="who_text_red_background">WHO</span> WE ARE</div> <div class="who_small_text">we are top professionale fotographers</div> </div> </div>
</div>
<!-- who we are/////////////////////////////////////////////////////////// -->
<!-- what we do /////////////////////////////////////////////////////////// --> <div class="work"> <div class="work_fon"> <div class="work_left_part"> <span class="text_white_backround">WHAT</span> <span class="text_red_backround">WE DO</span> </div> <div class="work_right_part"> <div class="work_text_block"> <div class="work_block_header"> <div class="work_icon icon_foto"></div> <div class="work_text_underline">Уроки</div> </div> В нашей школе мы сможем научить вас создавать семейные портреты, фотографировать друзей, делать свадебные фотографии. </div> <div class="work_text_block"> <div class="work_block_header"> <div class="work_icon icon_retro_camera"></div> <div class="work_text_underline">Курс</div> </div> Данный курс подойдет как для начинающих фотографов, так и для продвинутых пользователей. </div> <div class="work_text_block"> <div class="work_block_header"> <div class="work_icon icon_video_camera"></div> <div class="work_text_underline">Курс</div> </div> Вы узнаете основые секреты правильной съемки на фотоаппарате. </div> <div class="work_text_block"> <div class="work_block_header"> <div class="work_icon icon_spinner"></div> <div class="work_text_underline">Время</div> </div> В течение 4 часов вы узнаете все секреты успешной фотографии. </div> </div> </div> </div>
<!-- portfolio slider/////////////////////////////////////////////////////////// -->
<div class="portfolio"> <div class="portfolio_foto portfolio_first"> <a href="#" class="portfolio_foto_text_link foto_arr_2"> <div class="portfolio_foto_text_link_color"></div> <div class="portfolio_foto_text_link_div"> <div class="portfolio_foto_text"> <span class="red">FOTO</span><span class="big_letters"> gallery</p> </div> </div> </a> </div> <div class="portfolio_foto"> <a href="#" class="portfolio_foto_text_link foto_arr_2"> <div class="portfolio_foto_text_link_color yellow"></div> <div class="portfolio_foto_zoom_text">zoom text</div> <div><img src="http://lorempixel.com/output/nightlife-q-g-300-300-3.jpg" width="100%" alt="lorem"></div> </a> </div> <div class="portfolio_foto"> <a href="#" class="portfolio_foto_text_link foto_arr_1"> <div class="portfolio_foto_text_link_color pink"></div> <div class="portfolio_foto_zoom_text">work now</div> <div><img src="http://lorempixel.com/output/sports-q-g-300-300-5.jpg" width="100%" alt="lorem"></div> </a> </div> <div class="portfolio_foto"> <a href="#" class="portfolio_foto_text_link foto_arr_1"> <div class="portfolio_foto_text_link_color pink"></div> <div class="portfolio_foto_zoom_text">work now</div> <div><img src="http://lorempixel.com/output/sports-q-g-300-300-5.jpg" width="100%" alt="lorem"></div> </a> </div> <div class="portfolio_foto"> <a href="#" class="portfolio_foto_text_link foto_arr_1"> <div class="portfolio_foto_text_link_color pink"></div> <div class="portfolio_foto_zoom_text">work now</div> <div><img src="http://lorempixel.com/output/sports-q-g-300-300-5.jpg" width="100%" alt="lorem"></div> </a> </div> <div class="portfolio_foto"> <a href="#" class="portfolio_foto_text_link foto_arr_1"> <div class="portfolio_foto_text_link_color pink"></div> <div class="portfolio_foto_zoom_text">work now</div> <div><img src="http://lorempixel.com/output/sports-q-g-300-300-5.jpg" width="100%" alt="lorem"></div> </a> </div> <div class="slider"> <div class="slider_backround"></div> <a href="#"> <div class="slider_left left"><span class="quotes_left"></span></div></a> <a href="#"> <div class="slider_right"><span class="quotes_right"></span></div></a> <a href="#"> <div class="slider_close"><span class="slider_close_button">x</span></div></a> </div> </div> <!-- portfolio slider/////////////////////////////////////////////////////////// -->
<!-- типа крутые фразы слайдер////////////////////////////////////////////////////////// --> <div class="wrapper_slider_text"> <div class="slider_text"> <div class="slider_moving_text text_number_1"> <span class="slider_text_big">111111french professional photographer french professional photographer</span></br> <span class="slider_text_small">- Daniel Knafo</span> </div> <div class="slider_moving_text text_number_2"> <span class="slider_text_big">22222french professional photographer french professional photographer</span></br> <span class="slider_text_small">- Daniel Knafo</span> </div> <div class="slider_moving_text text_number_3"> <span class="slider_text_big">333333french professional photographer french professional photographer</span></br> <span class="slider_text_small">- Daniel Knafo</span> </div> <div class="slider_moving_text text_number_4"> <span class="slider_text_big">444444french professional photographer french professional photographer</span></br> <span class="slider_text_small">- Daniel Knafo</span> </div> </div> <div class="slider_moving_box"> <div class="slider_moving_small_box"></div> </div>
</div>
<!-- типа крутые фразы слайдер////////////////////////////////////////////////////////// -->
<!-- fag_for_girls////////////////////////////////////////////////////////// -->
<div class="fag_for_girls"> <div class="wrapper_fag_for_girls"> <div class="fag_for_girls_header"> <span class="fag_big_text">fag</span><br/> <span class="fag_small_text">same adwayses for girl to be buatifull on fotosesion</span> </div> <div class="fag_for_girls_blocks"> <span class="fag_blocks_text_number">#1</span> <span class="fag_blocks_text"> same adwayses for girl to be buatifull on fotosesion</span> </div> <div class="fag_for_girls_blocks"> <span class="fag_blocks_text_number">#2</span> <span class="fag_blocks_text"> same adwayses for girl to be buatifull on fotosesion</span> </div> <div class="fag_for_girls_blocks"> <span class="fag_blocks_text_number">#3</span> <span class="fag_blocks_text"> same adwayses for girl to be buatifull on fotosesion</span> </div> <div class="fag_for_girls_blocks"> <span class="fag_blocks_text_number">#4</span> <span class="fag_blocks_text"> same adwayses for girl to be buatifull on fotosesion</span> </div> <div class="fag_for_girls_blocks"> <span class="fag_blocks_text_number">#5</span> <span class="fag_blocks_text"> same adwayses for girl to be buatifull on fotosesion</span> </div> </div>
</div> <!-- fag_for_girls////////////////////////////////////////////////////////// --> <!-- self moving slider////////////////////////////////////////////////////////// --> <div class="slider_moving"> <div class="slider_moving_foto foto_number_1"><img src="http://lorempixel.com/output/nightlife-q-g-300-300-1.jpg" width="300px" alt="lorem"></div> <div class="slider_moving_foto foto_number_2"><img src="http://lorempixel.com/output/nightlife-q-g-300-300-2.jpg" width="300px" alt="lorem"></div> <div class="slider_moving_foto foto_number_3"><img src="http://lorempixel.com/output/nightlife-q-g-300-300-3.jpg" width="300px" alt="lorem"></div> <div class="slider_moving_foto foto_number_3"><img src="http://lorempixel.com/output/nightlife-q-g-300-300-9.jpg" width="300px" alt="lorem"></div> <div class="slider_moving_foto foto_number_3"><img src="http://lorempixel.com/output/nightlife-q-g-300-300-1.jpg" width="300px" alt="lorem"></div> <div class="slider_moving_foto foto_number_3"><img src="http://lorempixel.com/output/nightlife-q-g-300-300-6.jpg" width="300px" alt="lorem"></div> <div class="slider_moving_foto foto_number_3"><img src="http://lorempixel.com/output/nightlife-q-g-300-300-7.jpg" width="300px" alt="lorem"></div> </div> <!-- self moving slider////////////////////////////////////////////////////////// --> <!-- contact us////////////////////////////////////////////////////////// --> <div class="contact_us"> <div class="contact_us_fon"> <div class="contact_us_left"> <div class="contact_us_big_text"> <span class="contact_us_big_text">contact <span class="red_text">us</span></span> </div> <div class="contact_us_small_text adress"> 121 King Street, Melbourne Victoria 3000 Australia</div> <div class="contact_us_small_text phone_number"> phone: +123 456 789 00</div> <div class="contact_us_small_text mail"> [email protected]</div> </div> <div class="contact_us_right"> <div class="contact_us_icons"> <a href="#"><div class="icon icon_facebook"></div></a> <a href="#"><div class="icon icon_twitter"></div></a> <a href="#"><div class="icon icon_google_plus"></div></a> <a href="#"><div class="icon icon_linkedin"></div></a> </div> </div> </div> </div> <div class="daniel_knafo"> <div class="red_text_2">ARTBOOK</span></div> <div>Daniel Knafo</div> </div> <!-- contact us////////////////////////////////////////////////////////// --> <!-- ////////////////////////////////////////////////////////// --> <!-- ////////////////////////////////////////////////////////// --> <!-- меню/////////////////////////////////////////////////////////// -->
<div class="menu">
<ul id="nav"> <li class="first_element" data-target-page="#top">MENU</li> <li><div class="element go_to_same_link_top" data-target-page="#top">HTML/CSS</div></li> <li><div class="element go_to_same_link" data-target-page="#top">jQuery/JS</div></li> <li><div class="element go_to_same_link">PHP</div></li> <li><div class="element go_to_same_link">MySQL</div></li> <li><div class="element go_to_same_link last_element">XSLT</div></li> <div class="menu_contact_us_icons"> <div class="menu_icon menu_icon_facebook"></div> <div class="menu_icon menu_icon_twitter"></div> <div class="menu_icon menu_icon_google_plus"></div> <div class="menu_icon menu_icon_linkedin"></div> </div> </div> </li>
</ul>
</div>
<div class="trigger"> <div class="menu_icon_trigger_open trigger_open trigger_active"></div> <div class="menu_icon_trigger_close trigger_close"></div>
</div>
</div>
</body> <script src="js/index.js"></script>
</body>
</html>

Full sait - Script Codes JS Codes

/* контент и меню////////////////////////////////////////////////////////////////////*/
var scroll_to = '';
$("body").on("click", ".element", function go_to_slowly (event) { event.preventDefault(); scroll_to = $(this).attr('class').split(' ')[1]; $('html, body').delay(500).animate({scrollTop: $('.' + scroll_to + '').filter(".selector_for_all_links").offset().top}, 2000); });
$("body").on("click", ".trigger_open", function change_width_open (event) { $(".trigger_open").removeClass("trigger_active"); $(".trigger_close").addClass("trigger_active"); $(".trigger").css('right', '200px'); $(".content").css('left', '-200px'); $(".content").css('margin', '0 200px 0 0'); $(".menu").css('right', '0px');
});
$("body").on("click", ".trigger_close, .element", function change_width_close (event) { $(".trigger_close").removeClass("trigger_active"); $(".trigger_open").addClass("trigger_active"); $(".trigger").css('right', '0px'); $(".content").css('left', '0px'); $(".content").css('margin', '0 0px 0 0'); $(".menu").css('right', '-200px');
});
/* контент и меню////////////////////////////////////////////////////////////////////*/
/* portfolio slider////////////////////////////////////////////////////////////////////*/
var foto_arr = ['http://lorempixel.com/output/technics-q-c-300-300-1', 'http://lorempixel.com/output/technics-q-c-300-300-2', 'http://lorempixel.com/output/technics-q-c-300-300-3'];
var foto_arr_1 = ['http://lorempixel.com/output/technics-q-c-300-300-1', 'http://lorempixel.com/output/technics-q-c-300-300-2', 'http://lorempixel.com/output/technics-q-c-300-300-3'];
var foto_arr_2 = ['http://lorempixel.com/output/animals-q-c-640-480-10', 'http://lorempixel.com/output/animals-q-c-640-480-2', 'http://lorempixel.com/output/animals-q-c-640-480-5'];
var foto_number = 0;
$("documetnt").ready(function() { $(".slider_backround").css('background-image', 'url(' + foto_arr_number[foto_number] + '.jpg)'); moving_picture(); moving_textes();
});
var foto_arr_number = '';
$("body").on("click", ".portfolio_foto_text_link", function change_class (event) { event.preventDefault(); $(".slider").removeClass("active"); foto_arr_number = ($(this).attr('class').split(' ')[1]); foto_arr_number = window[foto_arr_number]; change_foto_slader(); $(".slider").addClass("active");
});
$(document).mouseup(function (e) { var container = $(".slider"); if (container.has(e.target).length === 0){ $(".slider").removeClass("active"); }
});
function change_foto_slader() { $( ".slider_backround" ).fadeOut( 200 ); $(".slider_backround").css('background-image', 'url(' + foto_arr_number[foto_number] + '.jpg)'); $( ".slider_backround" ).fadeIn( 500 );
}
$("body").on("click", ".slider_left", function change_class (event) { event.preventDefault(); foto_number -= 1; if (foto_number < 0){foto_number = foto_arr_number.length-1;}; change_foto_slader();
});
$("body").on("click", ".slider_right", function change_class (event) { event.preventDefault(); foto_number += 1; if (foto_number > foto_arr.length-1){foto_number = 0;} change_foto_slader();
});
$("body").on("click", ".slider_close", function change_class (event) { event.preventDefault(); $(".slider").removeClass("active");
});
/* portfolio slider////////////////////////////////////////////////////////////////////*/
/*self moving slider///////////////////////////////////////////////////*/
var interval_moving_pictures = 5000;
var current_text_image = 0;
var image_size = 300;
var image_left = 0-image_size*2;
var numbers_of_pictures = $('.slider_moving_foto').length;
function moving_picture() { image_left += image_size; var current_text_image = image_left; $(".slider_moving_foto").each(function(){ $(this).css("left", current_text_image + "px" ); // как делать анимацию через jqwery $(this).animate({left: "+="+i,}, 2000); $(this).show(); if(current_text_image>(numbers_of_pictures-3)*image_size){current_text_image=0-image_size*2; $(this).hide();} current_text_image += image_size; }) if(image_left>(numbers_of_pictures-3)*image_size){image_left=0-image_size*2;};
}
setInterval(moving_picture, interval_moving_pictures);
/*self moving slider///////////////////////////////////////////////////*/
/*типа крутые фразы слайдер///////////////////////////////////////////////////*/
var time_to_move_text = 2000;
var current_text_size = 0;
var text_size = document.documentElement.clientWidth;
var current_width = document.documentElement.clientWidth;
var text_left = 0-text_size*2;
var numbers_of_textes = $('.slider_moving_text').length;
var text_current_number = numbers_of_textes;
$('.slider_text').css("width", current_width + 'px');
$('.slider_moving_text').css("width", text_size + 'px');
window.onresize = function () { current_width = document.documentElement.clientWidth; //height = document.documentElement.clientHeight; if (current_width < 800){ text_size = current_width; $('.slider_text').css("width", current_width + 'px'); $('.slider_moving_text').css("width", text_size + 'px'); }
}
$(".slider_moving_text").each(function(){ $('.slider_moving_small_box').append("<div class='moving_box_white'></div>");
});
function moving_small_box() { if( text_current_number < 1 ){text_current_number=numbers_of_textes}; $('.moving_box_white').css("background-color", "white"); $('.slider_moving_small_box > *:nth-child(' + text_current_number + ')').css("background-color", "red"); text_current_number-=1;
};
function moving_textes() { text_left += text_size; var current_text_size = text_left; $(".slider_moving_text").each(function(){ $(this).css("left", current_text_size + "px" ); // как делать анимацию через jqwery $(this).animate({left: "+="+i,}, 2000); $(this).show(); if(current_text_size>(numbers_of_textes-3)*text_size){current_text_size=0-text_size*2; $(this).hide();} current_text_size += text_size; }) if(text_left>(numbers_of_textes-3)*text_size){text_left=0-text_size*2;};
}
var refreshIntervaltext = setInterval(moving_textes, time_to_move_text);
var refreshIntervalbox = setInterval(moving_small_box, time_to_move_text);
$( ".wrapper_slider_text" ).mouseover(function() { clearInterval(refreshIntervaltext); clearInterval(refreshIntervalbox);
});
$( ".wrapper_slider_text" ).mouseleave(function() { refreshIntervaltext = setInterval(moving_textes, time_to_move_text); refreshIntervalbox = setInterval(moving_small_box, time_to_move_text);
});
/*типа крутые фразы слайдер///////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////*/
Full sait - Script Codes
Full sait - Script Codes
Home Page Home
Developer Evgen Kaban
Username Evgen097
Uploaded January 07, 2023
Rating 3
Size 5,615 Kb
Views 6,072
Do you need developer help for Full sait?

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!

Evgen Kaban (Evgen097) Script Codes
Name
JQwery_add_class
Showcase your
Educenter
Bootstrap
CONTACT US
Game 3
Slider
Zmeika
Slider 2.0
English game
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!