@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,700');
@import url('https://fonts.google.com/?selection.family=Roboto:400,500,700,900');
html,
body {
height: 100%;
width: 100%;
font-family: 'Segoe UI', 'Poppins', sans-serif;
background: #fff;
color: #666666;
}
a {
color: #5fcf80;
}
a:hover,
a:active,
a:focus {
color: #5fcf80;
outline: none;
text-decoration: none;
}
p {
padding: 0;
margin: 0 0 30px 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Segoe UI', sans-serif;
font-weight: 400;
margin: 0 0 20px 0;
padding: 0;
}
#header {
padding: 30px 0;
height: 92px;
position: fixed;
left: 0;
top: 0;
right: 0;
transition: all 0.5s;
z-index: 997;
}
#header #logo {
float: left;
}
#header #logo img {
padding: 0;
margin: 0;
}
.container #nav-menu-container .btn-get-started {
font-family: "Segoe UI", sans-serif;
text-transform: uppercase;
font-weight: 500;
font-size: 16px;
letter-spacing: 1px;
display: inline-block;
padding: 7px 24px;
border-radius: 50px;
transition: 0.5s;
margin: -20px 0px 5px;
border: 2px solid #5fcf80;
color: #fff;
}
.container #nav-menu-container .btn-get-started:hover {
background-color: #5fcf80;
}
.container #nav-menu-container .btn-get-started:hover:before {
visibility: hidden;
}
#header.header-fixed {
background: rgba(52, 59, 64, 0.9);
padding: 20px 0;
height: 72px;
transition: all 0.5s;
}
.nav-menu {
margin: 0;
padding: 0;
list-style: none;
}
.nav-menu ul {
position: absolute;
display: none;
top: 100%;
left: 0;
z-index: 99;
}
.nav-menu li {
float: left;
position: relative;
white-space: nowrap;
}
.nav-menu ul {
top: 0;
left: 100%;
}
#nav-menu-container {
float: right;
margin: 0;
}
.sandwich {
font-family: "Segoe UI", sans-serif;
text-transform: uppercase;
font-weight: 500;
font-size: 16px;
letter-spacing: 1px;
display: inline-block;
padding: 10px 15px;
border-radius: 25px;
transition: 0.5s;
margin: 5px;
background: black;
opacity: 1;
border: 1px solid black;
display: none;
}
.sandwich:hover {
font-family: "Segoe UI", sans-serif;
text-transform: uppercase;
font-weight: 500;
font-size: 16px;
letter-spacing: 1px;
display: inline;
padding: 10px 15px;
border-radius: 25px;
transition: 0.5s;
margin: 5px;
background: #5fcf80;
opacity: 1;
border: 2px solid black;
}
.fa-bars {
color: #fff;
}
.nav-menu a {
padding: 0 8px 10px 8px;
text-decoration: none;
display: inline-block;
color: #fff;
font-family: "Segoe UI", sans-serif;
font-weight: 300;
text-transform: uppercase;
font-size: 15px;
outline: none;
}
.nav-menu>li {
margin-left: 20px;
}
.nav-menu>li>a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #5fcf80;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.nav-menu a:hover:before,
.nav-menu li:hover>a:before,
.nav-menu .menu-active>a:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
#carousel {
display: table;
width: 100%;
height: 100vh;
background: url(../img/dandelion1.jpg) top center fixed;
background-size: cover;
}
#carousel .carousel-container {
background: rgba(0, 0, 0, 0.6);
display: table-cell;
margin: 0;
padding: 0 10px;
text-align: center;
vertical-align: middle;
}
#carousel h1 {
text-transform: uppercase;
color: #fff;
}
#carousel h2 {
color: #eee;
margin-bottom: 50px;
font-size: 24px;
}
#carousel .btn-get-started {
font-family: "Segoe UI", sans-serif;
text-transform: uppercase;
font-weight: 500;
font-size: 16px;
letter-spacing: 1px;
display: inline-block;
padding: 8px 28px;
border-radius: 50px;
transition: 0.5s;
margin: 10px;
border: 2px solid #5fcf80;
color: #fff;
}
#carousel .btn-get-started:hover {
background: #5fcf80;
border: 2px solid #5fcf80;
}
.jumbotron {
padding: 1rem;
border-radius: 0;
}
.padding {
padding-bottom: 2rem;
}
.welcome {
width: 75%;
margin: 0 auto;
padding-top: 2rem;
}
.welcome hr {
border-top: 2px solid #5fcf80;
width: 95%;
margin-top: .3rem;
margin-bottom: 1rem;
}
.fa-allergies,
.fa-user-md,
.fa-heart {
color: #5fcf80;
font-size: 8em;
padding-bottom: 2rem;
margin: 1rem;
}
.social a {
font-size: 4.5em;
padding: 3rem;
}
.fa-facebook {
color: #3b5998;
}
.fa-twitter {
color: #00aced;
}
.fa-google-plus-g {
color: #dd4b39;
}
.fa-youtube {
color: #bb0000;
}
.fa-facebook:hover,
.fa-twitter:hover,
.fa-google-plus-g:hover,
.fa-youtube:hover {
color: #5fcf80;
}
#contact {
background: #f7f7f7;
padding: 80px 0 40px 0;
}
#contact .info p {
padding: 0 0 10px 30px;
margin-bottom: 20px;
line-height: 22px;
font-size: 14px;
display: inline-block;
}
#contact .form #sendmessage {
color: #5fcf80;
border: 1px solid #5fcf80;
display: none;
text-align: center;
padding: 15px;
font-weight: 600;
margin-bottom: 15px;
}
#contact .form #errormessage {
color: red;
display: none;
border: 1px solid red;
text-align: center;
padding: 15px;
font-weight: 600;
margin-bottom: 15px;
}
#contact .form #sendmessage.show,
#contact .form #errormessage.show,
#contact .form .show {
display: block;
}
#contact .form .validation {
color: red;
display: none;
margin: 0 0 20px;
font-weight: 400;
font-size: 13px;
}
#contact .form button[type="submit"] {
font-family: "Segoe UI", sans-serif;
text-transform: uppercase;
font-weight: 500;
font-size: 16px;
letter-spacing: 1px;
display: inline-block;
padding: 8px 28px;
border-radius: 50px;
transition: 0.5s;
margin: 10px;
color: #fff;
background: #5fcf80;
border: 2px solid #fff;
}
#contact .fa-map-marker,
.fa-envelope,
.fa-phone {
font-size: 2em;
color: #5fcf80;
}
#footer {
background: #485859;
padding: 30px 0;
color: #fff;
font-size: 14px;
}
#footer .copyright {
text-align: center;
}
#footer .credits {
padding-top: 10px;
text-align: center;
font-size: 13px;
color: #ccc;
}
@media (max-width: 992px) {
.social a {
font-size: 4em;
padding: 2rem;
}
}
@media (max-width: 768px) {
#header #logo img {
max-height: 40px;
}
#nav-menu-container {
display: none;
}
#carousel h1 {
font-size: 28px;
line-height: 36px;
}
#carousel h2 {
font-size: 18px;
line-height: 24px;
margin-bottom: 30px;
}
.carousel-caption {
top: 45%;
}
.carousel-caption h1 {
font-size: 350%;
}
.carousel-caption h3 {
font-size: 140%;
font-weight: 400;
padding-bottom: .2rem;
}
.carousel-caption .btn {
font-size: 95%;
padding: 8px 14px;
}
.display-4 {
font-size: 200%;
}
.social a {
font-size: 2.5em;
padding: 1.2rem;
}
.sandwich {
display: inline-block;
}
}
@media (max-width: 576px) {
.carousel-caption {
top: 40%;
}
.carousel-caption h1 {
font-size: 250%;
}
.carousel-caption h3 {
font-size: 110%;
}
.carousel-caption .btn {
font-size: 90%;
padding: 4px 8px;
}
.carousel-indicators {
display: none;
}
.display-4 {
font-size: 160%;
}
.social a {
font-size: 2em;
padding: .7rem;
}
}
.carousel-item {
transition: -webkit-transform 0.5s ease;
transition: transform 0.5s ease;
transition: transform 0.5s ease, -webkit-transform 0.5s ease;
-webkit-backface-visibility: visible;
backface-visibility: visible;
}
figure {
position: relative;
width: 100%;
height: 60%;
margin: 0 !important;
}
.fixed-wrap {
clip: rect(0, auto, auto, 0);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#fixed {
background-image: url('img/mac.png');
position: fixed;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center center;
-webkit-transform: translateZ(0);
transform: translateZ(0);
will-change: transform;
}
[class*="col-"] {
padding: 1rem;
}
#logo {
width: 10rem;
height: 3.4rem;
}
.footer-allergyhelp img {
width: 10rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js"></script>
<link href="assets/css/style.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700,900" rel="stylesheet">
<title>AllergyHelp</title>
</head>
<body>
<header id="header">
<div class="container">
<div id="logo">
<a href="./index.html">
<img src="./assets/img/logo-mic.png">
</a>
</div>
<nav id="nav-menu-container">
<ul class="nav-menu">
<li class="menu-active">
<a href="#">Acasă</a>
</li>
<li>
<a href="#">Despre noi</a>
</li>
<li>
<a href="#">Servicii</a>
</li>
<li>
<a href="#">Contact</a>
</li>
<li>
<a href="#">Echipa</a>
</li>
<li>
<a href="#" class="btn-get-started">Login</a>
</li>
</ul>
</nav>
<button class="btn-primary navbar-toggle float-right sandwich" data-toggle="collapse" data-target="#nav-menu-container">
<i class="fas fa-bars"></i>
</button>
</div>
</header>
<section id="carousel">
<div class="carousel-container">
<h1 class="display-2">AllergyHelp</h1>
<h2>Protejează-te împotriva alergiilor</h2>
<a href="#" class="btn-get-started">Inscrie-te acum</a>
</div>
</section>
<div class="container-fluid">
<div class="row jumbotron">
<div class="col-xs-12 col-sm-12 col-md-9 col-lg-9 col-xl-10">
<p class="lead">Bacon ipsum dolor amet boudin pig andouille, buffalo jowl cow venison pork loin frankfurter. Short loin turducken
buffalo boudin beef rump ball tip. Pastrami kielbasa pork buffalo swine drumstick. Biltong pancetta chuck ribeye.
Porchetta beef hamburger jerky ground round fatback ham hock pig biltong corned beef swine rump bacon beef ribs
ball tip.
</p>
</div>
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 col-xl-2">
<a href="#">
<button type="button" class="btn btn-outline-secondary btn-lg">Buton</button>
</a>
</div>
</div>
</div>
<div class="container-fluid padding">
<div class="row welcome text-center">
<div class="col-12">
<h1 class="display-4">Text frumos</h1>
</div>
<hr>
<div class="col-12">
<p class="lead">Bacon ipsum dolor amet meatball boudin ground round strip steak tri-tip rump bresaola meatloaf meatball boudin ground
round strip steak tri-tip rump bresaola meatloaf turkey doner shank.
</p>
</div>
</div>
</div>
<div class="container-fluid padding">
<div class="row text-center padding">
<div class="col-xs-12 col-sm-6 col-md-4">
<i class="fas fa-allergies"></i>
<h3>Alergie</h3>
<p>Bacon ipsum dolor amet meatball</p>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<i class="fas fa-user-md"></i>
<h3>Tratamente</h3>
<p>Bacon ipsum dolor amet meatball</p>
</div>
<div class="col-sm-12 col-md-4">
<i class="fas fa-heart"></i>
<h3>Care
<3</h3>
<p>Bacon ipsum dolor amet meatball</p>
</div>
</div>
<hr class="my-4">
</div>
<div class="container-fluid padding">
<div class="row padding">
<div class="col-md-12 col-lg-6">
<h2>Text mare</h2>
<p>Corned beef frankfurter tenderloin beef ribs beef. Cow buffalo alcatra jowl drumstick biltong meatball bresaola shank
spare ribs strip steak turkey.</p>
<p>Meatloaf salami filet mignon brisket pork belly flank kielbasa. Shoulder chuck hamburger, cupim cow bacon kielbasa
t-bone chicken shankle.</p>
<br>
<a href="#" class="btn btn-primary">Detalii</a>
</div>
<div class="col-lg-6">
<img src="assets/img/placeholder3.png" class="img-fluid">
</div>
</div>
</div>
<hr class="my-4">
<div class="container-fluid padding">
<div class="row welcome text-center">
<div class="col-12">
<h1 class="display-4">Diverse Alergii</h1>
</div>
</div>
</div>
<div class="container-fluid padding">
<div class="row padding">
<div class="col-md-4">
<div class="card">
<img class="card-img-top" src="assets/img/placeholder1.png">
<div class="card-body">
<h4 class="card-title">Alergie 1</h4>
<p class="card-text">Detalii alergie foarte periculoasă și dureroasă</p>
<a href="#" class="btn btn-outline-secondary">Vezi Detalii</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img class="card-img-top" src="assets/img/placeholder2.png">
<div class="card-body">
<h4 class="card-title">Alergie 2</h4>
<p class="card-text">Detalii alergie foarte periculoasă și dureroasă</p>
<a href="#" class="btn btn-outline-secondary">Vezi Detalii</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img class="card-img-top" src="assets/img/placeholder3.png">
<div class="card-body">
<h4 class="card-title">Alergie 3</h4>
<p class="card-text">Detalii alergie foarte periculoasă și dureroasă</p>
<a href="#" class="btn btn-outline-secondary">Vezi Detalii</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img class="card-img-top" src="assets/img/placeholder3.png">
<div class="card-body">
<h4 class="card-title">Alergie 4</h4>
<p class="card-text">Detalii alergie foarte periculoasă și dureroasă</p>
<a href="#" class="btn btn-outline-secondary">Vezi Detalii</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img class="card-img-top" src="assets/img/placeholder2.png">
<div class="card-body">
<h4 class="card-title">Alergie 5</h4>
<p class="card-text">Detalii alergie foarte periculoasă și dureroasă</p>
<a href="#" class="btn btn-outline-secondary">Vezi Detalii</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img class="card-img-top" src="assets/img/placeholder1.png">
<div class="card-body">
<h4 class="card-title">Alergie 6</h4>
<p class="card-text">Detalii alergie foarte periculoasă și dureroasă</p>
<a href="#" class="btn btn-outline-secondary">Vezi Detalii</a>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid padding">
<div class="row padding">
<div class="col-md-12 col-lg-6">
<h2>Text mare</h2>
<p>Corned beef frankfurter tenderloin beef ribs beef. Cow buffalo alcatra jowl drumstick biltong meatball bresaola shank
spare ribs strip steak turkey.</p>
<p>Meatloaf salami filet mignon brisket pork belly flank kielbasa. Shoulder chuck hamburger, cupim cow bacon kielbasa
t-bone chicken shankle.</p>
<br>
</div>
<div class="col-lg-6">
<img src="assets/img/placeholder3.png" class="img-fluid">
</div>
</div>
</div>
<section id="contact">
<div class="social-links">
<div class="container-fluid padding">
<div class="row text-center padding">
<div class="col-12">
<h1>Contactează-ne</h1>
</div>
<div class="col-12 social padding">
<a href="#">
<i class="fab fa-facebook"></i>
</a>
<a href="#">
<i class="fab fa-twitter"></i>
</a>
<a href="#">
<i class="fab fa-google-plus-g"></i>
</a>
<a href="#">
<i class="fab fa-youtube"></i>
</a>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-3 col-md-4">
<div class="info">
<div>
<i class="fas fa-map-marker"></i>
<p>Str. Străzilor, Iași, România</p>
</div>
<div>
<i class="fas fa-envelope"></i>
<p>discodeteam@gmail.com</p>
</div>
<div>
<i class="fas fa-phone"></i>
<p>+40 723 456 789</p>
</div>
</div>
</div>
<div class="col-lg-5 col-md-8">
<div class="form">
<div id="sendmessage">Vă mulțumim pentru feedback!</div>
<div id="errormessage"></div>
<form action="" method="post" role="form" class="contactForm">
<div class="form-group">
<input type="text" name="name" class="form-control" id="name" placeholder="Nume" data-rule="minlen:4" data-msg="Va rugam introduceti minim 4 caractere"
/>
<div class="validation"></div>
</div>
<div class="form-group">
<input type="email" class="form-control" name="email" id="email" placeholder="Email" data-rule="email" data-msg="Va rugam introduceti un email valid."
/>
<div class="validation"></div>
</div>
<div class="form-group">
<input type="text" class="form-control" name="subject" id="subject" placeholder="Titlu" data-rule="minlen:4" data-msg="Va rugam introduceti minim 4 caractere"
/>
<div class="validation"></div>
</div>
<div class="form-group">
<textarea class="form-control" name="message" rows="5" data-rule="required" data-msg="Va rugam sa completati acest camp"
placeholder="Mesaj"></textarea>
<div class="validation"></div>
</div>
<div class="text-center">
<button type="submit">Trimite</button>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
<footer id="footer">
<div class="footer-top">
<div class="container"></div>
</div>
<div class="container">
<div class="copyright">
© Copyright
<strong>AllergyHelp</strong>. All Rights Reserved
</div>
<div class="credits">
Aplicație realizată de
<a href="#">Discode Team</a>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="./assets/js/main.js"></script>
</body>
</html>