| |
|
|
| body {
|
| margin: 0;
|
| font-family: 'Arial', sans-serif;
|
| background-color: #f9f9f9;
|
| color: #333;
|
| line-height: 1.6;
|
| }
|
|
|
|
|
| .header {
|
| background-color: #ffe4e1;
|
| text-align: center;
|
| padding: 20px 10px;
|
| box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
| }
|
|
|
| .logo-container {
|
| margin: 0 auto;
|
| max-width: 800px;
|
| }
|
|
|
| .logo {
|
| max-width: 150px;
|
| height: auto;
|
| margin-bottom: 10px;
|
| }
|
|
|
| .header h1 {
|
| font-size: 2.5rem;
|
| color: #c55b5b;
|
| margin: 10px 0;
|
| }
|
|
|
| .header p {
|
| font-size: 1.2rem;
|
| color: #555;
|
| }
|
|
|
|
|
| @media (max-width: 768px) {
|
| body {
|
| font-size: 90%;
|
| }
|
|
|
| .header h1 {
|
| font-size: 2rem;
|
| }
|
|
|
| .hero {
|
| padding: 40px 10px;
|
| text-align: center;
|
| }
|
|
|
| .tools-grid {
|
| flex-direction: column;
|
| gap: 10px;
|
| }
|
|
|
| .community {
|
| padding: 20px 10px;
|
| }
|
|
|
| .footer {
|
| font-size: 0.8rem;
|
| }
|
| }
|
|
|
|
|
|
|
| .navigation {
|
| display: flex;
|
| justify-content: center;
|
| background-color: #c55b5b;
|
| padding: 10px;
|
| }
|
|
|
| .navigation a {
|
| text-decoration: none;
|
| color: #fff;
|
| margin: 0 15px;
|
| font-weight: bold;
|
| }
|
|
|
| .navigation a:hover {
|
| text-decoration: none;
|
| color:#ffe4e1;
|
| }
|
|
|
|
|
| .hamburger {
|
| display: none;
|
| flex-direction: column;
|
| cursor: pointer;
|
| margin-left: auto;
|
| background-color: #c55b5b;
|
| }
|
|
|
| .hamburger span {
|
| background-color: #fff;
|
| height: 3px;
|
| margin: 5px 0;
|
| width: 25px;
|
| }
|
|
|
|
|
| .mobile-nav {
|
| max-height: 0;
|
| overflow: hidden;
|
|
|
| position: absolute;
|
| top: 0;
|
| left: 0;
|
| width: 100%;
|
| background-color: #c55b5b;
|
| display: flex;
|
| flex-direction: column;
|
| text-align: center;
|
| transform: translateY(-100%);
|
| opacity: 0;
|
| visibility: hidden;
|
| transition: max-height 0.4s ease, opacity 0.4s ease, visibility 0.4s ease;
|
| z-index: 10;
|
| }
|
|
|
| .mobile-nav.active {
|
| max-height: 500px;
|
| transform: translateY(0);
|
| opacity: 1;
|
| visibility: visible;
|
| }
|
|
|
| .mobile-nav a {
|
| margin: 10px 0;
|
| color: #fff;
|
| text-decoration: none;
|
| font-weight: bold;
|
| padding: 10px 0;
|
| transition: color 0.3s ease;
|
| }
|
|
|
| .mobile-nav a:hover {
|
| color: #ffe4e1;
|
| }
|
|
|
|
|
| @media (max-width: 768px) {
|
| .navigation {
|
| display: none;
|
| }
|
|
|
| .hamburger {
|
| display: flex;
|
| }
|
| }
|
|
|
|
|
|
|
| .hero {
|
| position: relative;
|
| text-align: center;
|
| background-image: url('images/yarn-hero.jpg');
|
| background-size: cover;
|
| background-position: center;
|
| padding: 60px 20px;
|
| color: #fff;
|
| z-index: 1;
|
| overflow: hidden;
|
| }
|
|
|
| .hero::before {
|
| content: '';
|
| position: absolute;
|
| top: 0;
|
| left: 0;
|
| width: 100%;
|
| height: 100%;
|
| background-color: rgba(26, 18, 16, 0.6);
|
| z-index: -1;
|
| }
|
|
|
|
|
| .hero h2 {
|
| font-size: 2.5rem;
|
| margin-bottom: 20px;
|
| }
|
|
|
| .hero p {
|
| font-size: 1.2rem;
|
| margin-bottom: 30px;
|
| }
|
|
|
| .cta-button {
|
| background-color: #ff8c94;
|
| color: #fff;
|
| padding: 10px 20px;
|
| border: none;
|
| border-radius: 20px;
|
| cursor: pointer;
|
| font-size: 1rem;
|
| transition: background-color 0.3s ease;
|
| }
|
|
|
| .cta-button:hover {
|
| background-color: #c55b5b;
|
| }
|
|
|
|
|
| .featured-tools {
|
| background-color: #fff;
|
| text-align: center;
|
| padding: 40px 20px;
|
| }
|
|
|
| .featured-tools h2 {
|
| font-size: 2rem;
|
| color: #c55b5b;
|
| margin-bottom: 20px;
|
| }
|
|
|
| .tools-grid {
|
| display: flex;
|
| flex-wrap: wrap;
|
| gap: 20px;
|
| justify-content: center;
|
| }
|
|
|
| .tool {
|
| background-color: #ffe4e1;
|
| padding: 20px;
|
| border-radius: 10px;
|
| box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
| max-width: 300px;
|
| text-align: center;
|
| }
|
|
|
| .tool h3 {
|
| font-size: 1.5rem;
|
| color: #c55b5b;
|
| margin-bottom: 10px;
|
| }
|
|
|
| .tool p {
|
| font-size: 1rem;
|
| color: #555;
|
| }
|
|
|
| .tool button {
|
| background-color: #c55b5b;
|
| color: #fff;
|
| padding: 10px 15px;
|
| border: none;
|
| border-radius: 20px;
|
| cursor: pointer;
|
| font-size: 1rem;
|
| transition: background-color 0.3s ease;
|
| }
|
|
|
| .tool button:hover {
|
| background-color: #ff8c94;
|
| }
|
|
|
| .input-group {
|
| display: flex;
|
| align-items: center;
|
| gap: 20px;
|
| }
|
|
|
| .input-group input {
|
| flex: 1;
|
| padding: 10px;
|
| border: 1px solid #c55b5b;
|
| border-radius: 5px;
|
| }
|
|
|
| .input-group .unit-options {
|
| display: flex;
|
| gap: 10px;
|
| border: none;
|
| padding: 0;
|
| margin: 0;
|
| }
|
|
|
| .input-group .unit-options label {
|
| font-size: 1rem;
|
| color: #555;
|
| display: flex;
|
| align-items: center;
|
| }
|
|
|
| .input-group .unit-options input {
|
| margin-right: 5px;
|
| }
|
|
|
| @media (max-width: 768px) {
|
| .input-group {
|
| flex-direction: column;
|
| align-items: stretch;
|
| }
|
|
|
| .input-group input {
|
| width: 100%;
|
| }
|
|
|
| .input-group .unit-options {
|
| justify-content: space-around;
|
| }
|
| }
|
|
|
|
|
|
|
|
|
| .community {
|
| background-color: #fffaf0;
|
| text-align: center;
|
| padding: 40px 20px;
|
| }
|
|
|
| .community h2 {
|
| font-size: 2rem;
|
| color: #c55b5b;
|
| margin-bottom: 20px;
|
| }
|
|
|
| .community p {
|
| font-size: 1.2rem;
|
| color: #555;
|
| margin-bottom: 20px;
|
| }
|
|
|
|
|
| .footer {
|
| background-color: #c55b5b;
|
| color: #fff;
|
| text-align: center;
|
| padding: 20px;
|
| }
|
|
|
| .footer p {
|
| margin: 0;
|
| font-size: 0.9rem;
|
| }
|
|
|
| .social-links {
|
| margin-top: 10px;
|
| }
|
|
|
| .social-links a {
|
| text-decoration: none;
|
| color: #fff;
|
| margin: 0 10px;
|
| font-size: 1rem;
|
| }
|
|
|
| .social-links a:hover {
|
| text-decoration: underline;
|
| }
|
|
|
| .tool-container {
|
| background-color: #ffe4e1;
|
| padding: 20px;
|
| border-radius: 10px;
|
| margin: 20px auto;
|
| max-width: 400px;
|
| text-align: center;
|
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
| }
|
|
|
| .tool-container h3 {
|
| color: #c55b5b;
|
| }
|
|
|
| .tool-container input,
|
| .tool-container select {
|
| margin: 10px 0;
|
| padding: 10px;
|
| width: calc(100% - 20px);
|
| border: 1px solid #ccc;
|
| border-radius: 5px;
|
| }
|
|
|
| .tool-container label {
|
| display: block;
|
| margin: 10px 0 5px;
|
| font-weight: bold;
|
| }
|
|
|
| .tool-container fieldset {
|
| margin: 10px 0;
|
| padding: 10px;
|
| border: 1px solid #ccc;
|
| border-radius: 5px;
|
| }
|
|
|
| .tool-container button {
|
| background-color: #c55b5b;
|
| color: #fff;
|
| padding: 10px 20px;
|
| border: none;
|
| border-radius: 20px;
|
| cursor: pointer;
|
| font-size: 1rem;
|
| }
|
|
|
| .tool-container button:hover {
|
| background-color: #ff8c94;
|
| }
|
|
|
|
|
| #converter-tool {
|
| background-color: #fff;
|
| padding: 30px;
|
| border-radius: 10px;
|
| margin: 20px auto;
|
| max-width: 600px;
|
| text-align: center;
|
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
| }
|
|
|
| #converter-tool h3 {
|
| font-size: 1.8rem;
|
| color: #c55b5b;
|
| margin-bottom: 20px;
|
| }
|
|
|
| #converter-tool p {
|
| font-size: 1rem;
|
| color: #555;
|
| margin-bottom: 20px;
|
| }
|
|
|
| #converter-tool input,
|
| #converter-tool select {
|
| margin: 10px 0;
|
| padding: 10px;
|
| width: calc(100% - 20px);
|
| border: 1px solid #ccc;
|
| border-radius: 5px;
|
| }
|
|
|
| #converter-tool .unit-options {
|
| display: flex;
|
| justify-content: center;
|
| gap: 20px;
|
| margin: 20px 0;
|
| }
|
|
|
| #converter-tool .unit-options label {
|
| font-size: 1rem;
|
| color: #555;
|
| cursor: pointer;
|
| }
|
|
|
| #converter-tool .unit-options input[type="radio"] {
|
| margin-right: 5px;
|
| }
|
|
|
| #converter-tool button {
|
| background-color: #c55b5b;
|
| color: #fff;
|
| padding: 10px 20px;
|
| border: none;
|
| border-radius: 20px;
|
| cursor: pointer;
|
| font-size: 1rem;
|
| margin-top: 20px;
|
| transition: background-color 0.3s ease;
|
| }
|
|
|
| #converter-tool button:hover {
|
| background-color: #ff8c94;
|
| }
|
|
|
| #converter-result {
|
| font-size: 1.2rem;
|
| color: #333;
|
| margin-top: 20px;
|
| padding: 10px;
|
| background-color: #ffe4e1;
|
| border-radius: 5px;
|
| display: inline-block;
|
| }
|
|
|
|
|
| #sizer-tool {
|
| background-color: #fff;
|
| padding: 30px;
|
| border-radius: 10px;
|
| margin: 20px auto;
|
| max-width: 600px;
|
| text-align: center;
|
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
| }
|
|
|
| #sizer-tool h3 {
|
| font-size: 1.8rem;
|
| color: #c55b5b;
|
| margin-bottom: 20px;
|
| }
|
|
|
| #sizer-tool p {
|
| font-size: 1rem;
|
| color: #555;
|
| margin-bottom: 20px;
|
| }
|
|
|
| #sizer-tool select {
|
| margin: 10px 0;
|
| padding: 10px;
|
| width: calc(100% - 20px);
|
| border: 1px solid #ccc;
|
| border-radius: 5px;
|
| }
|
|
|
| #sizer-tool button {
|
| background-color: #c55b5b;
|
| color: #fff;
|
| padding: 10px 20px;
|
| border: none;
|
| border-radius: 20px;
|
| cursor: pointer;
|
| font-size: 1rem;
|
| margin-top: 20px;
|
| transition: background-color 0.3s ease;
|
| }
|
|
|
| #sizer-tool button:hover {
|
| background-color: #ff8c94;
|
| }
|
|
|
| #sizer-result {
|
| font-size: 1.2rem;
|
| color: #333;
|
| margin-top: 20px;
|
| padding: 10px;
|
| background-color: #ffe4e1;
|
| border-radius: 5px;
|
| display: inline-block;
|
| }
|
|
|
| .yarn-chart {
|
| background-color: #ffe4e1;
|
| padding: 20px;
|
| border-radius: 10px;
|
| margin: 20px auto;
|
| text-align: center;
|
| max-width: 800px;
|
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
| }
|
|
|
| .yarn-chart h3 {
|
| color: #c55b5b;
|
| font-size: 1.8rem;
|
| margin-bottom: 20px;
|
| }
|
|
|
| .yarn-chart table {
|
| width: 100%;
|
| border-collapse: collapse;
|
| margin: 0 auto;
|
| }
|
|
|
| .yarn-chart th,
|
| .yarn-chart td {
|
| padding: 10px;
|
| text-align: left;
|
| border: 1px solid #c55b5b;
|
| }
|
|
|
| .yarn-chart th {
|
| background-color: #c55b5b;
|
| color: white;
|
| }
|
|
|
| .yarn-chart td {
|
| background-color: #fff;
|
| }
|
|
|
|
|
| @media (max-width: 768px) {
|
| .yarn-chart {
|
| padding: 10px;
|
| margin: 10px;
|
| font-size: 0.9rem;
|
| }
|
|
|
| .yarn-chart table {
|
| width: 100%;
|
| font-size: 0.8rem;
|
| }
|
|
|
| .yarn-chart th,
|
| .yarn-chart td {
|
| padding: 5px;
|
| }
|
|
|
| .yarn-chart th {
|
| font-size: 1rem;
|
| }
|
| }
|
|
|
| |
| |
Comments