Css

Ex. 1 Dimensiune imagini + border imagini + opacitate imagini

.feature-row__image {

opacity: 0.7;

filter: alpha(opacity=10);

border-radius: 50%;

border-style: solid;

border-width: 4px 4px;

Ex. 2 Spațiere dintre litere pentru elementul h2

h2.section-header__title {

letter-spacing: 3px;

Ex. 3 Chenar colorat pentru titlu h2

h2.section-header__title {

border-style: dotted;

border-width: 2px 2px;

border-color: purple;

Ex. 4 Culoare font și dimensiune pentru h2

h2.section-header__title {

font-size: 35px;

line-height: 1.6;

color: purple;

Ex. 5 Prima literă din paragrapf să fie majusculă și de culoare mov

.newsletter-content p::first-letter {

color:purple;

font-size: xx-large;

Ex. 6 Font pentru titluri, aliniere și culoare

.grid-link__title{

color: grey;

font-family: Arial;

font-size: 20px;

line-height: 1.4;

font-weight: 700;

Ex. 7 Redimensionare titluri

.slides__title{

font-size: 50px;

Ex. 8 Redimensionare imagine

.product__img {

height:340px;

object-fit:cover;

margin:auto;

Ex.9 Aliniere paragraph

p.grid-link__meta{

font-size:1.5rem;

text-align: center;

Ex.10 Arenjare paragrafe

.rte{

height: 3cm;

Ex. 11 Font paragrafe

.featured-row__subtext {

font-size: 1.3em;

color:rgb(128,0,128);

text-align:justify ;
 font-style: oblique;

Ex. 12 Aliniere paragrafe

.featured-row__subtext {

margin-top: 50px;

margin-bottom: 100px;

margin-right: 50px;

margin-left: 10px;

Ex. 13

@media screen and (min-width: 769px)

.feature-row__text--right {

width: 35px;

Ex. 14 Animație bordare imagine

.feature-row__image{

animation: border 3s infinite;

@keyframes border{

0%{border: solid rgb(50, 24, 99) 0px;}

25%{border: solid rgb(50, 24, 99) 3px;}

50%{border: solid rgb(50, 24, 99) 6px;}

75%{border: solid rgb(50, 24, 99) 3px;}

100%{border: solid rgb(50, 24, 99) 0px;}

Ex. 15 Flash H2

h2.section-header__title {

animation: disparitie 3s infinite

@keyframes disparitie{

0%{opacity:0;}
 25%{opacity:0.5;}

50%{opacity:1;}

75%{opacity:0.5;}

100%{opacity:0;}

Ex. 16 Animație fundal paragraf

.newsletter-content p{

animation: font2 5s linear;

@keyframes font2{

0% {background-color: rgb(205, 193, 227);}

50%{background-color: rgb(172, 159, 196);}

100%{background-color: rgb(233, 230, 240);}

Ex. 17

.newsletter-section .input-group-field {

margin-bottom: 30px;

Ex. 18 Buton Accesează

.featured-row__subtext~.btn{

background-color: rgb(128,0,128);

color: rgb(230,230,250);

padding: 15px 32px;

text-align: center;

text-decoration: none;

font-size: 16px;

margin: 4px 2px;

cursor: grab;

border-radius: 50%;

}
Ex. 19 Buton Submit

.input-group-btn:last-child>.btn {

background-color: rgb(75,0,130);

color: white);

text-align: center;

cursor: grab;

border-radius: 50%;

// Toggle paragraf click pe Aboneaza-te la newsletter-ul nostru

$(".section-header--small").click(function(){

$(".newsletter-content p").slideToggle();

});

//FADEOUT/FADEIN on mouse peste poza

$(".feature-row__image").mouseenter(function(){

$(".feature-row__image").fadeOut();

});

$(".feature-row__image").mouseenter(function(){

$(".feature-row__image").fadeIn();

});

// Animație paragrafe

$(".featured-row__subtext").click(function(){

$(".featured-row__subtext").animate({

width: "+=5%",

fontSize: "+=1px"});
});

// Mesaj intrare textul de pe slide

$(".slides__title").one("click", function(){

alert("Aducem natura mai aprope de tine!");

});

h2.section-header__title {

font-size: 35px;

line-height: 1.6;

color: purple;

.grid-link__title{

color: grey;

font-family: Arial;

font-size: 20px;

line-height: 1.4;

font-weight: 700;

.slides__title{

font-size: 40px;

h2.section-header__title {

letter-spacing: 3px;

}
.feature-row__image {

opacity: 0.7;

filter: alpha(opacity=10);

border-radius: 50%;

border-style: solid;

border-width: 4px 4px;

h2.section-header__title {

border-style: dotted;

border-width: 2px 2px;

border-color: purple;

p.grid-link__meta{

font-size:1.5rem;

text-align: center;

.newsletter-content p::first-letter {

color:purple;

font-size: xx-large;

.rte{

height: 3cm;

.featured-row__subtext {

font-size: 1.3em;
 color:rgb(128,0,128);

font-style: oblique;

text-align:justify ;

.featured-row__subtext {

margin-top: 50px;

margin-bottom: 100px;

margin-right: 50px;

margin-left: 10px;

@media screen and (min-width: 769px)

.feature-row__text--right {

width: 35px;

.feature-row__image{

animation: border 3s infinite;

@keyframes border{

0%{border: solid rgb(50, 24, 99) 0px;}

25%{border: solid rgb(50, 24, 99) 3px;}

50%{border: solid rgb(50, 24, 99) 6px;}

75%{border: solid rgb(50, 24, 99) 3px;}

100%{border: solid rgb(50, 24, 99) 0px;}

}
h2.section-header__title {

animation: disparitie 3s infinite

@keyframes disparitie{

0%{opacity:0;}

25%{opacity:0.5;}

50%{opacity:1;}

75%{opacity:0.5;}

100%{opacity:0;}

.newsletter-content p{

animation: font2 7s linear;

@keyframes font2{

0% {background-color: rgb(205, 193, 227);}

50%{background-color: rgb(172, 159, 196);}

100%{background-color: rgb(233, 230, 240);}

.newsletter-section .input-group-field {

margin-bottom: 30px;

.featured-row__subtext~.btn{

background-color: rgb(128,0,128);

color: rgb(230,230,250);

padding: 15px 32px;

text-align: center;

text-decoration: none;
 font-size: 16px;

margin: 4px 2px;

cursor: grab;

border-radius: 50%;

.input-group-btn:last-child>.btn {

background-color: rgb(75,0,130);

color: white);

text-align: center;

cursor: grab;

border-radius: 50%;