• Сортировка div-ов. Как реализовать?

    @sdydno
    Начинающий программист.


    Стили сам пропиши. (через пару дней удалю)

    JavaScript препроцессор JQuery
    Ответ написан
    7 комментариев
  • Почему не скроллится до конца?

    @sdydno
    Начинающий программист.
    .absolute-block {
      position: absolute;
      background-color: #fff;
      height: 65%;
      overflow: hidden;  /* удали! */
      bottom: 0;
      width: 100%;
      left: 0;
    }
    Ответ написан
  • Как такие фигуры делать на css?

    @sdydno
    Начинающий программист.
    https://9elements.github.io/fancy-border-radius/
    не стоит благодарности)
    Ответ написан
    Комментировать
  • При нажатии на ссылку всегда возвращается на главный экран?

    @sdydno
    Начинающий программист.
    конечно при нажатии ничего не происходит, так как на href="" у тебя данные викс.
    Ответ написан
  • Почему изоброжение не встают в один ряд?

    @sdydno
    Начинающий программист.
    display: flex;
    Ответ написан
    Комментировать
  • Как сделать border на всю форму?

    @sdydno
    Начинающий программист.
    .form__border {
    padding: 5px;
    width: 580px;
    border: 1px solid #000
    }
    Ответ написан
    Комментировать
  • Windows 10 на экране блокировки гаснет монитор через 30 секунд. Где настроить?

    @sdydno
    Начинающий программист.
    попробуй зайти электропитание -- изменить доп параметры питания -- экран -- отключить экран через
    Ответ написан
    1 комментарий
  • Готова сборка Gulp4?

    @sdydno
    Начинающий программист.
    "use strict";

    const {src, dest} = require("gulp");
    const gulp = require("gulp");
    const autoprefixer = require("gulp-autoprefixer");
    const cssbeautify = require("gulp-cssbeautify");
    const removeComments = require('gulp-strip-css-comments');
    const rename = require("gulp-rename");
    const sass = require("gulp-sass");
    const cssnano = require("gulp-cssnano");
    const uglify = require("gulp-uglify");
    const plumber = require("gulp-plumber");
    const panini = require("panini");
    const imagemin = require("gulp-imagemin");
    const del = require("del");
    const notify = require("gulp-notify");
    const webpack = require('webpack');
    const webpackStream = require('webpack-stream');
    const browserSync = require("browser-sync").create();

    /* Paths */
    const srcPath = 'src/';
    const distPath = 'dist/';

    const path = {
    build: {
    html: distPath,
    js: distPath + "assets/js/",
    css: distPath + "assets/css/",
    images: distPath + "assets/images/",
    fonts: distPath + "assets/fonts/"
    },
    src: {
    html: srcPath + "*.html",
    js: srcPath + "assets/js/*.js",
    css: srcPath + "assets/scss/*.scss",
    images: srcPath + "assets/images/**/*.{jpg,png,svg,gif,ico,webp,webmanifest,xml,json}",
    fonts: srcPath + "assets/fonts/**/*.{eot,woff,woff2,ttf,svg}"
    },
    watch: {
    html: srcPath + "**/*.html",
    js: srcPath + "assets/js/**/*.js",
    css: srcPath + "assets/scss/**/*.scss",
    images: srcPath + "assets/images/**/*.{jpg,png,svg,gif,ico,webp,webmanifest,xml,json}",
    fonts: srcPath + "assets/fonts/**/*.{eot,woff,woff2,ttf,svg}"
    },
    clean: "./" + distPath
    }

    /* Tasks */

    function serve() {
    browserSync.init({
    server: {
    baseDir: "./" + distPath
    }
    });
    }

    function html(cb) {
    panini.refresh();
    return src(path.src.html, {base: srcPath})
    .pipe(plumber())
    .pipe(panini({
    root: srcPath,
    layouts: srcPath + 'layouts/',
    partials: srcPath + 'partials/',
    helpers: srcPath + 'helpers/',
    data: srcPath + 'data/'
    }))
    .pipe(dest(path.build.html))
    .pipe(browserSync.reload({stream: true}));

    cb();
    }

    function css(cb) {
    return src(path.src.css, {base: srcPath + "assets/scss/"})
    .pipe(plumber({
    errorHandler : function(err) {
    notify.onError({
    title: "SCSS Error",
    message: "Error: <%= error.message %>"
    })(err);
    this.emit('end');
    }
    }))
    .pipe(sass({
    includePaths: './node_modules/'
    }))
    .pipe(autoprefixer({
    cascade: true
    }))
    .pipe(cssbeautify())
    .pipe(dest(path.build.css))
    .pipe(cssnano({
    zindex: false,
    discardComments: {
    removeAll: true
    }
    }))
    .pipe(removeComments())
    .pipe(rename({
    suffix: ".min",
    extname: ".css"
    }))
    .pipe(dest(path.build.css))
    .pipe(browserSync.reload({stream: true}));

    cb();
    }

    function cssWatch(cb) {
    return src(path.src.css, {base: srcPath + "assets/scss/"})
    .pipe(plumber({
    errorHandler : function(err) {
    notify.onError({
    title: "SCSS Error",
    message: "Error: <%= error.message %>"
    })(err);
    this.emit('end');
    }
    }))
    .pipe(sass({
    includePaths: './node_modules/'
    }))
    .pipe(rename({
    suffix: ".min",
    extname: ".css"
    }))
    .pipe(dest(path.build.css))
    .pipe(browserSync.reload({stream: true}));

    cb();
    }

    function js(cb) {
    return src(path.src.js, {base: srcPath + 'assets/js/'})
    .pipe(plumber({
    errorHandler : function(err) {
    notify.onError({
    title: "JS Error",
    message: "Error: <%= error.message %>"
    })(err);
    this.emit('end');
    }
    }))
    .pipe(webpackStream({
    mode: "production",
    output: {
    filename: 'app.js',
    },
    module: {
    rules: [
    {
    test: /\.(js)$/,
    exclude: /(node_modules)/,
    loader: 'babel-loader',
    query: {
    presets: ['@babel/preset-env']
    }
    }
    ]
    }
    }))
    .pipe(dest(path.build.js))
    .pipe(browserSync.reload({stream: true}));

    cb();
    }

    function jsWatch(cb) {
    return src(path.src.js, {base: srcPath + 'assets/js/'})
    .pipe(plumber({
    errorHandler : function(err) {
    notify.onError({
    title: "JS Error",
    message: "Error: <%= error.message %>"
    })(err);
    this.emit('end');
    }
    }))
    .pipe(webpackStream({
    mode: "development",
    output: {
    filename: 'app.js',
    }
    }))
    .pipe(dest(path.build.js))
    .pipe(browserSync.reload({stream: true}));

    cb();
    }

    function images(cb) {
    return src(path.src.images)
    .pipe(imagemin([
    imagemin.gifsicle({interlaced: true}),
    imagemin.mozjpeg({quality: 95, progressive: true}),
    imagemin.optipng({optimizationLevel: 5}),
    imagemin.svgo({
    plugins: [
    { removeViewBox: true },
    { cleanupIDs: false }
    ]
    })
    ]))
    .pipe(dest(path.build.images))
    .pipe(browserSync.reload({stream: true}));

    cb();
    }

    function fonts(cb) {
    return src(path.src.fonts)
    .pipe(dest(path.build.fonts))
    .pipe(browserSync.reload({stream: true}));

    cb();
    }

    function clean(cb) {
    return del(path.clean);

    cb();
    }

    function watchFiles() {
    gulp.watch([path.watch.html], html);
    gulp.watch([path.watch.css], cssWatch);
    gulp.watch([path.watch.js], jsWatch);
    gulp.watch([path.watch.images], images);
    gulp.watch([path.watch.fonts], fonts);
    }

    const build = gulp.series(clean, gulp.parallel(html, css, js, images, fonts));
    const watch = gulp.parallel(build, watchFiles, serve);

    /* Exports Tasks */
    exports.html = html;
    exports.css = css;
    exports.js = js;
    exports.images = images;
    exports.fonts = fonts;
    exports.clean = clean;
    exports.build = build;
    exports.watch = watch;
    exports.default = watch;
    Ответ написан
  • Как сделать такой блок?

    @sdydno
    Начинающий программист.
    Походит, что именно хочешь сделать? Не понял суть вопроса...
    Ответ написан