-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
- Loading branch information
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,51 @@ | ||
@import url("https://fonts.googleapis.com/css2?family=Bree+Serif&family=Caveat:wght@400;700&family=Lobster&family=Monoton&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display+SC:ital,wght@0,400;0,700;1,700&family=Playfair+Display:ital,wght@0,400;0,700;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&family=Source+Sans+Pro:ital,wght@0,400;0,700;1,700&family=Work+Sans:ital,wght@0,400;0,700;1,700&display=swap"); | ||
|
||
.bg-container { | ||
background-image: url('https://assets.ccbp.in/frontend/static-website/foundations-bg.png'); | ||
height: 50vh; | ||
width: 250vw; | ||
background-size: cover; | ||
} | ||
|
||
.bottom-section { | ||
padding: 15px; | ||
border-top-left-radius: 50px; | ||
border-top-right-radius: 50px; | ||
border-radius: 25px; | ||
} | ||
|
||
.heading { | ||
font-size: 25px; | ||
font-family: Roboto; | ||
color: #323f4b; | ||
font-weight: bold; | ||
} | ||
|
||
.description { | ||
font-family: Roboto; | ||
font-size: 15px; | ||
font-weight: 500; | ||
color: #7b8794; | ||
} | ||
|
||
.courses-card { | ||
width: 120px; | ||
padding: 15px; | ||
border-color: #cbd2d9; | ||
border-radius: 10px; | ||
border-width: 2px; | ||
border-style: solid; | ||
margin: 15px; | ||
} | ||
|
||
.courses-card-image { | ||
height: 50px; | ||
width: 50px; | ||
} | ||
|
||
.courses-name { | ||
font-family: Roboto; | ||
font-size: 15px; | ||
font-weight: bold; | ||
color: #323f4b; | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
|
||
<head> | ||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" /> | ||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> | ||
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> | ||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script> | ||
|
||
</head> | ||
|
||
<body> | ||
<div class="bg-container d-flex flex-column justify-content-end"></div> | ||
<div class="bottom-section"> | ||
<h1 class="heading">Foundations</h1> | ||
<p class="description">Learn courses that will help | ||
you move forward in your career</p> | ||
<div class="d-flex flex-row justify-content-center"> | ||
<div class="courses-card"> | ||
<img class="courses-card-image" src="https://assets.ccbp.in/frontend/static-website/foundations-python-img.png" alt="" /> | ||
<h1 class="courses-name">Python</h1> | ||
</div> | ||
<div class="courses-card"> | ||
<img class="courses-card-image" src="https://assets.ccbp.in/frontend/static-website/foundations-javascript-img.png" alt="" /> | ||
<h1 class="courses-name">Javascript</h1> | ||
</div> | ||
</div> | ||
<div class="d-flex flex-row justify-content-center"> | ||
<div class="courses-card"> | ||
<img class="courses-card-image" src="https://assets.ccbp.in/frontend/static-website/foundations-html5-img.png" alt="" /> | ||
<h1 class="courses-name">HTML 5</h1> | ||
</div> | ||
<div class="courses-card"> | ||
<img class="courses-card-image" src="https://assets.ccbp.in/frontend/static-website/foundations-java-img.png" alt="" /> | ||
<h1 class="courses-name">Java</h1> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
</body> | ||
|
||
</html> |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,148 @@ | ||
@import url("https://fonts.googleapis.com/css2?family=Bree+Serif&family=Caveat:wght@400;700&family=Lobster&family=Monoton&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display+SC:ital,wght@0,400;0,700;1,700&family=Playfair+Display:ital,wght@0,400;0,700;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&family=Source+Sans+Pro:ital,wght@0,400;0,700;1,700&family=Work+Sans:ital,wght@0,400;0,700;1,700&display=swap"); | ||
|
||
.covid-container { | ||
border-style: solid; | ||
border-color: #0967d219; | ||
border-width: 5px; | ||
margin: 10px; | ||
} | ||
|
||
.covid-header { | ||
background-color: #ffffff; | ||
padding: 15px; | ||
|
||
} | ||
|
||
.covid-heading-text { | ||
color: #0967d2; | ||
font-family: Roboto; | ||
font-size: 25px; | ||
font-weight: 500; | ||
} | ||
|
||
.button { | ||
background-color: #0967d2; | ||
color: #ffffff; | ||
font-family: Roboto; | ||
font-size: 15px; | ||
height: 30px; | ||
width: 100px; | ||
border-top-left-radius: 10px; | ||
border-top-right-radius: 10px; | ||
border-bottom-left-radius: 10px; | ||
border-bottom-right-radius: 10px; | ||
border-width: 0px; | ||
} | ||
|
||
.covid-card-container { | ||
background-color: #0967d219; | ||
padding: 10px; | ||
margin: 10px; | ||
border-radius: 25px; | ||
} | ||
|
||
.covid-card-heading { | ||
color: #0967d2; | ||
font-family: Roboto; | ||
font-size: 20px; | ||
font-weight: 400; | ||
padding: 5px; | ||
} | ||
|
||
.covid-card-description { | ||
color: #323f4b; | ||
font-family: Roboto; | ||
font-size: 15px; | ||
font-weight: 500; | ||
} | ||
|
||
.covid-card-image { | ||
width: 40px; | ||
height: 50px; | ||
margin: 10px; | ||
} | ||
|
||
.symptoms-container-heading { | ||
color: #323f4b; | ||
font-family: Roboto; | ||
font-size: 20px; | ||
padding: 15px; | ||
} | ||
|
||
.heading-videos { | ||
color: #323f4b; | ||
font-family: Roboto; | ||
font-size: 20px; | ||
padding: 15px; | ||
font-weight: 500; | ||
} | ||
|
||
.covid-card-text-container { | ||
padding: 5px; | ||
} | ||
|
||
.image1 { | ||
background-color: #3ebd93; | ||
width: 40px; | ||
height: 40px; | ||
margin: 10px; | ||
} | ||
|
||
.heading { | ||
color: #323f4b; | ||
font-family: Roboto; | ||
margin: 15px; | ||
|
||
} | ||
|
||
.cough-img { | ||
background-color: #3ebd93; | ||
margin: 10px; | ||
padding: 15px; | ||
border-radius: 5px; | ||
} | ||
|
||
.fever-img { | ||
background-color: #e668a7; | ||
margin: 10px; | ||
padding: 15px; | ||
border-radius: 5px; | ||
} | ||
|
||
.headache-img { | ||
background-color: #0967d2; | ||
margin: 10px; | ||
padding: 15px; | ||
border-radius: 5px; | ||
} | ||
|
||
.heading-videos { | ||
color: #323f4b; | ||
font-family: Roboto; | ||
font-family: 12px; | ||
padding: 15px; | ||
} | ||
|
||
.videos-card-container { | ||
background-color: #e12d3919; | ||
margin: 15px; | ||
} | ||
|
||
.doctor-image { | ||
width: 80px; | ||
height: 80px; | ||
padding: 15px; | ||
} | ||
|
||
.heading1 { | ||
color: #707070; | ||
font-family: Roboto; | ||
font-size: 20px; | ||
font-weight: 900; | ||
} | ||
|
||
.description1 { | ||
color: #707070; | ||
font-family: Roboto; | ||
font-size: 15px; | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,60 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
|
||
<head> | ||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> | ||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> | ||
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> | ||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script> | ||
</head> | ||
|
||
<body> | ||
<div class="covid-container"> | ||
<div class="covid-header d-flex flex-row"> | ||
<div> | ||
<h1 class="covid-heading-text">All you need to know about COVID-19</h1> | ||
<button class="button">Know more</button> | ||
</div> | ||
<img class="covid-container-image" src=" https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/medicalcare-img.png" alt="" /> | ||
</div> | ||
<div class="covid-card-container d-flex flex-row"> | ||
<div> | ||
<img class="covid-card-image" src=" https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/coronavirus-img.png" alt="" /> | ||
</div> | ||
<div class="covid-card-text-container"> | ||
<h1 class="covid-card-heading">COVID-19 Test</h1> | ||
<p class="covid-card-description">If you think you have | ||
exposed to novel coronavirus(COVID-19)...more</p> | ||
</div> | ||
</div> | ||
|
||
<h1 class="symptoms-container-heading">Symptoms</h1> | ||
|
||
<div class="d-flex flex-row"> | ||
<div class="drycough-container"> | ||
<img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/cough-img.png" alt="" class="cough-img" /> | ||
<p class="heading">Dry Cough</p> | ||
</div> | ||
<div class="fever-container"> | ||
<img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/fever-img.png" alt="" class="fever-img" /> | ||
<p class="heading">High Fever</p> | ||
</div> | ||
<div class="headache-container"> | ||
<img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/headache-img.png" alt="" class="headache-img" /> | ||
<p class="heading">Headache</p> | ||
</div> | ||
</div> | ||
|
||
<h1 class="heading-videos">Videos</h1> | ||
<div class="videos-card-container d-flex flex-row "> | ||
<img class="doctor-image" src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/doctor-img.png" alt="" /> | ||
<div class="text-container"> | ||
<h1 class="heading1">To prevent the spread of ...</h1> | ||
<p class="description1">If you think you have been exposed to novel corona virus (COVID-19)</p> | ||
<button class="button">Watch Video</button> | ||
</div> | ||
</div> | ||
</div> | ||
</body> | ||
|
||
</html> |