Почему мой круг не двигается, код кажется правильным - PullRequest
Новая
       9

Почему мой круг не двигается, код кажется правильным

0 голосов
/ 19 января 2019

Вот мой код: 

<!DOCTYPE HTML>
<html>

<head>

<link href="https://fonts.googleapis.com/css?family=Carter+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="Style.css">


</head>

<body style="background: #C6D9FA;">

<div class="title-card logo-a caption-a"></div>


<div class="whitecircle" id="whitecircle1">
<img src="instagram.png" style="width:200px;height:200px">
</div>

<div class="whitecircle" id="whitecircle2">
<img src="twitter.png" style="width:200px;height:200px">
</div>

<div class="whitecircle" id="whitecircle3">
<img src="gmail.png" style="width:200px;height:150px">
</div>

<div class="whitecircle" id="whitecircle4">
<div id="usatflogo">
<img src="usatf.png" style="width:200px;height:220px">
</div>
</div>

</body>

</html>

и CSS: 

.title-card {
position: absolute;
  display: inline-block;
  width: 200px;
  height: 200px;
  margin: 5px;
  border: 1px solid #fff;
  border-radius: 45px;
  color: black;
  padding: 25px;
  overflow: hidden;
  background-size:100% 100%;
  font-family: Carter One;
  text-align:center;
}

.title-card::before {
  position: absolute;
  display: inline-block;
  left: 0%;
  width: 100%;
  height: 20%;
  padding: 10px;
  background: -moz-linear-gradient(top, rgba(0,0,0,0.53) 0%, rgba(0,0,0,0.24) 100%); 
  background: -webkit-linear-gradient(top, rgba(0,0,0,0.53) 0%,rgba(0,0,0,0.24) 100%);
  background: linear-gradient(to bottom, rgba(0,0,0,0.53) 0%,rgba(0,0,0,0.24) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87000000', endColorstr='#3d000000',GradientType=0 );
  color: #fff;
  overflow-x: hidden;
  overflow-y: auto;
  opacity: 0;
  transform: translateY(200%);
  transition: all 600ms ease;
}

.title-card:hover::before {
  opacity: 1;
  transform: translateY(100%);
}

.title-card.caption-a::before {
  content: "Hamlet To Be or Not To Be Rhetorical Analysis";
}

.title-card.logo-a {
 background-image: url("W.jpg");
}





#usatflogo{position:absolute;top:10%; left:18%;}

.whitecircle:hover{background-color:grey;}

.whitecircle{background-color: white;
height:300px;
width:300px;
border:1px;
position:absolute;
border-radius:50%;
top:60%;
left:0%;}

    #whitecircle1{left:5%;}

    #whitecircle2{left:25%;}

    #whitecircle3{left:55%:}

    #whitecircle4{left:65%;}

    #whitecircle5{left:85%;}

#logoplacement{position:absolute;top:17.5%; left:17.5%;}

Итак, я хочу сделать нижний колонтитул с черными и белыми кружочками в социальных сетях. Изначально у меня все было правильно, но я отредактировал его, чтобы я мог использовать классы вместо идентификаторов, и теперь логотип gmail не будет двигаться, и круг, на который все остальные, похоже, не будут реагировать. Я понятия не имею, в чем проблема может быть. Я проверил весь код, и все, кажется, грамматически правильно, никто не знает, в чем проблема?

1 Ответ

0 голосов
/ 20 января 2019

Пожалуйста, попробуйте этот код: 

<!DOCTYPE HTML>
<html>

<head>

<link href="https://fonts.googleapis.com/css?family=Carter+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

<style>

.title-card {
     position: absolute;
     display: inline-block;
     width: 200px;
     height: 200px;
     margin: 5px;
     border: 1px solid #fff;
     border-radius: 45px;
     color: black;
     padding: 25px;
     overflow: hidden;
     background-size:100% 100%;
     font-family: Carter One;
     text-align:center;
}
 .title-card::before {
     position: absolute;
     display: inline-block;
     left: 0%;
     width: 100%;
     height: 20%;
     padding: 10px;
     background: -moz-linear-gradient(top, rgba(0,0,0,0.53) 0%, rgba(0,0,0,0.24) 100%);
     background: -webkit-linear-gradient(top, rgba(0,0,0,0.53) 0%,rgba(0,0,0,0.24) 100%);
     background: linear-gradient(to bottom, rgba(0,0,0,0.53) 0%,rgba(0,0,0,0.24) 100%);
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87000000', endColorstr='#3d000000',GradientType=0 );
     color: #fff;
     overflow-x: hidden;
     overflow-y: auto;
     opacity: 0;
     transform: translateY(200%);
     transition: all 600ms ease;
}
 .title-card:hover::before {
     opacity: 1;
     transform: translateY(100%);
}
 .title-card.caption-a::before {
     content: "Hamlet To Be or Not To Be Rhetorical Analysis";
}
 .title-card.logo-a {
     background-image: url("W.jpg");
}
 #usatflogo{
    position:absolute;
    top:10%;
     left:18%;
}
 .whitecircle:hover{
    background-color:grey;
}
 .whitecircle{
    background-color: white;
     height:300px;
     width:300px;
     border:1px;
     position:absolute;
     border-radius:50%;
     top:60%;
     left:0%;
}
 .whitecircle1{
    left:5%;
    width:200px;
    height:200px;
}
 .whitecircle2{
    left:25%;
    width:200px;
    height:200px;
}
 .whitecircle3{
    left:55%;
    width:200px;
    height:150px;
}
 .whitecircle4{
    left:65%;
    width:200px;
    height:220px;
}
 #logoplacement{
    position:absolute;
    top:17.5%;
     left:17.5%;
}


</style>

</head>

<body style="background: #C6D9FA;">

<div class="title-card logo-a caption-a"></div>


<div class="whitecircle whitecircle1">
<img src="instagram.png">
</div>

<div class="whitecircle whitecircle2">
<img src="twitter.png">
</div>

<div class="whitecircle whitecircle3">
<img src="gmail.png">
</div>

<div class="whitecircle whitecircle4">
<div id="usatflogo">
<img src="usatf.png">
</div>
</div>

</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...