<!DOCTYPE HTML>
<html>
<header>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>მთავარი გვერდი</title>
<link href="style.css" type="text/css" rel="stylesheet" />
</header>
<body>
<div class="sxva_bloki"></div>
<div class="test">
Lorem ipsum dolor
ჩაამატეთ დიდი ტექსტი, ისე რომ ბლოკში არ ჩაეტიოს
და გამოიყენეთ overflow-ს სხვადასხვა ვარიანტები
</div>
<div class="sxva_bloki"></div>
</body>
</html>
body{
background-color: #e0d4f1;
padding: 0; /*ბრაუზერის სტილის მოხსნა*/
margin: 0;
}
.sxva_bloki{
width:100%px;
height:50px;
background-color: #105507;
}
.test{
width: 300px;
height: 300px;
background-color:rgba(155, 150, 50, 0.9);
margin:30px auto; /*ბლოკის განთავსება ცენტრში*/
border: 1px solid blue;
// border-left: 2px dotted blue;
// border-right: 2px dotted ;
box-sizing: border-box; /*ბლოკის ჩარჩო მოცემული ზომის შიგნით განთავსდება*/
border-radius:10%;
// border-top-left-radius: 25px; /*მხოლოდ ერთი მხარის მომრგვალება*/
// border-radius: 10px 35px 10px 35px; /*განსხვავებული რადიუსები*/
box-shadow: 10px 10px 15px #000; /*ჩრდილის წანაცვლება მარჯვნივ, ქვემოთ, გადღაბნვა და ფერი*/
//opacity: 0.9; /*გამჭირვალობაიმ შემთხვევაში როცა ფერი HTML Hex-თაა*/
// overflow: hidden; /*ან auto, ან scroll*/
text-align:center;
padding-top: 20px; /*ზემოდან ტექსტის ჩამოწევა */
}