Feature/testimonianze covid sostienici

front-page.php

@@ -1,3 +1,88 @@
-<?php
+<?php get_header(); ?>
 
-?>
+<section class="testimonianze">
+    <div class="title" title>Alcune testimonianze</div>
+    <div class="testimonianze-section">
+        <div class="prospect">
+            <div class="avatar">
+                <img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/3050b8e95d3a8f4eb34f5a4c97bb9b7e.png" class="profile">
+            </div>
+            <div class="avatar-flag">
+                <img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/index.png" class="flag">
+                <p>Egypt</p>
+            </div>
+            <div class="story">
+                <h4 class="name">Ahmad Muhammad</h4>
+                <p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisi lacus, varius non ipsum vel, pharetra luctus tellus.”</p>
+            </div>
+        </div>
+        <div class="prospect">
+            <div class="avatar">
+                <img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/b3bcf0457cc5b06dba97c849b293fb6a.jpg" class="profile">
+            </div>
+            <div class="avatar-flag">
+                <img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/pe-flag-min.jpg" class="flag">
+                <p>Peru</p>
+            </div>
+            <div class="story">
+                <h4 class="name">Juan Diego Gutierrez</h4>
+                <p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisi lacus, varius non ipsum vel, pharetra luctus tellus.”</p>
+            </div>
+        </div>
+        <div class="prospect">
+            <div class="avatar">
+                <img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/a9148b1c2728e93a98d285f9616d8ec6.png" class="profile">
+            </div>
+            <div class="avatar-flag">
+                <img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/ecuador.png" class="flag">
+                <p>Ecuador</p>
+            </div>
+            <div class="story">
+                <h4 class="name">Paulina Obando</h4>
+                <p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisi lacus, varius non ipsum vel, pharetra luctus tellus.”</p>
+            </div>
+        </div>
+    </div>
+    <button class="btn" type="button">Iscriviti</button>
+
+</section>
+
+<section class="covid-19">
+    <div class="container">
+        <div class="title" title>Covid-19</div>
+        <div class="row">
+            <img src="<?php echo get_stylesheet_directory_uri();?>/assets/images/undraw_social_distancing_2g0u 2.png" alt="">
+            <div class="group-text">
+                <div class="paragraph1">
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu interdum leo. Aenean diam mauris, congue non porta tincidunt, venenatis sed quam. Aliquam vestibulum eros sit amet fringilla finibus. Integer et lacinia tortor. Maecenas vitae velit ac sapien consequat fermentum. Nulla ut dui ut arcu auctor rhoncus. Pellentesque augue orci, faucibus non augue quis, rhoncus ornare nulla.</p>
+                </div>
+                <div class="paragraph2">
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu interdum leo. Aenean diam mauris, congue non porta tincidunt, venenatis sed quam. Aliquam vestibulum eros sit amet fringilla finibus. Integer et lacinia tortor. Maecenas vitae velit ac sapien consequat fermentum. Nulla ut dui ut arcu auctor rhoncus. Pellentesque augue orci, faucibus non augue quis, rhoncus ornare nulla.</p>
+                </div>    
+            </div>
+        </div>
+        <div class="btn-section">
+            <button class="btn" type="button">Scopri l'offerta formativa</button>
+        </div>
+    </div>
+
+</section>
+
+
+<section class="sostienici">
+    <div class="container">
+    <div class="group">
+        <div class="title" title>Sostienici</div>
+
+        <div class="row">
+            <div class="paragraph">
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu interdum leo. Aenean diam mauris, congue non porta tincidunt, venenatis sed quam. Aliquam vestibulum eros sit amet fringilla finibus. Integer et lacinia tortor. Maecenas vitae velit ac sapien consequat fermentum. Nulla ut dui ut arcu auctor rhoncus. Pellentesque augue orci, faucibus non augue quis, rhoncus ornare nulla.</p>
+                <button class="btn" type="button">Dona</button>
+            </div> 
+
+            <img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/undraw_treasure_of9i%201.png">
+
+        </div>
+    </div>
+    </div>
+</section>

styles/front-page.css

@@ -1,5 +1,258 @@
+@import url('//db.onlinewebfonts.com/c/edeb336ecd776e23d99355eb2b52cbc7?family=NeuzeitGroteskW01-Regular');
+@import url('//db.onlinewebfonts.com/c/3b51be541e8086f75a52deac06dba6ee?family=NeuzeitGroteskCondW01-Black');
+
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
+}
+
+.testimonianze{
+    margin-top: 20px; 
+    margin: 80px;
+    text-align: center;
+}
+.testimonianze .title{
+    text-align: left;
+    margin-bottom: 169px;
+    font-style: normal;
+    font-weight: 900;
+    line-height: 50px;
+    font-size: 44px;
+}
+
+.testimonianze-section{
+    display: flex;
+    text-align: center;
+    margin-left: 85px;
+}
+
+.testimonianze-section .prospect{
+    flex-direction: wrap;
+    flex-wrap: wrap;
+    width: 310px;
+    height: 554px;
+    background: #FFFFFF;
+    box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.25);
+    border-radius: 10px;
+    margin: 0 50px 0 0;
+    text-align: center;
+}
+
+.testimonianze-section .avatar img{
+
+     width: 170px;
+    height: 170px;
+    border-radius: 999px;
+    margin-top:42px;
+    left: 70px;
+    right: 70px;
+    cursor: pointer;
+}
+.testimonianze-section .avatar-flag img{
+    cursor: pointer;
+    margin-left:142px;
+    margin-right: 142px;
+    margin-top: 17.67px;
+    width: 26px;
+    height:17.32px;
+}
+.testimonianze-section .avatar-flag p{
+    margin-top: 9.01px;
+    margin-bottom: 10px;
+
+    font-style: normal;
+    font-weight: normal;
+    font-size: 20px;
+    line-height: 22px;
+    text-align: center;
+
+    color: #303030;
+}
+.testimonianze-section .story h4{
+    text-align: center;
+    font-style: normal;
+    font-weight: 900;
+    font-size: 20px;
+    line-height: 23px;
+}
+.testimonianze-section .story p{
+    margin-left: 26.5px;
+    margin-right: 26.5px;
+    margin-bottom: 113px;
+    padding-top: 20px;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 18px;
+    line-height: 30px;
+
+    /* or 167% */
+
+    color: rgba(48, 48, 48, 0.75);
+}
+
+.testimonianze .btn{
+    margin-top: 140px;
+    width: 200px;
+    height: 77px;
+    background-color: #646464;
+    color: white;
+    font-size: 28px;
+    border-radius:8px;
+    border: 2px solid black;
+    margin-bottom: 265px;
+    cursor: pointer;
+
+}
+@media screen and (max-width: 600px) {
+    .testimonianze .text h4{
+        text-align: center;
+        font-size:46px;
+    }
+
+}
+
+
+/* -- covid 19 section -- */
+.covid-19 {
+    margin-bottom: 290px;
+}
+.covid-19 .container{
+    margin: 80px;
+    grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
+    grid-gap: 20px;
+}
+
+.covid-19 .title{
+    margin-bottom: 92px;
+    padding-left: 30px;
+    font-style: normal;
+    font-weight: 900;
+    line-height: 50px;
+    font-size: 44px; 
+}
+.covid-19 .row{
+    display: flex;
+}
+
+.covid-19 .row img{
+    width: 617px;
+    height: 524px;
+    padding-left: 30px;
+    margin-top: 190px;
+}
+.covid-19 .group-text{
+    font-style: normal;
+    font-weight: normal;
+    line-height: 30px;
+    margin-bottom: 80px;
+    text-align: justify;
+    font-size: 24px;
+    padding-left: 120px;
+}
+.group-text .paragraph1{
+    padding-bottom: 126px;
+}
+.btn-section{
+    text-align: center;
+    margin-top: 126px;
+}
+.covid-19 .btn{
+    width: 376px;
+    height: 77px;
+    background-color: #646464;
+    color: white;
+    font-size: 28px;
+    font-weight: 500;
+    border: 2px solid black;
+    border-radius: 8px;
+    cursor: pointer;
+}
+@media screen and (min-width: 600px){
+
+}
+@media screen and (max-width: 600px) {
+    .covid-19{
+        flex-direction: column;
+    }
+    .covid-19 .row img{
+        width: 330px;
+        height: 283px;
+        padding-left: 42px;
+        margin-top: 46px;
+        margin-bottom: 70px;
+    }
+
+}
+
+
+/* -- sostienici section -- */
+
+.sostienici .container{
+    margin: 80px;
+}
+.sostienici{
+    margin-bottom: 250px;
+}
+.sostienici .group{
+    margin-bottom: 20px;
+}
+.sostienici .title{
+    font-style: normal;
+    font-weight: 900;
+    line-height: 50px;
+    font-size: 44px;
+}
+.sostienici .row{
+    margin-top: 36px;
+}
+.sostienici .row .paragraph{
+    float: left;
+    width: 700px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 30px;
+    margin-top: 100px;
+    text-align: justify;
+    font-size: 24px;
+    padding-right:80px;
+}
+.sostienici .btn{
+    width: 184px;
+    height: 67px;
+    background-color: orange;
+    color: white;
+    font-size: 25px;
+    font-style: normal;
+    border-radius: 8px;
+    margin-top: 60px;
+    cursor: pointer;
+}
+.sostienici .row img{
+    margin-top: 50px;
+    width: 482px;
+    height: 410px;
+}
+
+.sostienici .row .paragraph p{
+    padding-right: 100px;
+}
+
+@media (max-width: 600px) {
+    .sostienici .text h4{
+        text-align: center;
+        font-size: 46px;
+    }
+
+    .sostienici .row img{
+
+        float: top;
+        width: 352px;
+        height: 300px;
+        left: 31px;
+        top: 4839px;
+    }
+    .sostienici .row .paragraph{
+        float: bottom;
+    }
 }