Lectie21 CSS

Web design and development
Tema: Exemplu de creare și stilizare a unui site web

Bună… După cum am afirmat la lecția trecută, am încheiat studierea CSS. Deja cunoști
limbajul de marcare HTML și cel de stilizare – CSS. La această lecție vom descrie cum
putem crea și apoi stiliza elementele unui site web. Vom analiza codurile site-ului
propus în cadrul celei de-a doua lecții a acestui curs. Astfel, după această lecție :
- vei afla cum a fost stilizat site-ul de prezentare a cafenelei, analizând fișierul de stiluri adăugat
la proiect.
După cum am afirmat deja este recomandat ca proiectul să fie corect structurat: stilurile
se vor păstra într-o mapă separată, imaginile – separat, paginile adiționale - separat etc.
Îți reamintesc care trebuie să fie structura folderului proiectului – este prezentată acum
la ecran:
Voi începe cu codurile HTML. Pentru pagina de start, index.html - codul HTML îl vezi
acum la ecran:
<!DOCTYPE html>
<html>
<head>
<title>CoffeeTime</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.png" /
>
<link href="https://fonts.googleapis.com/css?
family=Indie+Flower&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<script src="https://use.fontawesome.com/767155eaee.js"></script>
<script src="js/scripts.js"></script>
</head>
<body onload="getYear()">
<div class="header">
<div class="logo">
<img src="images/logo.png" alt="Logo" />
</div>
<div class="nav" id="myNav">
<a href="#" onclick="hideMenu()">CoffeeTime</a>
<a href="#about" onclick="hideMenu()">Despre</a>
<a href="#products" onclick="hideMenu()">Produse</a>
<a href="#contacts" onclick="hideMenu()">Contacte</a>
<a href="javascript:void(0);" class="icon" onclick="responsiveMenu()"><
i class="fa fa-bars"></i></a>
</div>
</div>

<div class="slideshow-container">
<div class="slide anim">
<div class="numbertext">1 / 4</div>
<img src="images/slider1.jpg">
<div class="text">Te așteptăm oricând </div>
</div>
<img src="images/slider2.jpeg">
<div class="text">Cafeaua este mereu fierbinte...</div>
</div>
<img src="images/slider3.jpg">
<div class="text">Chiar și espresso...</div>
</div>
<div class="orar">
<h2>ORAR</h2>
<h3>Luni - Vineri:</h3>
<h3>8:00-20:00</h3>
<h3>Sâmbătă - Duminică:</h3>
<h3>10:00-22:00</h3>
</div>
<div class="text">Coffee Time</div>
</div>
</div>

<hr id="about" />
<br>
<div class="about">
<h1>Cafeaua - licoarea dimineții...</h1>
<i class="fa fa-coffee margin-bottom-15"></i>
<div class="main-paragraph text-paragraph">
<p>Deoarece cafeaua are un conţinut ridicat de antioxidanţi - fenol,
substanţe volatile - daca este consumată în cantităţi moderate, poate avea ef
ecte benefice asupra sănătăţii. Un studiu făcut în 2013 arată că numai 9% din
orășeni nu consumă cafea - sub o anumită formă cunoscută: cafea solubilă, esp
esso, cappuccino, late etc.</p>
<p>Istoria cafelei datează de mai mult de 1000 de ani, fiind consumat
ă în Orientul Mijlociu de toate păturile sociale, înca din vechime. La începu
t cafeaua nu a fost considerată băutură, ci aliment. Legenda spune ca această
planta a fost descoperită întâmplător de un păstor etiopian, care a observat
că animalele sale dupa ce consumau aceste plante deveneau agitate. <br />Cert
este că originea cafelei se află pe continentul african, într-o zonă a Etiopi
ei, cunoscută sub numele de "Kaffa" de unde se raspândește în Yemen, apoi în
Arabia și Egipt și chiar în India. <br />Cafeaua a intrat în Europa în urmă c
u trei secole prin portul Veneția, fiind adusă de negustorii arabi...</p>
</div>
</div>

<hr id="products" />
<br>
<div class="products">
<div class="description_prod">
<h1>Produsele noastre</h1>
<p>Cele mai solicitate produse de către clienții noștri...</p>
</div>
<div class="cards_prod">
<div class="card">
<a href="pages/cappuccino.html">
<img src="images/cappuccino.jpeg" alt="cappuccino" class="photo_prod"
/>
<h3>Cappuccino</h3>
<p>Des solicitat de doamne...</p>
</a>
</div>
<div class="card">
<a href="pages/latte.html">
<img src="images/latte.jpg" alt="latte" class="photo_prod" />
<h3>Latte</h3>
<p>Produsul des întrebat de domnisoare...</p>
</a>
</div>
<div class="card">
<a href="pages/espresso.html">
<img src="images/espresso.jpeg" alt="espresso" class="photo_prod" />
<h3>Espresso</h3>
<p>Produsul este des cumpărat de bărbați...</p>
</a>
</div>
</div>
</div>

<hr id="contacts" />
<br>
<div class="contacts">
<h2>Cum ne găsiți?</h2>
<div class="coord">
<div class="blok_coord">
<div>
<span class="ico1"><i class="fa fa-map-marker"></i></span>
</div>
<div class="txt">
<p>strada Bucuriei 77</p>
</div>
</div>
<div>
<span class="ico"><i class="fa fa-at"></i></span>
</div>
<div class="txt">
<p>time@gmail.com</p>
</div>
</div>
<div>
<span class="ico"><i class="fa fa-phone"></i></span>
</div>
<div class="txt">
<p>033778899</p>
</div>
</div>
</div>
<div class="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!
1d2717.818045302383!2d28.865162315132057!3d47.063419533335676!2m3!1f0!2f0!
3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!
1s0x40c97cdfd5ea1de7%3A0x41e815fb62f45930!2sTekwill!5e0!3m2!1sen!2s!
4v1575620242119!5m2!1sen!2s" width="95%" height="250"
frameborder="0" allowfullscreen=""></iframe>
</div>
</div>

<div class="footer">
<h3><span class="copy">©</span> Copy <span id="year"></span></h3>
<p>author@mail.com, 077668899</p>
</div>
<script src="js/script_slider.js"></script>
</body>
</html>
Voi descrie succint elementele incluse în containerul HEAD. Presupun că primele

elemente din el îți sunt clare. Dar ce e cu aceasta linie? Ceva nou, nu?
Am inclus-o pentru a putea utiliza în pagină un font mai deosebit, pe care l-am importat
de la resursa specificată în link. Poți încerca să imporți și alte fonturi și să urmărești cum
se schimbă textul din pagină. Sper să obții rezultate bune...
Liniile pe care le vezi acum la ecran:
le-am inserat, pentru a prelua câteva iconițe simpatice de pe resursa fontawesome,
precum:
sau sau sau .

Le vei putea depista ușor în codul HTML – toate au specificate denumiri de clase mai
deosebite, printre care și cea cu denumirea ”fa”.
Sper că ai observat cu ochiul liber, că ultimele 3 iconițe au și o stilizare suplimentară, pe
care o vei regăsi în fișierul de stiluri, alături de alte stilizări ale elementelor din pagină.
Legătura cu fișierul de stiluri am realizat-o în această linie:
<link rel="stylesheet" type="text/css" href="css/styles.css" />
Restul elementelor din codul HTML, presupun că sunt clare, deoarece toate au fost
cumva utilizate, ca și exemple, în cadrul lecțiilor 3-20.
Sper că ai observat în cod, că am realizat referințe la 3 documente web, ce sunt păstrate
în mapa ”pages”. Voi prezenta în continuare la ecran structura unuia dintre ele,
cappuccino.html – celelalte două documente au fost realizate în mod analogic ca
structură – diferă doar conținutul textual și imaginile – analizează atent codul!
<!DOCTYPE html>
<html>
<head>
<title>CoffeeTime</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="shortcut icon" type="image/x-icon" href="../images/
favicon.png" />
<link rel="stylesheet" type="text/css" href="../css/styles.css" />
<script src="../js/scripts.js"></script>
</head>
<body onload="getYear()">
<div class="header">
<div class="logo">
<img src="../images/logo.png" alt="Logo" />
</div>
<div class="nav" id="myNav">
<a href="../index.html">CoffeeTime</a>
<a href="latte.html">Latte</a>
<a href="espresso.html">Espresso</a>
<a href="javascript:void(0);" class="icon" onclick="responsiveMenu()"><
i class="fa fa-bars"></i></a>
</div>
</div>

<hr id="about" />
<div class="about_capp">
<h1 class="text-center">Cappuccino</h1>
<img src="../images/cappuccino2.jpg" alt="Cappuccino image" class="img-
details left-float" />
<p>Cafeaua cu lapte, are o istorie veche de sute de ani. Inițial, oamenii
obișnuiau să consume cafeaua neagră, simplă, preparată doar cu apă fierbinte
și boabe de cafea măcinate. Odată ajunsă în Imperiul Otoman, aroma cafelei a
fost amplificată de tot felul de condimente, printre care scorțișoară, cuișoa
re, anason sau cardamon.</p>
<img src="../images/cappuccino1.jpeg" alt="Cappuccino image" class="img-
details right-float" />
<p>Cappuccino este o băutură foarte populară, ce conține un amestec simpl
u de espresso, lapte fiert și spuma de lapte. Cappuccino există de peste 100
de ani și este foarte cunoscut în Europa din momentul în care a aparut pe pia
ta espressorul.</p>
<p>La prepararea unui cappuccino ai posibilitatea de a alege cantitatea d
e lapte adaugată, spuma sau cantitatea de espresso dorită. Daca vrei sa iti f
aci un cappuccino si mai gustos, poti adauga peste spuma de lapte putina cioc
olata rasa sau scortisoara.</p>
</div>

<div class="footer">
<h3><span class="copy">©</span> Copy <span id="year"></span></h3>
<p>author@mail.com, 077668899</p>
</div>
<script src="../js/script_slider.js"></script>
</body>
</html>
Să vedem acum conținutul fișierului de stiluri, care este păstrat în mapa ”css”,
css/styles.css:
/* latin */
@font-face {
font-family: 'Montserrat';
src: url(../fonts/Montserrat.woff2);
}
/* latin extended */
@font-face {
font-family: 'Montserrat';
src: url(../fonts/Montserrat-extended.woff2);
}
/* latin extended */
@font-face {
font-family: Croissant;
font-style: normal;
font-weight: 400;
src: url(../fonts/Croissant.ttf);
}
body {
padding:0;
margin:0;
width:100%;
background: #FFF8DC;
font-family: Montserrat;
font-size: 1.3rem;
height: 100%;
}
* {box-sizing:border-box}
hr {
border: none;
}
.header{
position: fixed;
top:0;
z-index: 3;
width: 100%;
display: flex;
flex-flow: row wrap;
justify-content: center;
background-color: #1a0000;
margin:0;
padding:0;
}
.logo{
margin:0;
padding:0;
}
.logo img {
max-height: 70px;
}
.nav {
margin: 0;
padding: 0;
overflow: hidden;
width:70%;
}
.header a:link {
font-weight: bold;
font-size: 1em;
}
a:link {
float: left;
display: block;
color: #F5DEB3;
padding: 0px 24px;
margin-top:28px;
margin-bottom:10px;
text-decoration: none;
font-size: 20px;
-webkit-transition: color 1s; /* Safari */
transition: color 1s;
}
a:visited {
color: #DEB887;
}
a:hover {
color: #BC8F8F;
text-shadow: 1px 1px #DEB887;
-webkit-transition: color 1s; /* Safari */
transition: color 1s;
}
.nav .icon {
display: none;
}
@media screen and (max-width: 800px) {
.cards_prod {
display: flex;
flex-flow: column wrap;
align-items: center;
padding: 0;
margin-left: 5%;
margin-right: 5%;
}
.cards_prod .card {
width: 85%;
}
.contacts .coord {
width: 100%;
font-size: 1.1rem;
font-weight: bold;
margin-bottom: 30px;
}
.contacts .map {
width: 100%;
padding:0;
}
}
@media screen and (max-width: 890px) {
.nav a:not(:first-child) {display: none;}
.nav a.icon {
float: right;
display: block;
}
.nav.responsive {position: relative;}
.nav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.nav.responsive a {
float: none;
display: block;
text-align: left;
}
}
@media (min-width: 300px) {
.orar{
font-size:0.7rem;
}
.slideshow-container{
width: 80%;
height: 45vh;
}
.about_capp .img-details {
width: 50%;
}
}
.orar {
font-size:1.2rem;
}
.main-paragraph {
max-width:100%;
}
width: 65%;
height: 50vh;
}
}
.main-paragraph {
max-width:80%;
}
height: 60vh;
}
width: 30%;
}
}
.orar {
font-size:1.7rem;
}
height: 85vh;
}
}
/*slider*/
.slideshow-container {
color: #FFF8DC;
position: relative;
margin: 95px auto 5px;
opacity: 1;
filter: alpha(opacity=100);
padding:0;
border: 3px solid lightgrey;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.7);
}
.slideshow-container:hover {
opacity: 0.9;
}
.slide {
display: none;
height: 100%;
}
.slide img {
margin:0;
width:100%;
height:100%;
}
.text {
font-size: 1.7rem;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
font-weight: bold;
}
.numbertext {
font-size: 1rem;
padding: 8px 12px;
position: absolute;
top: 20px 50px;
}
.orar{
width:100%;
height:100%;
text-align: center;
font-weight: bold;
padding: 5px;
background: #1a0000;
}
.anim {
-webkit-animation-name: anim;
-webkit-animation-duration: 2s;
animation-name: anim;
animation-duration: 2s;
}
@-webkit-keyframes anim {
from {opacity: 0.8; transition: 2s;}
to {opacity: 1}
}
@keyframes anim {
from {opacity: .8; transition: 2s;}
to {opacity: 1}
}
/*sfarsit animatie */
/*despre produse*/
.about {
width: 95%;
height: auto;
opacity: 1;
margin: 0 auto;
color: #1a0000;
text-align: center;
padding: 10px;
border-radius: 10px;
}
.products {
width: 100%;
background: #1a0000;
opacity: 0.9;
margin: 0 auto;
color: #FFF8DC;
border-radius: 0;
}
.description_prod {
width: 90%;
padding: 10px;
font-size: 20px;
margin: 0 auto ;
text-align: center;
}
.cards_prod {
display: flex;
align-items: top;
max-width:100%;
padding-left: 2%;
}
.card {
width: 33%;
padding: 5px;
margin: 0;
}
.cards_prod .photo_prod {
max-width: 100%;
max-height: 265px;
border: 2px dotted #A0522D;
box-shadow: 2px 3px 5px #D2B48C;
border-radius:0;
box-shadow: 0 10px 15px 0 rgba(200, 0, 0, 0.2), 0 12px 20px 5px rgba(100,
0, 0, 0.22);
-webkit-filter: inherit;
filter: inherit;
transition: all 1s;
}
.cards_prod .photo_prod:hover {
-webkit-transition: filter 1s;
transition: filter 1s;
box-shadow: 5px 15px 25px 0 rgba(0, 0, 0, 0.2), 0 15px 25px 5px rgba(0,
0, 0, 0.22);
-webkit-filter: contrast(200%);
filter: contrast(200%);
}
.description_prod h1, .cards_prod h3, .cards_prod p {
text-align: center;
}
/*modulul Contacte*/
.contacts{
width: 90%;
margin: 10px auto;
height: 380px;
color: #1a0000;
opacity: 0.97;
padding:10px 20px;
padding: 0;
}
.contacts .coord {
float:left;
width: 100%;
font-size: 1.3rem;
font-weight: bold;
}
.contacts .map {
width: 100%;
float: right;
padding:0;
}
.contacts h2 {
text-align: center;
}
.contacts .txt {
padding-left: 20px;
padding-top:5px;
}
.blok_coord {
display: flex;
justify-content: flex-start;
}
.blok_coord span {
font-size: 1.3rem;
color: #1a0000;
padding-right: 30px;
}
.coord .ico{
background-color: #DEB887;
padding: 10px 20px;
box-shadow: 5px 15px 25px 0 #DEB88a, 10px 15px 25px 5px #DEB8fa;
border-radius:50%;
opacity: 0.35;
}
.coord .ico1{
padding: 10px 25px;
border-radius:50%;
opacity: 0.35;
}
.contacts .coord {
float:left;
width: 40%;
font-size: 1.3rem;
font-weight: bold;
}
.contacts .map {
width: 60%;
float: right;
padding:0;
}
.contacts h2 {
text-align: center;
}
.contacts .txt {
padding-left: 20px;
padding-top:5px;
}
.blok_coord {
display: flex;
justify-content: flex-start;
}
.blok_coord span {
font-size: 2rem;
color: #1a0000;
padding-right: 30px;
}
.coord .ico{
padding: 10px 20px;
border-radius:50%;
opacity: 0.35;
}
.coord .ico1{
padding: 10px 25px;
border-radius:50%;
opacity: 0.35;
}
}
.footer{
clear: both;
text-align: center;
width: 100%;
margin:0;
padding:5px 0;
color: #F5DEB3;
height: auto;
}
/* stilurile pentru paginile aditionale*/
.copy {
font-size: 3rem;
}
.about_capp {
width: 100%;
min-height: 90vh;
opacity: 1;
margin: 75px auto;
color: #1a0000;
padding: 5px 20px;
}
margin:10px 25px;
height: auto;
border:3px solid lightgray;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.7);
}
.left-float {
float:left;
}
.right-float {
float:right;
}
.about_capp p {
padding: 5px 15px;
}
.slide img {
display: block;
}
.main-paragraph {
margin-top:10px;
text-align:left;
margin:auto;
}
.text-paragraph {
background-color: #EAE5D3;
border: 2px solid lightgrey;
padding: 10px;
}
p {
line-height: 30px;
}
.margin-bottom-15 {
}
h1,
h2,
h3,
h4,
h5,
h6 {
}
.text-center {
text-align: center;
}
.product-text {
min-height:100px;
}
Multișoare proprietăți...nu-i așa?..

(Rezultatul - în filmulețul html_css.mp4).
Ar fi bine să remarci că meniul, pe ecran mic, încă nu este expandabil fără JavaScript...De
asemenea sliderul nu este funcțional – îl voi anima cu un script.... nu apare încă anul în
footer... dar ne descurcăm curând și cu aceasta 😊
Să revedem ce am învățat în cadrul acestei lecții:

- atunci când ne propunem să creăm un proiect web, vom defini codurile HTML într-un
fișier distinct de stiluri;
- stilurile pentru paginile site-ului vor fi definite în alte fișiere, creându-se cu ele legături
în fișierul .html, prin intermediul elementului LINK;
- dacă va fi necesar să fie utilizate fonturi din exterior sau iconițe, se vor crea legăturile
cu resursele web corespunzătoare, utilizându-se referințe absolute.
La lecția următoare vom trece la un alt modul al acestui curs – JavaScript – un limbaj de
programare, ce poate fi utilizat pentru a adăuga unele elemente dinamice și mici
funcționalități, ce se execută în browser. Ne reauzim curând. Pa-pa!

Lectie21 CSS

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Lectie21 CSS

Încărcat de

Drepturi de autor:

Formate disponibile

Web design and development

Tema: Exemplu de creare și stilizare a unui site web

Voi descrie succint elementele incluse în containerul HEAD. Presupun că primele

sau sau sau .

Multișoare proprietăți...nu-i așa?..

Să revedem ce am învățat în cadrul acestei lecții:

S-ar putea să vă placă și