diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/README.md b/README.md index 03e4501..0e10610 100644 --- a/README.md +++ b/README.md @@ -5,3 +5,5 @@ You are required to create a webpage for a coding bootcamp and you are tasked to * About page You can deisgn the pages however you want be creative and once you've created the design share snippets of it with us on **#today-i-did** channel. Good luck! + +the about page is included in the home page. \ No newline at end of file diff --git a/about.html b/about.html deleted file mode 100644 index f6ec97e..0000000 --- a/about.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - About page - - - - - - diff --git a/home.html b/home.html index a2219e1..3bc0309 100644 --- a/home.html +++ b/home.html @@ -1,13 +1,115 @@ - - - - - - Document - - - - - - + + + Somaliland Marine Corps + + + + + + + + + + + +
+ +
+

Somaliland Marines

+

Send Us A Messege.

+
+
+ + +
+
+
+
+ + +
+
+ +
+

About Us

+
Somaliland Marine Corps
+

The Somaliland Marine corps is the maritime law enforcement, search and rescue and coastal defence branch of Somaliland Armed Forces, founded on 1 October 1995.

+ +
+
+
+ + +
+
+

Our Services

+
+ +
+
+ +
Maritime Law Enforcement
+
+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum ut ex quas, asperiores qui autem eius illum quisquam ipsum alias obcaecati blanditiis officia sapie.

+ +

+ Read More +

+
+
+ +
+ +
Coastal Defence
+
+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum ut ex quas, asperiores qui autem eius illum quisquam ipsum alias obcaecati blanditiis officia sapie.

+ +

+ Read More +

+
+
+ +
+ +
Search And Rescue
+
+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum ut ex quas, asperiores qui autem eius illum quisquam ipsum alias obcaecati blanditiis officia sapie..

+ +

+ Read More +

+
+
+
+
+ + +
+

Want To Know More.

+ Click Here +
+ + + + + \ No newline at end of file diff --git a/img/background.jpg b/img/background.jpg new file mode 100644 index 0000000..19af919 Binary files /dev/null and b/img/background.jpg differ diff --git a/img/main-img.jpeg b/img/main-img.jpeg new file mode 100644 index 0000000..46645ba Binary files /dev/null and b/img/main-img.jpeg differ diff --git a/style/style.css b/style/style.css index e69de29..422987d 100644 --- a/style/style.css +++ b/style/style.css @@ -0,0 +1,304 @@ +*{ + padding: 0; + margin: 0; + font-family: 'Josefin Sans', sans-serif; + box-sizing: border-box; +} +.hero{ + height: 100vh; + width: 100%; + background-image: url(../img/background.jpg); + background-size: cover; + background-position: center; +} +nav{ + display: flex; + align-items: center; + justify-content: space-between; + padding-top: 45px; + padding-left: 8%; + padding-right: 8%; +} +.logo{ + color: white; + font-size: 35px; + letter-spacing: 1px; + cursor: pointer; +} +span{ + color: #0089f9; +} +nav ul li{ + list-style-type: none; + display: inline-block; + padding: 10px 25px; +} +nav ul li a{ + color: white; + text-decoration: none; + font-weight: bold; + text-transform: capitalize; +} +nav ul li a:hover{ + color: #0089f9; + transition: .4s; +} +.btn{ + background-color:#0089f9; + color: white; + text-decoration: none; + border: 2px solid transparent; + font-weight: bold; + padding: 10px 25px; + border-radius: 30px; + transition: transform .4s; +} +.btn:hover{ + transform: scale(1.2); +} +.content{ + position: absolute; + top: 50%; + left:8%; + transform: translateY(-50%); +} +h1{ + color: white; + margin: 20px 0px 20px; + font-size: 75px; +} +h3{ + color: white; + font-size: 25px; + margin-bottom: 50px; +} +h4{ + color: #fcfc; + letter-spacing: 2px; + font-size: 20px; +} +.newslatter form{ + width: 380px; + max-width: 100%; + position: relative; +} +.newslatter form input:first-child{ + display: inline-block; + width: 100%; + padding: 14px 130px 14px 15px; + border: 2px solid #0089f9; + outline: none; + border-radius: 30px; +} +.newslatter form input:last-child{ + position: absolute; + display: inline-block; + outline: none; + border: none; + padding: 10px 30px; + border-radius: 30px; + background-color:#0089f9; + color: white; + box-shadow: 0px 0px 5px #000, 0px 0px 15px #858585; + top: 6px; + right: 6px; +} + +.about{ + width: 100%; + padding: 100px 0px; + background-color: #191919; +} +.about img{ + height: auto; + width: 430px; +} +.about-text{ + width: 550px; +} +.main{ + width: 1130px; + max-width: 95%; + margin: 0 auto; + display: flex; + align-items: center; + justify-content: space-around; +} +.about-text h2{ + color: white; + font-size: 75px; + text-transform: capitalize; + margin-bottom: 20px; +} +.about-text h5{ + color: white; + letter-spacing: 2px; + font-size: 22px; + margin-bottom: 25px; + text-transform: capitalize; +} +.about-text p{ + color: #fcfc; + letter-spacing: 1px; + line-height: 28px; + font-size: 18px; + margin-bottom: 45px; +} +button{ + background-color:#0089f9; + color: white; + text-decoration: none; + border: 2px solid transparent; + font-weight: bold; + padding: 13px 30px; + border-radius: 30px; + transition: .4s; +} +button:hover{ + background-color: transparent; + border: 2px solid #0089f9; + cursor: pointer; +} + +.service{ + background: #101010; + width: 100%; + padding: 100px 0px; +} +.title h2{ + color: white; + font-size: 75px; + width: 1130px; + margin: 30px auto; + text-align: center; +} +.box{ + display: flex; + justify-content: center; + align-items: center; + min-height: 400px; +} +.card{ + height: 365px; + width: 335px; + padding: 20px 35px; + background: #191919; + border-radius: 20px; + margin: 15px; + position: relative; + overflow: hidden; + text-align: center; +} +.card i{ + font-size: 50px; + display: block; + text-align: center; + margin: 25px 0px; + color: #0089f9; + +} +h5{ + color: white; + font-size: 23px; + margin-bottom: 15px; +} +.pra p{ + color: #fcfc; + font-size: 16px; + line-height: 27px; + margin-bottom: 25px; +} +.card .button{ + background-color:#0089f9; + color: white; + text-decoration: none; + border: 2px solid transparent; + font-weight: bold; + padding: 9px 22px; + border-radius: 30px; + transition: .4s; +} +.card .button:hover{ + background-color: transparent; + border: 2px solid #0089f9; + cursor: pointer; +} +.contact-me{ + width: 100%; + height: 290px; + background: #191919; + display: flex; + align-items: center; + flex-direction: column; + justify-content: center; +} +.contact-me p{ + color: white; + font-size: 30px; + font-weight: bold; + margin-bottom: 25px; +} +.contact-me .button-two{ + background-color:#0089f9; + color: white; + text-decoration: none; + border: 2px solid transparent; + font-weight: bold; + padding: 13px 30px; + border-radius: 30px; + transition: .4s; +} +.contact-me .button-two:hover{ + background-color: transparent; + border: 2px solid #0089f9; + cursor: pointer; +} +footer{ + position: relative; + width: 100%; + height: 400px; + background: #101010; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} +footer p:nth-child(1){ + font-size: 30px; + color: white; + margin-bottom: 20px; + font-weight: bold; +} +footer p:nth-child(2){ + color: white; + font-size: 17px; + width: 500px; + text-align: center; + line-height: 26px; +} +.social{ + display: flex; +} +.social a{ + width: 45px; + height: 45px; + display: flex; + align-items: center; + justify-content: center; + background: #0089f9; + border-radius: 50%; + margin: 22px 10px; + color: white; + text-decoration: none; + font-size: 20px; +} +.social a:hover{ + transform: scale(1.3); + transition: .3s; +} +.end{ + position: absolute; + color:#0089f9; + bottom: 35px; + font-size: 14px; +} \ No newline at end of file