Skip to content

Commit

Permalink
Adjust order of list items
Browse files Browse the repository at this point in the history
  • Loading branch information
@mo9a7i
mo9a7i committed Mar 30, 2022
1 parent 592b7a9 commit 81290bf
Show file tree
Hide file tree
Showing 4 changed files with 199 additions and 203 deletions.
154 changes: 154 additions & 0 deletions assets/css/style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,154 @@
:root {
--main-color: #173830;
--secondary-color: #aaa9a9;
}

@font-face {
font-family: jahr;
src: url(../fonts/SST\ ARABIC\ LIGHT.TTF);
}

* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: jahr;
}

body {
background-color: var(--main-color);
}

header {
background-color: #00241b;
}


a.btn.btn-light.pt-1.pb-2.px-3.fw-bold {
font-size: 20px;
}

section#hero {
height: 95vh;
background-image: linear-gradient(to right bottom, #00241bec, #173830ef),
url(../img/main.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: bottom;
}

.secondary-color {
color: var(--secondary-color);
}

section#aboutus {
height: 90vh;
background-image: url(../img/background.png);
}

.icon {
width: 65px;
}

.box {
background-color: #00241b;
height: 90%;
border-radius: 7px;
}

input.form-control {
background: transparent;
border: 0;
border-bottom: 2px solid #aaa9a9;
border-radius: 0;
}

input.form-control::placeholder {
color: white;
}

input.form-control:focus {
background: transparent;
border: 0;
border-bottom: 2px solid #aaa9a9;
border-radius: 0;
outline: none;
box-shadow: 0 0 0 0.25rem rgb(140 141 144 / 25%);
}

textarea#exampleFormControlTextarea1 {
background: transparent;
border: 0;
border-bottom: 2px solid #aaa9a9;
border-radius: 0;
}

textarea#exampleFormControlTextarea1::placeholder {
color: white;
}

textarea#exampleFormControlTextarea1:focus {
background: transparent;
border-bottom: #aaa9a9 solid 2px;
border-radius: 0;
box-shadow: 0 0 0 0.25rem rgb(140 141 144 / 25%);
}

.form-control {
color: #ffffff;
}

footer {
background-color: #00241b;
height: 450px;
}

footer img {
width: 200px;
}

footer #copyright {
background-color: #010f0b;
}


.social-link-no-bg {
background-color: transparent;
}

.social-link {
background: var(--main-color);
color: white;
border-radius: 0.5rem;
aspect-ratio: 1;
height: 2.125rem;
margin-right: 0.5rem;
text-align: center;
}

.social-link i,
.social-link a {
line-height: 2rem;
vertical-align: middle;
}

.social-link-transparent {
background-color: transparent;
font-weight:bold;
font-size: larger;
line-height: 100%;
}

a {
text-decoration: none;
}

i.fas.fa-bars {
font-size: 25px;
}

button.btn1 {
background-color: #173830;
border-bottom: oldlace;
border-style: hidden;
}
56 changes: 22 additions & 34 deletions index-english.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="assets/css/style.css">
<title>JAHR</title>
</head>

Expand All @@ -19,42 +19,30 @@
<header>
<nav class="container navbar navbar-expand-md navbar-light">

<div class="container-fluid">
<div class="container-fluid justify-content-center justify-content-md-between">

<button type="button" class="btn1 btn-sm d-sm-block d-none d-sm-block d-md-block d-sm-none" > <a class="text-white" href="index.html">Arabic</a></button>

<div class="collapse navbar-collapse container-fluid order-2 order-md-2" id="navbarTogglerDemo03">

<div id="social" class="d-none d-md-block">
<ul class="nav">
<li class="nav-item"><a href="https://www.snapchat.com/add/jahrksa" class=" link-light"><i class="fab fa-snapchat-ghost"></i></a></li>
<li class="nav-item"><a href="https://twitter.com/JahrKSA" class="px-3 link-light"><i class="fab fa-twitter"></i></a></li>
<li class="nav-item"><a href="https://www.instagram.com/jahrksa/" class=" link-light"><i class="fab fa-instagram"></i></a></li>
</ul>
</div>

<ul class="navbar-nav flex-grow-1 justify-content-center text-center ">
<li class="nav-item">
<a class="nav-link text-white" href="#contact" tabindex="-1">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link text-white px-md-4" href="#services">Our Services</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" aria-current="page" href="/">Main</a>
</li>
<button type="button" class="btn1 btn-sm d-sm-block d-md-none" > <a class="text-white" href="index.html">Arabic</a></button>
</ul>

</div>


<div id="logo" class="navbar-brand order-1 order-md-2">
<div id="logo" class="navbar-brand ">
<img src="assets/img/logo.png" alt="">
</div>
<button class="navbar-toggler text-white" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>

<div class="collapse navbar-collapse container-fluid" id="navbarTogglerDemo03">

<ul class="navbar-nav flex-grow-1 justify-content-center text-center">
<li class="nav-item"><a class="nav-link text-white" aria-current="page" href="/">Main</a></li>
<li class="nav-item"><a class="nav-link text-white px-md-4" href="#services">Our Services</a></li>
<li class="nav-item"><a class="nav-link text-white" href="#contact">Contact Us</a></li>
</ul>

<ul class="nav justify-content-center">
<li class="nav-item social-link"><a class="text-white" href="https://www.snapchat.com/add/jahrksa"><i class="fab fa-snapchat-ghost"></i></a></li>
<li class="nav-item social-link"><a class="text-white" href="https://twitter.com/JahrKSA"><i class="fab fa-twitter"></i></a></li>
<li class="nav-item social-link"><a class="text-white" href="https://www.instagram.com/jahrksa/"><i class="fab fa-instagram"></i></a></li>
<li class="nav-item social-link social-link-transparent"><a class="text-white" href="index.html">ع</a></li>
</ul>
</div>
</div>
</nav>
</header>
Expand Down Expand Up @@ -198,11 +186,11 @@ <h1 class="fw-bold text-white border-bottom border-4 pb-4 d-inline-block display
<!-- --------------------------------------------------------------------------------------------------------------------------------- -->

<footer class='py-5 mt-5 d-flex flex-column justify-content-center align-items-center'>
<div class="container text-center">
<div dir="ltr" class="container text-center">
<img src="assets/img/biglogo.png" class="py-5" alt="">

<div class="d-flex align-items-center justify-content-center pb-1"><i class="fas fa-envelope link-light pe-2"></i><span class="text-white"><a class="text-white" href="mailto:[email protected]">[email protected]</a></span></div>
<div class="d-flex align-items-center justify-content-center"><i class="fas fa-phone-alt link-light pe-2"></i><span class="text-white"><a class="text-white" href="tel:00966504668884">00966504668884</a></span></div>
<div dir="ltr" class="d-flex align-items-center justify-content-center pb-1"><i class="fas fa-envelope link-light pe-2"></i><span class="text-white"><a class="text-white" href="mailto:[email protected]">[email protected]</a></span></div>
<div dir="ltr" class="d-flex align-items-center justify-content-center"><i class="fas fa-phone-alt link-light pe-2"></i><span class="text-white"><a class="text-white" href="tel:00966504668884">00966504668884</a></span></div>


<ul class="nav justify-content-center align-items-center py-5">
Expand Down
55 changes: 23 additions & 32 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<html lang="ar" dir="rtl">

<head>
<meta charset="UTF-8">
Expand All @@ -10,53 +10,44 @@
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="assets/css/style.css">
<title>JAHR - Let Everyone Know</title>
</head>

<body>

<header>
<nav class="container navbar navbar-expand-md navbar-light">

<div class="container-fluid">
<div class="container-fluid justify-content-center justify-content-md-between">

<button type="button" class="btn1 btn-sm d-sm-block d-none d-sm-block d-md-block d-sm-none" > <a class="text-white" href="index-english.html">English</a></button>
<div id="logo" class="navbar-brand">
<img src="assets/img/logo.png" alt="">
</div>
<button class="navbar-toggler text-white" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>

<div class="collapse navbar-collapse container-fluid order-2 order-md-2" id="navbarTogglerDemo03">
<div class="collapse navbar-collapse container-fluid " id="navbarTogglerDemo03">

<div id="social" class="d-none d-md-block">
<ul class="nav">
<li class="nav-item"><a href="https://www.snapchat.com/add/jahrksa" class=" link-light"><i class="fab fa-snapchat-ghost"></i></a></li>
<li class="nav-item"><a href="https://twitter.com/JahrKSA" class="px-3 link-light"><i class="fab fa-twitter"></i></a></li>
<li class="nav-item"><a href="https://www.instagram.com/jahrksa/" class=" link-light"><i class="fab fa-instagram"></i></a></li>
</ul>

</div>

<ul class="navbar-nav flex-grow-1 justify-content-center text-center">
<li class="nav-item"><a class="nav-link text-white" aria-current="page" href="/">الرئيسية</a></li>
<li class="nav-item"><a class="nav-link text-white px-md-4" href="#services">خدماتنا</a></li>
<li class="nav-item"><a class="nav-link text-white" href="#contact" tabindex="-1">تواصل معنا</a></li>
</ul>

<ul class="navbar-nav flex-grow-1 justify-content-center text-center ">
<li class="nav-item">
<a class="nav-link text-white" href="#contact" tabindex="-1">تواصل معنا</a>
</li>
<li class="nav-item">
<a class="nav-link text-white px-md-4" href="#services">خدماتنا</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" aria-current="page" href="/">الرئيسية</a>
</li>
<button type="button" class="btn1 btn-sm d-sm-block d-md-none" > <a class="text-white" href="index-english.html">English</a></button>
<ul class="nav justify-content-center g-5">
<li class="nav-item social-link"><a class="text-white" href="https://www.snapchat.com/add/jahrksa"><i class="fab fa-snapchat-ghost"></i></a></li>
<li class="nav-item social-link"><a class="text-white" href="https://twitter.com/JahrKSA"><i class="fab fa-twitter"></i></a></li>
<li class="nav-item social-link"><a class="text-white" href="https://www.instagram.com/jahrksa/"><i class="fab fa-instagram"></i></a></li>
<li class="nav-item social-link social-link-transparent"><a class="text-white" href="index-english.html">E</a></li>
</ul>


</div>


<div id="logo" class="navbar-brand order-1 order-md-2">
<img src="assets/img/logo.png" alt="">
</div>
<button class="navbar-toggler text-white" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>

</div>
</nav>
</header>
Expand Down Expand Up @@ -198,7 +189,7 @@ <h1 class="fw-bold text-white border-bottom border-4 pb-4 d-inline-block display
<!-- --------------------------------------------------------------------------------------------------------------------------------- -->

<footer class='py-5 mt-5 d-flex flex-column justify-content-center align-items-center'>
<div class="container text-center">
<div dir="ltr" class="container text-center">
<img src="assets/img/biglogo.png" class="py-5" alt="">

<div class="d-flex align-items-center justify-content-center pb-1"><i class="fas fa-envelope link-light pe-2"></i><span class="text-white"><a class="text-white" href="mailto:[email protected]">[email protected]</a></span></div>
Expand Down
Loading

0 comments on commit 81290bf

Please sign in to comment.