Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
 emil28092005
|
1232ac13ac | ||
|
emil28092005
|
8090456baa |
@@ -0,0 +1,15 @@
|
|||||||
|
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 24.1.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" baseProfile="basic" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
|
||||||
|
y="0px" viewBox="0 0 32 32" xml:space="preserve">
|
||||||
|
<g id="Layer_2" style="display:none;">
|
||||||
|
</g>
|
||||||
|
<g id="Layer_1">
|
||||||
|
<circle style="fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:10;" cx="16" cy="16" r="12"/>
|
||||||
|
<path style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;" d="M21.786,11
|
||||||
|
c-4.989-0.508-11.286,2.682-13.244,5.627c1.169,1.409,3.046,1.476,5.819,1.014c0.762,2.633,3.469,4.307,5.072,4.27
|
||||||
|
C21.27,20.308,22.521,13.439,21.786,11z"/>
|
||||||
|
|
||||||
|
<line style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;" x1="16.755" y1="15.434" x2="14.361" y2="17.641"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 914 B |
Binary file not shown.
|
After Width: | Height: | Size: 949 B |
@@ -0,0 +1,7 @@
|
|||||||
|
let cards = document.querySelectorAll('.card');
|
||||||
|
|
||||||
|
let phrase = "ABOBA";
|
||||||
|
cards.addEventListener("click", function() {foo()})
|
||||||
|
function foo(){
|
||||||
|
document.querySelectorAll(".card__name").textContent = phrase;
|
||||||
|
}
|
||||||
File diff suppressed because one or more lines are too long
@@ -7,26 +7,25 @@
|
|||||||
<link rel="stylesheet" href="styles.css">
|
<link rel="stylesheet" href="styles.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<header>
|
||||||
<header class="header">
|
<div class="main-preview">
|
||||||
<h1 class="header-name">Дача Сталина</h1>
|
<h1>Дача Сталина</h1>
|
||||||
<img class="header-image" src="https://30.img.avito.st/image/1/1.4vLJ5La5Thv_TYwegeO6z61GTB13RcwTv0BMGXtRShk.Ewsg9tM6z2ZxLmivd2hH2Jdo76UKxxlT4qzIINkq8co"
|
<img class="main-preview-image" src="https://30.img.avito.st/image/1/1.4vLJ5La5Thv_TYwegeO6z61GTB13RcwTv0BMGXtRShk.Ewsg9tM6z2ZxLmivd2hH2Jdo76UKxxlT4qzIINkq8co"
|
||||||
alt="заглавная фотография участка">
|
alt="заглавная фотография участка">
|
||||||
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<main>
|
<main>
|
||||||
<section>
|
<section>
|
||||||
|
|
||||||
<div class="card">
|
<div class="card snap-left">
|
||||||
<h2 class="card-name">Фитнесс зал</h2>
|
<div class="card-head-block snap-left">
|
||||||
<div class="card-head-box">
|
<h2>Фитнесс зал</h2>
|
||||||
<!--
|
|
||||||
<img class="card-image" src="https://10.img.avito.st/image/1/1.yyqVwra5Z8Oja6XGj_nkbv5gZcUrY-XL42ZlwSd3Y8E.I_D7tp8PO-7i68ZXnQLqeWPMDDbK84Dtsvs0HihmT_A"
|
<img class="card-image" src="https://10.img.avito.st/image/1/1.yyqVwra5Z8Oja6XGj_nkbv5gZcUrY-XL42ZlwSd3Y8E.I_D7tp8PO-7i68ZXnQLqeWPMDDbK84Dtsvs0HihmT_A"
|
||||||
alt="фитнесс зал с боксерскими грушами"> -->
|
alt="фитнесс зал с боксерскими грушами">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="card-description-box">
|
<div class="card-description-box">
|
||||||
<!--
|
<p class="card-description">зал для занятий фитнессом и боксом</p>
|
||||||
<p class="card-description">зал для занятий фитнессом и боксом</p> -->
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!--
|
<!--
|
||||||
@@ -56,6 +55,5 @@
|
|||||||
<footer>
|
<footer>
|
||||||
</footer>
|
</footer>
|
||||||
<script></script>
|
<script></script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@@ -0,0 +1,82 @@
|
|||||||
|
*{
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body,
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
p{
|
||||||
|
margin: 0;
|
||||||
|
font-weight: normal;
|
||||||
|
background-color: red;
|
||||||
|
font-family: 'Sans', sans-serif;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
div, header, main, footer {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-preview {
|
||||||
|
text-align: center;
|
||||||
|
background-color: blue;
|
||||||
|
width: 100%;
|
||||||
|
height: 80vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-preview-image {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
section{
|
||||||
|
background-color: darkred;
|
||||||
|
margin: auto;
|
||||||
|
text-align: center;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.card {
|
||||||
|
display: block;
|
||||||
|
background-color: saddlebrown;
|
||||||
|
margin: 20px 0 20px 0;
|
||||||
|
padding: 20px;
|
||||||
|
height: 600px;
|
||||||
|
width: 80%;
|
||||||
|
border: 1px solid lightgray;
|
||||||
|
}
|
||||||
|
|
||||||
|
.snap-left{
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.snap-right{
|
||||||
|
margin-left: auto;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-description {
|
||||||
|
|
||||||
|
}
|
||||||
|
.card-head-block{
|
||||||
|
display: inline-block;
|
||||||
|
text-align: center;
|
||||||
|
background-color: orange;
|
||||||
|
width: 30%;
|
||||||
|
}
|
||||||
|
.card-description-box {
|
||||||
|
height: 80%;
|
||||||
|
width: 30%;
|
||||||
|
display: inline-block;
|
||||||
|
background-color: white;
|
||||||
|
margin: 0 auto 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-image{
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
-79
@@ -1,79 +0,0 @@
|
|||||||
*{
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
body,
|
|
||||||
header,
|
|
||||||
section,
|
|
||||||
footer,
|
|
||||||
h1,
|
|
||||||
h2,
|
|
||||||
h3,
|
|
||||||
h4,
|
|
||||||
p {
|
|
||||||
font-weight: normal;
|
|
||||||
font-family: 'Sans', sans-serif;
|
|
||||||
margin: 0;
|
|
||||||
border: 1px solid black;
|
|
||||||
background-color: rgb(255, 0, 0,.1);
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.header {
|
|
||||||
height: 100vh;
|
|
||||||
background-color: aliceblue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-image {
|
|
||||||
display: block;
|
|
||||||
height: 85%;
|
|
||||||
margin: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-name {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
width: 50%;
|
|
||||||
height: 250px;
|
|
||||||
background-color: antiquewhite;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-image {
|
|
||||||
display: flex;
|
|
||||||
height: 95%;
|
|
||||||
width: 95%;
|
|
||||||
margin-top: .75%;
|
|
||||||
margin-left: .75%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-name {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-head-box {
|
|
||||||
display: inline-block;
|
|
||||||
height: 85%;
|
|
||||||
width: 50%;
|
|
||||||
margin: 0;
|
|
||||||
background-color: rgba(255, 0, 0, 0.337);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-description-box {
|
|
||||||
display: inline-block;
|
|
||||||
height: 85%;
|
|
||||||
width: 45%;
|
|
||||||
padding: 10%;
|
|
||||||
margin: 0;
|
|
||||||
background-color: aqua;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-description {
|
|
||||||
display: flex;
|
|
||||||
margin: auto;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
+104
@@ -0,0 +1,104 @@
|
|||||||
|
*{
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body ,header, section, footer{
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,h2,h3,h4,h5,h6,p{
|
||||||
|
text-shadow: black 4px 4px 3px;
|
||||||
|
margin: 0;
|
||||||
|
color: #e4c373;
|
||||||
|
font-family: 'MesloLGS NF', sans-serif;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 600;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-weight: 550;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
|
||||||
|
text-align: center;
|
||||||
|
background-color: saddlebrown;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__name {
|
||||||
|
color: #bdad60;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__description {
|
||||||
|
color: #bdad60;
|
||||||
|
line-height: 1;
|
||||||
|
margin-bottom: 1vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__image {
|
||||||
|
display: inline-block;
|
||||||
|
width: 95%;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.section {
|
||||||
|
width: 100%;
|
||||||
|
display: inline-block;
|
||||||
|
text-align: center;
|
||||||
|
padding: 25px;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
background: radial-gradient(circle, rgba(164,126,10,1) 0%, rgba(139,69,19,1) 100%);
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
display: inline-block;
|
||||||
|
width: 300px;
|
||||||
|
height: 300px;
|
||||||
|
margin: 10px;
|
||||||
|
background-color: saddlebrown;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card__name {
|
||||||
|
margin: 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card__image {
|
||||||
|
display: block;
|
||||||
|
margin: 0 auto ;
|
||||||
|
width: 90%;
|
||||||
|
border: solid 3px #2a1508;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card__description {
|
||||||
|
margin: 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
background-color: saddlebrown;
|
||||||
|
text-align: center;
|
||||||
|
height: 25vh;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__image--framed{
|
||||||
|
border: solid 5px #2a1508;
|
||||||
|
box-shadow: 10px 10px 20px #2a1508;
|
||||||
|
}
|
||||||
|
.card--framed{
|
||||||
|
border: solid 5px #2a1508;
|
||||||
|
box-shadow: 10px 10px 20px #2a1508;
|
||||||
|
}
|
||||||
|
.footer--framed{
|
||||||
|
border: solid 5px #2a1508;
|
||||||
|
box-shadow: 10px 10px 20px #2a1508;
|
||||||
|
}
|
||||||
|
|
||||||
Reference in New Issue
Block a user