Ir para conteúdo
Fórum CódigoFonte.net
grsocial

PoDE me Ajudar a Uma caregar foto 3/4

Recommended Posts

Sou Robson Santana, e estou aqui humildemente solicitando A SUA Ajuda Pará par Uma foto no Espaço Indicado. Sou estudante e Já Tenho o meu site para that Preciso CRIAR algumas Ferramentas e aplicativos Mais Preciso fazer código de fonte Para este própozito.  

Vou acompanhar a RESPOSTA.

http://portserviceunisind.com.br/unisind/

<! DOCTYPE html> 
<html> 
<title> W3.CSS </ title> 
<meta name = "viewport" content = "width = device-width, initial-scale = 1"> 
<link rel = "stylesheet" href = "http://www.w3schools.com/lib/w3.css"> 
<link rel = "stylesheet" href = "http://www.w3schools.com/lib/w3-theme-blue-grey.css" > 
< 'https: //fonts.googleapis.com/css família = Abrir + Sans?' link rel = "stylesheet" href => 
<link rel = "stylesheet" href = "http://cdnjs.cloudflare.com/~~number=plural ajax / libs / font-impressionante / 4.6.3 / css / font-awesome.min.css "> 
<style> 
html, corpo, H1, H2, H3, H4, H5 {font-family:" Open Sans ", sans -serif} 
</ style> 
<body class = "w3-theme-l5">

<! - Navbar -> 
<div class = "w3-top"> 
 <ul class = "w3-navbar w3-theme-d2 w3-left-align w3-large"> 
  class <li = "w3-Ocultar- médio w3-hide grande w3-opennav w3-right "> 
    <a class =" w3-pairar-branco w3-large w3-theme-d2-preenchimento grande w3 "href =" javascript: void (0); " onclick = "openNav ()"> <class i = "fa fa-bares"> </ i> </a> 
  </ li> 
  <li> <a href = "#" class = "w3-padding-grande w3 -theme-d4 "> <i class =" fa fa-home w3-margin-right "> </ i> Logo </a> </ li> 
  class <li =" w3-hide pequeno "> <a href = "#" class = título "w3-preenchimento grande w3-pairar-branco" = "News"> <class = "fa fa-globe"> </ i> </a> </ li> i 
  <li class = "w3-hide pequeno"> <a href="#" class="w3-padding-large w3-hover-white" title="Account Settings"> <i class = "fa fa-user"> </ i> </a> </ li> 
  <li class = "w3-hide pequeno"> <a href="#" class="w3-padding-large w3-hover-white" title="Messages"> < i class = "fa fa-envelope"> </ i> </a> </ li> 
  <li class = "-hide pequena w3 w3-pendente-hover"> 
    <a href = "#" class = "w3 -padding de grande w3-pairar-branco "title =" Notificações "> <i class =" fa fa-bell "> </ i> <span class =" w3-emblema w3 direito w3-pequena w3-green "> 3 </ span> </a> 
    <div class = "w3-suspenso em conteúdo w3-white w3-card-4"> 
      <a href="#"> um novo pedido de amigo </a> 
      <a href = " # "> John Doe postou em sua parede </a> 
      <a href="#"> Jane gosta do seu post </a> 
    </ div> 
  </ li> 
  <li class =" w3-direito-w3-hide pequena "> <a href="#" class="w3-padding-large w3-hover-white" title="My Account"> <img src =" "class =" img_avatar2.png w3-circle "style =" height : 25px; width: 25px "alt =" Avatar "> </a> </ li> 
 </ ul> 
</ div>

<! - Navbar em telas pequenas -> 
<div id = "navDemo" class = "w3-hide-w3-hide grande w3-hide médio w3-top" style = "margin-top: 51 pixels"> 
  <ul class = "w3-navbar w3-left-align w3-large w3-tema"> 
    <li> <a class="w3-padding-large" href="#"> link 1 </a> </ li> 
    < li> <a class="w3-padding-large" href="#"> link 2 </a> </ li> 
    <li> <a class="w3-padding-large" href="#"> link 3 </a> </ li> 
    <li> <a class="w3-padding-large" href="#"> meu perfil </a> </ li> 
  </ ul> 
</ div>

<! - Página Container -> 
<div class = "w3-container w3-content" style = "max-width: 1400px; margin-top: 80px"> 
  <! - O Grid -> 
  <div class = "w3-fila"> 
    <! - Coluna esquerda -> 
    <div class = "w3-col m3"> 
      <! - Perfil -> 
      <div class = "w3-card-2 w3-round w3-branco "> 
        <div class =" w3-container "> 
         <class = h4" w3-center "> meu perfil </ h4>

 

 


                                      <! - PoDE me Ajudar a Uma caregar foto 3/4 ->

 


         <p class = "w3-center"> <img src = "img_avatar3.png" class = "w3-circle" style = "height: 106px; width: 106px" alt = "Avatar"> </ p> 
         <hr> 
         <p> <i class = "fa fa-lápis fa-fw-w3-margem direita w3-text-tema"> </ i> Designer, UI </ p> 
         <p> <class = "fa fa-home i fa-FW w3-margem direita w3-text-tema "> </ i> Londres, Reino Unido </ p> 
         <p> <i class =" fa fa-aniversário-bolo fa-FW w3-margin-right w3- text-tema "> </ i> 01 de abril de 1988 </ p> 
        </ div> 
      </ div>

      <br> 
      
      <! - Acordeão -> 
      <div class =" w3-card-2 w3-round " > 
        <div class = "w3-acordeão w3-branco"> 
          <button onclick = "myFunction ( 'Demo1')" class = "bloco w3-btn w3-theme-L1 w3-left-align"> <i class = "fa fa-círculo-o-notch fa-FW w3-margin-right"> </ i> Meus grupos </ button> 
          <div id = "Demo1" class = "-acordeão conteúdo w3 w3-container"> 
            < p> Algum texto .. </ p> 
          </ div> 
          <button onclick = "myFunction ( 'Demo2')" class = "bloco w3-btn w3-theme-L1 w3-left-align"> <i class = "fa fa-calendário-check-o fa-FW w3-margin-right"> </ i> Meus eventos </ button> 
          <div id = "Demo2" class = "-acordeão conteúdo w3 w3-container"> 
            < p> Algum outro texto </ p> .. 
          </ div> 
          <button onclick = "myFunction ( 'demo3')" <class i class = "bloco w3-btn w3-theme-L1 w3-left-align"> = "fa fa-usuários fa-FW w3-margin-right"> </ i> As minhas fotos </ button> 
          <div id = "demo3" class = "-acordeão conteúdo w3 w3-container"> 
         <div class = "w3-row-preenchimento"> 
         <br> 
           <div class = "w3-metade"> 
             <img src = "img_lights.jpg" style = "width: 100%" class = "w3-margin-bottom"> 
           </ div> 
           <div class = "w3-metade"> 
             <img src = "img_nature.jpg" style = "width: 100%" class = "w3-margin-bottom"> 
           </ div> 
           <div class = "w3- metade "> 
             <img src =" img_mountains.jpg "style =" width: 100% "class =" w3-margin-bottom "> 
           </ div> 
           <div class =" w3-metade "> 
             <img src =" img_forest .jpg "style =" width: 100% "class =" w3-margin-bottom "> 
           </ div> 
           <div class =" w3-metade "> 
             <img src =" img_nature.jpg "style =" width: 100 % "class =" w3-margem inferior "> 
           </ div> 
           <div class =" w3-metade "> 
             <img src =" img_fjords.jpg "style =" width: 100% "class =" w3-mar- bottom "> 
           </ div> 
         </ div> 
          </ div> 
        </ div> 
      </ div> 
      <br> 
      
      <! - Interesses -> 
      <div class =" w3-card-2 w3-round w3-branco w3-hide pequeno "> 
        <div class =" w3-contentores "> 
          <p> Interesses </ p> 
          <p> 
            <span class =" w3-tag w3-pequena w3-theme-d5 "> Notícias </ span > 
            <span class = "w3-tag w3-pequena w3-theme-d4"> W3Schools </ span> 
            <span class = "w3-tag w3-pequena w3-theme-d3"> Etiquetas </ span> 
            <span class = "w3-tag w3-pequena w3-theme-d2"> Jogos </ span> 
            <span class = "w3-tag w3-pequena w3-theme-d1"> Friends </ span> 
            <span class = "w3- tag w3-pequena w3-tema "> Jogos </ span> 
            <span class =" w3-tag w3-pequena w3-theme-L1 "> Friends </ span> 
            <span class =" w3-tag w3-pequena w3- theme-l2 "> Food </ span> 
            <span class =" w3-tag w3-pequena w3-theme-l3 "> design </ span> 
            class <span =" w3-tag w3-pequena w3-theme-l4 " > Art </ span> 
            <span class = "w3-tag w3-pequena w3-theme-l5"> Fotos </ span> 
          </ p> 
        </ div> 
      </ div> 
      <br> 
      
      <! - Caixa de Alerta -> 
      <div class = "w3-container w3-round w3-theme-l4 w3-border w3-theme-fronteira w3-margin-bottom w3-hide pequeno"> 
        <span onclick = "this.parentElement.style. display = 'none' "class ="-pairar-texto cinza w3 w3-closebtn "> 
          <class i =" fa fa-remove "> </ i> 
        </ span> 
        <p> <strong> Hey! </ strong> </ p> 
        <p> As pessoas estão olhando para o seu perfil. Descubra quem </ p>. 
      </ Div> 
    
    <! - End coluna Esquerda -> 
    </ div> 
    
    <! - Coluna do meio -> 
    <div class = "w3-col m7"> 
    
      <div class = "w3-row-preenchimento"> 
        <div class = "w3-col m12"> 
          <div class = "-w3-card 2 w3-round w3-branco"> 
            <div class = "w3-container w3-preenchimento"> 
              <h6 class = "w3-opacidade"> modelo de social Media por w3.css </ h6> 
              <p contenteditable = "true" class = "w3-border w3-preenchimento"> status: Sentimento azul </ p> 
              <tipo botão = "button" class = "w3-btn w3-tema"> <i class = "fa fa-lápis"> </ i> Post </ button> 
            </ div> 
          </ div> 
        </ div> 
      </ div > 
      
      <div class = "w3 contentor-w3-card 2 w3-white w3-round w3-margem"> <br> 
        <img src = "img_avatar2.png" alt = "Avatar" class = "w3- w3-esquerda círculo w3-margin-right "style =" width: 60px "> 
        <span class =" w3-opacidade "w3-direito> 1 min </ span> 
        <h4> John Doe </ h4> <br> 
        <class hr = "w3-clear"> 
        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed fazer eiusmod tempor incididunt ut labore et dolore magna aliqua. . Ut enim ad minim veniam, Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat </ p> 
          <div class = "w3-row-preenchimento" style = "margin: 0 -16px"> 
            <div class = "w3 -metade "> 
              <img src =" img_lights.jpg "style =" width: 100% "alt =" Northern Lights "class =" w3-margin-bottom "> 
            </ div> 
            <div class =" w3-meia " > 
              <img src = "img_nature.jpg" style = "width: 100%" alt = "Nature" class = "-w3-margem inferior"> 
          </ div> 
        </ div> 
        tipo <button = "button" class = "w3-btn w3-theme-d1-w3-margem inferior"> <i class = "fa fa-polegares-up"> </ i> <button> Como / 
        tipo botão <= "button" class = "w3- btn-w3-theme d2-w3-margem inferior "> <i class =" fa fa-comment "> </ i> Comment </ button> 
      </ div> 
      
      <div class =" w3-container w3-card-2 w3-white w3-round w3-margem "> <br> 
        <img src =" img_avatar5.png "alt =" "class =" Avatar w3 esquerdo w3-circle w3-margin-right "style =" width: 60px " > 
        <span class = "w3 direito w3-opacidade"> 16 min </ span> 
        <h4> Jane Doe </ h4> <br> 
        classe <hr = "w3-clear"> 
        <p> Lorem ipsum dolor sit amet , consectetur adipisicing elit, sed não eiusmod tempor ut incididunt labore et dolore magna aliqua.Ut enim ad minim veniam, Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </ P> 
        <button type = "button" class = "w3-btn w3-tema d1-w3-margem inferior"> <i class = "fa fa-polegares-up"> </ i> <button> Como / 
        tipo botão <= "button" class = "w3-btn w3-theme-d2-w3-margem inferior"> <i class = " fa fa-comment "> </ i> Comment </ button> 
      </ div>

      <div class = "w3 contentor-w3-card 2 w3-white w3-round w3-margem"> <br> 
        <img src = "img_avatar6.png" alt = "Avatar" class = "w3-circle w3-esquerda w3-margin-right "style =" width: 60px "> 
        <span class =" w3-opacidade w3-right "> 32 min </ span> 
        <h4> Angie Jane </ h4> <br> 
        <class hr =" w3-clear "> 
        <p> você viu este </ p>? 
        <img src =" img_nature.jpg "style =" width: 100% "class ="-w3-margem inferior "> 
        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed não eiusmod tempor ut incididunt labore et dolore magna aliqua.Ut enim ad minim veniam, Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </ P> 
        <button type = "button" class = "w3-btn w3-tema d1-w3-margem inferior"> <i class = "fa fa-polegares-up"> </ i> <button> Como / 
        tipo botão <= "button" class = "w3-btn w3-theme-d2-w3-margem inferior"> <i class = " fa fa-comment "> </ i> Comment </ button> 
      </ div> 
      
    <! - coluna do meio End -> 
    </ div> 
    
    <! - Coluna Direita -> 
    <div class =" w3-col m2 "> 
      <div class =" w3-card-2 w3-redondas w3-white w3-center "> 
        <div class =" w3-contentores "> 
          <p> Próximos Eventos: </ p> 
          <img src =" img_forest .jpg "alt =" Floresta "style =" width: 100%; "> 
          <p> <strong> Casa </ strong> </ p> 
          <p> Sexta-feira 15:00 </ p> 
          <p> <class botão = "w3-btn w3-btn-block w3-theme-l4"> Info </ button> </ p> 
        </ div> 
      </ div> 
      <br> 
      
      <div class = "w3-card-2 w3-round w3-white w3-center "> 
        <div class =" w3-container "> 
          <p> Friend Request </ p> 
          <img src =" img_avatar6.png "alt =" Avatar "style =" width: 50% "> <br> 
          <span> Jane Doe </ span> 
          <div class = "w3-row w3-opacidade"> 
            <div class = "w3-metade"> 
              <class = botão "w3-btn w3 verde-w3-btn- bloco w3-section "title =" Aceitar "> <class i =" fa fa-check "> </ i> </ button> 
            </ div> 
            <div class =" w3-metade "> 
              <class = botão" w3 -btn-block w3-btn w3-seção w3-red "title =" Recusar "> <class i =" fa fa-remove "> </ i> </ button> 
            </ div> 
          </ div> 
        </ div > 
      </ div> 
      <br> 
      
      <div class = "w3-card-2 w3-round w3-white w3-padding-16 w3-center"> 
        <p> ADS </ p> 
      </ div> 
      <br> 
      
      < div class = "w3-card-2 w3-round w3-white w3-padding-32 w3-center"> 
        <p> <i class = "fa fa-bug w3-XXLarge"> </ i> </ p> 
      </ div> 
      
    <! - End Coluna Direita -> 
    </ div> 
    
  <! - Grade End -> 
  </ div> 
  
<! - End Página Container -> 
</ div> 
<br>

<! - Rodapé -> 
<class rodapé = "w3-container w3-tema d3 w3-padding-16"> 
  <h5> rodapé </ H5> 
</ footer>

<rodapé class = "w3-container w3-theme-d5"> 
  <p> <a Alimentado por href="http://www.w3schools.com/w3css/default.asp" w3.css target="_blank"> </a> </ p> 
</ footer> 
 
<script> 
// acordeão 
função myFunction (id) { 
    var x = document.getElementById (id); 
    if (x.className.indexOf ( "w3-show") == -1) { 
        x.className + = "w3-show"; 
        x.previousElementSibling.className + = "w3-theme-d1"; 
    } else { 
        x.className = x.className.replace ( "w3-show", " "); 
        x.previousElementSibling.className = 
        x.previousElementSibling.className.replace (" w3-theme-d1 "," "); 
    } 
}

// Usado para alternar o menu em telas menores ao clicar no botão de menu 
openNav function () { 
    var x = document.getElementById ( "navDemo"); 
    if (x.className.indexOf ( "w3-show") == - 1) { 
        x.className + = "w3-show"; 
    } else { 
        x.className = x.className.replace ( "w3-show", ""); 
    } 
} 
</ script>

</ body> 
</ html>

Compartilhar este post


Link para o post
Compartilhar em outros sites

Join the conversation

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

Visitante
Responder

×   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.

Processando...

×
×
  • Criar Novo...