Jump to content
Fórum Script Brasil
  • 0

Ajuda com divs


Question

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 to post
Share on other sites

4 answers to this question

Recommended Posts

  • 1

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 to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Cloud Computing


  • Forum Statistics

    • Total Topics
      148886
    • Total Posts
      644943
×
×
  • Create New...