Ir para conteúdo
Fórum Script Brasil
  • 0

Ajuda com divs

gregmachado

Perguntado por gregmachado,

 Share

Pergunta

gregmachado

gregmachado

Postado
Postado

Fala galera, estou tentando o layout da imagem e estou com bastante dificuldades.

Segue os códigos:

HTML: 

<section id="about" class="about-area">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="text-container">
                        <h1>Lorem ipsum dolor </h1> 
                    </div> <!-- end of text-container -->
                </div> <!-- end of col -->
            </div> <!-- end of row -->
            <div class="row">
                <div class="col-lg-12">
                    <!-- Team Member -->
                    <div class="team-member">
                        <div class="image-wrapper">
                            <img class="img-fluid" src="assets/images/team-member-2.svg" alt="alternative">
                        </div> <!-- end of image-wrapper -->
                        <p class="p-large"><strong>Lacy Whitelong</strong></p>
                        <p class="job-title">Business Developer</p>
                        <span class="social-icons">
                            <span class="fa-stack">
                                <a href="#your-link">
                                    <i class="fas fa-circle fa-stack-2x facebook"></i>
                                    <i class="fab fa-facebook-f fa-stack-1x"></i>
                                </a>
                            </span>
                            <span class="fa-stack">
                                <a href="#your-link">
                                    <i class="fas fa-circle fa-stack-2x twitter"></i>
                                    <i class="fab fa-twitter fa-stack-1x"></i>
                                </a>
                            </span>
                        </span> <!-- end of social-icons -->
                    </div> <!-- end of team-member -->
                    <!-- end of team member -->

                    <!-- Team Member -->
                    <div class="team-member">
                        <div class="image-wrapper">
                            <img class="img-fluid" src="assets/images/team-member-2.svg" alt="alternative">
                        </div> <!-- end of image wrapper -->
                        <p class="p-large"><strong>Chris Brown</strong></p>
                        <p class="job-title">Online Marketer</p>
                        <span class="social-icons">
                            <span class="fa-stack">
                                <a href="#your-link">
                                    <i class="fas fa-circle fa-stack-2x facebook"></i>
                                    <i class="fab fa-facebook-f fa-stack-1x"></i>
                                </a>
                            </span>
                            <span class="fa-stack">
                                <a href="#your-link">
                                    <i class="fas fa-circle fa-stack-2x twitter"></i>
                                    <i class="fab fa-twitter fa-stack-1x"></i>
                                </a>
                            </span>
                        </span> <!-- end of social-icons -->
                    </div> <!-- end of team-member -->
                    <!-- end of team member -->
                </div> <!-- end of col -->
            </div> <!-- end of row -->
        </div> <!-- end of container -->
        </div> <!-- container -->
    </section>

CSS: 

/*===========================
         4.ABOUT css 
===========================*/
.about-area {
  position: relative;
  background-color: #17171B;
  padding-top: 100px;
  padding-bottom: 100px; }
  .about-area .section-title .title {
    font-size: 44px;
    font-weight: 600;
    line-height: 55px;
    color: #121212; }
    @media (max-width: 767px) {
      .about-area .section-title .title {
        font-size: 22px;
        line-height: 32px; } }
    @media only screen and (min-width: 576px) and (max-width: 767px) {
      .about-area .section-title .title {
        font-size: 28px;
        line-height: 38px; } }
  .about-area .section-title .text {
    font-size: 20px;
    line-height: 25px;
    color: #121212;
    margin-top: 8px; }
    @media (max-width: 767px) {
      .about-area .section-title .text {
        font-size: 16px; } }

.single-about .about-icon img {
  width: 120px; }
  @media (max-width: 767px) {
    .single-about .about-icon img {
      width: 100px; } }
.single-about .about-content {
  padding-left: 30px; }
  @media (max-width: 767px) {
    .single-about .about-content {
      padding-left: 0;
      padding-top: 30px; } }
  @media only screen and (min-width: 576px) and (max-width: 767px) {
    .single-about .about-content {
      padding-left: 30px;
      padding-top: 0; } }
  .single-about .about-content .about-title {
    font-size: 20px;
    font-weight: 600;
    line-height: 25px;
    color: #ffffff; }
  .single-about .about-content .text {
    font-size: 16px;
    color: #ffffff;
    margin-top: 16px; }

/*===== ABOUT 2  =====*/
.about-area-2 {
  position: relative;
  padding-top: 120px;
  padding-bottom: 120px; }
  .about-area-2 .about-image {
    position: absolute;
    width: 40%;
    height: 100%;
    top: 0;
    right: 0; }
    @media only screen and (min-width: 992px) and (max-width: 1199px) {
      .about-area-2 .about-image {
        width: 34%; } }
    @media only screen and (min-width: 768px) and (max-width: 991px) {
      .about-area-2 .about-image {
        position: relative;
        width: 720px;
        margin: 0 auto; } }
    @media (max-width: 767px) {
      .about-area-2 .about-image {
        position: relative;
        width: 100%;
        padding-left: 15px;
        padding-right: 16px;
        margin: 0 auto; } }
    @media only screen and (min-width: 576px) and (max-width: 767px) {
      .about-area-2 .about-image {
        position: relative;
        width: 540px;
        margin: 0 auto; } }
    .about-area-2 .about-image .image {
      max-width: 580px;
      width: 100%; }
      @media only screen and (min-width: 768px) and (max-width: 991px) {
        .about-area-2 .about-image .image {
          margin: 0 auto;
          padding-top: 50px; } }
      @media (max-width: 767px) {
        .about-area-2 .about-image .image {
          margin: 0 auto;
          padding-top: 50px; } }
      .about-area-2 .about-image .image img {
        width: 100%; }

.about-content-2 {
  position: relative;
  z-index: 9; }
  .about-content-2 .about-icon i {
    font-size: 64px;
    color: #ffffff; }
  .about-content-2 .about-content {
    padding-left: 15px; }
    @media (max-width: 767px) {
      .about-content-2 .about-content {
        padding-left: 0;
        padding-top: 15px; } }
    @media only screen and (min-width: 576px) and (max-width: 767px) {
      .about-content-2 .about-content {
        padding-left: 15px;
        padding-top: 0; } }
    .about-content-2 .about-content .about-title {
      font-size: 24px;
      font-weight: 500;
      line-height: 30px;
      color: #ffffff; }
    .about-content-2 .about-content .text {
      font-size: 14px;
      line-height: 20px;
      color: #ffffff;
      margin-top: 8px; }

/*===== ABOUT 3 =====*/
.about-area-3 {
  background-color: #17171B;
  padding-top: 50px;
  padding-bottom: 100px; }
  .about-area-3 .image {
    width: 100%; }
  .about-area-3 .about-content .sub-title {
    color: #ffffff;
    font-size: 24px;
    line-height: 30px;
    font-weight: 700;
    text-transform: uppercase; }
    @media only screen and (min-width: 992px) and (max-width: 1199px) {
      .about-area-3 .about-content .sub-title {
        font-size: 20px; } }
    @media (max-width: 767px) {
      .about-area-3 .about-content .sub-title {
        font-size: 20px; } }
  .about-area-3 .about-content .about-title {
    font-size: 44px;
    font-weight: 500;
    line-height: 55px;
    color: #ffffff;
    margin-top: 16px; }
    @media only screen and (min-width: 992px) and (max-width: 1199px) {
      .about-area-3 .about-content .about-title {
        font-size: 38px;
        line-height: 45px; } }
    @media (max-width: 767px) {
      .about-area-3 .about-content .about-title {
        font-size: 32px;
        line-height: 35px; } }
  .about-area-3 .about-content .text {
    color: #ffffff;
    font-size: 20px;
    font-weight: 500;
    margin-top: 16px;
    line-height: 25px; }
    @media only screen and (min-width: 992px) and (max-width: 1199px) {
      .about-area-3 .about-content .text {
        font-size: 18px; } }
    @media (max-width: 767px) {
      .about-area-3 .about-content .text {
        font-size: 16px;
        line-height: 24px; } }
  .about-area-3.about-area-bg-3 {
    background-color: #fff; }

    	/* About */
	.team-member {
		display: inline-block;
		width: 12.5rem;
		margin-right: 2rem;
		margin-left: 2rem;
		vertical-align: top;
	}
  /* end of about */
  
  /* About */
	.team-member {
		margin-right: 2.25rem;
		margin-left: 2.25rem;
	}
  /* end of about */
  
  /*********************/
/*     14. About     */
/*********************/
.basic-4 {
	padding-top: 7rem;
	padding-bottom: 4rem;
	text-align: center;
}

.basic-4 h2 {
	margin-bottom: 1rem;
	text-align: center;
}

.team-member {
	max-width: 12.5rem;
	margin-right: auto;
	margin-bottom: 3.5rem;
	margin-left: auto;
}

/* Hover Animation */
.image-wrapper {
	overflow: hidden;
	margin-bottom: 1.5rem;
	border-radius: 50%;
}

.image-wrapper img {
	margin: 0;
	transition: all 0.3s;
}

.image-wrapper:hover img {
	-moz-transform: scale(1.15);
	-webkit-transform: scale(1.15);
	transform: scale(1.15);
} 
/* end of hover animation */

.team-member .p-large {
	margin-bottom: 0.25rem;
	font-size: 1.125rem;
}

.team-member .job-title {
	margin-bottom: 0.375rem;
}

.fa-stack {
  color: #ffffff;
	margin-top: 0.375rem;
	margin-right: 0.125rem;
	margin-left: 0.125rem;
	font-size: 1.25rem;
}

.fa-stack-2x {
	color: #ffffff;
	transition: all 0.2s ease;
}

.fa-stack-1x {
	color: #fff;
	transition: all 0.2s ease;
}

.fa-stack:hover .fa-stack-2x {
	color: #ffffff;
}

.fa-stack:hover .fa-stack-1x {
	color: #fff;
}

 

Sixbits_Website_Section.jpg

Link para o comentário
Compartilhar em outros sites

4 respostass a esta questão

Posts Recomendados

  • 1
Leonardo Persan

Leonardo Persan

Postado
Postado

Tenta assim, usando Bootstrap 

<!doctype html>
<html lang="en">

<head>
    <title>Title</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <style>
        .background-black {
            background-color: black;
            color: white;
        }
        .title span {
            display: block;
            width: 50%;
            border-bottom: 3px solid rgb(255,0,0);;
            border-image-source: linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(116,9,121,1) 100%);
            border-image-slice: 1;
        }
        .title small {
            font-size: 1rem;
            color: gray;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row background-black">
            <div class="col-12">
                <h1> > Lorem ipsum dolor</h1>
            </div>
            <div class="col-6">
                <div class="row">
                    <div class="col-6">
                        <img src="sem-foto.jpg" alt="Jhon Doe">
                    </div>
                    <div class="col-6">
                        <h2 class="title">
                            <span>Jhon Doe</span>
                            <small>Lorem ipsum</small>
                        </h2>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at magna nec urna
                            convallis tincidunt. Vestibulum cursus, elit dictum hendrerit vestibulum, erat
                            tellus vehicula felis, at congue felis tortor quis tellus. Mauris eget ultrices
                            odio, vel cursus ipsum.
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-6">
                <div class="row">
                    <div class="col-6">
                        <img src="sem-foto.jpg" alt="Jhon Doe">
                    </div>
                    <div class="col-6">
                        <h2 class="title">
                            <span>Jhon Doe</span>
                            <small>Lorem ipsum</small>
                        </h2>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at magna nec urna
                            convallis tincidunt. Vestibulum cursus, elit dictum hendrerit vestibulum, erat
                            tellus vehicula felis, at congue felis tortor quis tellus. Mauris eget ultrices
                            odio, vel cursus ipsum.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>

</html>

 

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,3k
×
×
  • Criar Novo...