...Personal Site...

bookmarks

toggle

INFO Pages

HTML,SVG demo samples

https://tpverstak.ru/cropping-images-css-svg/
Магия CSS: Методы обрезки изображений при помощи CSS и SVG

<svg width="250" height="250">
   <pattern id="pattern" width="100%" height="100%">
	  <image xlink:href="https://omiliya.org/sites/default/files/img_articles/5_2.jpeg" width="250" height="250" preserveAspectRatio="xMidYMin slice"></image>
   </pattern>
   <circle cx="125" cy="125" r="100" fill="url(#pattern)"></circle>
</svg>

/*
test_landing 

.carousel-button-left svg circle:hover {fill: #FBCE51;}
.carousel-button-right svg circle:hover {fill: #FBCE51;}

				<div class="carousel-button-left">
	<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
	<circle cx="22" cy="22" r="22" transform="rotate(-180 22 22)" fill="#313131"/>
	<path d="M24.5382 30.4615L16.0767 21.9999L24.5382 13.5384" stroke="white" stroke-width="2" stroke-linecap="square"/>
	</svg>
				</div>
				
				<div class="carousel-button-right">
	<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
	<circle cx="22" cy="22" r="22" fill="#313131"/>
	<path d="M19.4618 13.5384L27.9233 21.9999L19.4618 30.4615" stroke="white" stroke-width="2" stroke-linecap="square"/>
	</svg>
				</div>
https://ru.stackoverflow.com/questions/701557/%D0%B8%D0%B7%D0%BC%D0%B5%D0%BD%D0%B5%D0%BD%D0%B8%D0%B5-%D1%86%D0%B2%D0%B5%D1%82%D0%B0-svg-%D0%BF%D1%80%D0%B8-%D0%BD%D0%B0%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B8
CSS, изменить цвет SVG при наведении
	*/

CSS code

CSS demo, tests

Demo css gradient

.demo-css-gradient{
	background:linear-gradient(90deg,rgba(132,128,194,1) 0%, rgba(177,177,218,0.9108018207282913) 35%, rgba(0,212,255,1) 100%);
	animation: gradient 30s ease infinite;
	background-size: 400% 400%;		
}
@keyframes gradient {
	0%{background-position:0% 50%}
	50%{background-position:100% 50%}
	100%{background-position:0% 50%}
}

lr.css, Flex classes

.lr-flex, .df{
	display:flex;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;	
}
.lr-flex-wrap {flex-wrap: wrap;}

.lr-flex-center,.d-flex-center{justify-content: center;}

.lr-flex-cells-top,.lr-flex-top{align-items:start;}

.lr-flex-row-reverse{flex-direction: row-reverse;}

1

2

3

4

5

.lr-flex-right,.d-flex-right{justify-content:right;}

.lr-flex-cells-middle,.lr-flex-middle,.d-flex-middle{align-items: center;}

.lr-flex-cell-bottom,.lr-flex-self-bottom{align-self:end;}

2

3

4

.lr-flex-fb25, .d-flex-fb25{flex-basis: 25%;}

.lr-flex-left,.d-flex-left{justify-content:left;}

.lr-flex-cells-bottom,.lr-flex-bottom,.d-flex-bottom{align-items: center;}

1

2

3

4

5

.lr-flex-spb,.d-flex-spb,.lr-flex-between,.d-flex-between{justify-content:space-between;}

1

2

3

4

5

.lr-flex-spa,.d-flex-spa,.lr-flex-around,.d-flex-around{justify-content:space-around;}

1

2

.d-flex-fb25

4

5

.d-flex-center{justify-content:center;}

.d-flex-bottom{align-items:end;}

.d-flex-grow > * {flex-grow:1;}

1

2

3

4

5

.lr-flex-3col {display: flex;flex-wrap: wrap;}

.lr-flex-3col > * {flex-grow: 1;flex-shrink: 1;flex-basis: 50%;}

1

2

3

4

5

.lr-flex-3col {display: flex;flex-wrap: wrap;}

.lr-flex-3col > * {flex-grow: 1;flex-shrink: 1;flex-basis: 30%;}

1

2

3

4

5

.lr-flex-4col {display: flex;flex-wrap: wrap;}

.lr-flex-4col > * {flex-grow: inherit;flex-shrink: 1;flex-basis: 25%;}

1

2

3

4

5

lr.css, Grid classes

.lr-grid,.d-grid{display:grid;}

.lr-grid-2col,.lr-grid--2col,.lr-grid-columns2{grid-template-columns:repeat(2, 1fr);}

1

2

3

4

5

.lr-grid,.d-grid{display:grid;}

.lr-grid-columns2-12{grid-template-columns:1fr 2fr;}

1

2

3

4

5

.lr-grid,.d-grid{display:grid;}

.lr-grid-columns2-21{grid-template-columns:2fr 1fr;}

1

2

3

4

5

.lr-grid,.d-grid{display:grid;}

.lr-grid-columns2-13{grid-template-columns:1fr 3fr;}

1

2

3

4

5

.lr-grid,.d-grid{display:grid;}

.lr-grid-columns2-31{grid-template-columns:3fr 1fr;}

1

2

3

4

5

.lr-grid,.d-grid{display:grid;}

.lr-grid-columns3,.lr-grid-3col{grid-template-columns:repeat(3,1fr);}

1

2

3

4

5

6

7

8

9

.lr-grid,.d-grid{display:grid;}

.lr-grid-columns4,.lr-grid-4col{grid-template-columns:repeat(4,1fr);}

1

2

3

4

5

6

7

8

9

.lr-grid,.d-grid{display:grid;}

.lr-grid-columns5,.lr-grid-5col{grid-template-columns:repeat(5,1fr);}

1

2

3

4

5

6

7

8

9

.lr-grid,.d-grid{display:grid;}

.lr-grid-columns6,.lr-grid-6col{grid-template-columns:repeat(6,1fr);}

1

2

3

4

5

6

7

8

9

.lr-grid,.d-grid{display:grid;}

.lr-grid-columns12,.lr-grid-12col{grid-template-columns:repeat(12,1fr);}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

.lr-list-unstyled, .lr-list-striped

.mark-list .mark-list-blue

.lr-popup

.lr-nav-amber

Dark background, classlist: .lr-nav, .lr-nav-amber, .darkBg, .lr-list-border, .lr-border-white

Light background, classlist: .lr-nav, .lr-nav-amber, .lr-list-border

.lr-nav-red

Dark background, classlist: .lr-nav, .lr-nav-red, .darkBg .lr-list-border, .lr-border-white

Light background, classlist: .lr-nav, .lr-nav-red, .lr-list-border

.lr-nav-lightblue

Dark background, classlist: .lr-nav, .lr-nav-lightblue, .darkBg, .lr-list-border, .lr-border-white

Light background, classlist: .lr-nav, lr-nav-lightblue, .lr-list-border

.lr-nav-teal

Dark background, classlist: .lr-nav, .lr-nav-teal, .darkBg, .lr-list-border, .lr-border-white

Light background, classlist: .lr-nav, lr-nav-teal, .lr-list-border

.lr-nav-yellowgreen

Dark background, classlist: .lr-nav, .lr-nav-yellowgeen, .darkBg, .lr-list-border, .lr-border-white

Light background, classlist: .lr-nav, lr-nav-yellowgreen, .lr-list-border

.lr-nav-black

Light background, classlist: .lr-nav, lr-nav-black, .lr-list-border

.lr-card, .anim-blink

.lr-tile (.lr-popup)

.lr-hover-scale, .lr-hover-scale-1d5, .lr-hover-scale-2

.spinner-border

spinner-border, color-blue

spinner-border, color-orange

.spinner-grow

lr-btn lr-btn-flat lr-hover-scale-1d5

lr-btn-darkblue

lr-btn-violet-fb

lr-btn-orange-m

lr-btn-green-shadow

lr-btn-blue-green

lr-btn-greygreen

lr-btn-greygreen2

lr-rotate-3

lr-rotate3

lr-rotate-5

lr-rotate5

lr-rotate-10

lr-rotate10

lr-rotate-15

lr-rotate15

lr-rotate-20

lr-rotate20

lr-rotate-25

lr-rotate25

lr-rotate-45

lr-rotate45

lr-rotate-90

lr-rotate90

lr-rotate-180

lr-rotate180

lr-rotate-270

lr-rotate270

.lr-slide-right

.lr-slide-down

.lr-slide-down2

.w3-animate-zoom

.w3-animate-top

.w3-animate-left

.w3-animate-right

.w3-animate-right

.w3-animate-bottom

.w3-animate-fading

.w3-animate-opacity

lr-shadow-box

lr-shadow-1

lr-shadow-2

lr-shadow-3

lr-shadow-bamb

lr-shadow-4

lr-shadow-5

lr-shadow-1-flip

lr-shadow-1-inset

lr-shadow-5-inset

z-depth-1

z-depth-1-half

z-depth-2

z-depth-3

z-depth-4

z-depth-5

lr-card

.lr-shadow-inset, .color-blue

lr-shadow-inset-black

lr-drop-shadow

.lr-drop-shadow, .color-green

/* bootstrap441.css */

b--shadow-sm

b--shadow

b--shadow-lg

b--shadow-none

/* Box-shadow, UIKit https://3uikit.ru/utility */

uk-box-shadow-small

uk-box-shadow-medium

uk-box-shadow-large

uk-box-shadow-xlarge

uk-box-shadow-bottom

lr-text-shadow

lr-shadow--natural

lr-shadow--deep

lr-shadow--sharp

lr-shadow--outlined

lr-shadow--crisp

gradient--midnight

gradient--vivid-cyan-blue-to-vivid-purple

gradient--light-green-cyan-to-vivid-green-cyan

gradient--luminous-vivid-amber-to-luminous-vivid-orange

gradient--luminous-vivid-orange-to-vivid-red

gradient--very-light-gray-to-cyan-bluish-gray

gradient--cool-to-warm-spectrum

gradient--blush-light-purple

gradient--blush-bordeaux

gradient--luminous-dusk

gradient--pale-ocean

gradient--electric-grass

test margin negative

https://webformyself.com/otricatelnye-polya-v-css/	
https://webformyself.com/category/verstka-2/css3-verstka-2/
https://learn.javascript.ru/margin

.ml20-negative

.ml30-negative

.ml40-negative

.ml50-negative

.ml60-negative

.ml80-negative

.ml100-negative

.mt40-negative

.mt30-negative

.mt20-negative

CSS rounded classes

.rounded

.rounded-sm

.rounded-md

.rounded-lg

.rounded-top

.rounded-bottom

.rounded-right

.rounded-left

.rounded-left-top,.rounded-top-left,.rounded-lt

.rounded-right-top,.rounded-top-right,.rounded-rt

.rounded-left-bottom,.rounded-bottom-left,.rounded-lb

.rounded-right-bottom,.rounded-bottom-right,.rounded-rb

.rounded-circle

.rounded-pill

.rounded-small,.lr-rad5,.lr-radius5,.lr-border-radius5

.lr-radius-top-small

		
		.rounded{border-radius:.5rem!important}
		.rounded-sm{border-radius:1rem!important}
		.rounded-md{border-radius:2rem!important}
		.rounded-lg{border-radius:3rem!important}
		
		.rounded-top{border-top-left-radius:1rem;border-top-right-radius:1rem}
		.rounded-bottom {border-bottom-right-radius:1rem;border-bottom-left-radius:.1rem}
		.rounded-right{border-top-right-radius:1rem;border-bottom-right-radius:1rem}
		.rounded-left{border-top-left-radius:1rem;border-bottom-left-radius:1rem}
		
		.rounded-right-top,.rounded-top-right,.rounded-rt{border-top-right-radius:1rem;}
		.rounded-right-bottom,.rounded-bottom-right,.rounded-rb{border-bottom-right-radius:1rem}
		
		.rounded-left-top,.rounded-top-left,.rounded-lt{border-top-left-radius:1rem;}
		.rounded-left-bottom,.rounded-bottom-left,.rounded-lb{border-bottom-left-radius:1rem}
		
		.rounded-circle{border-radius:50%}
		.rounded-pill{border-radius:50rem}
		
		.rounded-0,.lr-rad0,.lr-radius0{border-radius:0;}
		.lr-rad4,.lr-radius4{border-radius:4px;}
		.rounded-small,.lr-rad5,.lr-radius5,.lr-border-radius5{border-radius:5px;}
		.lr-radius-top-small{ 
			border-top-left-radius:10px!important;
			border-top-right-radius:10px!important
		}
		.lr-radius-6{border-radius:6px;}
		.lr-radius-8{border-radius:8px;}
		.lr-radius-10,.lr-border-round{border-radius:10px;}
		.lr-radius-15{border-radius:15px;}
		.lr-radius-20{border-radius:20px;}
		.lr-radius-30{border-radius:30px;}

cursor:crosshair	cursor:pointer	cursor:move	cursor:e-resize
cursor:ne-resize	cursor:nw-resize	cursor:n-resize	cursor:sw-resize
cursor:se-resize	cursor:s-resize	cursor:w-resize	cursor:text
cursor:wait	cursor:help	cursor:auto

JS code

JS demo test

test-JS, graphics

web projects

localhost, webapps/ github.com, webapps/ localhost, sources.git vbox1/projects

modal popup window

webapps/bookmarks

Bookmarks application

romanlaptev-bookmarks.glitch.me

transport app, OpenWeather API demo

nodejs proxy, vbox1:8080

run node js server:
	cd /mnt/serv_d2/www/projects/cors-anywhere-master/
	sh run.sh (node server.js)
http://vbox1:8080/

vbox1, schedule_app
vbox1, projects/transport_app

webapp video

videocenter webapp localhost, dev version

notes

notes_app (google keep copy )(!)
notes_app, localhost
localhost, romanlaptev.heroku/projects/webapp_notes
webapp_notes, PHP, postgreSQL (vbox3) /etc/init.d/postgresql start
notes_app (vbox3)
notes, Java (vbox3, apache tomcat)

webapp_albums

db_admin, Training database

geolocation (https required!!!)

webapps/geolocation