Skip to content

Commit e6a861a

Browse files
PedroAlmyPedroAlmy
committed
Novo Projeto
Projeto com bootstrap OBS: Algumas alterações no projeto utilizando Materalize
1 parent afaea81 commit e6a861a

11 files changed

Lines changed: 210 additions & 8 deletions

File tree

‎AtividadeComBootstrap/css/index.css‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
header {
2+
background-image: linear-gradient(rgba(0, 0, 0, 0.3), black), url(/img/background.jpg);
3+
background-size: cover;
4+
padding: 200px;
5+
}
6+
7+
nav .title-nav{
8+
9+
font-size: 30px;
10+
11+
}
12+
13+
header .h1 {
14+
15+
color: #fd7e14;
16+
font-size: 50px;
17+
}
18+
19+
header p {
20+
color: white;
21+
font-size: 25px;
22+
}
23+
24+
section .title {
25+
width: 170px;
26+
color: #fd7e14;
27+
}
28+
29+
.card img {
30+
max-height: 300px;
31+
}
32+
33+
.card-title {
34+
text-transform: uppercase;
35+
}
36+
37+
.card a {
38+
background-color: #fd7e14;
39+
border: #fd7e14;
40+
}
41+
42+
@media screen and (max-width: 800px) {
43+
44+
header h1 {
45+
font-size: 40px;
46+
}
47+
48+
header p {
49+
font-size: 18px;
50+
}
51+
52+
header a {
53+
margin-bottom: 10px;
54+
}
55+
.row {
56+
display: block;
57+
}
58+
}

‎AtividadeComBootstrap/img/background.jpg‎

268 KB
Loading

‎AtividadeComBootstrap/img/biquiniciano.PNG‎

729 KB
Loading

‎AtividadeComBootstrap/img/biquinionca.PNG‎

816 KB
Loading

‎AtividadeComBootstrap/img/biquinipreto.PNG‎

850 KB
Loading

‎AtividadeComBootstrap/img/biquinivermelho.PNG‎

884 KB
Loading

‎AtividadeComBootstrap/index.html‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
<!DOCTYPE html>
2+
<html lang="pt-br">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
9+
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
10+
<script src="https://kit.fontawesome.com/ccbd4d6bc1.js" crossorigin="anonymous"></script>
11+
<link rel="stylesheet" href="./css/index.css">
12+
<title>Prova Bootstrap</title>
13+
</head>
14+
15+
<body>
16+
<nav class="navbar navbar-expand-lg navbar-light">
17+
<div class="container-fluid mx-5">
18+
<a class="navbar-brand title-nav" href="#" style="color: #fd7e14;">ODOYÁ</a>
19+
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
20+
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
21+
<span class="navbar-toggler-icon"></span>
22+
</button>
23+
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
24+
<ul class="navbar-nav">
25+
<li class="nav-item">
26+
<a class="nav-link active" aria-current="page" href="#">Inicio</a>
27+
</li>
28+
<li class="nav-item">
29+
<a class="nav-link" href="#produtos">Produtos</a>
30+
</li>
31+
<li class="nav-item">
32+
<a class="nav-link" href="#">Sobre Nós</a>
33+
</li>
34+
<li class="nav-item">
35+
<a class="nav-link" href="#">Fale Consco</a>
36+
</li>
37+
</ul>
38+
</div>
39+
</div>
40+
</nav>
41+
<header>
42+
<div class="container-fluid justify-content-center">
43+
<p class="h1">Sempre Original</h1>
44+
<p class="h4">Os melhores biquinis do brasil</p>
45+
<a class="btn btn-warning" style="color: white;">Comprar</a>
46+
47+
<a class="btn btn-warning mx-4" style="color: white; border-radius: 50%;"
48+
href="https://www.instagram.com/odoyacloset/" target="_blank">
49+
<i class="fab fab fa-instagram"></i></a>
50+
</div>
51+
</header>
52+
<section id="produtos">
53+
<div class="mx-auto my-5 title">
54+
<h1 class="mx-auto">Produtos</h1>
55+
</div>
56+
<div class="container-fluid my-5">
57+
<div class="row">
58+
<div class="col">
59+
<div class="card">
60+
<img src="./img/biquinivermelho.PNG" class="card-img-top">
61+
<div class="card-body">
62+
<h5 class="card-title">Biquini Vermelho</h5>
63+
<p class="card-text">Biquinis feitos com amor e carinho para você! 👙
64+
Fabricação própria🏭
65+
Sua loja virtual 💕
66+
Salvador e região📍
67+
Qualquer peça por R$ 80,00.</p>
68+
<a href="#" class="btn btn-primary">Comprar</a>
69+
</div>
70+
</div>
71+
</div>
72+
<div class="col">
73+
<div class="card">
74+
<img src="./img/biquiniciano.PNG" class="card-img-top">
75+
<div class="card-body">
76+
<h5 class="card-title">Biquini Azul</h5>
77+
<p class="card-text">Biquinis feitos com amor e carinho para você! 👙
78+
Fabricação própria🏭
79+
Sua loja virtual 💕
80+
Salvador e região📍
81+
Qualquer peça por R$ 80,00.</p>
82+
<a href="#" class="btn btn-primary">Comprar</a>
83+
</div>
84+
</div>
85+
</div>
86+
<div class="col">
87+
<div class="card">
88+
<img src="./img/biquinionca.PNG" class="card-img-top">
89+
<div class="card-body">
90+
<h5 class="card-title">Biquini Onça</h5>
91+
<p class="card-text">Biquinis feitos com amor e carinho para você! 👙
92+
Fabricação própria🏭
93+
Sua loja virtual 💕
94+
Salvador e região📍
95+
Qualquer peça por R$ 80,00.</p>
96+
<a href="#" class="btn btn-primary">Comprar</a>
97+
</div>
98+
</div>
99+
</div>
100+
<div class="col">
101+
<div class="card">
102+
<img src="./img/biquinipreto.PNG" class="card-img-top">
103+
<div class="card-body">
104+
<h5 class="card-title">Biquini Preto</h5>
105+
<p class="card-text">Biquinis feitos com amor e carinho para você! 👙
106+
Fabricação própria🏭
107+
Sua loja virtual 💕
108+
Salvador e região📍
109+
Qualquer peça por R$ 80,00.</p>
110+
<a href="#" class="btn btn-primary">Comprar</a>
111+
</div>
112+
</div>
113+
</div>
114+
</div>
115+
</div>
116+
</section>
117+
</body>
118+
119+
</html>

‎AtividadeComMaterialize/.vscode/settings.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"liveServer.settings.port": 5501
3+
}

‎AtividadeComMaterialize/css/index.css‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
header {
22
height: 45em;
33
position: relative;
4-
background: url(https://steamuserimages-a.akamaihd.net/ugc/1695024823120015526/A7F04F93EA4353BB31C494814C029D53145B1C0C/?imw=5000&imh=5000&ima=fit&impolicy=Letterbox&imcolor=%23000000&letterbox=false) no-repeat center;
5-
background-size: cover;
6-
position: relative;
74
margin-bottom: 4em;
85
z-index: 0;
6+
background: url(https://steamuserimages-a.akamaihd.net/ugc/1695024823120015526/A7F04F93EA4353BB31C494814C029D53145B1C0C/?imw=5000&imh=5000&ima=fit&impolicy=Letterbox&imcolor=%23000000&letterbox=false) no-repeat center;
7+
background-size: cover;
98
}
109

1110
header::before {

‎AtividadeComMaterialize/index.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@
4747
</div>
4848
</li>
4949
<li>
50-
<a href="#">
50+
<a href="https://github.com/PeuAlmeida" target="_blank">
5151
<i class="fa fa-github fa-2x deep-purple-text"></i>
5252
Facebook
5353
</a>
@@ -84,7 +84,7 @@ <h1>Materialize</h1>
8484
<a href="" class="deep-purple waves-effect waves-light btn">Get Started</a> <br><br>
8585

8686
<!-- ================ Redes Sociais ================ -->
87-
<a href="" class="deep-purple waves-effect waves-light btn" style="margin-right: 2px;">
87+
<a href="https://github.com/PeuAlmeida" target="_blank" class="deep-purple waves-effect waves-light btn" style="margin-right: 2px;">
8888
<i class="fa fa-github" aria-hidden="true"></i>
8989
</a>
9090
<a href="" class="deep-purple waves-effect waves-light btn" style="margin-right: 2px;">
@@ -197,23 +197,23 @@ <h3>Curiosities</h3>
197197
<div class="row">
198198
<div class="col s12 m4">
199199
<div class="section">
200-
<i class="fas fa-cogs fa-3x deep-purple-text"></i>
200+
<i class="fa fa-magic fa-3x deep-purple-text"></i>
201201
<h4>Item 1</h4>
202202
<p class="grey-text">Lorem Ipsum, dolor sit amet consectetur adipisicing elit. unde, illo.</p>
203203
</div>
204204
<div class="divider"></div>
205205
</div>
206206
<div class="col s12 m4">
207207
<div class="section">
208-
<i class="fas fa-cogs fa-3x deep-purple-text"></i>
208+
<i class="fa fa-book fa-3x deep-purple-text"></i>
209209
<h4>Item 1</h4>
210210
<p class="grey-text">Lorem Ipsum, dolor sit amet consectetur adipisicing elit. unde, illo.</p>
211211
</div>
212212
<div class="divider"></div>
213213
</div>
214214
<div class="col s12 m4">
215215
<div class="section">
216-
<i class="fas fa-cogs fa-3x deep-purple-text"></i>
216+
<i class="fa fa-fire fa-3x deep-purple-text"></i>
217217
<h4>Item 1</h4>
218218
<p class="grey-text">Lorem Ipsum, dolor sit amet consectetur adipisicing elit. unde, illo.</p>
219219
</div>

0 commit comments

Comments
 (0)