diff --git a/.gitignore b/.gitignore index 77c0335..e69de29 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +0,0 @@ -index.html -style.css \ No newline at end of file diff --git a/README.md b/README.md index f845eaa..57fe30c 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,7 @@ # ISA-HTML-CSS-PreAssignment +## https://resonant-medovik-701f36.netlify.app/ + ## Instructions - Follow the steps carefully to complete the assigments diff --git a/index.html b/index.html new file mode 100644 index 0000000..1ec9e0f --- /dev/null +++ b/index.html @@ -0,0 +1,164 @@ + + + + + + + PreAssignment + + + + + + + + + +
+ + + +
+ + +
+ + +
+

Meet Team Members

+
+ + + + + + + + + + + + + + + +
+
+ img1 +
+

Lisa Milton

+

Software Engineer

+

Australia

+
+
+ 		+
+ img1 +
+

Anisul Islam

+

Full-stack Web Developer

+

Bangladesh

+
+
+ 		+
+ img1 + +
+

Lisa Milton

+

Software Engineer

+

Australia

+
+
+
+
+ img1 + +
+

Anisul Islam

+

Full-stack Web Developer

+

Bangladesh

+
+
+ 		+
+ img1 +
+

Lisa Milton

+

Software Engineer

+

Australia

+
+
+ 		+
+ img1 +
+

Anisul Islam

+

Full-stack Web Developer

+

Bangladesh

+
+
+
+ +
+ +
+ + +
+

+

Tampere,Finland

+

+4054644994

+

+4054644994

+

+
+
+

About This Company

+

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Veniam ullam qui tenetur necessitatibus illo magnam harum sed cupiditate recusandae eum temporibus laudantium voluptatum hic velit, blanditiis officia. Modi, temporibus dignissimos.

+
+ + + + +
+ + + + + +
+ + + + + + +
+ + diff --git a/style.css b/style.css new file mode 100644 index 0000000..d0f604d --- /dev/null +++ b/style.css @@ -0,0 +1,291 @@ +/* reset and common code starts here */ + +*{ + box-sizing: border-box; + margin: 0; + padding: 0; + list-style-type: none; + text-decoration: none; + outline: none; + font-weight: 400; +} +html{ + background-color: #fafafa4d; + scroll-behavior: smooth; + font-size: 62.5%; + font-family: 'Times New Roman', Times, serif; +} +body{ + background-color: #fafafa; + width: 100rem; + max-width: 100%; + margin: auto; + box-shadow: 0.1rem 0.1rem 0.1rem #c4c4c4, -0.1rem 0rem 0.1rem #c4c4c4;; + +} + + + +.section-heahding{ + font-size: 4rem; + text-align: center; + +} +img{ + width: 100%; + height: 100%; + object-fit: cover; + + +} + +/* reset and common code ends here */ + +/* Header CSS Section Starts here */ + +header{ + display: flex; + justify-content: space-between; + align-items: center; + background-color: rgb(7, 35, 86); + color: #ffffff; + padding: 2rem 1rem; + position: sticky; + top: 0%; + z-index: 10; + min-height: 5vh; + + +} +nav ul{ + display: flex; + gap: 8rem; + + + +} +nav ul li{ + padding: 0.5rem; + transition: all 0.3s; +} +nav ul li:hover{ + background-color: aqua; + border-radius: 0.6rem; + + +} +.nav__link{ + font-size: 2rem; + color: #fff; + cursor: pointer; + /* margin: 5.5rem; */ + +} +#nav-icon{ + margin-left: 18rem; + justify-content: center; + border-radius: 0.6rem; +} +/* * /header CSS section ends here */ */ + + +/* Team Members section statrs here */ + + +.team__member{ + display: flex; + flex-direction: column; + +} +.section-container{ + display: flex; + justify-content: space-evenly; + align-items: center; + background-color: rgba(105, 105, 105, 0.863); +} +.members__details{ + display: flex; + text-align: center; + + +} +.container{ + position: relative; + +} + + +.member-image{ + width: 100%; + height: 100%; + /* padding: 0.5rem; */ + padding: 0.2rem; + + +} +.personal-details{ + background-color: rgb(10, 142, 98); + padding: 0.5; + margin: 0.2rem; + position: absolute; + left: 0px; + bottom: 0px; + right: 0px; + color:black; + font-weight: bold; +} +/* Team Members section ends here */ + +/* footer section starts here */ + +#footer-icon{ + display: flex; + gap: 2rem; + text-align: center; + justify-content: center; + padding: 20px; + float: left; + margin-top: 2rem; + + + + +} +.footer{ + background-color: rgb(7, 35, 86); + color: #fff; + text-align:center; + justify-content:space-between; + margin-top: 1rem; + width: 100%; + height: 100%; + margin-bottom: 2rem; + left: 0; + right: 0; + padding: 0.5rem; + +} +.footer__para{ + display: flex; + font-size: 1.5rem; + gap: 0.5rem; + flex-direction: column; + text-align: center; + align-items:center; + justify-content: center; + padding: 10px; + float: left; + + + +} + +.about-company{ + font-size: 1.6rem; + font-weight: bold; + padding: 0.2rem; + margin: 1rem 0; + gap: 1rem; + text-align:center; + align-items: center; + + + + +} +.para{ + padding: 0.2rem ; + font-size: 1.2rem; + display: flex; + flex-direction: column; + text-align: justify; + align-items: center; + + + + +} +.footer-nav{ + font-size: 1.5rem; + gap: 1rem; + + +} +.footer__link{ + color: orange; + transition: all 0.3s; + +} +.footer__link :hover{ + color: #fff; + transform: scale(2); +} + +/* footer section ends here */ + + + +/* Responsiveness starts here */ + +@media screen and (max-width:992px){ + .members__detail{ + width: 50%; + display: flex; + flex-direction: column; + align-items: center; + margin-bottom: 1rem; + + + + } +} + +@media screen and (max-width:768px){ + html{ + font-size: 55.5%; + } + + .members__detail{ + width: 80%; + display: flex; + flex-direction: column; + align-items: center; + margin-bottom: 1rem; + +} + .footer{ + width: 80%; + display: flex; + flex-direction: column; + } +} +@media screen and (max-width:600px){ + html{ + font-size: 48.5%; + } + header{ + flex-direction: column; + } + nav ul{ + flex-direction: column; + gap: 2rem; + } + .members__detail{ + width: 90%; + display: flex; + flex-direction: column; + align-items: center; + margin-bottom: 1rem; + +} +.footer{ + width: 90%; + display: flex; + flex-direction: column; +} + +} + + + +/* responsiveness ends here */ \ No newline at end of file