Как добавить пи c с гиперссылкой и выровнять их по центру, как в моем каркасе? - PullRequest
Новая
       0

Как добавить пи c с гиперссылкой и выровнять их по центру, как в моем каркасе?

0 голосов
/ 20 июня 2020

Это мой каркас:

image 

/*the sidebar back button*/

/* Style the links inside the sidenav */

#mySidenav a {
  position: absolute;
  /* Position them relative to the browser window */
  left: -80px;
  /* Position them outside of the screen */
  transition: 0.3s;
  /* Adds transition on hover */
  padding: 15px;
  /* 15px padding */
  width: 100px;
  /* Sets a specific width */
  text-decoration: none;
  /* Remove underline */
  font-size: 20px;
  /* Increase font size */
  color: white;
  /* White text color */
  border-radius: 0 5px 5px 0;
  /* Rounded corners on the top right and bottom right side */
}

#mySidenav a:hover {
  left: 0;
  /* On mouse-over, make the elements appear as they should */
}


/* The about link: 20px from the top with a green background */

#about {
  top: 20px;
  background-color: #42beb8;
}


/*The Footer*/

#footer {
  background-color: rgba(59, 195, 154, 0.87);
  width: 100%;
  height: 95px;
  border-radius: 0px;
  padding-top: 5px;
  position: relative;
  bottom: 0;
  margin-top: 20%;
}


/* footer div links settings*/

.footer a:hover {
  background-color: rgb(230, 182, 64);
  color: black;
}

#footer div {
  display: block;
  float: right;
  width: 20%;
}

/* footer links margins settings */

#footer div h5,
h2 {
  margin-bottom: 0;
  margin-top: 0;
  text-decoration: none;
}

/* horizontal line below footer div */

hr {
  width: 85%;
  margin-left: 8%;
  margin-right: 20%;
  height: 1px;
  background-color: black;
  opacity: 1;
  margin-top: 3%;
  margin-bottom: auto;
}
<!DOCTYPE html>
<html>

<head>
  <title>products</title>
  <link rel="stylesheet" href="products.css">
</head>

<body>
  <!--sidenav-->
  <div id="mySidenav" class="sidenav">
    <a href="#" id="about">Back</a>
  </div>

  <!--The footer section-->
  <footer class="footer">
    <div class="row">
      <div id="footer">
        <br>
        <div align="left">
          <h5><a href="social.html">Social Media</a></h5>
        </div>
        <div align="left">
          <h5><a href="mainpage.html">Home</a></h5>
        </div>
        <div align="center">
          <h2> <a href="mainpage.html">Buystuff</a>
            <h2>
        </div>
        <div align="right">
          <h5><a href="games.html">Games</a></h5>
        </div>
        <div align="right">
          <h5> <a href="products.html">Products</a></h5>
        </div>
        <hr>
      </div>

    </div>
  </footer>

</body>

</html>

Ответы [ 2 ]

0 голосов
/ 20 июня 2020

Надеюсь, вы пытаетесь достичь следующего. 

/*the sidebar back button*/


/* Style the links inside the sidenav */

#mySidenav a {
  position: absolute;
  /* Position them relative to the browser window */
  left: -80px;
  /* Position them outside of the screen */
  transition: 0.3s;
  /* Adds transition on hover */
  padding: 15px;
  /* 15px padding */
  width: 100px;
  /* Sets a specific width */
  text-decoration: none;
  /* Remove underline */
  font-size: 20px;
  /* Increase font size */
  color: white;
  /* White text color */
  border-radius: 0 5px 5px 0;
  /* Rounded corners on the top right and bottom right side */
}

#mySidenav a:hover {
  left: 0;
  /* On mouse-over, make the elements appear as they should */
}


/* The about link: 20px from the top with a green background */

#about {
  top: 20px;
  background-color: #42beb8;
}


/*The Footer*/

#footer {
  background-color: rgba(59, 195, 154, 0.87);
  width: 100%;
  height: 95px;
  border-radius: 0px;
  padding-top: 5px;
  position: relative;
  bottom: 0;
  margin-top: 20%;
}


/* footer div links settings*/

.footer a:hover {
  background-color: rgb(230, 182, 64);
  color: black;
}

#footer div {
  display: block;
  float: right;
  width: 20%;
}


/* footer links margins settings */

#footer div h5,
h2 {
  margin-bottom: 0;
  margin-top: 0;
  text-decoration: none;
}


/* horizontal line below footer div */

hr {
  width: 85%;
  margin-left: 8%;
  margin-right: 20%;
  height: 1px;
  background-color: black;
  opacity: 1;
  margin-top: 3%;
  margin-bottom: auto;
}


/* Main Section */

.main {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pic-container {
  background-color: grey;
  width: 45%;
  height: 80%;
}

.pic {
  width: 100%;
  height: 200px;
  background-image: url("https://images.pexels.com/photos/3841338/pexels-photo-3841338.jpeg");
}
<!--sidenav-->
<div id="mySidenav" class="sidenav">
  <a href="#" id="about">Back</a>
</div>

<!--Main Section-->


<div class="main">
  <div class="pic-container">
    <div class="pic pic1">
    </div>
    <p class="description">This is a description</p>
  </div>

  <div class="pic-container">

    <div class="pic pic2">
    </div>
    <p class="description">This is a description</p>
  </div>

</div>




<!--The footer section-->

<footer class="footer">
  <div class="row">
    <div id="footer">
      <br>
      <div align="left">
        <h5><a href="social.html">Social Media</a></h5>
      </div>
      <div align="left">
        <h5><a href="mainpage.html">Home</a></h5>
      </div>
      <div align="center">
        <h2> <a href="mainpage.html">Buystuff</a>
          <h2>
      </div>
      <div align="right">
        <h5><a href="games.html">Games</a></h5>
      </div>
      <div align="right">
        <h5> <a href="products.html">Products</a></h5>
      </div>
      <hr>
    </div>

  </div>
</footer>
0 голосов
/ 20 июня 2020

использовать flexbox 

/*the sidebar back button*/
/* Style the links inside the sidenav */
#mySidenav a {
  position: absolute; /* Position them relative to the browser window */
  left: -80px; /* Position them outside of the screen */
  transition: 0.3s; /* Adds transition on hover */
  padding: 15px; /* 15px padding */
  width: 100px; /* Sets a specific width */
  text-decoration: none; /* Remove underline */
  font-size: 20px; /* Increase font size */
  color: white; /* White text color */
  border-radius: 0 5px 5px 0; /* Rounded corners on the top right and bottom right side */
}

#mySidenav a:hover {
  left: 0; /* On mouse-over, make the elements appear as they should */
}

/* The about link: 20px from the top with a green background */
#about {
  top: 20px;
  background-color: #42beb8;
  color:red;
}

#container{
margin-top:80px;
display:flex;
justify-content:space-evenly;
align-items:center;
}


















/*The Footer*/
#footer {
    background-color: rgba(59, 195, 154, 0.87);
    width: 100%;
    height: 95px;
    border-radius: 0px;
    padding-top: 5px;
    position: relative;
    bottom: 0;
    margin-top: 20%;
    
    }
  
    /* footer div links settings*/
    .footer a:hover {
      background-color: rgb(230, 182, 64);
      color: black;
      
    }
  
  
    #footer div{
      display: block;
      float: right;
      width: 20%;
      
     
    }
  
  
  /* footer links margins settings */
    #footer div h5, h2 {
      margin-bottom: 0;
      margin-top: 0;
      text-decoration: none;
      
    }
  
  /* horizontal line below footer div */
  hr {width: 85%;margin-left: 8%;margin-right: 20%;height: 1px;background-color:black; opacity: 1;margin-top: 3%;margin-bottom: auto;}
<!DOCTYPE html>
<html>
    <head>
      <title>products</title>
      <link rel="stylesheet" href="products.css">
    </head>
    <body>
    <!--sidenav-->
    <div id="mySidenav" class="sidenav">
      <a href="#" id="about">Back</a>
    </div>


<div id='container'>

<div id='left'>
<a href="http://www.google.com"><img src="https://via.placeholder.com/250x250.jpg?" ></a>
</div>

<div id='right'>
<a href="http://www.google.com"><img src="https://via.placeholder.com/250x250.jpg?" ></a>
</div>

</div>







        <!--The footer section-->

    <footer class="footer">
      <div class="row">
        <div id="footer">
        <br>
        <div align="left"><h5><a href="social.html">Social Media</a></h5></div>
        <div align="left"><h5><a href="mainpage.html">Home</a></h5></div>
        <div align="center"><h2> <a href="mainpage.html">Buystuff</a><h2></div>
        <div align="right"><h5><a href="games.html">Games</a></h5></div>
        <div align="right"><h5> <a href="products.html">Products</a></h5></div>
        <hr>
        </div>
        
      </div>
    </footer>
   

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

Нет похожих вопросов

...