Skip to content

add member's cards #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
karengiovanna wants to merge 6 commits into
base: main
Choose a base branch
from
Open

add member's cards #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
83deef7
add member's cards
karengiovanna Jul 7, 2021
bbbf18d
Criando variáveis com sass
karengiovanna Jul 8, 2021
a8b1dd6
Update index.html
karengiovanna Sep 1, 2021
7694030
Adicionando fotos
karengiovanna Sep 1, 2021
ae80d49
Adicionando textos
karengiovanna Sep 2, 2021
ff4e354
Update index.html
karengiovanna Sep 7, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
204 changes: 150 additions & 54 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,66 +1,162 @@
<DOCTYPE HTML>
<html lang = "pt-BR">
<head>
<meta charset = "UTF-8"
<title>Dev GiRRls</title>
<link rel="stylesheet" href="./styles/stylesheet.css">
<head>
<!DOCTYPE html>
<html>
<title>DevGiRRls</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>

<header>
<div id="Logo">
<h1>DevGiRRls.</h1>
<p>Uma comunidade feminina de Devs em Roraima</p>
</div>
<!-- Navbar (sit on top) -->
<div class="w3-top">
<div class="w3-bar w3-white w3-wide w3-padding w3-card">
<a href="#home" class="w3-bar-item w3-button"><b>Dev</b> GiRRls</a>
<!-- Float links to the right. Hide them on small screens -->
<div class="w3-right w3-hide-small">
<a href="#projects" class="w3-bar-item w3-button">Reuniões</a>
<a href="#about" class="w3-bar-item w3-button">Sobre</a>
<a href="#contact" class="w3-bar-item w3-button">Contato</a>
</div>
</div>
</div>

<nav>
<ul>
<li><a href="/index.html">Início<a></li>
<li>Sobre </li>
<li>Eventos </li>
<li>Para calouras</li>
</ul>
</nav>
<!-- Header -->
<header class="w3-display-container w3-content w3-wide" style="max-width:1500px;" id="home">
<img class="w3-image" src="https://wallpaper.dog/large/5460958.jpg" alt="Architecture" width="1500" height="800">
<div class="w3-display-middle w3-margin-top w3-center">
<h1 class="w3-xxlarge w3-text-white"><span class="w3-padding w3-black w3-opacity-min"><b>Dev</b></span> <span class="w3-hide-small w3-text-light-grey">GiRRls</span></h1>
</div>
</header>

</header>
<!-- Page content -->
<div class="w3-content w3-padding" style="max-width:1564px">

<body>
<main>
<p class="titulo-principal">Incentivar meninas e mulheres de Roraima a entrarem ou continuarem na área tecnológica. </p>
<div class="bloco">
<p id="numero-bloco">4</p>
<p id="texto-bloco">Integrantes</p>
<div>
<!-- Project Section -->
<div class="w3-container w3-padding-32" id="projects">
<h3 class="w3-border-bottom w3-border-light-grey w3-padding-16">Reuniões</h3>
</div>

<div class="bloco">
<p id="numero-bloco">3</p>
<p id="texto-bloco">Reuniões</p>
<div>
</main>
<div class="w3-row-padding">
<div class="w3-col l3 m6 w3-margin-bottom">
<div class="w3-display-container">
<div class="w3-display-topleft w3-black w3-padding">Primeira reunião</div>
<img src="/w3images/house5.jpg" alt="House" style="width:100%">
</div>
</div>
<div class="w3-col l3 m6 w3-margin-bottom">
<div class="w3-display-container">
<div class="w3-display-topleft w3-black w3-padding">Segunda reunião</div>
<img src="/w3images/house2.jpg" alt="House" style="width:100%">
</div>
</div>
<div class="w3-col l3 m6 w3-margin-bottom">
<div class="w3-display-container">
<div class="w3-display-topleft w3-black w3-padding">Terceira reunião</div>
<img src="/w3images/house3.jpg" alt="House" style="width:100%">
</div>
</div>
<div class="w3-col l3 m6 w3-margin-bottom">
<div class="w3-display-container">
<div class="w3-display-topleft w3-black w3-padding">Quarta reunião</div>
<img src="/w3images/house4.jpg" alt="House" style="width:100%">
</div>
</div>
</div>

<div class="integrantes">
<ul>
<li>
<img src="https://unavatar.now.sh/github/silvandante"/>
</li>
<div class="w3-row-padding">
<div class="w3-col l3 m6 w3-margin-bottom">
<div class="w3-display-container">
<div class="w3-display-topleft w3-black w3-padding">Summer House</div>
<img src="/w3images/house2.jpg" alt="House" style="width:99%">
</div>
</div>
<div class="w3-col l3 m6 w3-margin-bottom">
<div class="w3-display-container">
<div class="w3-display-topleft w3-black w3-padding">Brick House</div>
<img src="/w3images/house5.jpg" alt="House" style="width:99%">
</div>
</div>
<div class="w3-col l3 m6 w3-margin-bottom">
<div class="w3-display-container">
<div class="w3-display-topleft w3-black w3-padding">Renovated</div>
<img src="/w3images/house4.jpg" alt="House" style="width:99%">
</div>
</div>
<div class="w3-col l3 m6 w3-margin-bottom">
<div class="w3-display-container">
<div class="w3-display-topleft w3-black w3-padding">Barn House</div>
<img src="/w3images/house3.jpg" alt="House" style="width:99%">
</div>
</div>
</div>

<li>
<img src="https://unavatar.now.sh/github/nataliaalmada"/>
</li>
<!-- About Section -->
<div class="w3-container w3-padding-32" id="about">
<h3 class="w3-border-bottom w3-border-light-grey w3-padding-16">Sobre</h3>
<p>A comunidade DevGiRRls reune programadoras do estado de Roraima interessadas em difundir e divulgar a programação para mais meninas e mulheres.
</p>
</div>

<li>
<img src="https://unavatar.now.sh/github/karengiovanna"/>
</li>

<li>
<img src="https://unavatar.now.sh/github/BarbaraZamperete"/>
</li>
<ul>
</div>
<div class="w3-row-padding w3-grayscale">
<div class="w3-col l3 m6 w3-margin-bottom">
<img src="https://avatars.githubusercontent.com/u/26912688?v=4" alt="John" style="width:100%">
<h3>Anny Walker</h3>
<p class="w3-opacity">Graduada em Ciência da Computação</p>
<p>Idealizadora do projeto.</p>
<p><button class="w3-button w3-light-grey w3-block">Contact</button></p>
</div>
<div class="w3-col l3 m6 w3-margin-bottom">
<img src="https://avatars.githubusercontent.com/u/49700354?v=4" alt="Jane" style="width:100%">
<h3>Karen Giovanna</h3>
<p class="w3-opacity">Discente de Ciência da Computação na UFRR</p>
<p>Programa em Java e C++</p>
<p><button class="w3-button w3-light-grey w3-block">Contact</button></p>
</div>
<div class="w3-col l3 m6 w3-margin-bottom">
<img src="https://avatars.githubusercontent.com/u/49247141?v=4" alt="Mike" style="width:100%">
<h3>Bárbara</h3>
<p class="w3-opacity">Discente de Ciência da Computação na UFRR</p>
<p>Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.</p>
<p><button class="w3-button w3-light-grey w3-block">Contact</button></p>
</div>
<div class="w3-col l3 m6 w3-margin-bottom">
<img src="https://media-exp1.licdn.com/dms/image/C4D03AQEzTHMqyOThNA/profile-displayphoto-shrink_200_200/0/1621831754729?e=1635379200&v=beta&t=jZxr2dU51YRcZEmJNs6FheCVTfARLUKgYiMS6kuHUGA" alt="Dan" style="width:100%">
<h3>Natália Almada</h3>
<p class="w3-opacity">Discente de Ciência da Computação na UFRR</p>
<p>Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.</p>
<p><button class="w3-button w3-light-grey w3-block">Contact</button></p>
</div>
</div>

</body>
<!-- Contact Section -->
<div class="w3-container w3-padding-32" id="contact">
<h3 class="w3-border-bottom w3-border-light-grey w3-padding-16">Contato3>
<p>Entre para a comunidade do devgirrls pelo Discord e grupo do What's App</p>
<form action="/action_page.php" target="_blank">

<input class="w3-input w3-border" type="text" placeholder="Name" required name="Name">

<input class="w3-input w3-section w3-border" type="text" placeholder="Email" required name="Email">
<input class="w3-input w3-section w3-border" type="text" placeholder="Subject" required name="Subject">
<input class="w3-input w3-section w3-border" type="text" placeholder="Comment" required name="Comment">
<button class="w3-button w3-black w3-section" type="submit">
<i class="fa fa-paper-plane"></i> SEND MESSAGE
</button>
</form>
</div>

<!-- Image of location/map -->
<div class="w3-container">
<img src="/w3images/map.jpg" class="w3-image" style="width:100%">
</div>

<!-- End page content -->
</div>


<body>
</body>
</html>
<!-- Footer -->
<footer class="w3-center w3-black w3-padding-16">
<p>Powered by <a href="https://www.w3schools.com/w3css/default.asp" title="W3.CSS" target="_blank" class="w3-hover-text-green">w3.css</a></p>
</footer>

</body>
</html>
45 changes: 36 additions & 9 deletions styles/stylesheet.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,34 @@
html{
background-color: #fffafa;

#Logo{
padding: 5% 5%;
width: 40%;
display: inline-block;
}

header h1{
font-size: 2em;
font-weight: bold;

}

header{
width: 100%;
background-color: #f5f5f5;
}

#Logo{
width: 40%;
display: inline-block;
}

nav{
display: inline-block;
}

li{
nav li{
display: inline-block;
font-weight: bold;
}

main{
padding: 10%;
}

.titulo-principal{
margin-left: 10%;
width: 50%;
Expand All @@ -47,10 +55,29 @@ li{
}

.integrantes{
margin: auto;
width: 80%;
}

li img{
.integrantes ul{
display: flex; /* or inline-flex */
}

.integrantes li{
border: 3px solid palevioletred;
border-radius: 10px;
width:20%;
vertical-align: top;
margin: 10% 2%;
display: inline-block;
}

.integrantes li h3{
font-weight: bold;
text-align: center;
padding: 30% 0;
}

li img{
width: 120px;
}
6 changes: 6 additions & 0 deletions styles/stylesheet.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
$lavanda: #AFA4CE;
$rosa: #eea5c5;
$azul: #8DAED7;
$cinza: #C2BFBA;
$amarelo: #F5DF4D;
$cinza: #939597;