diff --git a/AcceuilFrancais.html b/AcceuilFrancais.html new file mode 100644 index 00000000..1dcd3636 --- /dev/null +++ b/AcceuilFrancais.html @@ -0,0 +1,130 @@ + + + + + + + + CovidMaroc + + + + +
+ + +
+ Conseil + Accueil + عربي +
+ +
+
+
+

LA DERNIÈRE INFO MÉDICALE

+

+ La prise d'anti-inflammatoires (ibuprofène, cortisone ...) pourrait être un facteur
+ d'aggravation de l’infection. En cas de fièvre, prenez du paracétamol.
+ N'arrêtez pas votre traitement ! Consultez votre médecin ou votre pharmacien +

+
+
+
+ +
+
+

Vous pensez avoir été exposé au

+

Coronavirus COVID-19 et avez des symptômes ?

+ +

+ Je reste vigilant ?
+ Je programme une téléconsultation ?
+ J'appelle le 15 ?
+ Faites le test pour répondre en citoyen
+ éclairé selon vos symptômes.
+

+ +
+
+
+

Quels sont les symptômes à surveiller ?

+ +
+ +

Fièvre

+
+ +
+ +

Nauséeset
vomissements

+
+ +
+ +

Gêne
respiratoire

+
+ +
+ +

Toux
et maux de gorge

+
+ +
+ +
+

Recommandations officielles

+
+
+ Si vous pensez être malade,
+ évitez les endroits publics.
+ Ne rendez pas visite aux personnes fragiles.
+ Évitez de sortir de chez vous.
+ Respectez les mesures barrière (lavage de main, masque).
+ Surveillez vos symptômes, l’évolution de votre température
+ corporelle et recherchez un avis médical.
+
+ +
+
+ + + +
+ + + \ No newline at end of file diff --git a/Design/Assets/SVG/Group_80.png b/Design/Assets/SVG/Group_80.png new file mode 100644 index 00000000..9f60a134 Binary files /dev/null and b/Design/Assets/SVG/Group_80.png differ diff --git a/Design/Assets/SVG/Groupe 137.png b/Design/Assets/SVG/Groupe 137.png new file mode 100644 index 00000000..fb2a2c67 Binary files /dev/null and b/Design/Assets/SVG/Groupe 137.png differ diff --git a/Design/Assets/SVG/Path_871.png b/Design/Assets/SVG/Path_871.png new file mode 100644 index 00000000..52af9026 Binary files /dev/null and b/Design/Assets/SVG/Path_871.png differ diff --git a/Design/Assets/SVG/globe.svg b/Design/Assets/SVG/globe.svg new file mode 100644 index 00000000..4c609fa5 --- /dev/null +++ b/Design/Assets/SVG/globe.svg @@ -0,0 +1,2 @@ + + diff --git a/Design/Assets/png/ConseilArabe.png b/Design/Assets/png/ConseilArabe.png new file mode 100644 index 00000000..d04f25f5 Binary files /dev/null and b/Design/Assets/png/ConseilArabe.png differ diff --git a/Design/Assets/png/ConseilFrancais.png b/Design/Assets/png/ConseilFrancais.png new file mode 100644 index 00000000..4ff15ca7 Binary files /dev/null and b/Design/Assets/png/ConseilFrancais.png differ diff --git a/Design/Assets/png/figure.png b/Design/Assets/png/figure.png new file mode 100644 index 00000000..6e9e387c Binary files /dev/null and b/Design/Assets/png/figure.png differ diff --git a/Starter-file/dist/css/style.css b/Starter-file/dist/css/style.css deleted file mode 100644 index e69de29b..00000000 diff --git a/Starter-file/dist/index.html b/Starter-file/dist/index.html deleted file mode 100644 index e69de29b..00000000 diff --git a/Starter-file/sass/fichier.scss b/Starter-file/sass/fichier.scss deleted file mode 100644 index e69de29b..00000000 diff --git a/css/style.css b/css/style.css new file mode 100644 index 00000000..d6bcb8d6 --- /dev/null +++ b/css/style.css @@ -0,0 +1,273 @@ +@import 'https://fonts.googleapis.com/css2?family=Cairo:wght@700&family=Exo+2&display=swap'; +* { + box-sizing: border-box; + margin: 0px; + padding: 0px; + font-size: 16px; + font-family: "Cairo", sans-serif; + font-weight: 700; +} +* body header { + background-color: #96c5dc; + position: fixed; + display: flex; + justify-content: space-between; + width: 100%; + height: 100px; + background-image: url("../../../Design/Assets/SVG/Merged bar-1.svg"); + padding: 10px; +} +* body header div #lange1 { + padding-left: 10px; + padding-right: 10px; + background-color: transparent; + border-radius: 10px; + color: #1a519e; + border: 1px solid #1a519e; + margin: 20px; + font-size: 20px; + text-decoration: none; + outline: 0; + cursor: pointer; +} +* body header div .Conseil__header { + margin: 20px; + font-size: 26px; + text-decoration: none; + color: black; +} +* body header div .Acceil__header { + margin: 20px; + font-size: 26px; + text-decoration: none; + color: #1a519e; +} +* body #general { + position: absolute; + top: 100px; + z-index: -10; +} +* body #general #section1 { + width: 100%; + height: 160px; + background-image: url("../../../Design/Assets/SVG/En chiffres-3.svg"); + background-repeat: no-repeat; + background-size: 120%; + background-position-x: -40px; + text-align: center; +} +* body #general #section1 #p__section1 { + width: 100%; + line-height: 30px; + margin: auto; + color: #1078ad; +} +* body #general #section2 { + padding: 20px; + display: flex; + justify-content: space-evenly; +} +* body #general #section2 #article1 #img__article1 { + width: 500px; + width: 550px; + margin: 10px; +} +* body #general #section2 #article2 { + padding: 20px; + text-align: center; + width: 550px; +} +* body #general #section2 #article2 .h1__article2 { + color: #1078ad; + font-size: 23px; +} +* body #general #section2 #article2 #p__article2 { + color: #7f7f7f; + font-size: 21px; + text-align: center; + line-height: 40px; +} +* body #general #section2 #article2 #demarer { + font-size: 23px; + cursor: pointer; + width: 500px; + height: 45px; + background-color: #1078ad; + color: white; + border-radius: 6px; + border: none; + outline: 0; + margin: 10px; +} +* body #general #section3 { + width: 500px; + text-align: center; + margin: auto; + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(3, 1fr); +} +* body #general #section3 #h1__section3 { + margin: auto; + color: #1078ad; + font-size: 23px; + grid-row: 1/2; + grid-column: 1/3; +} +* body #general #section3 #img1__section3 { + grid-row: 2/3; + grid-column: 1/2; +} +* body #general #section3 #img2__section3 { + grid-row: 2/3; + grid-column: 2/3; +} +* body #general #section3 #img3__section3 { + grid-row: 3/4; + grid-column: 1/2; +} +* body #general #section3 #img4__section3 { + grid-row: 3/4; + grid-column: 2/3; +} +* body #general #section4 { + background-color: #1078ad; + padding: 20px; +} +* body #general #section4 h1 { + font-size: 23px; + color: #dce7e7; + text-align: center; +} +* body #general #section4 div { + display: flex; + justify-content: space-around; +} +* body #general #section4 div #article1__section4 { + font-size: 20px; + color: white; +} +* body #general #section4 div #article1__section4 span { + font-size: 20px; + color: black; +} +* body #general #section4 div #article2__section4 { + text-align: center; + display: flex; + flex-direction: column; + justify-content: space-between; + padding: 40px; +} +* body #general #section4 div #article2__section4 #h21__article2 { + font-size: 20px; + color: #f4cf1b; +} +* body #general #section4 div #article2__section4 #h22__article2 { + font-size: 20px; + color: #1078ad; + background-color: #f4cf1b; + width: 200px; + padding: 10px; + border-radius: 6px; +} +* body #general #section4 div #article2__section4 a { + text-decoration: none; + color: white; + border-bottom: 1px solid #f4cf1b; +} +* body #general aside { + text-align: center; + padding: 10px; + background-color: #96c5dc; +} +* body #general aside h1 { + color: #1078ad; +} +* body #general aside button { + width: 400px; + background-color: #1078ad; + border: none; + border-radius: 6px; + color: white; + cursor: pointer; + outline: 0; +} +* body #general #footer1 { + width: 100%; + display: grid; + height: 400px; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(2, 1fr); + justify-content: center; + align-items: center; +} +* body #general #footer1 #img__footer1 { + text-align: center; + width: 100%; + grid-row: 1/2; + grid-column: 1/4; +} +* body #general #footer1 #div1__footer1 { + text-align: center; + grid-row: 2/3; + grid-column: 1/2; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} +* body #general #footer1 #div1__footer1 #lange2 { + padding-left: 10px; + padding-right: 10px; + background-color: transparent; + border-radius: 10px; + color: #1a519e; + border: 1px solid #1a519e; + margin: 20px; + font-size: 20px; + text-decoration: none; + outline: 0; + cursor: pointer; +} +* body #general #footer1 #div1__footer1 .Conseil__header { + margin: 20px; + font-size: 26px; + text-decoration: none; + color: black; +} +* body #general #footer1 #div1__footer1 .Acceil__header { + margin: 20px; + font-size: 26px; + text-decoration: none; + color: #1a519e; +} +* body #general #footer1 #div2__footer1 { + text-align: center; + line-height: 40px; + grid-row: 2/3; + grid-column: 2/3; +} +* body #general #footer1 #div2__footer1 #h21__div2__footer1 { + color: #1078ad; + font-size: 20px; +} +* body #general #footer1 #div2__footer1 .h22__div2__footer1 { + color: #369d53; + font-size: 20px; +} +* body #general #footer1 #p__footer1 { + grid-row: 2/3; + grid-column: 3/4; + width: 550px; + margin: 10px; + color: #7f7f7f; + font-weight: 100px; +} +* body #general #footer2 { + height: 60px; + background-image: url("../../../Design/Assets/png/En chiffres-30@2x.png"); + background-repeat: no-repeat; + background-size: 100%; +} + +/*# sourceMappingURL=style.css.map */ diff --git a/index.html b/index.html new file mode 100644 index 00000000..b4cb402b --- /dev/null +++ b/index.html @@ -0,0 +1,132 @@ + + + + + + CovidMaroc + + + +
+ + +
+ نصائح + الرئيسية + FRAN + + +
+ +
+
+
+

أخِر أخبار الطبية

+

+ فاش كناخدو الأدوية المضادة للالتهابات )الإيبوبروفين والكورتيزون..... ( تقدر تكون سبب في زيادة +
+ المرض +
+ إلى كانت فيك سخانة خود الباراسيتامول +
+ إلى كنت تحت علاج بالأدوية مضادة للالتهابات، فمن الأفضل تستاشر مع طبيب +

+
+
+
+ +
+
+

واش كتضن انك تعرضت لفيروس كورونا المستجد +

+

و عندك الأعراض ديالها؟

+ +

+ نبقا راد لبال؟
+ نستاشر عبر الهاتف مع الجهات المعنية؟
+ نعيط ل 141؟
+ دير الاختباروفقًا للأعراض ديالك باش ترتاح +

+ +
+
+
+

شنو هي الأعراض لواجب الانتباه ليها؟

+ +
+ +

الحمى

+
+ +
+ +

غثيان و التقيؤ

+
+ +
+ +

ضيق التنفسي

+
+ +
+ +

السعال و +
التهاب الحلق

+
+ +
+ +
+

التوصيات الرسمية

+
+ +
+ إذا كنت كتضن انك مريض فمن الاحسن +
    +
  • تبعد من البلايص العمومية
    • +
  • متزورجش ناس الضعفاء ) الناس الكبار او المرضى
    • +
  • بقا فدارك
    • +
  • التزم التعليمات لمفروضة : غسل يديك، ماسك
    • +
  • راقب أعراض ديالك والتغيرات في درجة حرارة في جسم ديالك واستشر مع طبيب
    • +
+
+
+
+ + + +
+ + \ No newline at end of file diff --git a/Starter-file/dist/js/script.js b/js/script.js similarity index 100% rename from Starter-file/dist/js/script.js rename to js/script.js diff --git a/sass/main.scss b/sass/main.scss new file mode 100644 index 00000000..f7d9fc90 --- /dev/null +++ b/sass/main.scss @@ -0,0 +1,286 @@ +@import 'https://fonts.googleapis.com/css2?family=Cairo:wght@700&family=Exo+2&display=swap'; + +@mixin lange{ + + padding-left:10px; + padding-right: 10px; + background-color: transparent; + border-radius: 10px; + color: rgb(26,81,158); + border: 1px solid rgb(26,81,158); + margin: 20px; + font-size: 20px; + text-decoration: none; + outline: 0; + cursor: pointer; +} + +@mixin Conseil{ + margin: 20px; + font-size: 26px; + text-decoration: none; + color: black; +} + +@mixin Acceil{ + margin: 20px; + font-size: 26px; + text-decoration: none; + color: rgb(26,81,158); + } + +*{ + box-sizing: border-box; + margin: 0px; + padding: 0px; + font-size: 16px; + font-family: 'Cairo',sans-serif; + font-weight: 700; + body{ + header{ + background-color: rgb(150,197,220);; + position: fixed; + display: flex; + justify-content: space-between; + width: 100%; + height: 100px; + background-image: url('../../../Design/Assets/SVG/Merged bar-1.svg'); + padding: 10px; + div{ + + #lange1{ + @include lange; + } + + .Conseil__header{ + @include Conseil; + } + + .Acceil__header{ + @include Acceil; + } + } + } + + #general{ + position: absolute; + top: 100px; + z-index: -10; + #section1{ + width: 100%; + height: 160px; + background-image: url('../../../Design/Assets/SVG/En chiffres-3.svg'); + background-repeat: no-repeat; + background-size: 120%; + background-position-x: -40px; + text-align: center; + #p__section1{ + width: 100%; + line-height: 30px; + margin: auto; + color: rgb(16,120,173); + } + } + #section2{ + padding: 20px; + display: flex; + justify-content: space-evenly; + #article1{ + #img__article1{ + width: 500px; + width: 550px; + margin: 10px; + } + } + #article2{ + padding: 20px; + text-align: center; + width: 550px; + .h1__article2{ + color: rgb(16,120,173); + font-size: 23px; + } + #p__article2{ + color: rgb(127,127,127); + font-size: 21px; + text-align: center; + line-height: 40px; + } + #demarer{ + font-size: 23px; + cursor: pointer; + width: 500px; + height: 45px; + background-color: rgb(16,120,173); + color: white; + border-radius: 6px; + border: none; + outline: 0; + margin: 10px; + } + } + } + #section3{ + width: 500px; + text-align: center; + margin: auto; + display: grid; + grid-template-columns: repeat(2,1fr); + grid-template-rows: repeat(3,1fr); + #h1__section3{ + margin: auto; + color: rgb(16,120,173); + font-size: 23px; + grid-row: 1/2; + grid-column: 1/3; + } + + #img1__section3{ + grid-row: 2/3 ; + grid-column: 1/2; + } + #img2__section3{ + grid-row: 2/3 ; + grid-column: 2/3 ; + + } + #img3__section3{ + grid-row: 3/4; + grid-column: 1/2; + + } + #img4__section3{ + grid-row: 3/4; + grid-column: 2/3 ; + + } + } + + #section4{ + background-color: rgb(16,120,173); + padding: 20px; + h1{ + font-size: 23px; + color: #dce7e7; + text-align: center; + } + div{ + display: flex; + justify-content: space-around; + #article1__section4{ + font-size: 20px; + color: white; + span{ + font-size: 20px; + color: black; + } + } + #article2__section4{ + text-align: center; + display: flex; + flex-direction: column; + justify-content: space-between; + padding: 40px; + #h21__article2{ + font-size: 20px; + color: rgb(244,207,27); + } + #h22__article2{ + font-size: 20px; + color: rgb(16,120,173); + background-color: rgb(244,207,27); + width: 200px; + padding: 10px; + border-radius: 6px; + } + a{ + text-decoration: none; + color: white; + border-bottom: 1px solid rgb(244,207,27); + } + } + } + } + aside{ + text-align: center; + padding: 10px; + background-color: rgb(150,197,220); + h1{ + color: rgb(16,120,173); + } + button{ + width: 400px; + background-color: rgb(16,120,173); + border: none; + border-radius: 6px; + color: white; + cursor: pointer; + outline: 0; + } + } + #footer1{ + width: 100%; + display: grid; + height: 400px; + grid-template-columns: repeat(3,1fr); + grid-template-rows: repeat(2,1fr); + justify-content: center; + align-items: center; + #img__footer1{ + text-align: center; + width: 100%; + grid-row: 1/2; + grid-column: 1/4; + } + #div1__footer1{ + text-align: center; + grid-row: 2/3; + grid-column: 1/2; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + #lange2{ + @include lange; + } + .Conseil__header{ + @include Conseil; + + } + .Acceil__header{ + @include Acceil; + } + } + #div2__footer1{ + text-align: center; + line-height: 40px; + grid-row: 2/3; + grid-column: 2/3; + #h21__div2__footer1{ + color: rgb(16,120,173); + font-size: 20px; + } + .h22__div2__footer1{ + color: rgb(54,157,83); + font-size: 20px; + } + } + #p__footer1{ + grid-row: 2/3; + grid-column: 3/4; + width: 550px; + margin: 10px; + color: rgb(127,127,127) ; + font-weight: 100px; + } + } + #footer2{ + height: 60px; + background-image: url('../../../Design/Assets/png/En chiffres-30@2x.png'); + background-repeat: no-repeat; + background-size: 100%; + } + } + } +} +