n.kolosnaj/Globaly-CSS-Practice
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

second commit

Browse Source
This commit is contained in:
nkolosnjaj
2024-06-03 12:33:42 +02:00
parent 79aae2583f
commit 22222bc154
12 changed files with 142 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
index.html
View File

@@ -55,7 +55,7 @@
</ul>
<div class="form-container ">
<form class="d-flex align-items-center d-sm-flex justify-content-sm-between" role="search">
<input id="src-input" class="form-control rounded-0 border-0" type="search" placeholder="Search...">
<input id="src-input" class="form-control rounded-0 border-0" type="search" placeholder="Search ...">
<button class="btn" type="submit" style="padding-bottom: 0px;padding-top: 0px;">
<span class="material-icons">
search
@@ -67,15 +67,15 @@
<!-- header -->
<header
class="d-flex flex-column d-md-flex flex-md-row-reverse justify-content-md-between align-items-center justify-content-sm-center mx-lg-0 my-lg-0 mt-3 mx-2 my-md-3 mx-md-3">
class="d-flex flex-column d-md-flex flex-md-row-reverse justify-content-md-between align-items-center justify-content-sm-center mx-lg-0 my-lg-0 mt-4 mx-0 mt-md-4 mb-md-3 mx-md-3">
<div class="contact d-flex flex-column">
<div class="number d-inline">
<span class="material-icons">
<span id="phone-img" class="material-icons">
phone
</span>
800-2345-6789
<a class="phone" href="#">800-2345-6789</a>
</div>
<a id="mail" href="#" class="mt-2">globaly@demolink.org</a>
<a id="mail" href="#" class="mt-1">globaly@demolink.org</a>
</div>
<div class="horizontal-menu d-none d-md-none d-lg-flex ">
<ul class="nav-ul-hor d-md-flex d-md-row s mb-0">
@@ -92,8 +92,8 @@
<!-- site navigation-->
<nav class="menu d-flex d-md-none justify-content-center align-items-center w-100 "
style=" background-color: white; height: 68px;">
<nav class="menu d-flex d-md-none justify-content-center align-items-center w-100 "
style="background-color: white; height: 68px;">
<div class="container-fluid ">
<button class="navbar-toggler d-flex justify-content-center align-items-center" type="button"
data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent"
@@ -167,7 +167,7 @@
<div class="first-part">
<div class="textbox mx-md-3 mx-lg-3 mx-0 d-flex flex-column justify-content-start align-items-center">
<h2 class="h2-first">Full Cycle Business Management</h2>
<p style="text-align: center; font-weight: bold;">
<p style="text-align: center; padding: 0 30px;">
Whether your company looks for a financial consulting, investment risks assessments or an interim, HR
management, we’re ready to provide that for you.We have a proven expertise in any process, that a modern day
business lives and works through.
@@ -179,7 +179,7 @@
<!-- second part -->
<div
class="second-part d-flex flex-column align-items-center justify-content-center my-lg-5 my-5 my-md-5 d-md-flex">
class="second-part d-flex flex-column align-items-center justify-content-center mx-3 my-lg-0 my-5 my-md-5 d-md-flex">
<div class="headline-card d-flex flex-column align-items-center justify-content-center pb-3">
<h4>business management</h4>
<h2>Services We Offer</h2>
@@ -234,7 +234,7 @@
<h5>Any company level of expertise, trustworthiness or popularity can be easily checked when it comes to
proven
cases… </h5>
<p style="text-align: start; font-weight: bold;">
<p style="text-align: start;">
We stockpiled hundreds of successful business consulting operations throughout the 25 years long history
we’re
in this business. Here are the best examples of our diligent and efficient advice for small and big
@@ -253,9 +253,9 @@
<h2>Business Tips</h2>
<img class="line-img mb-md-5" src="assets/images/line.png" alt="">
</div>
<div class="row mx-md-3 mx-lg-5">
<div class="row mx-md-3 mx-lg-5">
<div class="col-md-6 col-lg-4 my-md-0">
<div class="card-fourth ">
<div class="card-fourth px-md-2 px-lg-3">
<img class="img" src="assets/images/image41-560x350.jpg" alt="">
<div class="date-by d-flex flex-row">
<span class="published">26.07.2016</span>
@@ -270,7 +270,7 @@
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card-fourth">
<div class="card-fourth px-md-2 px-lg-3">
<img class="img" src="assets/images/image42-560x350.jpg" alt="">
<div class="date-by d-flex flex-row">
<span class="published">16.06.2016 </span>
@@ -286,7 +286,7 @@
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card-fourth">
<div class="card-fourth px-md-2 px-lg-3">
<img class="img" src="assets/images/image43-560x350.jpg" alt="">
<div class="date-by d-flex flex-row">
<span class="published">17.05.2016</span>
@@ -301,7 +301,6 @@
list.
But actually, is it the best decision? </div>
</div>
<!-- </div> -->
</div>
</div>
<input class="view-more" type="submit" value="view all">
@@ -309,7 +308,7 @@
<!-- fifth-part -->
<div class="fifth-part pb-md-5 pt-md-3 py-lg-3">
<div class="fifth-part pb-5 pb-md-5 pt-md-3 py-lg-3">
<div class="headline-card-5 d-flex flex-column align-items-center justify-content-center pb-3">
<h4>thanks to our business tips</h4>
<h2>You’ll improve your performance!</h2>
@@ -349,7 +348,7 @@
<div class="profile">
<img src="assets/images/test1_03.webp" alt="">
</div>
<div class="profile-text ml-lg-5">
<div class="profile-text ml-lg-5 px-lg-5">
<p>The investment company I own once signed up for Globaly consultations. That happened back in 1993.
Since
then, we’ve been showing a steady year-by-year growth for 23 years long, in big part thanks to timely
@@ -364,7 +363,7 @@
<div class="profile">
<img src="assets/images/test2_03.png" alt="">
</div>
<div class="profile-text ml-lg-5">
<div class="profile-text ml-lg-5 px-lg-5">
<p>As an FMCG company, we always faced a tough competition in our field of market. It gotten only worse
since
the Great Recession hit us in 2008. But with efficient advice by this renown company, we were able to
@@ -380,7 +379,7 @@
<!-- seventh-part -->
<div class="seventh-part d-flex flex-column justify-content-center align-items-center">
<div class="textbox7 mx-5 pb-3">
<div class="textbox7 mx-3 pb-3">
<h3>As we’re managing the aspects of your business,</h3>
<h2>Your revenue continues to grow.</h2>
</div>

6
style/_fifth-part.scss
View File

@@ -21,10 +21,11 @@
line-height: 1.38462;
font-family: Merriweather;
letter-spacing: 0px;
text-align: inherit;
text-align: center;
color: #ffffff;
margin-top: 40px;
word-wrap: break-word;
padding: 0 50px;
}
h2 {
@@ -35,7 +36,7 @@
line-height: 1.36957;
font-family: Merriweather, serif;
letter-spacing: 0px;
text-align: inherit;
text-align: center;
}
}
@@ -57,6 +58,7 @@
font-family: Merriweather;
font-size: 22px;
line-height: 2.3em;
font-weight: 300;
}
}
}

15
style/_first-part.scss
View File

@@ -1,7 +1,7 @@
@import '_variables';
.first-part {
min-height: 85vh;
min-height: 65vh;
background-image: url('/assets/images/image36.jpg');
background-size: cover;
color: white;
@@ -19,21 +19,21 @@
padding: 0 39px;
font-family: Merriweather;
font-weight: 600;
padding: 18px 39px;
padding: 0 39px 18px 39px;
letter-spacing: 0px;
font-size: 36px;
line-height: 1em;
}
p {
font-family: MerriweatherSans, sans-serif;
font-style: normal;
font-size: 18px !important;
padding: 0 23.4px;
padding: 0 24.4px;
letter-spacing: 0px;
line-height: 1.4em !important;
margin-bottom: 30px;
word-wrap: break-word;
}
}
@@ -56,11 +56,12 @@
@media only screen and (min-width: 768px){
.first-part {
min-height: 60vh;
min-height: 53vh;
}
.h2-first {
font-size: 46px !important;
margin-top: 30px;
}
}
@@ -74,8 +75,8 @@
.textbox{
p{
margin-left: 380px;
margin-right: 380px;
margin-left: 400px;
margin-right: 400px;
line-height: 1.6em !important;
}
}

3
style/_form.scss
View File

@@ -66,6 +66,7 @@
.form-container-bot{
position: relative;
width: 382px;
}
@@ -84,7 +85,7 @@
}
.form-container-bot{
width: 700px;
width: 700px !important;
}
}

12
style/_fourth-part.scss
View File

@@ -8,7 +8,7 @@
.card-fourth{
margin-top: auto;
margin-bottom: 30px;
padding: 0px 3px 8px 3px;
padding: 0px 0px 8px 0px;
border: none;
}
h4 {
@@ -74,8 +74,9 @@
font-size: 20px ;
color: #333333 !important;
line-height: 1.3em !important;
padding-right: 10px;
margin-bottom: 20px;
font-weight: 500 !important;
box-sizing: border-box;
}
.post-text{
@@ -95,6 +96,13 @@
.fourth-part{
margin-left: 20px;
margin-right: 20px;
.card-fourth{
h2 {
font-size: 26px;
}
}
}
}

2
style/_menu.scss
View File

@@ -48,7 +48,7 @@ span {
text-transform: uppercase;
display: block;
border-bottom: 1px solid #e0e0e8;
width: 400px;
width: 412px;
height: 50px;
background-color: white;
}

32
style/_nav.scss
View File

@@ -2,7 +2,8 @@
form{
width: 336px;
width: 380px;
height: 40px ;
}
.socials-ul{
@@ -18,6 +19,7 @@ nav {
.navbar {
padding: 0 !important;
height: 40px ;
}
.form-container {
@@ -31,6 +33,7 @@ nav {
color: $lightblue;
width: 30px;
height: 30px;
}
.btn span:hover {
@@ -49,25 +52,35 @@ input {
#src-input {
background-color: #4a4e55;
padding: 0;
padding-left: 20px;
}
input::placeholder {
color: white !important;
}
.number {
.phone{
color: #333333;
font-family: $numberfont;
font-weight: 900;
font-size: 15px;
letter-spacing: .04em;
font-style: normal;
cursor: pointer;
text-decoration: none;
}
.number:hover {
.phone:hover{
color: $lightblue;
transition: 0.5s;
text-decoration: none;
}
#phone-img{
width: 22px;
height: 33px;
}
#mail:hover {
color: #333333;
@@ -84,7 +97,7 @@ input::placeholder {
@media only screen and (min-width: 768px) {
form {
width: 250px !important;
width: 229px !important;
background-color: #4a4e55;
padding-left: 34px;
padding-right: 15px;
@@ -96,9 +109,12 @@ input::placeholder {
}
.navbar{
background-color: #30343c;
height: 60px;
height: 50px;
}
#src-input {
padding-left: 0px;
}
#socials{
height: 28px !important;
width: 28px !important;
@@ -122,6 +138,7 @@ input::placeholder {
font-style: normal;
text-transform: uppercase;
list-style-type: none;
padding-left: 16px !important;
.navs{
@@ -139,6 +156,9 @@ input::placeholder {
}
@media only screen and (min-width: 992px) {
.navbar{
height: 60px;
}
form{
margin-left: 55px;
margin-right: 72px;

4
style/_second-part.scss
View File

@@ -102,7 +102,7 @@
.second-part {
padding-top: 70px;
padding-bottom: 120px;
.card{
@@ -112,7 +112,7 @@
}
p {
padding: 0 40px ;
padding: 0 30px ;
}
}

6
style/_sixth-part.scss
View File

@@ -39,7 +39,7 @@
}
}
padding: 30px 0 70px 0;
padding: 30px 0 80px 0;
}
@@ -48,6 +48,10 @@
.profile-card{
margin: 0;
}
padding: 50px 0 100px 0;
.profile-text{
margin-bottom: 20px;
}
}
}
@media only screen and (min-width:992px) {

5
style/_third-part.scss
View File

@@ -21,11 +21,14 @@
h5{
font-family: Merriweather;
font-size: 24px;
font-size: 23px;
margin-top: 15px;
margin-bottom: 17px;
font-weight: 300;
line-height: 1.5;
word-wrap: break-word;
box-sizing: border-box;
letter-spacing: 0px;
}
p{

80
style/style.css
View File

@@ -11,7 +11,8 @@
src: url("../assets/fonts/Merriweather-Regular.ttf") format("truetype");
}
form {
width: 336px;
width: 380px;
height: 40px;
}
.socials-ul {
@@ -26,6 +27,7 @@ nav {
.navbar {
padding: 0 !important;
height: 40px;
}
.form-container {
@@ -54,7 +56,7 @@ input {
#src-input {
background-color: #4a4e55;
padding: 0;
padding-left: 20px;
}
input::-moz-placeholder {
@@ -65,16 +67,26 @@ input::placeholder {
color: white !important;
}
.number {
.phone {
color: #333333;
font-family: "Lato";
font-weight: 900;
font-size: 15px;
letter-spacing: 0.04em;
font-style: normal;
cursor: pointer;
text-decoration: none;
}
.number:hover {
.phone:hover {
color: #15c1c6;
transition: 0.5s;
text-decoration: none;
}
#phone-img {
width: 22px;
height: 33px;
}
#mail:hover {
@@ -91,7 +103,7 @@ input::placeholder {
@media only screen and (min-width: 768px) {
form {
width: 250px !important;
width: 229px !important;
background-color: #4a4e55;
padding-left: 34px;
padding-right: 15px;
@@ -102,7 +114,10 @@ input::placeholder {
}
.navbar {
background-color: #30343c;
height: 60px;
height: 50px;
}
#src-input {
padding-left: 0px;
}
#socials {
height: 28px !important;
@@ -124,6 +139,7 @@ input::placeholder {
font-style: normal;
text-transform: uppercase;
list-style-type: none;
padding-left: 16px !important;
}
.nav-ul-hor .navs {
padding: 1rem;
@@ -135,6 +151,9 @@ input::placeholder {
}
}
@media only screen and (min-width: 992px) {
.navbar {
height: 60px;
}
form {
margin-left: 55px;
margin-right: 72px;
@@ -207,7 +226,7 @@ span {
text-transform: uppercase;
display: block;
border-bottom: 1px solid #e0e0e8;
width: 400px;
width: 412px;
height: 50px;
background-color: white;
}
@@ -278,7 +297,7 @@ span {
src: url("../assets/fonts/Merriweather-Regular.ttf") format("truetype");
}
.first-part {
min-height: 85vh;
min-height: 65vh;
background-image: url("/assets/images/image36.jpg");
background-size: cover;
color: white;
@@ -295,15 +314,16 @@ span {
padding: 0 39px;
font-family: Merriweather;
font-weight: 600;
padding: 18px 39px;
padding: 0 39px 18px 39px;
letter-spacing: 0px;
font-size: 36px;
line-height: 1em;
}
.textbox p {
font-family: MerriweatherSans, sans-serif;
font-style: normal;
font-size: 18px !important;
padding: 0 23.4px;
padding: 0 24.4px;
letter-spacing: 0px;
line-height: 1.4em !important;
margin-bottom: 30px;
@@ -334,10 +354,11 @@ span {
@media only screen and (min-width: 768px) {
.first-part {
min-height: 60vh;
min-height: 53vh;
}
.h2-first {
font-size: 46px !important;
margin-top: 30px;
}
}
@media only screen and (min-width: 992px) {
@@ -347,8 +368,8 @@ span {
justify-content: center;
}
.first-part .textbox p {
margin-left: 380px;
margin-right: 380px;
margin-left: 400px;
margin-right: 400px;
line-height: 1.6em !important;
}
.h2-first {
@@ -447,6 +468,7 @@ span {
}
@media only screen and (min-width: 992px) {
.second-part {
padding-top: 70px;
padding-bottom: 120px;
}
.second-part .card {
@@ -456,7 +478,7 @@ span {
font-size: 21px;
}
.second-part .card p {
padding: 0 40px;
padding: 0 30px;
}
.second-part h2 {
font-size: 48px;
@@ -487,11 +509,14 @@ span {
}
.third-part .textbox3 h5 {
font-family: Merriweather;
font-size: 24px;
font-size: 23px;
margin-top: 15px;
margin-bottom: 17px;
font-weight: 300;
line-height: 1.5;
word-wrap: break-word;
box-sizing: border-box;
letter-spacing: 0px;
}
.third-part .textbox3 p {
line-height: 1.4375;
@@ -541,7 +566,7 @@ span {
.fourth-part .card-fourth {
margin-top: auto;
margin-bottom: 30px;
padding: 0px 3px 8px 3px;
padding: 0px 0px 8px 0px;
border: none;
}
.fourth-part h4 {
@@ -597,8 +622,9 @@ span {
font-size: 20px;
color: #333333 !important;
line-height: 1.3em !important;
padding-right: 10px;
margin-bottom: 20px;
font-weight: 500 !important;
box-sizing: border-box;
}
.fourth-part .post-text {
text-align: left;
@@ -617,6 +643,9 @@ span {
margin-left: 20px;
margin-right: 20px;
}
.fourth-part .card-fourth h2 {
font-size: 26px;
}
}
@media only screen and (min-width: 992px) {
.fourth-part {
@@ -656,10 +685,11 @@ span {
line-height: 1.38462;
font-family: Merriweather;
letter-spacing: 0px;
text-align: inherit;
text-align: center;
color: #ffffff;
margin-top: 40px;
word-wrap: break-word;
padding: 0 50px;
}
.fifth-part .headline-card-5 h2 {
text-align: center !important;
@@ -669,7 +699,7 @@ span {
line-height: 1.36957;
font-family: Merriweather, serif;
letter-spacing: 0px;
text-align: inherit;
text-align: center;
}
.fifth-part .numbers-container .numbers {
text-align: center;
@@ -687,6 +717,7 @@ span {
font-family: Merriweather;
font-size: 22px;
line-height: 2.3em;
font-weight: 300;
}
@media only screen and (min-width: 768px) {
@@ -718,7 +749,7 @@ span {
}
}
.sixth-part {
padding: 30px 0 70px 0;
padding: 30px 0 80px 0;
}
.sixth-part .headline-card h4 {
font-family: Merriweather;
@@ -752,9 +783,15 @@ span {
}
@media only screen and (min-width: 768px) {
.sixth-part {
padding: 50px 0 100px 0;
}
.sixth-part .profile-card {
margin: 0;
}
.sixth-part .profile-text {
margin-bottom: 20px;
}
}
@media only screen and (min-width: 992px) {
.sixth-part .headline-card h2 {
@@ -880,6 +917,7 @@ span {
}
.form .form-container-bot {
position: relative;
width: 382px;
}
@media only screen and (min-width: 768px) {
@@ -890,7 +928,7 @@ span {
margin-bottom: 0px !important;
}
.form-container-bot {
width: 700px;
width: 700px !important;
}
}
@media only screen and (min-width: 992px) {

2
style/style.css.map
View File

File diff suppressed because one or more lines are too long