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

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;
}
}
}

17
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